React Routerによるページ遷移

React 入門:React Routerによるページ遷移 React でシングルページアプリ(SPA)を作るとき、複数のページに分けて表示するには React Router がよく使われ...

2025年9月22日 · 2 分 · 1000 文字 · Seiri

コンポーネント間のデータ共有の基本

React 入門:コンポーネント間のデータ共有の基本 React ではコンポーネントを小さく分けて再利用する設計が基本です。しかし、複数のコンポーネントが同じデー...

2025年9月22日 · 3 分 · 1163 文字 · Seiri

useCallbackで関数を最適化する

React 入門:useCallbackで関数を最適化する React ではコンポーネントが再レンダーされるたびに、関数も毎回再生成されます。小規模なアプリでは問...

2025年9月22日 · 3 分 · 1152 文字 · Seiri

useEffectの実践的な使い方

React 入門:useEffectの実践的な使い方 React でコンポーネントを作っていると、「初回表示時にデータを取得したい」「特定の値が変わったときに処理...

2025年9月22日 · 3 分 · 1241 文字 · Seiri

条件付きレンダリングの基本

React 入門:条件付きレンダリングの基本 アプリ開発をしていると「ある条件のときだけ表示したい」「ログインしているかどうかで画面を切り替えたい」とい...

2025年9月22日 · 3 分 · 1166 文字 · Seiri

リストレンダリングとキーの重要性

React 入門:リストレンダリングとキーの重要性 React でデータを扱うとき、配列をもとに複数の要素を並べて表示するケースはよくあります。例えば「Todo リ...

2025年9月22日 · 3 分 · 1114 文字 · Seiri

イベントハンドリングの基本

React 入門:イベントハンドリングの基本 React でインタラクティブな UI を作るには、イベントハンドリング が欠かせません。ユーザーがボタンをクリックしたり、...

2025年9月22日 · 3 分 · 1302 文字 · Seiri

PropsとStateの違い

React 入門:Props と State の違い React を学び始めると、必ず登場する重要な概念が Props(プロップス) と State(ステート) です。どちらもコンポー...

2025年9月22日 · 3 分 · 1157 文字 · Seiri

コンポーネント作成の考え方

React 入門:コンポーネント作成の考え方 React を学び始めると最初に直面するのが「どこまでをコンポーネントに分けるべきか?」という悩みです。コンポーネン...

2025年9月22日 · 3 分 · 1310 文字 · Seiri

クラスコンポーネントと関数コンポーネントの違い

クラスコンポーネントと関数コンポーネントの違い React を学び始めると必ず出てくるのが、「クラスコンポーネント」と「関数コンポーネント」 という 2 つの...

2025年9月22日 · 3 分 · 1472 文字 · Seiri

React入門

React 紹介 Web アプリやサービスを開発する上で、いまや欠かせない存在となっているのが React です。React は Meta(旧 Facebook)が開発したフロ...

2025年9月22日 · 4 分 · 1728 文字 · Seiri
Amplify + Reactでアプリケーション作成

Amplify + Reactでアプリケーション作成

準備 下記コマンドを順番に実行し、Amplify-React での環境を構築する 1.AmplifyCLI をインストール npm install -g @aws-amplify/cli 2.Amplify を設定する amplify configure Specify the AWS Region ? region: # Your preferred region Specify the...

2022年1月24日 · 2 分 · 821 文字 · Seiri
AmplifyでS3と連携する方法

AmplifyでS3と連携する方法

準備 1.amplify add storageコマンドで、S3 を追加する amplify add storage ? Please select from one of the below mentioned services (Use arrow keys) ❯ Content (Images, audio, video, etc.) NoSQL Database 2.amplify pushコマンドで作成した S3 を AWS にデプロイ...

2022年1月21日 · 2 分 · 533 文字 · Seiri
AmplifyでGraphQLを呼出す方法

AmplifyでGraphQLを呼出す方法

準備 1.amplify add apiコマンドで、GraphQL API を追加する amplify add api ? Please select from one of the below mentioned services: > GraphQL ? Here is the GraphQL API that we will create. Select a setting to edit or continue: > Continue ? Choose a schema template: > Single object with fields...

2022年1月20日 · 1 分 · 433 文字 · Seiri
AmplifyでAPI Gatewayを呼出す方法

AmplifyでAPI Gatewayを呼出す方法

準備 1.amplify add apiコマンドで、Rest API を追加する amplify add api ? Please select from one of the below mentioned services GraphQL ❯ REST 2.amplify pushコマンドで作成した Rest API を AWS にデプロイし、 AWS のAPI G...

2022年1月20日 · 1 分 · 497 文字 · Seiri
AmplifyでのAuthUtilを作成する

AmplifyでのAuthUtilを作成する

前提 1.amplify add authコマンドで認証サービスを作成する amplify add auth ? Do you want to use the default authentication and security configuration? Default configuration ? How do you want users to be able to sign in? Username ? Do you want to configure advanced settings? No, I am done. 2.amplify pus...

2022年1月20日 · 3 分 · 1082 文字 · Seiri