こんにちはCTOの奥田です。
先日、娘が3歳の誕生日を迎えました。時の流れの速さと娘の成長の速さに驚かされてばかりです。
私も娘に負けないようにまだまだ成長していきたいと思います。
最近はUIの構築やPWAなどでNuxt.jsを触る機会が増えてきましたので備忘録としてブログにしていこうと思います。
今回はNuxtのインストールから基本的な事をご説明したいと思います。
Table of contents
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 create nuxt-app <project-name>
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を起動してみます。
cd my-app > yarn dev
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サイトでもちょこちょこ見かけるようになっており、非常に魅力的なフレームワークです。
皆様も是非一度触ってみてください。