【Nuxt.js】初心者は保存必須！環境構築とディレクトリの説明

Nuxt

ミニマリスト_カミ

kamiです。
TwitterとYoutubeもやってます。

Nuxt.js（ナクスト）は、Vue.js をベースにしたフレームワークで、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）を簡単に実装できる強力なツールです。
Nuxt.js は、Vue.js のアプリケーション開発を効率化し、SEO に優れたウェブサイトやアプリケーションを構築するためのさまざまな機能を提供しています。

Nuxtとは？

サーバーサイドレンダリング (SSR)

通常のクライアントサイドレンダリング（CSR）とは異なり、SSRではサーバー側でページがレンダリングされ、完全なHTMLがクライアントに送信されるため、SEOパフォーマンスが向上します。

静的サイト生成 (SSG)

Nuxt.jsを使用すると、動的コンテンツを持つサイトであっても、事前にHTMLファイルを生成し、静的なサイトとしてホスティングすることが可能です。これにより、パフォーマンスが向上し、サーバーの負荷も軽減されます。

Vue RouterやVuexの統合

Nuxt.js は Vue Router や Vuex がデフォルトで統合されており、SPA（Single Page Application）や多ページアプリケーションの構築が非常に簡単です。

自動ルーティング

pages ディレクトリ内にファイルを作成すると、それに応じたルーティングが自動的に設定されます。これにより、ルーティングの設定が簡略化されます。

プラグインやミドルウェアのサポート

Nuxt.jsは、プラグインやミドルウェアをサポートしており、外部のライブラリや機能を簡単に追加できます。

モジュール

Nuxt.js には、多くの公式およびサードパーティ製のモジュールがあり、認証やPWA（プログレッシブ・ウェブ・アプリケーション）のサポートなど、機能を簡単に追加できます。

Nuxt.jsの主な利点

  • SEOに強い：SSRやSSGにより、検索エンジンに最適化されたサイトが作れます。
    開発の簡便性：プロジェクトのセットアップが簡単で、自動ルーティングやプラグインの統合などにより、効率的な開発が可能。
  • 高性能：パフォーマンスを最適化するためのさまざまな機能が標準で用意されています。

Nuxtプロジェクト作成

npx create-nuxt-app <プロジェクト名>
cd <プロジェクト名>
npm run dev

スポンサードサーチ

Nuxtのディレクトリ構造

nuxt-app/
├── assets/               # Webpack で処理されるアセット (CSS/画像/フォントなど)
├── components/           # 再利用可能な Vue.js コンポーネント
├── layouts/              # アプリ全体で使うレイアウト
├── middleware/           # ルートやページの前に実行される関数
├── pages/                # 各ページの Vue ファイル（自動でルーティングが作成される）
├── plugins/              # プラグインファイル (外部ライブラリの初期化など)
├── static/               # 静的ファイル (ビルド時に変更されない)
├── store/                # Vuex ストアファイル (グローバルな状態管理)
├── nuxt.config.js        # Nuxt.js の設定ファイル
├── package.json          # プロジェクトの依存関係などの設定ファイル
└── node_modules/         # インストールされた npm パッケージ（自動生成）

pages

xxx

pagesディレクトリ内にファイルやフォルダを作成することで、そのファイル名やフォルダ名に基づいて自動的にルートが生成されます。

たとえば、pages/about.vue ファイルを作成すると、/aboutというルートが作成されます。

例:
pages/index.vue → /
pages/about.vue → /about
pages/blog/_id.vue → /blog/:id（動的ルート）

layouts

役割: ページ全体の共通レイアウト

アプリケーション全体で共通して使うレイアウト（ヘッダーやフッターなど）を定義します。各ページで異なるレイアウトを使用することも可能です。default.vue というファイルを作成すると、デフォルトのレイアウトとしてすべてのページに適用されます。

default.vueとは？

layouts/default.vue は、アプリケーションの「デフォルトレイアウト」を定義するファイルです。レイアウトは複数のページに共通して使用される部分（ヘッダー、フッター、ナビゲーションなど）を含むことが多いです。

Nuxt.js では、ページごとに異なるレイアウトを指定することもできますが、default.vue は特に指定がない場合に適用される標準のレイアウトです。

<template>
  <div>
    <Header />
    <App />
    <Footer />
  </div>
</template>
icon

<Nuxt />タグは、ページの内容を表示する場所を示し、<Header />や<Footer />は共通で使う部分として定義されます。

components

役割: 再利用可能な Vue コンポーネント

ページ内で繰り返し使用される UI コンポーネントを格納します。例えば、ヘッダー、フッター、ボタン、カードなどの再利用可能な部分はここに定義します。

store

役割: Vuex による状態管理

グローバルな状態管理を行うための Vuex ストアがここに置かれます。
このディレクトリが存在するだけで、自動的にVuexが有効になります。ファイルごとにモジュールを分割して、ストアを構成できます。

Vuexストアとは？

Vuexストアとは状態管理システムのことを指します。

  • 状態（state）
  • 変更（mutations）
  • アクション（actions）
  • ゲッター（getters）

State（状態）:

  • アプリケーションの中心的なデータを保持します。すべてのコンポーネントがここから状態を取得し、データの一貫性が保たれます。
  • 例: ログインユーザーの情報、カート内の商品リストなど。

Mutations（変更）:

  • 状態を同期的に変更するためのメソッドです。状態は直接変更せず、必ずミューテーションを通じて変更します。
  • 例: increment というミューテーションを使ってカウンターの値を増加させる。

Actions（アクション）:

  • 非同期処理（API呼び出しなど）を含む状態変更を行うためのメソッドです。アクションは最終的にミューテーションを呼び出し、状態を変更します。
  • 例: サーバーからデータをフェッチして、取得したデータを状態に反映する。

Getters（ゲッター）:

  • 状態を基に新しいデータを取得するための関数です。状態を計算したりフィルタリングした結果を取得する際に使います。
  • 例: ログインしているかどうかを isLoggedIn というゲッターで取得する。

static

役割: 静的ファイルの配置

static ディレクトリ内に配置されたファイルは、そのままの形でサーバーにホスティングされ、パスに従ってアクセスできます。

例: static/logo.png は /logo.png でアクセス可能。

画像やファビコンなどのファイルはここに置かれます

assets

役割: コンパイル対象のアセット

CSS（Sass/Scss）、画像、フォントなど、Webpack によって処理されるアセットを格納します。
static ディレクトリと異なり、ここに置かれたファイルはビルド時にコンパイルや最適化されます。

scssディレクトリ作成することが多いです

middleware

役割: ページやルートにアクセスする前の処理

各ページにアクセスする前に特定の処理を実行するためのコードを定義します。例えば、認証が必要なページに対してログイン確認を行うミドルウェアを作成することができます。

plugins

役割: プラグインや外部ライブラリの設定

プロジェクトに外部ライブラリを組み込む場合、その初期化や設定を行うコードを plugins ディレクトリに配置します。例えば、Vue.jsのプラグインやサードパーティライブラリをここで初期化します。

nuxt.config.js

役割: Nuxt.js の設定ファイル

プロジェクト全体の設定を行うファイルです。
ルーティング（ミドルウェアの設定）やプラグインの設定、SEO（メタタグなど）の設定、外部モジュールの導入など、あらゆる設定を nuxt.config.js ファイルで管理します。

export default {
  // アプリケーションのモード（'universal' か 'spa' で、false にすると SPA モードになる）
  ssr: false, // サーバーサイドレンダリングを無効にして SPA モードに設定

  // HTML <head> セクションの設定
  head: {
    title: 'My Nuxt.js App',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'My awesome Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // グローバルCSSの設定
  css: [
    '~/assets/css/main.css',
    '~/assets/scss/styles.scss'
  ],

  // プラグインの設定
  plugins: [
    '~/plugins/axios.js'
  ],

  // Nuxt.js モジュール
  modules: [
    '@nuxtjs/axios'
  ],

  // Axios モジュールの設定
  axios: {
    URL: process.env.BASE_URL || 'http://localhost:3000'
  },

  // 環境変数の設定
  env: {
    URL: process.env.URL || 'http://localhost:3000', // 環境変数からURLを読み込む
    apiKey: process.env.API_KEY // APIキーの環境変数
  },

  // ルーティングのカスタマイズ
  router: {
    middleware: 'auth' // 全ルートに対して認証ミドルウェアを適用
  },

  // ビルド設定
  build: {
    extend(config, ctx) {
      // カスタムビルド設定
    }
  },

  // サーバーの設定
  server: {
    port: 8000, // デフォルトは3000
    host: '0.0.0.0'
  }
}

わかりやすく例えるとwebpackみたいなものですね！

dist

役割: ビルド後の成果物

プロジェクトをビルドした際に、生成された静的ファイルやビルド済みのリソースが格納されます。このディレクトリは通常、デプロイ用に使います。

node_modules

役割: インストールされたパッケージ

npm や yarn でインストールされた依存関係がすべて node_modules に格納されます。ここにあるファイルは通常、直接編集しません。

まとめ

Nuxt.js のプロジェクトディレクトリは、プロジェクトを効率的に管理するために設計されており、各ディレクトリには特定の役割があります。
ディレクトリ構造を理解することで、Nuxt.js を活用したアプリケーション開発がスムーズになります。

以上が環境構築とディレクトリの説明になります

Nuxt

Posted by kami