はじめに

熱量の高い人たちが集まるエンジニア・起業家養成スクール G's ACADEMYが開催している”【G’s EXPANSION】React実践講座プログラム”を受講したので、その内容についてまとめます。
本講座では、JavaScriptを触ったことがある人であれば、Reactの基本文法、API連携、DB連携等アプリ開発に必要なReactの基礎を一通り習得することができるので、これからReactを集中して学びたい人にとってはとてもおすすめです！
私はこのG's ACADEMYの東京DEVコースを2021年に卒業し、2023年に総合商社からブロックチェーンエンジニアへ転職しました。
ブロックチェーンを活用したweb3のプロジェクトに携わる中で、フロントエンドはReactを使用することが多くReactの学び直しのため本講座を受講しました。
今回受講した拡張プログラムは、卒業後数年経っている私のような人やG's ACADEMYの生徒ではない人でも、プログラミングの基礎を学んだ人であればどなたでも受講できるプログラムとなっております。

講座の概要

講座は事前学習とオンラインライブ授業(2回)で構成されています。
授業もですが、課題提出がメインとなり自分の場合は講座期間は週に15-20時間程課題に時間を割いていました。
①事前学習（事前配布資料による課題演習）2023/2/4(土)12:00 ~ 2023/2/17(金)12:00
②オンラインライブ授業（各2.5h×2回）
　DAY1　 2023/02/18(土) 14:00~16:30
　DAY2　 2023/02/25(土) 14:00~16:30

講座内容紹介

①事前配布資料による課題演習

講座に申し込むと、まずは同じ講座を受講するメンバーが集うSlackワークスペースに招待されます。そこで事前資料が配布されます。
資料はとても細かく丁寧で、コードもしっかりと書いてあるので大変勉強になります。
エラー等でつまづいた時はslackの質問チャネルで質問することで講師や受講している方に回答して頂けるので最後まで問題なく進めることができました。
課題内容はReactでおみくじとじゃんけんのアプリケーションを開発するもの。
この課題提出が完了しないと、次のライブ授業へは進めません。この形式のおかげで自然とやり切る力をつけることができました。
お互い支え合うコミュニティに入ることで、自分も頑張ろうという気持ちを継続することができました。
[事前課題]
1 環境構築
2 React基礎文法を学びながらおみくじアプリケーションの開発
3 じゃんけんアプリケーションの開発
4 提出用課題(オリジナルじゃんけんアプリもしくは Reactを使用したオリジナルアプリ)

[事前課題内容]

1 環境構築

・Node.jsとnpmのインストール
・プロジェクト作成

2 React基礎文法を学びながらおみくじアプリケーションの開発

下記Reactの基礎文法を使用して、おみくじボタンをクリックすることで「大吉」「中吉」「小吉」「凶」「大凶」の中からランダムに1つ画面に表示されるものを実装します。
・コンポーネント
・props
・router
・useState

3 じゃんけんアプリケーションの開発　

・自分の手を選ぶと「自分の手」「相手の手」「結果」「対戦の履歴」が表示されるものを実装します。

4 提出用課題(オリジナルじゃんけんアプリもしくは Reactを使用したオリジナルアプリ)

・自分はオリジナルアプリを選択しNFTを用いたアプリを開発しました。
https://github.com/Shinsuke007/Janken-start

次にオンラインライブ授業では読んだ本の感想を記録するアプリケーションを実装を通して、ReactとAPI連携、DB連携について学びます。

☆読んだ本の感想を記録するアプリケーションの機能
・キーワードで読んだ本の情報をGoogle Booksから検索する。
・感想を送信している場所の位置情報を取得して地名に変換する。
・取得した位置情報から、該当する地域の天気を取得する。
・DB に「本の情報」「感想」「場所」「天気」の情報を保存する。

②オンラインライブ授業 DAY1 -API連携-

Reactと3つのAPIを組み合わせて、実装していきます。
Google Books APIを使用しキーワードで本を検索する処理、Open Street MapのAPIを使用し緯度軽度から地名を受け取る処理、Open-Meteo APIを使用し緯度軽度から天気の情報を取得する処理を行います。

[講座内容]
1 キーワードで本を検索する処理
2 位置情報 (緯度と経度) を取得する処理
3 緯度経度を地名に変換する処理
4 緯度経度から天気の情報を取得する処理

1 キーワードで本を検索する処理

Google Books APIを使用し以下の処理を実装します。
・検索ボックスにキーワードが入力されると、Google Booksからキーワード検索を行う。
・取得したデータは画面に一覧表示される。
・指定したい本のタイトルをクリックすると、該当する本の情報が画面上に表示される。
Google Books APIにhttpリクエストを送信し、受け取ったレスポンスから必要な情報を取り出して表示します。
httpリクエストの送信にはaxiosライブラリを使用します
※下記コマンドでインストールします

npm i axios

2 位置情報 (緯度と経度) を取得する処理

画面の読み込み時に位置情報を取得します。
位置情報取得の実行タイミングの実装はuseEffectを用います。
※useEffectはレンダリングを制限し、特定の値が更新されたときのみ処理が実行されるよう
にしてくれる機能です。

3 緯度経度を地名に変換する処理

Open Street MapのAPIを使用し緯度経度を送信し地名のJSONデータを受け取る機能を実装します。
※位置情報を取得したタイミングで実行することがポイントです。

4 緯度経度から天気の情報を取得する処理

Open-Meteo APIを使用し緯度軽度から天気の情報を取得します。
APIから取得した天気のデータは数値なので,対応する天気のテキストを記述したJSONデータを予め用意しておきます。

1-4の実装後、ローディング表示を追加します。

APIからのデータ取得にはある程度の時間を要するためデータ取得中にはユーザが取得
中である旨を把握できるよう表示します。
useState を用いてローディング表示をデータ表示を切り替えます. ローディング状態を true非ローディング状態を false として、データの取得が完了したら切り替えを行います。

成果物について

自分はAPIの課題としてはビールのデータを返すAPIをReactと連携させ実装しました。
https://github.com/Shinsuke007/beer-search

③オンラインライブ授業 DAY2 -DB連携-

ReactとFirebaseのFirestoreとの連携について学びます。
※事前にFirebaseのプロジェクトの作成が必要です。

[講座内容]
1 本の感想を入力するフォームの実装
2 入力内容を Firestore に送信, 保存する処理
3 Firestore に保存されているデータを一覧表示する画面の実装
4 個別のデータを表示する詳細画面の実

1 本の感想を入力するフォームの実装

・ReactとのライブラリであるReact Hook Formを使用してフォームを実装します。
※下記コマンドでインストールします。

npm i react-hook-form

・画面各部に入力フォームを作成します。
・APIから取得したデータをuseFormの機能を用いて初期値として設定します。

2 入力内容を Firestore に送信, 保存する処理

実装したフォームの入力値ををFirestoreに保存していきます。
Firebase との連携についてはドキュメント通りに実装していきます。
Firestore は「コレクション」「ドキュメント」の単位でデータを保存します。
コレクションがフォルダに相当し、ドキュメントがファイルに相当します。
[Firestoreのドキュメント]
https://firebase.google.com/docs/firestore/data-model?hl=ja

3 Firestore に保存されているデータを一覧表示する画面の実装

Firestoreから保存されているデータの全件を取得し、画面に表示します。
Firestoreからのデータの取得するコードも基本的にはFirestoreのドキュメント通りに実行します。
今回は取得するデータの条件を「新しい順に全件」と設定し、 onSnapshot を使用して実行します。
・コンポーネント読み込み時に Firestore のデータを取得する。
・取得したデータをstateに保存する。
・state のデータをコンポーネントに表示する。

4個別のデータを表示する詳細画面の実装

詳細な内容を表示するために、各データの詳細を表示するページを作成します。
個別データを扱うには、各データのidを使用します。
具体的な処理は以下の流れとなります。
・詳細画面を用意
・一覧画面の各データにリンクを貼り、詳細画面にリンクできるようにする
・リンク時にはURLにidを付加して、リンク先のページでデータのidを参照できるようにする
・詳細画面では渡されたidを受け取り、該当するデータをFirestoreから取得する
※入力されたidを受け取るにはReact本体に含まれた機能であるuseParams()を使用します
※「データの取得」「state への保存」「画面への表示」を順に行います。
※Firestoreからのデータの取得時には「DB｣「コレクション名」「ドキュメント名」を指定します。

これにて読んだ本の感想を記録するアプリケーションの完成です。

最後に

本講座Reactの学び直しにもってこいの講座を受講することでフロントエンドの理解を深めるきっかけとなりました。
chatGPTを始め最近のAIの盛り上がりがすごいので、pythonの講座も受講したいと思っています。
G's EXPANSION は、書籍や他動画講座で学習している方にとって、具体的にアプリケーションを開発する心強い一歩となるためとてもおすすめです！