こんにちは！ CastingONE の岡本です。
はじめに
弊社のフロントエンドは今まで Nuxt2 を使って開発を行っていました。しかし、Vue2 の EOL が今年の末までということで Nuxt3 にリプレイするか、React にリプレイスするかを検討した結果、後者の React にリプレイスすることにしました。弊社のフロントエンドエンジニアは自分も含め React の開発経験がほとんどなかったので、毎週 1 時間、React の理解を深めるための勉強会を開催することになりました。今回はその勉強会で行っていることについて紹介していきます！
やっていること
Vue と React の比較
前のセクションで述べた通り、弊社のアプリケーションのフロントエンドは Nuxt2 で作られていたため、Vue2 に慣れているエンジニアが多数いました。そこで、Vue2 と React の書き方の違いについて勉強しました。Vue で使われている v-if やv-for などのディレクティブを使っていた処理や、created や mounted のようなライフサイクルフックは React でどのように再現されるかなどを学びました。
ハンズオン
Vue と React の比較の勉強で習得したものを活用しながら、簡単なハンズオンを行い、成果物を共有し合い、どのような実装をしたのかを解説し合いました。以下は実施したハンズオンの紹介です。紹介の最後に実際にハンズオンで作成した成果物を共有します。
Todo リスト
Todo の追加、削除、完了ができるものを作成しました。Todo リストは useState を利用した配列の更新などの処理をする必要があるので、React 初心者にとって良い教材だと思いました。
三目並べ(tic-tac-toe)
React 公式のチュートリアルにある三目並べを作成しました。ハンズオンを実施した当時、公式のチュートリアルではクラスコンポーネントでの実装方法しかなかったので、これを参考に関数コンポーネントで三目並べを作成しました。
hit & blow
参考: http://nanpure.com/hitandblow/mainpg.php
上の 2 つで基礎は学習したということで、実践として、hit&blow というゲームを作ってみることにしました。hit&blow はランダムで生成された 4 桁の数字を当てるゲームで、回答すると hit の数と blow の数が判明します。hit は桁と数字が合っている数、blow は数字のみ合ってる数です。その hit と blow を元に 4 桁の数字を当てていきます。このルールを元に、各自 hit&blow を作成していきました。自分は useState と useEffect を活用して実装してみました。
タイマー
setInterval、setTimeout、requestAnimationFrameを使ってタイマーの作成をしました。上の 3 つのハンズオンと比べて、より React の挙動を理解しておかないと無限レンダリングを起こしたり、タイマーが更新されないなどの現象を招いてしまいます。タイマー実装を通して、React の理解が深まったと感じられるので、おすすめです！
アコーディオン
よくあるアコーディオンを React で作成してみました。useRefという hook を使う必要があり、その使い方も勉強しながら、みんなでハンズオンを行いました。
詳しい作成手順は以下の記事にまとめています。
TanStack Query(旧 React Query)
TanStack Query はサーバーとの間で、データの取得、キャッシュ、同期、および更新を簡単にしてくれるデータ取得ライブラリです。
TanStack Query は React リプレイス時に使用することがほぼ決まっているので、useQueryやuseMutationのような基本的な機能の勉強をした後に、実際に API サーバーを用意して Todo リストをみんなで作成しました。
実際に作成したサンプルです。API サーバーは Render の無料プランを使っているので、基本的にスリープモードに入っています。
これから
React の公式ドキュメントが改訂されたこともあり、基本解説のLearn Reactの輪読会を行う予定です。基礎的な内容から hook などの詳しい情報まで記載されており、React をより深掘りするのに効果的だと思ってます！
おわりに
以上が、React 勉強会についてでした。React に興味のあるバックエンドの方も参加してくださって、毎回楽しみながら勉強できています！弊社では、React 勉強会以外も様々な勉強会が開催されているので、気になった方は社員でもフリーランスでも、フルタイムでも短時間の副業でも大歓迎なので、気軽にご連絡ください！
Discussion