Vue.jsはJavaScriptフレームワーク

Webのインターフェース設計では，見た目や機能をJavaScriptによるプログラミングを多用することで使いやすく開発することが当然なものになっています。HTMLのコーディングだけで済んだ牧歌的な時代は振り返ると石器時代のようですです。Webアプリ開発者は，JavaScriptを思うがままにあやつり顧客が求めるWebを作りだします。JavaScriptで実現したいさまざまな機能を1つにまとめ，その仕組みの中でのルースでコーディングすれば，すぐに欲しい機能が実現するとうれしいですよね。それがJavaScriptフレームワークやライブラリです。Webブラウザの機能向上とともにこれまでにいろいろなフレームワークやライブラリが流行してきました。例を挙げましょう。

• Backbone，jQuery，Riotなど
• React，Angular，Vue，Nuxtなど

ここ数年，これらのライブラリやフレームワークは開発のしやすさやブラウザの機能の向上に合わせてWeb開発者がその技術を取捨選択してきました。流行というよりも技術の進化ともいえます。欲しい機能に合わせ，複数のフレームワークやライブラリを組み合せることもよく行われています。そんな中で，多くのJavaScriptエンジニアから支持されているフレームワークがVue.jsです（図1⁠）⁠。

図1 https://vuejs.org/

Vue.jsの特徴

最近のWebページはシングルページアプリケーション（SPA）という考え方で設計されています。リンクやボタンをクリックしても別のページに遷移することなく，必要なデータだけをサーバとやりとりしようというものです。ページの書き換えが少ないので動作も快適になりますし，やりとりするデータも少ないので，今の時代に適合し，メリットが多いのが特徴です。VueはSPAを作るのに向いているのです。また，プログレッシブフレームワークという思想でVue自体が作られていますので，少しずつ必要な機能を取り入れて顧客ニーズに合わせてWeb開発を進めることができます。これは融通が利くので変化に強いWeb製作を実現するにも優位となります。

Vue.jsを使いこなすには

まずは，何はともあれ環境構築です。本書では練習のためにjsFiddle（https://jsfiddle.net/）やCodePen（https://codepen.io/）での試し方を紹介しています。実際にWebアプリに組み込むためにはCDN上のVue.jsを組み込む定番的な方法や，Node.js環境を構築し，Vue-CLIをインストールする方法まで丁寧に解説しています。Vue-CLIによりコマンドラインで実行できるようになります。さらにはVueの作者が作ったViteによる環境構築まで解説していますので，いろいろ方法でVueの世界に入門できます。

Vue.jsのスムーズな入門のために

新しいプログラミング言語を覚える際に必要なのは，文法とそのプログラミング言語の特徴的な単語を覚えることが一番です。Vue.jsが実現する豊富な機能を習得するのには一筋縄でいきません。そのため本書では，ほんとうに必要な知識から解説を試みました。まずは，短いコードで「基本的な使い方」であるインスタンスの概念を学びます。そしてアプリの部品である「コンポーネント」の使い方を学び，さらにさまざまな機能の実現方法を「リファレンス」に掲載されたサンプルコードで理解を深めることができます。

こうした基礎を習得したのち，「⁠Vue.jsの拡張機能」「⁠Vue Router」といった応用的な使い方もサンプルで学ぶことができます。最後に「アプリの状態管理やプラグイン」といった現場でよく使われる機能にまで解説をしています。これらは筆者らが実際の開発現場で得られた経験と知識をもとに執筆しました。本書は，新技術を学びながら知りたいことがわかるリファレンスです。入門の最初の1冊としても活用ください。