webコーダーのsaco @sacocco_sacoya です。
前回に引き続きはじめてつくるNuxtサイト(三好アキさん著書)で学んだことを記事にします。

２章は少し長いのでいくつかにわけて記述します。

教材内の目次では第２章の「Vueの書き方」までの記録です。

↓前回の記事はこちら

Nuxt勉強【はじめてつくるNuxtサイト(三好アキさん著書) – 第１章 基礎編】

webコーダーのsaco @sacocco_sacoya です。Vueの基礎勉強を一通り終えたため、VueのフレームワークNuxt.jsの勉強を…

Nuxt 3のダウンロード方法(開発環境の準備)

まずターミナルを開き、ダウンロードしたい階層へ移動します。

※便利な移動方法を書いておきます

１：Finderで作成したい場所まで移動する

２：右クリックで「”◯◯(移動したいフォルダ先)のパス名をコピー”」

３：ターミナルを開き、cd コピーしたパス名で移動

移動したら、以下のコマンドをターミナルに入力。

npx nuxi init nuxt-portfolio

npxとは

npxとは、npmからダウンロードしたパッケージを実行するためのもの。
Nuxtをダウンロードするときに必要なひとつの決まり文句と考えてよいそうです。

nuxiとは

Nuxtに関係する様々なパッケージを管理するコマンドラインインターフェース。

npmとnuxiどちらも教材中ではこの部分でしか使用しないとのことでした。

上記のコマンドをターミナルに入力すると、教材とは違う結果が表示されました。

どのパッケージマネージャーを選択しますか？という質問です。
npmを選択することが一般的のようでしたので、npmを選択しました。

続いて、Gitで管理するかどうかも訪ねられましたが、今回はNoを選択しました。

無事Nuxtをダウンロードできました！

ダウンロードしたフォルダをFinderから選択して、VS Codeで開きます。

この時点では必要なnpmパッケージがインストールされていないので、VsCodeのターミナルからインストールします。
⌘+J を押して、VS Code内蔵のターミナル画面を開き、以下のコマンドを入力します。

npm install

「npm install」とだけ入力して実行すると、package.jsonのdependenciesやdevDependencies¹にあるnpmパッケージがインストールされます。

1. dependencies、devDependenciesとは
   本番環境と開発環境でインストールするパッケージを管理するもの
   （本番と開発を切り分けるのは、必要な処理が異なるため） ↩︎

このような表示がされたら必要なnpmパッケージがインストール完了です。

以上で開発環境の準備が完了になります。

Nuxtの中身

各フォルダの説明です。

.nuxt

Nuxt起動時に使用されるフォルダとファイルが入っている。

public

主に画像を保存するフォルダ。

server

簡単なサーバー機能を作るフォルダ（最終章で使用）

app.vue

Nuxtサイトの大元となるファイル。
Nuxtサイトやアプリ全体に適用したいCSSをこのファイルに記述する。

nuxt.config.ts

Nuxtサイトやアプリ全体に適用する設定のために使用する。
拡張子が.tsとなっているのは、Nuxt3には全面的にTypeScriptが使用されているため。

以下は教材内で使用しないファイル群。

node_modules /.gitignore / package.json / README.md / tsconfig.json

※教材では.npmrcも使用しないファイルとして項目にありましたが、私のダウンロードした環境では.npmrcファイルは入っていませんでした。

Nuxtを動かす

ターミナルに以下のコマンドを入力

npm run dev

起動完了後、↑のhttp://localhost:3000/をコピーしてブラウザで開く。

Nuxtが無事起動しました。

Nuxtのクリーンアップ

起動させたNuxtを一旦停止（^ + C）して、教材内の開発で不要な以下のファイルを削除しました。

• public
• server
• tsconfig.json

※教材では.npmrcも不要なファイルとして項目にありましたが、私のダウンロードした環境では.npmrcファイルは入っていませんでした。

app.vueを開いて編集

<NuxtWelcome />という記述のところを<NuxtPage />と書き換えました。
ここを書き換えることで、後ほど作成するpagesフォルダ内に作成したファイルがサイトのページとして機能するようになります。

pagesフォルダ作成

app.vueに記述した<NuxtPage />を反映させるため、ルートにpagesフォルダを作成しました。
その中にindex.vueとcontact.vueというファイルを作成し、それぞれ以下のように記述しました。

//index.vue
<template>
    <h1>Indexページ</h1>
</template>

//contact.vue
<template>
    <h1>Contactページ</h1>
</template>

作成したら再度Nuxtを起動し、localhostを確認します。

index.vue

Nuxtを最初に立ち上げたときは<NuxtWelcome/>の内容が表示されていましたが、<NuxtPage />と書き換えたことでpagesフォルダ内の、index.vueの内容が反映されています。

？疑問点

• <NuxtPage/>と記述することで、なぜpagesフォルダが参照されるのか
• なぜindex.vueが自動的に参照されたのか

ということが気になったのでchatgptに聞きました。

Nuxt.jsでは、pagesディレクトリ内に配置されたVueファイルが自動的にルーティングされます。index.vueファイルはデフォルトでルートのパス（/）に対応します。したがって、pagesディレクトリ内にindex.vueを作成すると、そのファイルがルートのコンポーネントとして使われます。

<Nuxt>コンポーネントは、app.vue内のNuxt 3のコンテキストを提供し、その中でページのコンテンツが表示されます。<NuxtPage>は、Nuxt 3のデフォルトのページコンポーネントで、index.vueがその中に表示される形になります。

したがって、pagesディレクトリにindex.vueを配置したことで、<NuxtPage>がそのコンポーネントを表示し、結果として/パスでアクセスされたときにindex.vueが表示されるようになります。

この挙動は、Nuxt.jsがページベースのルーティングを提供するためのもので、pagesディレクトリの構造に基づいて自動的にルートパスとの対応を行います。

https://chat.openai.com/share/e5e69972-b297-4c52-a95f-5264d0e4cd0c

Nuxtでのお作法のようなものと考えてよいのかなと思いました。

contact.vue

URLをhttp://localhost:3000/contactとすると、contact.vueに記載した内容が反映されています。

index.vueは「/（ルートパス）」となり、contact.vueは「/contact」で表示されます。
pages内のファイルの名前がそのままURLに対応しているということになります。

Vueの基本の書き方

pagesフォルダ内に新しくblog.vueを作成し、以下のコードを記述します。

！注意点

Nuxtの起動中に新規ページを作成すると、正常に機能しない場合があるため、新しくページを作成する際は「^ + C」で一度Nuxtを停止してから再度「npm run dev」で起動するとよいそうです。

<template>
    <h1>ブログページ</h1>
</template>

<script setup></script>

<style></style>

↑これがVueコードの基本形です。

<template>

ブラウザで表示するためのコードを記述する。
HTMLと同じように記述することができる。

<script setup>

データ取得や操作など、該当のページで実行したい処理のコードを書くための場所。
setupはVue.js3で導入された新しい機能。（よりシンプルにコードが書けるようになった）
Nuxt3にはVue3が使用されているので、setupを活用することができる。

<style>

CSSスタイルを記述する場所。

再度ターミナルからNuxtを起動して、作成したblog.vue（http://localhost:3000/blog）を確認します。

blog.vueに記述した内容が反映されています。

次に、以下のコードを追加しました。

<template>
    <div>//追加
        <h1>ブログページ</h1>
        <p>こんにちは</p>//追加
    </div>//追加
</template>

<script setup></script>

<style>
//追加
h1{
    color: red;
}
</style>

！注意点

ここで<template>の中身が<div>タグで囲まれたのは、<template>内に２つの親要素が併存していると、エラーの出るケースがあるため。

<style>内に記述したコードも反映されています。

Vue開発でもHTMLとCSSは通常と変わらず使用できることがわかりました。

まとめ

• Nuxtをダウンロードするにはターミナルから該当フォルダへ移動して、npx nuxi init プロジェクト名 でダウンロードする
• ダウンロードしただけでは必要なパッケージが揃わないので、該当フォルダを開いたVsCodeから「npm install」としてnpmパッケージをインストールする。
• Nuxtは全面的にTypeScriptが使われている
• ルートディレクトリに「pages」ファイルを作成し、その中に必要なファイルを作成していく。
• pagesフォルダ内のindex.vueはルートパスとなり、その他のファイルはファイル名がURLとして使用される
• app.vueに<NuxtPage />（Nuxtのデフォルトコンポーネントファイル）を記述することでpages内のindex.vueが自動的に参照される
• 新規ページを作成するときは必ずNuxtを切断してから行う
• <template>内に親要素が２つ併存しているとエラーが発生することがある

Vue3の基本的な書き方とベースは同じであることがわかりました。

ベースはVue.js3ですが、Nuxt.js3では、<NuxtPage />というデフォルトコンポーネントファイルをapp.vue内で呼び出すことでpagesフォルダの中身が参照されるという点、また、pages内のindex.vueがルートパスとなる点や、pages内のファイル名が直接URLとなる点などが、Nuxt.js3の特有の概念であることが理解できました。

エラーの原因となる可能性がある点なども理解することができました！

本日は以上です。