Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

「Vue.js」でWebページを作成できるフレームワーク「Nuxt.js」最初の一歩

JavaScriptフレームワーク「Vue.js」と「Nuxt.js」の活用 第1回

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

 本連載では、Webページのユーザーインタフェイス(UI)フレームワーク「Vue.js」と、Vue.jsを利用してWebページを作成できるフレームワーク「Nuxt.js」の活用方法を、サンプルとともに紹介します。初回となる今回は、Vue.jsとNuxt.jsの概要を説明するとともに、プロジェクトの生成や実行、基本的な実装例を通して、Vue.jsやNuxt.jsの機能をいくつか紹介していきます。

目次

はじめに

 Vue.jsは、Webページのユーザーインタフェイス(UI)作成にフォーカスしたJavaScriptフレームワークです。AngularReactと比較されることが多いフレームワークですが、導入や習熟のしやすさ、日本語ドキュメントの充実などが特徴として挙げられます。

図1:Vue.jsの公式ページ(https://jp.vuejs.org/)
図1:Vue.jsの公式ページ

 Vue.jsの機能はUIに特化しており、Webページ構築に有用なUI以外の機能(Ajaxやサーバーサイドレンダリングなど)は提供しません。そこで、Nuxt.jsは、Vue.jsのUI機能と、Vue.jsが提供しないUI以外の機能をまとめて利用できる環境を提供します。開発者はNuxt.jsを利用すれば、UIをVue.jsで構築しつつ、Nuxt.jsが提供するUI以外の機能も同時に利用できます。

図2:Nuxt.jsの公式ページ(https://ja.nuxtjs.org/)
図2:Nuxt.jsの公式ページ

 Nuxt.jsが提供する主な機能を表1にまとめます。

表1:Nuxt.jsが提供する主な機能
機能 説明 
プロジェクト生成 Vue.jsやNuxt.jsが設定済みのプロジェクトをコマンドで生成
サーバーサイドレンダリング サーバーサイドでWebページの内容を生成
静的ファイルの生成  Webサーバーにそのまま配置できるファイルを生成
ルーティング URLのパスでページを切り替え
Vuexストア Vuex(ページの状態を管理する仕組み)の利用をサポート

 本記事では、Vue.jsとNuxt.jsを使い始める最初の一歩として、プロジェクトを生成・実行する方法と、Webページの基本的な実装方法を説明します。また、Nuxt.jsの便利な機能として、サーバーサイドレンダリングや静的ファイルの生成を紹介します。

対象読者

  • Webページ作成を楽にしてくれるフレームワークを探している方
  • Vue.jsの環境をまとめて作成したい方
  • AngularやReactを経験して、他のフレームワークも試したい方

必要な環境

 Nuxt.jsのプロジェクト生成や実行には、Node.jsが必要になります。

 今回は以下の環境で動作を確認しています。Webブラウザーは、JavaScriptの有効/無効を設定で切り替えることができるGoogle Chromeを利用します。 

  • Windows 10 64bit版 
    • Node.js v10.15.3 64bit版
    • Nuxt.js 2.7.1
    • Vue.js 2.6.10
    • Google Chrome 74.0.3729.157

 サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリーをダウンロード後、「npm run dev」コマンドを実行して、Webブラウザーで「http://localhost:3000/」を開きます(詳細は後述します)。

Nuxt.jsプロジェクトを生成して実行する手順

 最初に、Nuxt.jsが提供するCLIツール(create-nuxt-app)を利用して、プロジェクトを生成して実行する手順を説明します。プロジェクトを実行すると、図3の通りWebページが表示されます。

図3:create-nuxt-appで生成したNuxt.jsのプロジェクト(p001-cli)
図3:create-nuxt-appで生成したNuxt.jsのプロジェクト(p001-cli)

 プロジェクトを生成するには、Node.jsがインストールされている環境で、リスト1のコマンドを実行します。npxはNode.jsのコマンドで、create-nuxt-appを(別途インストールせずに)実行できます。

[リスト1]Nuxt.jsのプロジェクトを生成するコマンド
npx create-nuxt-app p001-cli

 コマンドラインでは、プロジェクトに関する表2の項目を設定できます。今回はすべての項目で改行キーを押下して、デフォルト値をそのまま受け入れます。

表2:Nuxt.jsプロジェクト生成時に設定できる項目
No. 設定項目  意味    デフォルト値
1 Project name プロジェクト名 リスト1のコマンドで指定したプロジェクト名
2 Project description プロジェクトの説明  実行のたびに変わる
3 Use a custom server framework Webサーバーフレームワーク none
4 Choose features to install  インストールする追加機能  未選択
5 Use a custom UI framework UIフレームワーク none
6 Use a custom test framework テストフレームワーク  none
7 Choose rendering mode レンダリングモード  Universal
8 Author name 作者名 Gitに登録された名前、なければ空文字
9 Choose a package manager パッケージマネージャー npm

 すべての項目を設定するとプロジェクトが生成されるので、リスト2(1)のコマンドでプロジェクトのフォルダーに移動して、(2)のコマンドで実行します。実行後、Webブラウザーで「http://localhost:3000/」を開くと、図3の通り表示されます。

[リスト2]Nuxt.jsのプロジェクトを実行するコマンド
cd p001-cli # …(1)
npm run dev # …(2)

[補足]Nuxt.jsプロジェクト生成時に設定できる項目(表2のNo.3~7)の詳細

 表2のNo.3(Webサーバーフレームワーク)は、表3から1つ選択できます。

表3:Webサーバーフレームワークの選択肢
選択肢  詳細(参照URL)
none -
express https://github.com/expressjs/express
koa https://github.com/koajs/koa
adonis https://github.com/adonisjs/adonis-framework
hapi  https://github.com/hapijs/hapi
feathers https://github.com/feathersjs/feathers
micro https://github.com/zeit/micro
fastify https://github.com/fastify/fastify

 表2のNo.4(インストールする追加機能)は、表4から複数選択できます。

表4:インストールする追加機能の選択肢
選択肢  詳細 
Progressive Web App (PWA) Support PWA機能
Linter / Formatter ESLintによるコードチェック/整形機能
Prettier Prettierによるコード整形機能
Axios AxiosによるHTTPクライアント機能

 表2のNo.5(UIフレームワーク)は、表5から1つ選択できます。

表5:UIフレームワークの選択肢
選択肢  詳細(参照URL) 
none  -
bootstrap  https://github.com/bootstrap-vue/bootstrap-vue
vuetify https://github.com/vuetifyjs/vuetify
bulma  https://github.com/jgthms/bulma
tailwind https://github.com/tailwindcss/tailwindcss
element-ui  https://github.com/ElemeFE/element
buefy https://buefy.github.io/
ant-design-vue https://github.com/vueComponent/ant-design-vue
iview https://github.com/iview/iview
tachyons  https://github.com/tachyons-css/tachyons

 表2のNo.6(テストフレームワーク)は、表6から1つ選択できます。

表6:テストフレームワークの選択肢
選択肢 詳細(参照URL) 
none -
jest  https://github.com/facebook/jest
ava https://github.com/avajs/ava

 表2のNo.7(レンダリングモード)は、表7から1つ選択できます。「ユニバーサル」は、コードがサーバーとクライアントの両方で実行されるという意味です。

表7:レンダリングモードの選択肢
選択肢 詳細
Universal ユニバーサル(サーバーサイドレンダリング有効)
Single Page App シングルページアプリケーション(サーバーサイドレンダリング無効)

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:JavaScriptフレームワーク「Vue.js」と「Nuxt.js」の活用
All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5