【書評】Vue.js&Nuxt.js超入門[Vue.jsによるSPAを体感する]

この記事は約6分で読めます。

どうもタスです。

フロントエンドの技術を学ぶ必要に迫られ本書を手に取った。未知の技術を学ぶための入門書は、先ず書籍の選定自体が難しいことを実感した。数冊の中から本書を選んだのだけれど、私にはとても良い入門書になったと思う。

そこで今回は、読書習慣を始めて85冊目の本として『Vue.js&Nuxt.js超入門（秀和システム）』を読了したのでお伝えする。

Vue.js&Nuxt.js超入門【電子書籍】[ 掌田津耶乃 ]

created by Rinker

この記事の目次

1 著者のご紹介（本書引用）
2 目次
3 Vue.jsとその特徴
4 Vue.jsの弱点を補うNuxt.js
5 おススメする学習の流れ
6 超入門を学習して

著者のご紹介（本書引用）

掌田津耶乃（しょうだつやの）
日本初のMac専門月刊誌「Mac+」の頃から主にMac系雑誌に寄稿する。ハイパーカードの登場により「ビギナーのためのプログラミング」に開眼。以後、Mac、Windows、Web、Android、iPhoneとあらゆるプラットフォームのプログラミングビギナーに向けた書籍を執筆し続ける。

Vue.jsとその特徴

本書は、Vue.js（ビュージェーエス）の基本を学ぶ入門書である。そもそもVue.jsとは何かというと、JavaScriptのフレームワークのことをいう。フレームワークとは、ある開発に特化した仕組みを持つライブラリ群のことである。Vue.jsでいうとWebアプリケーションのフレームワークだ（少なくとも本書では）。

Vue.jsの特徴は以下のとおりである。

リアクティブプログラミング
コンポーネントシステム
テンプレート

リアクティブプログラミングとは、データ更新が行われると自動的にそれらのデータを利用している画面の表示も更新されるということだ。まさにMVVMパターンを実感できる。

コンポーネントシステムとは、「コンポーネント」を利用することで様々な機能を部品化してシステムを組める。疎結合な構成を組めるため、配置することで自動的に必要な表示が行える再利用可能な部品構成を実現できる。

テンプレートとは、HTMLをベースとするテンプレート構文を利用することで、容易にVue.jsの表示をHTMLの中に組み込める。実際の利用は、コンポーネントとして定義する。

Vue.jsの弱点を補うNuxt.js

Vue.jsはフロントエンドのレンダリングを得意とする特徴があるが、本書ではその特徴故の弱点を補填するフレームワークであるNuxt.js（ナクストジェーエス）も取り扱う。Nuxt.jsは、Vue.jsのフレームワークといわれている所以はそのためである（フレームワークのフレームワークとかややこしい）。

Nuxt.jsの特徴は以下のとおりだ。

サーバーサイドレンダリングが可能
データ管理の一元化
ルート管理

Nuxt.jsには、Vue SSRというサーバーサイドレンダリングが組み込まれている。ただし、SPAモードを利用することでクライアントサイドレンダリングにすることも可能だ。

データ管理については、Vuexというデータ管理ライブラリを利用することで、各種ファイル間のデータなどを一元管理する。クライアントサイドレンダリングの際に有用なライブラリである。

ルート管理は規模が大きくなると必然的な機能になるが、Vue Routerというルート管理ライブラリによって実現する。具体的には、「page」フォルダにvueファイルを追加するだけで新規ページとして認識される。

おススメする学習の流れ

本書の学習の流れは以下のとおりだ。

チャプター1：Vue.jsのセットアップ方法からプロジェクトの作成までを行う。
チャプター2：Vue.jsの仕組みの基本、レンダリング、テンプレート構文を学ぶ。
チャプター3：コンポーネントの基本、v属性、プロジェクト開発を学んだあとに、計算アプリを作成する。
チャプター4：コンポーネントのプロパティ、イベント、テンプレート構成、トランジションやトランスフォームによるアニメーションの実現方法を学ぶ。
チャプター5：Nuxt.jsのプロジェクト作成からVuexによるデータ管理、最後にメモアプリを作成する。
チャプター6：axiosによる外部サイトからの情報取得、Firebaseを利用したデータベース連携を学ぶ。
Addendum：Vue.jsを学ぶ前提としてJavaScriptの知識を学ぶ。

おススメする流れは、最初にAddendumを行うことだ（JavaScriptの基礎知識をVue.jsの参考書で学べるのはとても良い付録だ）。そこでJavaScriptの基礎知識を習得したのちに、チャプター1から順路どおり進めると良い。Vue.jsもNuxt.jsもプロジェクトを作成しなくても、スクラッチ方式でプログラミングできる。

プロジェクトを作成するとフレームワークの枠組みが生成されてしまうので、本書では、最初はスクラッチ開発から学ぶことをおススメしている。順路どおり進めることでスクラッチからプロジェクト開発へ移行する。

なお、プログラミングの習得は、実際に手を動かして打ち込みながら学ぶ方法がベストである。しかし、本書の全てのプログラムを打ち込むには学習時間がかかることと、腱鞘炎を免れないことが考えられるため、本書に掲載されるサンプルプログラムを秀和システムのサイトからダウンロードした。

チャプター1から進めることで、Vue.jsの実行環境を構築し、サンプルプログラムを触りながら実行する効率の良い学習が行えたと思う。