はじめに
こんにちは！レアゾン・ホールディングス25卒エンジニアの松原です！
今回は、私が参加した新卒エンジニア向けのフロントエンド研修の一つである、React研修についてご紹介させて頂きます。
Reactを学び始めたけど出来ることのイメージが付かない人や、弊社での研修の内容が気になる人は是非、一読ください！
研修の内容
さて、早速ですが今回の研修がどのようなものだったかをご紹介します。
React研修は大きく分けて以下2つの期間で進められました：
1. Reactの基礎を学ぶ (インプット期間)
2. デリバリーアプリを作る (アウトプット期間)
インプットも大事ですが、アウトプットはそれ以上に大事。まさに「習うより慣れろ」をもとに基礎を学んだ後、残りの期間でひたすら手を動かして開発をしていました。
1. Reactの基礎を学ぶ
何事も基礎は大事！まずは講義でReactを使った開発をする上で必須となる知識をインプットしていきました。
具体的に学んだのは、主に下記の内容です：
Reactとは？
ReactとはMeta社(旧Facebook社)が開発した、WebサイトやWebアプリのUIを効率的に構築するためのJavaScript(以下JS)ライブラリです。
コンポーネント
コンポーネントとはそのUIを構成するパーツのこと。
Webページの画面の一部分、例えば検索バー、ヘッダーやフッター、戻るボタンなどをコンポーネントとして作成し、細かく分ける事が出来ます。
コンポーネントという細かいパーツ単位で管理することにより保守性・可読性・再利用性の向上するというメリットが生まれます！
JSX記法 (Javascript XML)
Javascriptの中にHTMLのような見た目のタグ構文でUIを記述できるようになる記法です。
通常のJSだと以下のように記述を
React.createElement('h1', null, 'Hello World');
JSXを使うと
<h1>Hello World</h1>
になり、見慣れたHTML構文をJSの中で記述することが出来ます。
props
コンポーネントを入れ子状にした際、親コンポーネントから子コンポーネントに情報を渡すための仕組みです。この仕組みを使って動的に表示する情報を変更することが出来ます！
//子コンポーネント
function Child(props) {
return (
<div>
<p>こんにちは、{props.name}さん！</p>
<p>あなたは私の子どもで、年齢は {props.age} 歳です。</p>
</div>
);
}
//親コンポーネント
function Parent() {
return <Child name="花子" age={16} />;
}
//実行結果：
こんにちは、花子さん！
あなたは私の子どもで、年齢は16歳です。
上記の例では親コンポーネント(Parent)が子コンポーネントを呼び出す際にpropsとして：
name = "花子"、age = {16} という情報を子コンポーネントに渡しています。
そして、子コンポーネントは貰った情報を元に表示内容を動的に変更出来るというわけです！
React Hooks
最後はReactを学ぶ上に欠かせない、React Hooksです！
Hooks (フック) とは関数コンポーネントでReactの機能を使えるようにする仕組みです。
特に重要であるuseStateとuseEffectについて学びました。
useState
useStateを使うとコンポーネント内で状態を保持し、管理できるようになります。
ここで疑問に思うのが、普通の変数ではダメなのか？ という点が気になるかと思います。
useStateを使う理由は：
-
ローカル変数は再レンダリングのたびに初期化される
⇒ 過去のデータは保存されない -
ローカル変数の変更は再レンダリングを誘発しない
⇒ 画面が変わらないので、表示内容は更新されない
そのため、状態を維持し、変更時に自動で画面の更新を行なうためにuseStateを使います！
ここでいうレンダリングとは、Reactがコンポーネントの現在の状態（例えば入力の内容やカウントの数など）に応じて画面の表示内容を計算し、元の状態と比べ、変更があった場合はUIを再描画するという一連の流れを指します。
useEffect
useEffectとはコンポーネントのレンダリング後に何らかの副作用を実行するための機能です。
副作用とは一言でいうと、レンダリングとは直接関係の無い処理です。
例えば、APIを使ったデータ取得やローカルストレージへの保存・取得などが該当します。
ReactはUIの描画に専念する設計ですが、アプリにはどうしても描画以外の処理が必要になってきます。その処理をレンダリングと切り離して管理するためにuseEffectは必要なのです！
これらの基礎知識を得て、いざ実践です！
2. デリバリーアプリを作る
基礎学習期間でのインプットを終え、いよいよアウトプットの時間です！！
概要
今回の研修ではデリバリーアプリを題材にアウトプットを行い、そのフロントエンドを全てReactで構築することが目標でした。
その内容も盛り沢山であり、一般ユーザー向けのアプリだけに留まらず、配達員用、店舗用といった3種類のアプリが開発の対象です。
また、研修ではあらかじめ、様々なAPIのエンドポイントが用意されており、アプリの基盤となる機能はそれらを組み合わせて実行を進めました。
実装した画面・機能
実装に求められた画面・機能は、主に以下のようなものでした。
画面
- アプリ選択画面：
3種類のアプリ(ユーザー、クルー、店舗)からどのアプリを使うかを選択する画面 - ログインとサインアップ画面
- ユーザー用の画面
a. ユーザーアプリのホーム画面
b. 商品カゴ(カート)の画面 - クルーアプリ用ホーム画面
- 店舗アプリ用ホーム画面
機能
ユーザー向け機能
- ユーザー登録・ログイン
- 店舗や商品の一覧表示・検索
- 商品の詳細表示とカートへの追加
- カート内の確認と注文処理
- 注文履歴の確認
店舗・配達クルー向け機能
- 店舗としての商品登録・編集機能
- 配達クルーとしての配達リクエストの受注機能
このように、デリバリーアプリに必要な機能は一通り網羅しており、アプリ開発で必須になる知識が体系的に身につく、中々の骨太な課題だと思います。
開発で苦労した点・工夫した点
もちろん、開発は一筋縄ではいきませんでした(笑)
ここからは、私が開発期間中にぶつかった壁と限られた時間の中で効率良く開発を進めるために工夫した点をお話します！
useEffect、君の本当の使い方を教えてくれ！
実装を進めていく上で私が特に理解するのに苦労したのがReact Hooksの中でも特に有名なuseEffect でした。
まずは簡単にuseEffectの使い方のパターンをお見せします：
// パターン1：依存配列なし → 毎回のレンダリングで実行（今回の問題）
useEffect(() => {
// 処理
});
// パターン2：空の依存配列 → マウント時のみ実行
useEffect(() => {
// 処理
}, []);
// パターン3：特定の値を指定 → その値が変わった時のみ実行
useEffect(() => {
// 処理
}, [someValue]);
※依存配列とは、「いつuseEffectを実行するか」を指定する仕組みです。
今回実装したかった機能として：
ユーザーのホーム画面が表示されるたびに、最新の商品情報をAPIから取得する
という処理を考えていました。
私はここで「画面が表示(描画)されるたび」=「レンダリングが行われるたび」だと勘違いしてしまい、パターン1で実装を進めてしまいました。
useEffect(() => {
const fetchItems = async () => {
//APIを使ったアイテム取得処理
};
fetchItems();
}); //レンダリングの度に実行される
先ほど軽く説明したように、レンダリングは状態に変更がある度に実行されます。
今回はホーム画面が表示されるタイミングでだけでいい筈が、同画面内で状態の変更がある度にAPIが実行されてしまっていました...
ここで着目したのがパターン2と共に出てくる「マウント」という概念です。
マウントとは？
マウントとは、コンポーネントが初めて画面に表示される瞬間のことを指します。
逆にアンマウントは、コンポーネントが画面から消える瞬間のことです。
今回のケースではどのパターンが適切か？
今回の要件は：
ユーザーのホーム画面が表示されるたびに、最新の商品情報をAPIから取得する
です。
つまり、ホーム画面のコンポーネントが画面に表示された瞬間（＝マウント時） に一度だけAPIを呼び出せば十分なのです。
そこで、パターン2の空の依存配列を使って解決出来ました！
useEffect(() => {
const fetchItems = async () => {
//APIを使ったアイテム取得処理
};
fetchItems();
}, []); // 空の依存配列：コンポーネントのマウント時のみ実行
これにより、画面内で他の状態が変わっても無駄なAPI呼び出しが発生することなく、パフォーマンスの良いアプリケーションを作ることができました！
useEffectの正しい使い方を理解するには本当に時間がかかりました...
コンポーネントを利用して開発を効率化する
苦労だけでなく、自分なりに工夫した点もあります。それはコンポーネントの再利用です！
今回の研修では、「ユーザー用」「クルー用」「店舗用」と3種類のアプリの画面を作る必要がありました。ですが、ログイン/サインアップ画面のUIは、これら3つのアプリではほぼ共通です。
そこで、同じような見た目のために3回同じようなコードを書くのではなく、再利用可能な汎用コンポーネントとして作ることにしました。
また、アプリ上部に表示するナビゲーションバーや商品一覧で使うカード型のUIも再利用性が高いのを見越し、事前にコンポーネントとして作っておいたため、他画面をスピーディーに実装することが出来ました！
おわりに
今回は、新卒エンジニア研修で学んだ内容、そして実践で行ったアプリ開発の経験をご紹介しました。
React研修の期間では、Reactの技術的なスキルはもちろん、Webアプリケーション開発の面白さと難しさ、そしてそれを乗り越える楽しさを体感できた、非常に濃密な時間でした。
この記事が、これからReactを学ぼうとしている方や、弊社レアゾン・ホールディングスの研修に興味がある方にとって、少しでも参考になれば幸いです。
最後までお読みいただき、ありがとうございました！
弊社の他の25年新卒研修について気になる方はこちら！！
▼採用情報
レアゾン・ホールディングスは、「世界一の企業へ」というビジョンを掲げ、「新しい"当たり前"を作り続ける」というミッションを推進しています。
現在、エンジニア採用を積極的に行っておりますので、ご興味をお持ちいただけましたら、ぜひ下記リンクからご応募ください。