Blog スタッフブログ

【フロントエンドフレームワーク】NuxtJS使ってみた

Category | Blog
/ 1,220views

こんにちはCTOの奥田です。
先日、娘が3歳の誕生日を迎えました。時の流れの速さと娘の成長の速さに驚かされてばかりです。
私も娘に負けないようにまだまだ成長していきたいと思います。

最近はUIの構築やPWAなどでNuxt.jsを触る機会が増えてきましたので備忘録としてブログにしていこうと思います。
今回はNuxtのインストールから基本的な事をご説明したいと思います。

Table of contents

  1. NuxtJSとは?
  2. インストール
  3. 起動
  4. 設定
  5. ディレクトリ構造
  6. さいごに

NuxtJSとは?

Nuxt.jsとは、Vue.jsベースのJavaScriptのフレームワークです。
UIなどフロントエンド向けのフレームワークであるVue.jsをベースにしてWebアプリケーション開発に必要な機能が最初から組み込まれています。

使いやすい Vue フレームワーク
NuxtJS を使用し自信を持って次の Vue.js アプリケーションをビルドしましょう。ウェブ開発をシンプルかつ強力にする オープンソース フレームワークです。
https://ja.nuxtjs.org/

NuxtはSSR・SPA・静的サイトの3つのモードで構築が可能です。

  • SPA(シングルページアプリケーション)
  • SSR(サーバーサイドレンダリング)
  • 静的サイト

それぞれのメリット・デメリットは以下です。

SPA(シングルページアプリケーション)

メリット
  • 実装が容易
  • サーバーの準備が楽
デメリット
  • 初期表示が遅い
  • SEOに弱い
  • OGをページごとに設定できない

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

メリット
  • SPAの欠点を解消できる
デメリット
  • 実装が面倒
  • サーバーの準備が面倒

静的サイト

メリット
  • SPAの欠点を解消できる
  • サーバーの準備が楽
  • SSRよりも速い
デメリット
  • 実装が少し面倒
  • 用途が限られる

インストール

yarn
yarn create nuxt-app <project-name>
npm
npm init nuxt-app <project-name>

インストールが開始されるといくつか質問をされるのでそれぞれ該当するものを選択していきます。

? Project name (my-app)

プロジェクト名を聞かれます。
何もしなければ先程指定した名前が入るので[Enter]を押します。

? Programming language: (Use arrow keys)
> JavaScript
  TypeScript

使用する言語を聞かれます。

? Package manager: (Use arrow keys)
> npm
  yarn

パッケージマネージャーは npm か yarn のどちらを使うかを聞かれます。

? UI framework:
> None
  Ant Design Vue
  Bootstrap Vue
  Buefy
  Bulma
  Element
  iView
  Tachyons
  Tailwind CSS
  Vuetify.js

UI フレームワークは何を使うかを聞かれます。こちらはあとで変更可能ですのでNoneでも大丈夫です。

? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Axios
 ( ) Progressive Web App (PWA)
 ( ) Content 

Nuxt.jsのモジュールはどれを使用するか聞かれます。([スペースキー]で選択、[a]で全選択、[i]で選択解除)
Axiosは非同期通信のモジュール、PWAはProgressive Web Appに対応させるためのモジュール、ContentはMarkdownを使えたりGitベースでのヘッドレスCMSを構築する際に非常に便利なモジュールです。

? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) ESLint
 ( ) Prettier
 ( ) Lint staged files
 ( ) StyleLint

ESLint、Prettier、Lint staged files、StyleLint を利用するかどうか聞かれます。
必要なものを選択します。

? Testing framework: (Use arrow keys)
> None
  Jest
  AVA
  WebdriverIO

テストフレームワークは何を使うかを聞かれます。

? Rendering mode: (Use arrow keys)
> Universal (SSR / SSG)
  Single Page App

ユニバーサルアプリケーションとシングルページアプリケーションのどちらで作るかを聞かれます。

? Deployment target: (Use arrow keys)
> Server (Node.js hosting)
  Static (Static/JAMStack hosting) 

デプロイメントターゲットを聞かれます。
Serverはサーバーサイドレンダリングを行う設定でStaticは静的サイトを行う設定です。

? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) jsconfig.json (Recommended for VS Code)
 ( ) Semantic Pull Requests 

利用する開発ツールを聞かれます。(公式ドキュメントにも掲載されていないのでわかりませんが、スルーしても大丈夫です。)

以上でインストールが完了します。

起動

さっそくNuxtを起動してみます。

yarn
cd my-app
> yarn dev
npm
cd my-app
> npm run dev

上記を実行し http://localhost:3000 にアクセスすれば以下のような画面が表示されます。

設定

設定ファイルは nuxt.config.js に記載します。
インストール直後は以下のようになっていますが様々な設定を記述できます。

export default {
    // Target (https://go.nuxtjs.dev/config-target)
    target: 'static',
    
    // Global page headers (https://go.nuxtjs.dev/config-head)
    head: {
        title: 'my-app',
        meta: [
            { charset: 'utf-8' },
            { name: 'viewport', content: 'width=device-width, initial-scale=1' },
            { hid: 'description', name: 'description', content: '' }
        ],
        link: [
            { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
        ]
    },
    
    // Global CSS (https://go.nuxtjs.dev/config-css)
    css: [
    ],
    
    // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
    plugins: [
    ],
    
    // Auto import components (https://go.nuxtjs.dev/config-components)
    components: true,
    
    // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
    buildModules: [
    ],
    
    // Modules (https://go.nuxtjs.dev/config-modules)
    modules: [
        // https://go.nuxtjs.dev/bootstrap
        'bootstrap-vue/nuxt',
    ],
    
    // Build Configuration (https://go.nuxtjs.dev/config-build)
    build: {
    }
}

ディレクトリ構造

Nuxtのディレクトリ構造は以下のようになっています。

.nuxt
assets
components
dist
layouts
middleware
pages
plugins
static
store

.nuxt

.nuxtディレクトリはビルドディレクトリです。ビルド時に自動で生成されるため、バージョン管理システムにはコミットしないようにしましょう。

assets

StylusやSassファイル、画像、またはフォントなど、未コンパイルのアセットを配置します。
Vueファイル側で呼び出す際は以下のようにします。

<template>
    <img src="~/assets/your_image.png" />
</template>
background: url('~assets/banner.svg');

components

componentsディレクトリには、Vue.jsコンポーネントを配置します。
コンポーネントは、ページのさまざまな部分を構成するものであり、再利用して、ページ、レイアウト、さらには他のコンポーネントにインポートすることができます。

// /components/Logo.vue
<template>
    <img src="~/assets/logo.png" />
</template>
<template>
    <Logo />
</template>

dist

distディレクトリは nuxt generateコマンドを使用すると自動的に生成されます。
静的に生成されたNuxt.jsアプリケーションをデプロイして実行するために必要な本番用のファイルが生成されます。

layouts

layoutsは共通のコンポーネントの呼び出しなどのレイアウトを指定できます。
レイアウトが指定されていないすべてのページには layouts/default.vue が使用されます。

実際にページコンポーネントを含めるようにレイアウトを作成するときは、必ず<Nuxt>コンポーネントを追加してください。

<template>
    <Nuxt />
</template>

レイアウトを指定する際は[pages/**.vue]でlayoutを指定してください。

<script>
export default {
    layout: 'custom',
}
</script>

middleware

middleware ディレクトリは、アプリケーションのミドルウェアが含まれています。
ミドルウェアを使用すると、ページまたはページのグループ(レイアウト)をレンダリングする前に実行できるカスタム関数を定義できます。

サイトに認証が必要な時は以下のようにして利用します。

export default function ({ store, redirect }) {
    // If the user is not authenticated
    if (!store.state.authenticated) {
        return redirect('/login')
    }
}
<template>
    <h1>Secret page</h1>
</template>

<script>
    export default {
        middleware: 'authenticated'
    }
</script>

pages

pages ディレクトリは、アプリケーションのビューとルートが含まれています。
Nuxt.jsは、このディレクトリ内のすべての.vueファイルを読み取り、ルーター構成を自動的に作成します。
動的ルーティングはファイル名の先頭に [_] をつけて定義します。

pages/index.vue -> /
     /about.vue -> /about
     /blog/index.vue -> /blog/
     /blog/_id.vue -> /blog/:id(任意の値)

plugins

pluginsディレクトリには、Vue.jsアプリケーションをインスタンス化する前に実行するJavaScriptプラグインを追加するディレクトリです。
Vueプラグインや任意のプラグインを配置します。

v-tooltipプラグインをインストールする例が以下です。

//v-tooltipをインストール
yarn add v-tooltip
// /plugins/v-tooltip.js
import Vue from 'vue'
import VTooltip from 'v-tooltip'

Vue.use(VTooltip)
// /nuxt.config.js
...
plugins: ['~/plugins/v-tooltip.js']
...

static

static ディレクトリは、サーバのルートに配置され、変更させないファイルを追加するディレクトリです。
含まれているすべてのファイルはNuxtによって自動的に提供され、プロジェクトのルートURLからアクセスできます。

store

Nuxt.jsはVuexを利用してアプリケーションの状態管理ができます。
storeディレクトリに配置したファイルで定義することで利用可能です。

さいごに

今回はNuxt.jsについて簡単にご説明いたしました。
Nuxtは非常に簡単に環境の構築ができ、面倒な設定など必要なくすぐに開発が始められます。
最近ではWebサイトでもちょこちょこ見かけるようになっており、非常に魅力的なフレームワークです。
皆様も是非一度触ってみてください。

今回参考にさせていただいた記事

Category | Blog
Author | Mineo Okuda / 1,220views

Company information

〒650-0024
神戸市中央区海岸通5 商船三井ビルディング4F

Contact us

WEBに関するお問い合わせは
078-977-8760 (10:00 - 18:00)