Vueを勉強している流れで、今日はNuxtを触り始めました。最初は「Vueで画面を作れるのに、Nuxtは何をしてくれるのだろう」と思っていましたが、フォルダ構成とURLがつながる仕組みを見て少し面白くなってきました。
今回は、プロジェクト作成からページ作成、ページ移動、共通レイアウトまでを初心者なりに整理したメモです。
まだ途中段階なので、勘違いなどあれば教えていただけるとうれしいです。
今日やったこと
Nuxtのプロジェクトを作り、フォルダとページのつながりを確認しました。
NuxtはVueをベースにWebアプリケーションを作るためのフレームワークです。Vueでは画面の部品を作り、Nuxtでは画面のURL、ページ移動、共通の見た目、サーバー側の処理などもまとめて扱えるようです。
まず面白いと感じたのは、app/pages/にファイルを置くと、URLが自動で作られるところでした。
app/pages/
├─ index.vue
└─ about.vue
このようにファイルを作ると、以下のページが用意されます。
index.vue → /
about.vue → /about
Nuxtでは、app/pages/に置いたVueファイルをもとにルート、つまりURLとページの対応が自動で作られます。 nuxt
 |
「ファイルを作ると、行けるページも増えるんだね。ゲームで新しいマップを置いたら、移動先が増える感覚に近いかも」 |
Nuxtプロジェクトを作る
Nuxtを使うには、Node.jsとnpmが必要です。まずはNode.jsが入っているかを確認します。
# Node.jsのバージョンを確認する
node -v
# npmのバージョンを確認する
npm -v
Node.jsが入っていない場合は、先にインストールしてから進めます。確認できたら、以下のコマンドでNuxtプロジェクトを作成します。
# nuxt-appという名前でNuxtプロジェクトを作成する
npm create nuxt@latest nuxt-app
# 作成されたプロジェクトのフォルダへ移動する
cd nuxt-app
# 開発用サーバーを起動する
npm run dev
npm run devを実行すると開発用サーバーが起動し、ブラウザで画面を確認できます。NuxtではViteが標準的なビルダーとして使われており、開発サーバーの起動や、保存後の変更を画面へ反映するホットリロードに関わっています。 nuxt
つまずいたところ
フォルダがいくつかあり、最初は「どこに何を書くのか」が混ざりました。
pagesとcomponentsの違い
pagesもcomponentsもVueファイルを書く場所なので、最初は同じように見えました。
今の理解では、pagesはURLごとに表示する画面、componentsはその画面の中で使う部品です。
app/
├─ pages/
│ ├─ index.vue # トップページ
│ └─ about.vue # Aboutページ
│
└─ components/
└─ AppHeader.vue # 複数ページで使うヘッダー
たとえば、トップページそのものはpages/index.vueに書きます。
<template>
<main>
<h1>トップページ</h1>
<p>Nuxtを触り始めたページです。</p>
</main>
</template>
一方で、複数ページに置きたいヘッダーやボタンはcomponentsに分けると使い回しやすそうです。Vueのコンポーネントについては、Vue.js公式ドキュメントも見ながら理解を深めたいです。
ゲームの例えで言えば、pagesは町や洞窟のような「移動先のマップ」、componentsはマップの中に置くボタンや看板のような部品に近いと感じました。
layoutsはページではなかった
もう一つ迷ったのがlayoutsです。layoutsも画面を書く場所に見えましたが、ページごとの内容を書くためではなく、複数ページで共通に使う画面の枠を作る場所のようです。
たとえば、以下のような部分です。
- サイト名
- ヘッダー
- ページ移動用メニュー
- フッター
|
「ページは移動先ごとに変わる場所で、レイアウトはどのページでも共通の画面枠。ここを分けて考えると分かりやすそう」 |
たとえばトップページとAboutページの両方に同じヘッダーを表示したい場合、各pagesファイルへ同じコードを書くのではなく、layouts/default.vueにまとめられます。
今の理解（メモ）
Nuxtでは、アプリ全体の入口・共通の画面枠・ページごとの中身を分けて書くようです。
フォルダ全体のイメージ
今回見たフォルダを、今の理解でまとめました。
app/
├─ app.vue # アプリ全体の入口
├─ pages/ # URLごとのページ
│ ├─ index.vue # /
│ └─ about.vue # /about
├─ components/ # 使い回すUI部品
│ └─ AppHeader.vue
├─ layouts/ # 共通の画面枠
│ └─ default.vue
└─ assets/ # CSSや画像などの素材
public/ # そのまま公開するロゴや画像
server/ # APIなどのサーバー側処理
nuxt.config.ts # Nuxt全体の設定
server/には、APIなどのサーバー側の処理を書けます。NuxtにはNitroというサーバーエンジンが組み込まれており、サーバー用のルートやAPI、SSRなどに関わる部分を担当するようです。ただ、今回は実際にAPIを作ったわけではないので、今後小さく試して確認したいです。 nuxt
app.vueは全体をつなぐ場所
app.vueでは、NuxtLayoutとNuxtPageをつなげます。
<template>
<!-- 共通レイアウトを使う -->
<NuxtLayout>
<!-- 現在のURLに対応するページを表示する -->
<NuxtPage />
</NuxtLayout>
</template>
今の理解では、それぞれの役割は以下です。
-
NuxtLayout：共通の画面枠を使う -
NuxtPage：URLに対応するページを表示する
Nuxtでは、app.vueでNuxtLayoutを使うとレイアウトを有効にできます。 nuxt
default.vueに共通部分を書く
app/layouts/default.vueには、ページを移動しても共通して表示したい部分を書きます。
<template>
<div>
<!-- どのページにも表示するヘッダー -->
<header>
<h1>Nuxt学習メモ</h1>
<nav>
<!-- トップページへのリンク -->
<NuxtLink to="/">トップ</NuxtLink>
<!-- Aboutページへのリンク -->
<NuxtLink to="/about">About</NuxtLink>
</nav>
</header>
<main>
<!-- URLに対応したpages配下の内容がここへ入る -->
<slot />
</main>
<!-- どのページにも表示するフッター -->
<footer>
<small>Nuxtを学習中です</small>
</footer>
</div>
</template>
<slot />は、ページごとの内容が入る場所です。
トップページならpages/index.vueの内容が入り、Aboutページならpages/about.vueの内容が入ります。ヘッダーとフッターは共通のままで、中央部分だけが切り替わるイメージです。
Mermaid図ではHTMLタグや改行を使わず、短い文字にするとQiita上で構文エラーになりにくそうです。
NuxtLinkでページを移動する
ページを移動するときは、NuxtLinkを使います。
<template>
<main>
<h2>トップページ</h2>
<!-- /aboutに対応するAboutページへ移動する -->
<NuxtLink to="/about">
Aboutページへ移動
</NuxtLink>
</main>
</template>
to="/about"と書くと、pages/about.vueのページへ移動します。
NuxtLinkは、Nuxtアプリ内のページへ移動するためのコンポーネントです。通常のリンクとして使えますが、Nuxt側で画面を切り替える仕組みを利用できます。 nuxt
次にやりたいこと
まずは小さなページを作り、Nuxtの基本的な流れを自分で確認したいです。
-
pages/index.vueを作り、トップページが/で表示されるか確認する -
pages/about.vueを作り、/aboutが自動で作られるか試す -
layouts/default.vueを作り、共通ヘッダーとフッターを表示する - ヘッダーに
NuxtLinkを置き、トップページとAboutページを行き来できるようにする -
server/api/に小さなAPIを作り、Nitroが関わるサーバー側の処理も試してみる
今日の整理
Nuxtを触り始めた段階では、以下のように覚えると整理しやすそうでした。
| 用語 | 役割 | ゲームでの例え | 次に確認したいこと |
|---|---|---|---|
pages |
URLごとの画面を作る | 移動先ごとのマップ | ページを増やしてURLを確認する |
components |
使い回す部品を作る | ボタンや看板などのUI部品 | ヘッダーを部品に分ける |
layouts |
共通の画面枠を作る | 常時表示するメニュー枠 | 共通ヘッダーを作る |
app.vue |
レイアウトとページをつなぐ | 画面全体の土台 |
NuxtLayoutとNuxtPageの関係 |
NuxtPage |
URLに合うページを表示する | 今いるマップを表示する場所 | ページ切り替えを確認する |
NuxtLink |
別ページへ移動する | 別エリアへの入口 | ヘッダーのメニュー化 |
server |
APIなどサーバー処理を書く | 表には見えない裏方 | APIを1つ作ってみる |
おわりに
Nuxtを触り始めて、最初はフォルダが多くて戸惑いました。ただ、pagesはページ、componentsは部品、layoutsは共通の画面枠、とざっくり分けて考えると少し見通しがよくなりました。
まだトップページとAboutページを作る前の段階ですが、ファイル構成がURLや画面構成につながる仕組みは面白いです。次は実際にページを作り、リンクを押して画面が切り替わるところまで試してみたいです。
学習中の内容なので、勘違いや理解不足もあると思います。もし気になる点があれば教えてもらえるとうれしいです。
注意事項
本ブログに掲載している内容は、私個人の見解であり、
所属する組織の立場や戦略、意見を代表するものではありません。
あくまでエンジニアとしての経験や考えを発信していますのでご了承ください。