【Next.js + TypeScript】多言語対応(i18n)のやり方
本記事ではNext.jsのv10から組み込まれた国際化(i18n)用ルーティング機能を使って、オーソドックスに自前で翻訳ファイルを作成して多言語対応させる方法の一例を紹介します。 多言語対応にあたり翻訳ファイルをどのように持たせるかは色々やり方があると思いますが、Railsのように言語毎に翻訳ファイ […]
CATEGORY
React
[React] useEffect内のコールバック関数でstateが更新されない問題
本記事はReactのuseEffect内で作成するコールバック関数にてstateを更新しようとしても更新されない問題を扱います。 説明はイベントハンドラとイベントリスナのコールバック関数を比較して行います。ここで言うイベントハンドラとはJSX要素にてonClickなどで呼び出すイベント処理のことで、 […]
AWS Amplifyの公式Reactチュートリアルをやってみる
本記事はAWS Amplifyの公式チュートリアル(React版)の手順を解説したものです。 チュートリアルで完成するアプリは認証機能付きのToDoアプリで、デプロイして公開するところまで学べます。なおチュートリアルにはサインアウト機能はないのですが、それだとアプリの動作確認がやり辛いので本記事では […]
FirebaseとGitHubを連携しCI/CD環境を構築する
本記事では、前回記事でFirebase HostingにデプロイしたReactアプリ(Firebase Authenticationによる認証とFirestoreによるCRUD機能があるメモアプリ)を対象にGitHubと連携することでCI(Continuous Integration: 継続的インテ […]
ReactアプリをFirebase Hostingにデプロイ(独自ドメイン設定まで)
本記事では以前FirebaseのAuthenticationとFirestoreを使って作ったWebアプリをFirebase Hostingにサクッとデプロイした後に独自ドメインを追加する方法までを解説します。 FirebaseのHosting機能はReactとも相性がよくお手軽にデプロイできます。 […]
React/TypeScriptでFirestoreのCRUD処理を実装する
前回の記事(以下にリンク添付)ではFirebaseのAuthenticationを使って認証アプリを作成しましたが、本記事ではログインすると表示されるページにメモを追加/表示/更新/削除できる機能を実装します。データの保存にはFirebaseのCloud Firestoreを利用します。 […]
【React/TypeScript】Firebaseでメール認証とGoogle認証を実装する
本記事ではReact(TypeScript)アプリにFirebaseを使った認証機能を組み込む方法を紹介します。認証はメールアドレスとパスワードを使った認証とGoogleアカウントを使った認証の2種類で行えるようにしています。見栄えは多少よくしてレスポンシブ対応も軽く行っています。なおコンポーネント […]
React Hooksで作ったWeb版ニュースアプリをTypeScript化
以前React Hooksを使ってWeb上で動作するニュースアプリの開発について記事にしました。そのニュースアプリをTypeScriptで書き直しましたので今回記事にしました。 以降前提としてNode.jsとパッケージ管理に使うyarnはインストール済みとしています。 ソースコードはGitHubにあ […]
React HooksでWebニュースアプリを作ってみる
UdemyにあるReact Nativeでニュースアプリを作るeラーニングコースに触発され、学習目的でReact Hooksを使ったWeb版ニュースアプリを作ってみました。 グローバルステート管理にReduxは使わずHooksのみで実装しています。 ソースコードはGitHubで公開していますので、よ […]
React公式チュートリアルのアプリをHook化してみる
Reactの公式チュートリアルで作成する完成版アプリをHookを使って書き直してみました。 あまり大したことはやっていないのですが、Hook化するにあたりクラスコンポーネントを関数コンポーネントに書き直し、ステート管理はHookのuseStateを使いました。関数は全てアロー表記で書いています。 H […]