プログラミング

Vue.js とは?

JS フレームワーク「Vue.js」

最近の JavaScript 界隈では、デファクトスタンダードであった「jQuery」から、「React」「Angular」「Vue」などの JS フレームワークへの移行が進んでいます。
jQuery でも十分キレイな Web サイトを作れるのですが、複雑なサイト、特に Web アプリケーションなどは、jQuery での対応が難しい(というか面倒くさい)部分が多々ありました。
それに対処するために登場してきたのが React をはじめとする次世代 JS フレームワークです。

当初は React が人気を博していましたが、最近ではVue.jsが躍進しています。
PHP フレームワーク「laravel」に同梱されたことから一躍有名になりました。
React や Angular は高機能なのですが、コンパイルが必要であったり、Type script を覚えなければいけなかったりなど…意外と学習コストがかかります。
jQuery からもう一歩踏み出して JS フレームワークを触ってみたい、という方にとっては少々難しいフレームワークです。

その点、Vue.js は jQuery と同じく、ファイルを読み込みさえすれば、すぐに使うことができます。
Vue.js は、その理念に 「プログレッシブフレームワーク」とある通り、小規模の開発から大規模の開発まで、どんな状況にも対応できるように設計されたフレームワークです。
ページに読み込んだだけで使うことができ、コンパイルも必要ないので、知識さえあれば、すぐに Web 製作に導入できます。
この手軽さ、柔軟さ、学習コストの低さが Vue.js の大きな特徴です。

今まで Vue.js の学習コンテンツというと、公式サイトや個人のブログなど、もっぱらネットばかりでしたが、2018 年 5 月に Vue.js の解説本が発売されました。
それがこちら。
基礎から学ぶ Vue.js

--- 広告 ---

Vue.js 初心者のための書籍「基礎から学ぶ Vue.js」

基礎から学ぶ Vue.js はどんな書籍?

基礎から学ぶ Vue.js初めて Vue.js に触れる人向けの書籍で、Vue.js の基本からVue-CLIVuexVue-routerまで網羅的に解説されています。
この書籍は、Vue.js を使ってプロダクトを作るタイプの本ではありません。
Vue.js の基本的な特徴や機能を、1 つ 1 つ基礎から解説していくタイプの本です。
かなり丁寧に解説されていますので、一通り読めば、簡単な SPA くらいなら構築できるようになるでしょう。

基礎から学ぶ Vue.js の魅力

この書籍の魅力はなんと言っても、分かりやすさにあるでしょう。
例えば、created ライフサイクルフックの解説文。
Vue.js の公式サイトの説明は下記のとおりです。

各 Vue インスタンスは、生成時に一連の初期化を行います。
例えば、データの監視のセットアップやテンプレートのコンパイル、DOM へのインスタンスのマウント、データが変化したときの DOM の更新などがあります。
その初期化の過程で、特定の段階でユーザー自身のコードを追加する、いくつかのライフサイクルフック(lifecycle hooks)と呼ばれる関数を実行します。

他の JS フレームワークに触れている方であれば、問題なく理解できますが、初めて Vue.js に触れる人にとっては、なんのこっちゃですよね。
この点、基礎から学ぶ Vue.jsの説明はとても分かりやすく、初心者にとってイメージできるようになっています。

ライフサイクルとは、Vue.js の「おはよう」から「おやすみ」までの一定のサイクルを表すものです。
ライフサイクルフックは、あらかじめ登録した処理を、Vue インスタンスの特定のタイミングで自動的に呼び出します。こうした処理を割り込ませる仕組みのことを「フック」と呼びます。

いかがでしょうか。
JavaScript 歴が浅い方には「インスタンス」等の用語は、難しく感じるかもしれませんが、公式サイトよりかはずいぶんと理解しやすい説明になっていると思います。
このように丁寧な説明で Vue.js の機能を紹介してくれるので、とても学習しやすい本です。
Vue.js 初心者にはうってつけの書籍ですね!

基礎から学ぶ Vue.js の活用方法

一度「基礎から学ぶ Vue.js」を読んだだけでは、その内容の全てを理解するのは難しいでしょう。
特にコンポーネント・Vue-cli・Vuex・Vue-router などは、なかなか理解が難しい機能で、ハッキリ言って初心者向けではありません。
しかし、これらの機能は初めは覚えなくとも良いけども、実際に開発する時にかなり重要になる機能です。
最初はこれらの章を飛ばして、ディレクティブなどを一通りいじってみることをオススメします。
Vue.js に慣れてきた段階で、コンポーネント・Vue-cli・Vuex・Vue-router に手を出してみると良いでしょう。

基礎から学ぶ Vue.js」を読了し、内容を理解した方は、次にaxios.jsを学習することをオススメします。
axios.js とは ajax 通信のためのライブラリです。
Vue.js のプロダクトで ajax 通信を行う場合、axios.js を使うことが Vue.js 公式ドキュメントで推奨されています。

さて、Vue-cli・Vuex・Vue-router・axios.js をマスターできれば、もう怖いものはありません。
やろうと思えば、なんでも作れます!
どんどん開発して知識を深めていくと良いでしょう。