こんにちは。 アドベントカレンダー12日目です。そろそろ折り返し地点ですね。 今年はフロントエンドまわりであれこれ開発することが多かったので、振り返りを兼ねてこれからフロントエンド開発を始める方向けに入門編としてお送りしています。 最終日の25日には何かアプリケーションができていることが目標です。
↓最初から読み始めたい方はこちらか↓
おさらい
Visual Studio Codeを使ったReactの開発環境の構築（第1回）から始まり、CSSフレームワークの1つであるtailwindcssを使ったUI開発（第2回）やコンポーネント化（第3回）について話しています。
開発サイクルを効率的に回していくための、サポート的や役割のツールとして、フォーマッター(第4回)、Linter(第5回)、バージョン管理（第6)について学んできました。
第7回からReactに戻り、状態管理やカスタムフックを使ったライブラリの1つであるReact hook form(第8、第11回)について学びました。
第9回と第10回では、週末コラムとしてVisual Studio Codeの設定について紹介しました。
今回のはなし
Reactの中ではお馴染みのルーティングです。ルーティングについて馴染みがない方向けに分かりやすく説明すると、Webアプリケーション上のリンクをクリックしたときの画面遷移などを制御する仕組みです。 今回はそのルーティングの基本について学んでいきます。
素のReactを使う場合には別でライブラリを追加する必要がありますが、Next.jsではデフォルトでルーティング機能が備わっています。ルーティングに関しては、ほぼ確実に使用することになるため、ライブラリを追加することなく使えるのは嬉しいですね。
使いかた
Next.jsのルーティングには、pagesディレクトリを使います。Next.jsには特別な意味を持ったディレクトリが他にもありますので、詳しく知りたい方は公式ドキュメントを参照してください。
Visual Studio Code上の画面操作で作成してもよいですし、次のコマンドを実行して作成しても構いません。やりやすい方法で作成してください。
cd src mkdir pages
次のコマンドはディレクトリの構造をツリー状に表示してくれるコマンドです。ディレクトリを作成後に実行してみてください。
tree -d -L 1
このように表示されるはずです。
./src/
├── app
├── node_modules
+ ├── pages
└── public
pages/about.tsxというファイルを作成します。tsxという拡張子は、TypeScriptを使ったReactのファイルであることを示しています。return ( ... )は、好きなように変更しても構いません。
export default function About() { return ( <div> <h2>こんにちは</h2> </div> ); }
ファイルの編集ができたら次のURLにアクセスしてみてください。
http://localhost:[ポート番号]/about
もし、http://localhost:[ポート番号]/aboutにアクセスしても、Not Foundと表示される場合は、1度アプリケーションを起動し直してみてください。
npm run dev
ダイナミック ルーティング
先ほど紹介した方法は、シンプルな静的なルーティングです。Webアプリケーションを作っている中では、画面遷移先にパラメータを渡すことがあります。例えば、ユーザーのIDを渡して、そのユーザーの情報を表示する画面などです。
ディレクトリ階層とファイル名を次のように変更してください。
変更前
pages/ └── about.tsx
変更後
pages/
└── about
└── [id].tsx
[id].tsxは、通常のディレクトリ名ではなく、[]で囲むことで、パラメータを渡すことができるようになります。
次にリクエストを受ける側のコードを変更します。先ほどファイル名を変更した[id].tsxを開き、次のように変更してください。
+ import { useRouter } from "next/router"; export default function About() { + const router = useRouter(); + const { id } = router.query; return ( <div> - <h2>こんにちは</h2> + <h2>こんにちは(ID: {id})</h2> </div> ); }
ファイルの変更ができたら、次のURLにアクセスしてみてください。
http://localhost:[ポート番号]/about/111
このように、111というパラメータが渡されていることが確認できるはずです。
他にも複雑なことができますが、今回は基本的な例の紹介でした。
おわりに
今回は、Next.jsのルーティングについて学びました。ルーティングは、Webアプリケーションを作る上で必須の機能です。Next.jsではデフォルトでルーティング機能が備わっているため、ライブラリを追加する必要がありません。また、パラメータを渡すことも簡単にできます。
