はじめに

私が運営しているTSLabの第3回・React勉強会の実施ログとなります。
第3回のテーマは【React Router】。
URLに応じてReact内でコンポーネントやページを出し分けする方法についての内容になります。
今回もカルキチさんに講師をお願いして実施させていただきました!!...感謝!!
@karukichi_yah Twitter

実施内容

React Routerとは

まずは前提となるReact Routerとは何ぞやのお話をして頂きました。
このパートではSPA(Single Page Application)とMPA(Multiple Page Application)の仕組みや、挙動の違いについての理解が必須になるので、ライブラリの特徴に止まらずSPAの解説を中心に行なって頂きました。
(参加者さんの質問もSPAについての内容が大半を占めていたのですが、事前に「SPAとは」をやっておけば良かったと反省...)
下記がご用意頂いたドキュメントになるので是非ご覧ください。
https://github.com/Yota-K/react-study/blob/main/doc/%E7%AC%AC3%E5%9B%9E/React%E3%81%AE%E3%83%AB%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%20Part1.md

React Routerの基本

このパートでは実際のインストール方法や使い方を詳しくお話し頂きました。
React Routerの特徴や出来ることを踏まえつつ、実際の現場で使用するケースなどについても触れて頂きました。
サンプルコードでは実際にページを出し分けて挙動の確認をしたり、クエリパラメーターの取得をして頂いたりしたので、今回の内容さえ押さえれば簡単なページ遷移は実装できる内容となっています。
詳しくは下記のドキュメントをご覧ください。
https://github.com/Yota-K/react-study/blob/main/doc/%E7%AC%AC3%E5%9B%9E/React%E3%81%AE%E3%83%AB%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%20Part2.md

もっと楽にルーティングを実装する方法

このパートではNext.jsやGatsby等のファイルベースルーティングのシステムと、React Routerの違いをご説明頂きました。
このパートは脱線に脱線をしSEO観点でのメリデメや、どういうケースでどちらを選択するかなどについての議論が中心になりました。
詳しくは下記のドキュメントをご覧ください。
https://github.com/Yota-K/react-study/blob/main/doc/%E7%AC%AC3%E5%9B%9E/React%E3%81%AE%E3%83%AB%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%20Part3.md
CSR、SSR、SSG、ISRについての質問も何件がありましたが、今回の本筋とはズレるので別途時間を設けて深掘りしていこうと思います。

さいごに

React勉強会シリーズ第3弾終了！
カルキチさん今回も本当にありがとうございました...(涙)
今回の内容まででプロジェクトの立ち上げ、コンポーネントの作成、データの受け渡し、コンポーネントやページの出し分けまでを触れてきたので、簡単なアプリケーションが作れる状態にはなったのかなと思います！(ご自身でも手を動かさないと意味はないですが。)
次回はReactのカオスの一つ、CSS周りについて触れていこうと思います！
以上。最後までご覧くださりありがとうございました！