はじめに

「拡張プログラム｜ジーズアカデミー」の「【G's EXPANSION】React実践プログラム」を受講してみましたので、簡単な内容、感想等をまとめたいと思います。

私は2016年頃にG's ACADEMYの東京DEVコース4期を卒業していますが、最新の技術などに触れてみたいと思い、今回、【G's EXPANSION】React実践プログラムを受講してみました。

ちなみに当プログラムはG's ACADEMYの在校生、卒業生以外でも受講できるものになっています。

講座の概要

講座は次のように2ステップで行われました。

オンデマンド講義（資料配布型）
オンラインライブ講義（全2回）

本講座へのコミット時間は、課題含め、個人的には以下のような配分でした。

オンデマンド講義：土日2日間＋課題1日1〜2時間×8日
オンラインライブ講義（2回）：土日4日間＋課題1日1〜2時間×4日

オンデマンド講義

まず、受講者用のSlackに招待されるので、そこで連絡等が行われます。
次に事前課題として2週間かけて資料配布型の講義を受けます。

内容としては、配布された資料に沿って「おみくじ」と「じゃんけん」の機能を持ったSPAの実装をおこない、それを通してReactの基本的な動かし方、実装方法を学びます。

また、課題提出として以下のどちらかのアプリケーションを実装してコードをGitHubにpushしてURLを提出します。

セカイを変えるじゃんけん
オリジナルのアプリケーション

この課題提出ができないと以下のオンラインライブ講義へ進めないカリキュラムになっています。

オンラインライブ講義

全2回とも2時間30分のZOOMによる講義になります。
また、講義を録画した動画の提供もあり、復習などに活用できます。
内容としては下記のような内容です。

DAY1：Reactを用いた、API連携の実装。

外部のAPIとの連携の実装を学びます。

この回も課題が出され、API連携を利用したアプリケーションを実装して、コードをGitHubにpushしてURLを提出します。

オンデマンド講義の課題同様、課題提出をして初めてDAY2の講義へ進めます。

DAY2：Reactを用いた、Firebase連携の実装。

GoogleのFirebaseとの連携の実装を学びます。

最後の講義でもあり課題提出はありません。

講座内容の紹介

講座の具体的な内容は下記のとおりです。

オンデマンド講義

Reactの基礎を学びます。

Reactの概説から始まり、環境構築、ハンズオン形式での解説へと進みます。

ちなみにこの講座ではReactプロジェクトの作成には JavaScript の Web 開発用のビルドツールである「Vite」を使用します。

開発環境の技術としてはReact ＋ Vite ＋ JSXといった感じになります。

解説を読みながら資料に沿って手を動かすことで進めていくので迷うことはないと思います。

以下、「コンポーネント」、「props の活用」、「router 機能」「子コンポーネントへの関数入力」「useState の活用」と「おみくじ」を作成しながらハンズオンが進んでいき、応用としてじゃんけんの実装をして、オンデマンド講義のまとめに入ります。

ハンズオンで制作したプロジェクトは、課題制作とは別にとっておき、オンラインライブ講義の教材に引き続き使用することになります。

個人的にはオンデマンド講義は2日ほどかけてハンズオンを行い、課題制作の時に、もう一度ハンズオンを繰り返し、開発の感覚をつかもうとしました。

課題制作ではこの段階の資料には書いていないAPI連携も、使用しようとしたため、詰まってしまいましたが、Slackで任意の質問ができたので、解決することができました。

オンデマンド講義の2週間はほとんど課題制作を通してああでもないこうでもないと試行錯誤をしてReactを学びました。

オンラインライブ講義（DAY1）

ReactのAPI連携を学びます。

オンデマンド講義の事前課題を提出することで、オンラインライブ講義のSlackチャンネルに招待されるので、オンラインライブ講義をZoomで受けることができます。また、課題提出が遅れてオンラインライブ講義に間に合わなくても、後で課題提出をすれば、録画された動画を視聴することができました。

オンラインライブ講義では、読んだ本の感想を記録するアプリケーションの実装を通して、ハンズオン形式で学んでいきます。

DAY1ではAPI連携をGoogle Booksの本の情報を取得するAPIと、位置情報を取得するAPI、位置情報から天気を取得するAPIを使用して、学んでいきます。

本の感想を記録するアプリケーションの基本的なページ、ルーティングを追加した後、「API を用いた本のキーワード検索」「位置情報の活用」「位置情報と API の連携」へとハンズオンが進み、DAY1のまとめに入ります。

オンラインライブ講義では、ステップごとに、実際に手を動かして実装する時間も設けられていたので、やはり、迷うことはないと思います。
疑問点等があれば質問もできました。

DAY1の最後に出される課題制作はAPIを利用したアプリケーションを作成することになります。

課題制作のアドバイスとして、複数のAPIを組み合わせると良いというものがありました。

また、ハンズオンで作成したプロジェクトは事前講義同様にDAY2での教材にそのまま引き続き使用されます。

オンラインライブ講義（DAY2）

ReactのDB連携を学びます。

DAY2でもDAY1の課題を提出することで、オンラインライブ講義のSlackチャンネルに招待されます。

DAY2のオンラインライブ講義では引き続き、読んだ本の感想を記録するアプリケーションの実装を通して、ハンズオン形式で学んでいきます。

DAY2では主にFirebase の DBの Firestore との連携を学びます。
その過程ではAPI keyを秘匿するための環境変数の使用方法なども学びます。

「Firebase の連携設定」「入力フォームの実装」「データ送信処理」「データの表示」とハンズオンが進み、DAY2、および、本講座のまとめに入ります。

DAY2の講義でもステップごとに進めていくので特に迷うことはないと思います。

成果物

ちなみに私が課題で制作した、React（＋外部辞書API＋JSON形式の辞書）で作成した英英辞書、中英辞書を参考までに載せておきます。

React Dictionaries

初回の事前講義＋Web検索＋Slackでの質問だけで作れたので、後半で学ぶ複数の外部APIとの連携、Firebaseとの連携を積極的に盛り込めば、もっとリッチなアプリケーションが作れるかと思います。

ちなみに、CSSの設定はTailwind CSSを使用いたしました。

感想等

事前講座、ライブ講義ともにスモールステップで進めることができ、また内容の分量も適度かと思うので、Reactが初めての受講者にも消化しやすい講座であったと思います。

以上、「【G's EXPANSION】React実践プログラム」のまとめでした。

「拡張プログラム｜ジーズアカデミー」にはReact以外の講義も紹介されているので、興味がある方は是非ご覧ください。