前回までのあらすじ

Webサイト・アプリ作れるようになった！

前回は、お問合せフォームを作りましたね。よくある、お名前や生年月日、自由記述欄があって、それを送信する、みたいなやつですね。 でも、今までのはただの1ページだけのものなんですよね。普通のWebサイトって、Topページの他にもプロフィールやaboutページがあったり、ブログでいうとここのように投稿の詳細ページなど1ページは味気ないですね。 そこで今回は、たくさんページを作ってみて移動とかしてみよう！の回です！

いっぱいページを作ってみよう！

まずは事前知識を。

今回はいろんなページを作って移動してみよう！とのことで、まずはページの構造について解説します。基本的にWebサイトは「URL」をもとにどのページを開くかが決まります。例えば 「https://raimuproject.com/posts/EY13QVZtJ6aO9vVXaV3YDNTrGEGS2L8c」 これは前回記事のURLです。よく見ると、「https://raimuproject.com」と「posts」と「EY13QVZtJ6aO9vVXaV3YDNTrGEGS2L8c」に分かれていますね。 初めの「https://raimuproject.com」はドメイン部分ですね。サイトを指定している部分です。このブログの最初のページですね。 問題は「posts」と「EY1〜」ですね。ちょっとこのままだと見ずらいのでちょこっと変えますね。 raimuproject.com 　 |- posts 　　　|- EY1〜 こう見ると、postsの中のEY1〜と見れますね。ちなみこの投稿もpostsの中の〜〜となっているはずです。 ※このEY1〜は「投稿ID(投稿を識別するためのID)」です。 また、https://raimuproject.com/posts に飛ぶと投稿の一覧ページが出るはずです。なので、 https://raimuproject.com：最初のページ(Homeとかみんな言ってるのかな？) 　 |- posts：投稿一覧ページ 　　　|- EY1〜 ：投稿詳細ページ 　　　|- 〜〜 ：投稿詳細ページ このように、なんかフォルダみたいな形をしています。（ルーティングっていうのかな？） また、投稿詳細ページのように投稿が増えるほどページができていくものに対して一個一個作っていくのは骨が折れるので、そういうときには「動的ルーティングを生成する」をします。 今はこんなものがあるんだ。だけで大丈夫です。 ひとまず今は、「なんかフォルダみてぇだな」と「動的ルーティングってやつがあるんだ」だけ覚えてもらえれば大丈夫です。

次にページの移動(以降、遷移といいます。)の仕方について解説します。 基本的に、遷移するには以下の三つの方法があります。 1,aタグ：一番オーソドックスなやつ。クリックするとそのリンクに飛ぶやつ。 　→Nuxt3でする場合、NuxtLinkを使用すること 2,buttonなどで関数発火：要するに関数の処理内で遷移させる。「決済完了したからお買い上げありがとうページに移動」とかそれ。 　→外部 3,formでsubmitする：あんまり使わない。前回記事のようにsubmitすると指定したリンクに飛ぶ。 ↓使用例はこんな感じ

<template lang="pug"> //- 1,aタグ a(href="https://raimuproject.com/") リンクに飛ぶ //- 1,NuxtLink NuxtLink(to="https://raimuproject.com/") リンクに飛ぶ //- 2,ボタン → 関数「buttonClicked」が発火 button(@click="buttonClicked") ボタンでリンクに飛ぶ //- 3,form form(action="https://raimuproject.com/") button(type="submit") Formでリンクに飛ぶ </template> <script setup> /** * 外部ページ：https://raimuproject.com/ に遷移 */ async function buttonClicked() { await navigateTo("https://raimuproject.com/", { external: true, // 外部の場合はこれがいる(後ほど解説) }); } </script>

【未インストール者】早速ページを増やしてみましょう！

では、早速ページを増やしてみましょう！ Nuxt3をインストールして新しいプロジェクトを作ってみましょう！ ・●●●：ソースをおく場所のパス　 　僕の場合だとC:¥users¥aaaaaa¥Desktop¥Nuxt_products ・△△△：プロジェクトの名前 　僕の場合、初めてのNuxt3サイトの意味を込めて init-nuxt3-site にしました。 ※途中の質問は「y」で大丈夫です。

cd ●●● npx nuxi init △△△ cd △△△ npm i

そうしたら次にすることはなんでしょか？そうですね、app.vueの編集ですね。以下のように変えてください。

<template> <div> <NuxtPage /> </div> </template>

では次は？pagesフォルダーをつくる、です！ 以下のようにしてみてください。

△△△(プロジェクト名) 　〜〜〜〜〜〜 　　　|- pages 　　　　　|- index.vue 　〜〜〜〜〜〜 　　その他いっぱい

ではその index.vue を以下のようにしてください。

<template> <h1>Hello Nuxt3!</h1> </template>

【やっと本番】早速ページを増やしてみましょう！

勘のいい方はここで気づいたかもしれませんが、「pagesフォルダーになんか入れればページも増えるのでは？」と思った方、大正解です！ 基本的にページはこのpagesフォルダーに入れていけば大丈夫です。ですがルールがありまして、 ・ファイル名がページ名になる(about.vue → /about) ・pagesフォルダー内にフォルダーを作って階層的に(ネストした)ページが作れる 　例）/posts/about ページの場合 　pages 　　|- posts 　　　　|-about.vue ・index.vue はそのフォルダーのページとなる 　例）/ ←最初のページ 　pages 　　|- index.vue 　例）/posts 　　|- index.vue ・動的ルーティングは[~]を使う 　例）/posts/EY1〜 とか 　pages 　　|- posts 　　　　|- [id].vue ←EY1〜のidだけ変えるだけで各投稿が反映される。→ EY1〜.vueをいちいち作らずに済む！ 　　　　　※このidは route.params.id で取得することができる。

こんな感じです。簡単でしょ？

実際に二つ目のページを作ろう！

原理が理解できたということで、実際にページを増やしてみましょう！ 今回作るのは、「home」ページです。サイトを起動して「http://localhost:3000/home」に飛んだときに、 「ここはHomeページです！」と表示してみましょう。

できたら答え合わせしましょう！ まずフォルダ構成はこんな感じです。 〜〜〜〜〜〜 |- pages 　　|- index.vue 　　|- home.vue 〜〜〜〜〜〜 そして home.vueのなかみはこんなかんじですかね？

<template> <h1>ここはHomeページです！</h1> </template>

理解できた？チェックテスト！

お試しができたならこれもできるでしょう！ということで以下のページも増やしてみましょう！

・「about」ページ。サイトを起動して「http://localhost:3000/about」に飛んだときに、 「ここはaboutページです！」と表示してみましょう。 ・「動画一覧」ページ。サイトを起動して「http://localhost:3000/movies」に飛んだときに、 「ここは動画一覧のページです！」と表示してみましょう。 ・「動画詳細」ページ。サイトを起動して「http://localhost:3000/movies/00001」に飛んだときに、 「ここは動画No:00001のページです！」と表示してみましょう。

答え合わせ！

まずフォルダ構成はこんな感じです。 〜〜〜〜〜〜 |- pages 　　|- index.vue 　　|- about.vue 　　|- movies 　　　　|- index.vue 　　　　|-[no].vue 〜〜〜〜〜〜 そして各vueファイルはこんな感じです。

<template> <h1>ここはaboutページです！</h1> </template> <template> <h1>ここは動画一覧のページです！</h1> </template> <template> <h1>ここは動画No:{{ movieNo }}のページです！</h1> </template> <script setup lang="ts"> const route = useRoute(); const movieNo = route.params.no as string; // [no]なので route.params.noとしています。 // つまり、[▲].vue → route.params.▲ </script>

まとめ

さぁ、いかがだったでしょうか？３問目はちょっと意地悪しちゃいました。route.params.▲を使う時はまず、const route = useRoute();としないと使えないのです。。。 っとまぁこんな感じでページが増やせることがわかりました。これで無限にページが増やせますね！ｗｗｗ あとは、まだ動的ルーティングがなんで必要なのかピンときていないと思います。これはまた違う記事で解説しようと思います。 投稿IDを例にすると、このIDからデータを取得してページに出している、と言った感じです。次回記事をお楽しみに！ また次の記事でお会いしましょう！