CATEGORY

React

NO IMAGE

【Next.js + TypeScript】多言語対応(i18n)のやり方

本記事ではNext.jsのv10から組み込まれた国際化(i18n)用ルーティング機能を使って、オーソドックスに自前で翻訳ファイルを作成して多言語対応させる方法の一例を紹介します。 多言語対応にあたり翻訳ファイルをどのように持たせるかは色々やり方があると思いますが、Railsのように言語毎に翻訳ファイ […]

続きを読む
NO IMAGE

[React] useEffect内のコールバック関数でstateが更新されない問題

本記事はReactのuseEffect内で作成するコールバック関数にてstateを更新しようとしても更新されない問題を扱います。 説明はイベントハンドラとイベントリスナのコールバック関数を比較して行います。ここで言うイベントハンドラとはJSX要素にてonClickなどで呼び出すイベント処理のことで、 […]

続きを読む
完成アプリのシステム構成

AWS Amplifyの公式Reactチュートリアルをやってみる

本記事はAWS Amplifyの公式チュートリアル(React版)の手順を解説したものです。 チュートリアルで完成するアプリは認証機能付きのToDoアプリで、デプロイして公開するところまで学べます。なおチュートリアルにはサインアウト機能はないのですが、それだとアプリの動作確認がやり辛いので本記事では […]

続きを読む
home-screen

React/TypeScriptでFirestoreのCRUD処理を実装する

前回の記事(以下にリンク添付)ではFirebaseのAuthenticationを使って認証アプリを作成しましたが、本記事ではログインすると表示されるページにメモを追加/表示/更新/削除できる機能を実装します。データの保存にはFirebaseのCloud Firestoreを利用します。   […]

続きを読む
完成イメージ1

【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で公開していますので、よ […]

続きを読む
NO IMAGE

React公式チュートリアルのアプリをHook化してみる

Reactの公式チュートリアルで作成する完成版アプリをHookを使って書き直してみました。 あまり大したことはやっていないのですが、Hook化するにあたりクラスコンポーネントを関数コンポーネントに書き直し、ステート管理はHookのuseStateを使いました。関数は全てアロー表記で書いています。 H […]

続きを読む