Zenn
📘

【イラスト付き】Nuxt3の概要を把握する【要点一気読み】

2024/08/27に公開
Nuxt
Vue.js
Nuxt 3
tech

はじめに

皆さんこんにちは。

今回はNuxtの概要をご紹介します。

NuxtはJavaScriptのフレームワークの一つです。Vue.jsをベースとしつつもVue.jsにはない特徴があります。

こんな人にオススメ

  • Nuxtの概要や特徴を知りたい
  • コードではなく説明のみが欲しい

初めて学習する方にも分かるように、要点を絞って丁寧に解説していきます。

😋 Nuxtの雰囲気をお伝えします♪

Nuxtとは？

まずポイントをチェック

  • Vue.jsベースのフレームワーク
  • Vue.jsをより書きやすくしている
  • SSRに対応

NuxtはVue.jsベースのフレームワークです。Vue.jsを拡張しており、より記述しやすい仕組みが取り入れられています。具体的にはデフォルトでTypeScriptをサポートしていることや、Vite（ビート）によりビルドが高速であることなどが挙げられます。またサーバーサイドレンダリングにもデフォルトで対応しています。

😋 NuxtはVue.jsをもっと書きやすくしたフレームワークです♪

Nuxtのシンプルサンプル

まずポイントをチェック

  • nuxi init でプロジェクトを初期化
  • npm run dev で起動
  • Vue.jsと同様にコンポーネントを記述可能

Nuxtの開発を始めるには次のコマンドを順次実行します。

実行するコマンド
1. npx nuxi init アプリ名
2. cd アプリのフォルダ
3. npm install
4. npm run dev

nuxi init はNuxtの雛形アプリケーションを生成するコマンドです。生成直後の雛形にはまだ依存パッケージがインストールされていないのでnpm installを実行します。起動にはnpm run devを指定します。起動時にブラウザも立ち上げたい場合は、npm run dev — -o とオプションを指定します。雛形の状態で起動するとWelCome to Nuxt! のページが表示されます。

雛形の状態から、シンプルなコードを記述した例は次の通りです。Vue.jsと同じような記述になってることが分かります。実行結果は画面にHelloと表示するだけです。

😋 Vue.jsと同じようにコンポーネントを記述できます♪

app.vue
<template>
  <SimpleSample /> <!-- 作成したコンポーネントの配置 -->
</template>
components/SampleSample.vue
<template>
  <div>
    <div>{{ hello }}</div> <!-- hello変数の値を埋め込み -->
  </div>
</template>
<script setup lang="ts">
const hello = 'Hello';
</script>

フォルダ構成

まずポイントをチェック

  • Nuxtには意味を持つフォルダがある
  • ファイルを配置することで様々な設定が自動で行われる

Nuxtには構造上意味のあるフォルダが存在し、所定のフォルダにファイルを配置するだけで、様々な恩恵を得られます。コンポーネントの自動インポートやルーティングの設定など、手続的なことをNuxtに任せることができます。

代表的なフォルダの意味を次にまとめます。

意味のあるフォルダ名
- components：UIコンポーネントを配置
- composables：コンポーザブル関数を配置
- layouts：レイアウト定義コンポーネントを配置
- pages：ルーティングと対応するコンポーネントを配置
- plugins：プラグインの導入設定を配置
- utils：ヘルパー関数を配置
- server：サーバーアプリケーションを配置

😋 所定のフォルダに配置するだけで設定などをやってくれます♪

ユニバーサルレンダリング

まずポイントをチェック

  • CSR + SSR の動き
  • 最初の画面を早めに表示することが主な目的
  • Nuxtのデフォルトの動作

Nuxtはユニバーサルレンダリングをデフォルトのレンダリングモードとしています。ユニバーサルレンダリングはCSR（クライアントサイドレンダリング）とSSR（サーバーサイドレンダリング）を合わせた方式です。ユニバーサルレンダリングの主な目的は先頭のページ早く表示することです。

CSRとはSPA（シングルページアプリケーション）のことです。CSRのみの場合はJavaScriptで画面を描画するため、JavaScriptの実行に時間がかかります。その結果ユーザーに画面が表示されるまで時間がかかってしまいます。

ユニバーサルレンダリングは初回ページのみをSSRで生成し、初回表示速度を向上させます。初回ページの裏でJavaScriptはダウンロードされており、以降はアプリケーションはCSRで動作します。

コンポーネントをSSRさせたくない場合、<ClientOnly>を利用します。

<ClientOnly>
  コンポーネント
</ClientOnly>

😋 ユニバーサルレンダリングはSSRとCSRのいいとこ取りです♪

おわりに

皆さん、お疲れ様でした。
ここまでご覧いただき、ありがとうございました。

Nuxtの概要を確認をしていただきました。Vue.jsアプリケーションをより簡単に作成できるため、人気なフレームワークとなっています。Nuxtは前提にVue.jsがあるので、Vue.jsを学習後に取り組んでみましょう。

😋 これからもプログラミング学習頑張りましょう♪

参考リンク集（Nuxt公式のリンク）

Introduction：https://nuxt.com/docs/getting-started/introduction
Components Directory：https://nuxt.com/docs/guide/directory-structure/components
client-only：https://nuxt.com/docs/api/components/client-only

Discussion