format_list_bulleted
【Nuxt.js】Nuxt.jsの導入法とその記述法について解説
最終更新日時:2020-05-08 11:17:58

Nuxt.jsは.jsという名前がついている通り、JavaScriptのフレームワークで、Vue.jsをベースとしたフレームワークです。基本的にはVue.jsと同じですが、Vue.jsで学んだ記法や設計をほとんどそのまま使用して開発ができ、尚且つ豊富な拡張機能を持っていて、上位互換のような存在のフレームワークです。Vue.jsに慣れてきたら、ぜひ使ってみましょう。

Nuxt.jsのメリットは？

Nuxt.jsのメリットは大きく分けて次の３つがあります。

  1. SSR(サーバーサイドレンダリング)のしやすさ
  2. ルーティング管理のしやすさ
  3. PWAモジュール対応

順に説明していきます

SSRのしやすさ

SSR（サーバーサイドレンダリング）とは本来、ウェブブラウザ上で実行されるJavaScriptコードをサーバーサイドで実行し、実行結果をHTMLとしてクライアントに返す仕組みのことです。通常のVue.jsで実装するSPA（シングルページアプリケーション）はページ遷移をなくし、一度ロードされれば、サクサクとコンテンツの切り替えることができます。しかし、SPAは初期表示に時間がかかり、処理が仮装DOMで行われるため、SEO対策的にあまり良く無いことが多いです。SSRはこうした問題を解決することができ、そのままVueの記法でコードを書くことができます。VueでもSSRを導入することはできますが、Nuxt.jsの方が圧倒的に導入しやすいので、SSRを実装するときはNuxt.jsを使ってみましょう。

ルーティング管理のしやすさ

二つ目のメリットはルーティング管理のしやすさです。Nuxt.jsではVue.jsのようにコンテンツのルーティングを設定する手間を省くことができ自動的にルーティングを行うことができます。実際のやり方はページの終盤で紹介するので実際にやってみましょう。

PWAモジュール対応

PWA(Progressive Web Apps)とはモバイル向けWEBサイトをスマートフォン向けのアプリのように提供することができる仕組みです。PWAはネイティブアプリと違って、インストールする必要はなく、かつ通知機能などを提供することができるので注目されています。Nuxt.jsではPWAを実装するモジュールに対応しているので、PWAを実装する際はNuxt.jsを選ぶべきだと思います。

Nuxt.jsへの移行

Vue-CLI環境でのNuxt.jsの設定(Vue-CLIについて詳しく知りたい方は「Vue-CLIのインストール」を参照してください。)

Vue-CLIのinit機能を利用して、Nuxt.jsの環境構築ができます。

$ npm i -g @vue/cli @vue/cli-init

バージョンを確認してみましょう。

$vue -v@vue/cli 4.1.1

バージョンが表示されたあとはvue initコマンドによってプロジェクトを作成することができます。

今回はNuxtのスターターテンプレート（nuxt-community/starter-template）を使って、my-nuxt-appプロジェクトを作成しましょう。

 $vue init nuxt-community/starter-template my-nuxt-app     

? Project name my-nuxt-app

? Project description Nuxt.js project

? Author

以上のように選択文がでますが全てEnterを押しましょう。

今回はパッケージマネージャーとしてyarnを導入しますが、npm installコマンドでnpmを導入しても構いません。

$cd  my-nuxt-app

$yarn

$yarn dev

yarnを起動して http://localhost:3000/  にアクセスすると次のような画面が表示されます。


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

Nuxtのディレクトリ構成

続いてNuxt.jsのディレクトリ構成を見てみたいと思います。

VScodeなどのテキストエディタでmy-nuxt-appを開いて見ると、ディレクトリ構成は次のようになっています。

my-nuxt-app//
├── README.md
├── assets
├── components
├── layouts
├── middleware
├── node_modules
├── nuxt.config.js
├── package.json
├── pages
├── plugins
├── static
├── store
└── yarn.lock

README.mdファイル

README.mdファイルには、npmなどのパッケージマネージャーのインストール方法やコマンドが買いてあります。Nuxt.jsに限らず、どのwebフレームワークでもREADME.mdファイルはあるので、読んでおくといいでしょう。

assetsディレクトリ

assetsディレクトリで画像リソースや、CSSなどのJavaScript以外のリソースを管理します。

componentsディレクトリ

conmponentsディレクトリはVue.jsと同様にコンポーネントを管理するディレクトリです。Vue.jsで勉強したコンポーネントの使い方がほとんどそのまま使用することができます。現在のmy-nuxt-appにはAppLogo.vueのみが入っています。

pagesディレクトリ

index.vueが入っているディレクトリで、ルーティングに対応したコンポーネントを格納するディレクトリとなります。このディレクトリ内ではすべての .vue ファイルを読みこまれ、ルーティングが行われます。

まずindex.vueのテンプレートを次のように書き換えてみましょう。

 (index.vue)

<template>
  <section class="container">
    <div>
      <app-logo/>
      <h1 class="title">
        私のNuxtアプリ
      </h1>
      <h2 class="subtitle">
        Nuxt.js project
      </h2>
      <div class="links">
        <a
          href="https://nuxtjs.org/"
          target="_blank"
          class="button--green">Documentation</a>
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey">GitHub</a>
      </div>
    </div>
  </section>
</template>



上のように表示が変わっていると思います。Nuxt.jsではpagesディレクトリにあるファイルがファイル名そのままルーティングを作成してくれます。pages/index.vueはデフォルトでhttp://localhost:3000/にアクセスすると表示されます。pages/players/one.vueのようなディレクトリ構造すると、http://localhost:3000/players/oneのように自動的にルーティングが作成されます。pagesディレクトリ配下にplayersディレクトリを、その配下にone.vueファイルを作成し、http://localhost:3000/players/oneにアクセスしてルーティングが作成されることを確認してみましょう。

(one.vue)

<template> 
   <h1>プレイヤー１ 静的なルーティング</h1>　
</template>



続いて、Nuxt.jsの動的なルーティングを設定してみましょう。Nuxt.jsではvueコンポーネントファイルのファイル名の頭に_（アンダーバー）をつけると、動的なルーティングを作成することができます。先ほど作成したhttp://localhost:3000/players/oneのような静的なルーティングは動的なルーティングよりも優先されることに注意してください。実際にpages/players/_id.vueを作成し、確認してみましょう。

(pages/players/_id.vue)

<template>  
  <h1>プレイヤーsomeone 動的なルーティング</h1>
</template>

http://localhost:3000/players/2やhttp://localhost:3000/players/3にアクセスすると次のように表示されます。




http://localhost:3000/players/oneにアクセスすると、先ほど静的なルーティングで設定したので、先ほどと同じように次のような画面が表示されます。



pages/players/_id.vueを次のように書き換えると、アクセスしたidに応じて表示を変えることができます。

(pages/players/_id.vue)

<template>  
  <h1>プレイヤー {{playerId}} 動的なルーティング</h1>
</template>
<script>
export default {
  data(){
    return {playerId:this.$route.params.id} 
  }
}
</script>

同じようにhttp://localhost:3000/players/2やhttp://localhost:3000/players/3にアクセスすると次のように表示が変更されることがわかります。



scriptタグ内playerIdにvuerouterのidを代入するデータを関数として定義しています。vuerouterのidにはアクセスしたtwoやthreeなどが自動的に追加されているので、{{playerId}}（テンプレート構文）を使って表示すると、アクセスしたidの名前が表示されます

staticディレクトリ

staticディレクトリは静的なリソースを管理するディレクトリです。通常、faviconなどを配置します。staticディレクトリ配下のファイルは直接悪接することができます。例えば、/static/favicon.ico は http://localhost:3000/favicon.icoでアクセスすることができます

storeディレクトリ

storeディレクトリではVuexストアとそのモジュールと管理するディレクトリです。デフォルトでは無効になっていて、このディレクトリに index.jsファイルを作成するとストアが有効となり、Vuexストアを使用することができます。

この記事のまとめ

本記事ではNuxt.jsの特徴とメリット、そしてNuxt.jsプロジェクトのディレクトリ構成について勉強しました！最後に記事の要点をまとめてみましょう。

  • Nuxt.jsはVue.jsを基本とした、拡張フレームワークである。
  • Nuxt.jsにはSSR（サーバーサイドレンダリング）のしやすさ、ルーティング管理のしやすさ、PWAモジュール対応といったメリットがある
  • Nuxt.jsのディレクトリ構成は大きく分けて、assets、components、pages、static、storeディレクトリに分けられていて、pagesディレクトリでルーティング管理を行う。

ぜひ、Vue.jsを勉強したあとは、Nuxt.jsを是非勉強して、活用してみましょう！！