メインカテゴリーを選択しなおす
[Next.js] 学習記録アプリ Firebase認証・DB実装 (後編)
Next.jsによる学習記録アプリ、Firebase認証・DB実装 の後編です。前編に続き、後編では、DBデー…
[Next.js] 学習記録アプリ Firebase認証・DB実装 (前編)
Reactのチュートリアルとして、これまで、SupabaseやFirebase連携等、色々なパターンで紹介して…
[React] チュートリアル 学習記録アプリ Firebaseで認証・DB実装してみた (後編)
Reactのチュートリアル、学習記録アプリ Firebase認証・DB実装の後編となります。前編では、Reac…
[React] チュートリアル 学習記録アプリ Firebaseで認証・DB実装してみた (前編)
これまで、Supabaseの活用を中心に、色々と試行してきた、学習記録アプリのチュートリアルですが、今回は、ホ…
[React] チュートリアル 名刺アプリ Supabase連携 (拡張編)
Reactのチュートリアル記事です。Supabase連携や、カスタムフック、useContextなど
[React] チュートリアル 名刺アプリ Supabase連携 (後編)
Reactのチュートリアル記事です。名刺アプリ Supabase連携 (後編)です。本記事は、以下の記事をモチ…
[React] チュートリアル 名刺アプリ Supabase連携 (前編)
Reactのチュートリアル記事です。今回の記事も、以下の記事をモチーフに作成した名刺アプリのチュートリアルです…
【TypeScript入門シリーズ】第2章:TypeScriptの開発環境を整える
TypeScriptを始めるための開発環境を初心者向けに解説。TypeScriptのインストール方法、プロジェクトのセットアップ、Visual Studio Codeなどのエディタ設定、tsconfig.jsonの基本設定について詳しく説明します。
【TypeScript入門シリーズ】第1章:TypeScriptとは?
TypeScriptとは何か、JavaScriptとの違い、そしてTypeScriptを学ぶべき理由について、初心者にもわかりやすく解説。静的型付けの利点、開発効率の向上、TypeScriptの基本的な機能について学びます。
[React] チュートリアル 学習記録アプリ 3 ユーザー認証実装 (後編)
Reactチュートリアル、学習記録アプリのユーザー認証実装、後編です。Supabaseの認証機能を利用したユー…
[React] チュートリアル 学習記録アプリ 3 ユーザー認証実装 (前編)
チュートリアル 学習記録アプリ、3回目です。前回まででSupabaseを活用したDBデータの読み込み・編集・削…
[React]チュートリアル 学習記録アプリ 2 Supabase編
前回に続き、学習記録アプリのチュートリアルの2回目です。今回は、学習記録データの格納に、BaaS(Backen…
少し前からReactの勉強をしてます。本日ご紹介するのは、よくある、Todoリストの作成です。こちらの記事を参…
[React]Todoリストの作成 – 初学者向け、その2です。前回は基本的に元の参考記事に準じた内容でしたが…
今回の記事は、以下の記事をモチーフに作成した学習記録アプリのチュートリアルです。 こちらの3-3. 課題3をベ…
【Hello World】TypeScript + React Native for Web + React Navigation + Webpack
今度はTypeScript + React Native for Web + React Navigation + webpack + github pages templateを作ってみました。
【Hello World】TypeScript + React Native for Web + Webpack
今度はTypeScript + React Native for Web + webpack + github pages templateを作ってみました。
【簡単】TypeScript + webpack で GitHub pages にホストする
自分の作ったものを簡単に誰でも触れるよう、github pagesにホストしたい。。ポートフォリオ作りのために、github pagesに作品を載せたい。。というわけで、typescript + webpackを使ってgithub pagesにホストした流れをシェアできればと思います。
【Node.js】Socket.IO / Express / TypeScriptでソケットサーバー構築【Room接続 / メッセージ投稿】
Node.js, Socket.IO, Express, TypeScriptを使って、ターミナル上で利用できる簡単なチャットアプリを作ります! 本格的なアプリを作る前に各種パッケージの使い勝手を理解するのに最適なサンプルですので、ぜひ参考にしてください
JavaScriptとTypeScriptの違いについて(サンプルコードあり)
JavaScript と TypeScript は、主にWeb開発において使われるプログラミング言語ですが、似ているようでいくつかの点で異なります。今回は、JavaScript と TypeScript の言語仕様の違いや互換性について、簡
【TypeScript】Graph API を使って Instagram の投稿を取得する【2022年6月版(v14.0)】
React x TypeScriptでInstagramの投稿をサイト上に表示したかったときの備忘録 使用したGraph APIはv14.0だけど12.x, 13.xあたりも同じっぽい(多分)(未検証) 全体的な流れのうち、1, 2は書くのめんどいので割愛 Instagramをプロアカウントに変更する facebookとInstagramをリンクさせる facebook developerアカウントでアプリの作成 Graph APIで使用するアクセストークンの有効期限の延長 instagram business idの取得 instagramの投稿の取得してサイトに表示する 1. facebo…
必要なパッケージのinstall $ npm install --save-dev @babel/preset-typescript ts-jest @types/jest babel.config.js に追記 module.exports = { presets: [ ["@babel/preset-env", { targets: { node: "current" } }], "@babel/preset-typescript" // 追加 ], }; テストの実施 $ npm run test > xxxxxx@1.0.0 test > jest PASS __tests__/sam…
TypeScript x axios で配列を非同期で処理する方法
やりたいこと 会員情報を複数取得したい 会員情報を複数取得できるAPIが存在しない 実装 APIへアクセスするファイル export default class Sample { public async fetchUsers(): Promise<{username: string, /* ... 適当な型定義 */}[]> { return Promise.all( [1, 2, 3].map(async row => axios.get(`http://example.jp/api/member/${row}`), ), ).then((results: AxiosResponse<{ …
Google Analytics Data API (GA4) を使ってNextjs上に人気記事を表示する
Google Analytics Data API (GA4) + Nextjsで人気記事の表示機能を実装します。 ユーザーのアクセス数によって表示される記事が動的に変わります。
[React+Tailwind] Carousel を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Carousel コンポーネントです。 JavaScript ベースの Carousel.js です。 import { forwardRef }...
kintoneを使用していて、Twitterのハッシュタグのような機能を使用したいと思ったことはありませんか?ただ、フリーワードでユーザーがタグを登録するとなると、サブテーブルなどを活用しなければうまく実装することができません。
[React+Tailwind] Card を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Card コンポーネントです。 JavaScript ベースの Card.js です。 import { forwardRef } from 'r...
[React+Tailwind] ButtonGroup を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Button コンポーネントです。 JavaScript ベースの Button.js です。 import { forwardRef } fro...
[React+Tailwind] Button を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Button コンポーネントです。 JavaScript ベースの Button.js です。 import { forwardRef } fro...
[React+Tailwind] Breadcrumb を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Breadcrumb コンポーネントです。 JavaScript ベースの Breadcrumb.js です。 import { forwardR...
[React+Tailwind] Badge を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Badge コンポーネントです。 JavaScript ベースの Badge.js です。 import { forwardRef } from ...
[React+Tailwind] Avatar を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Avatar コンポーネントです。 JavaScript ベースの Avatar.js です。 import { forwardRef } fro...
[React+Tailwind] Accordion を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Accordion コンポーネントです。 JavaScript ベースの Accordion.js です。 import { forwardRef...
[React+Tailwind] Alert を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Alert コンポーネントです。 JavaScript ベースの Alert.js です。 import { forwardRef } from ...
[React+Tailwind] Alert を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Alert コンポーネントです。 JavaScript ベースの Alert.js です。 import { forwardRef } from ...
サンプルを例に、React Queryの使い方を解説します。入門レベルですが、参考になればと思います。今回作成するサンプルReact Queryとaxiosを使って、GETとPOSTのHTTP通信を行うサンプルを作成しました。GET:取得し
VSCodeにESLintとPrettierを設定してReact+TypeScriptのコードを自動整形
チーム開発をしていると、コーディングスタイルがバラバラで困ることがあります。インデントがずれているスペースの開け方が違う改行の位置がそろっていないということで、コードを自動整形してしまおうという試みです。エディターはVSCode、プロジェク
Object.entries()で厳格に型定義された結果を受け取りたい【typescript】
typescriptの標準設定では、Object.entries()の型は以下のように定義されています。つまり、Record<string, number string>のような型が存在する場合、返り値の型は[string, number string…
表示するフィールドを制御するタブを実装するプラグインを開発しました【無料公開】
アプリのフィールド数が増えてくると、目的のフィールドがどこにあるのか見つけるのが難しくなります。今回はスクロールに追従し、フィールドの表示・非表示を制御するタブを実装するプラグインを開発しましたのでご紹介します。
FirebaseのSparkプランを使い倒すために、Realtime-Databaseのデータをスプレッドシートにキャッシュして、Next.jsからアクセスするという処理を別のウェブサイト作成時に実装しました。需要があるか分かりませんが、その中で使用したGAS・Next.js…
React + TypeScriptのプロジェクトをパパっと簡単に作成する方法!
どうやってReactでTypeScript使うのかな?って思うことがあったので、ローカルで環境構築してみました。新規プロジェクトで作成する場合はコマンド一発で出来るので簡単です。React + TypeScriptのプロジェクト新規作成次の