Vue.js入門

はじめに

Vue.jsについて優しく説明いたします。

昔Webシステム開発技術が始まった時、バックエンドではPHPやRubyを使い直接OracleやMySQLの内部のデータベースにSELECT,INSERT,UPDATE,DELETEを実行してた時代でした。

それが今はSaasの時代になり、内部データを直接弄るだけではなく、
フロントバックエンドの合化、外部連携の柔軟性が整ってる便利なREST APIファースト開発が主になり、フロントで「サイト更新の速度」や直感的なリ「アルタイムの更新」がサイト品質に関してもはや欠かせない物になりました。
参考：APIファーストで開発する7つのメリット

やりたいこと：【サイト更新速度の向上、直感的なアルタイムの更新】
バックエンドではサーバーに対するリクエストはAPIでプロパティを渡し、
フロントではJavascriptを使い、最小限の範囲で非同期にVirtual DOMを更新する事が現在APIファーストの開発では重要な事です。

参考：
　　JavaScript初心者でもすぐわかる！DOMとは何か？
　　VirtualDOMの仕事ってなに？表示速度がはやい理由

何故Vue.js

理由は比較的に簡単

・Javascriptがあまり分からない初心者でも学べるJavascriptフレームワーク
・単一ファイルコンポーネントで、HTML、CSS、Javascriptが同一のファイルで管理できる。

もちろん、自分に合ったJavascriptフレームを選択するのが一番ですね。　　
参考：
　　JavaScript: フレームワーク React/Vue/Angularについて
　　Vue・React・Angularのパフォーマンス比較検証

始めよう！Vue.js

Vue.jsって何？

・Webアプリケーションでユーザーインターフェースを構築するため、オープンソースのJavascriptフレームワーク。
・Axios等他のJavascriptライブラリが導入できる。
・高機能なシングルページアプリケーション（SPA）を構築することができる。
・vue-routerやvue-validation,vuex等組み合わせることで、大規模なWebアプリ開発のニーズまでサポートする統合的な環境を提供し、作者Evan氏の「Progressive Framework」の概念を活かす。
・ECMAScript 5をベースに、現在のブラウザーではほぼ使える。
　　※ES6で書くと、動かない場合があります。（特にIE）
参考：
　　　作者Evan氏のVue.js Progressive Framework
　　　ECMAScript 5
　　　ES5とES6の違いをまとめてみた

Vue.jsのインストール

こちらについては以下の公式記事を参考してください。
　　　Vue.jsのインストール

実際の開発ではnpmでインストールしますが、練習用はCDNでもできます。

 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"> 
 </script>

ドキュメント

Vue.jsは日本語版で、内容は充実。
　Vue.jsの公式マニュアル

関連記事:

Nuxt.js、Vue.jsによるToDoのサンプル ダッシュボード(ADMIN) Nuxt.js -jsonからEXCELファイル作成  Vue.js テクニック 簡単な例で始めるVue3でTypeScript入門 Vue.jsによるカート・サンプル Vue3でTypeScript実践 ECサイト構築例 Nuxt.js + Vue.js Vue.jsによるChat・サンプル Vue.jsによるTable・サンプル Vue.jsによるChart-Dashboard・サンプル LP構築例 Nuxt.js + Vue.js ダッシュボード Vue.js を使って WP REST API で取得した他サイトの投稿データを自サイトに表示する 管理画面を使わず、Vue.js と WP REST API を使って、Webページから直接記事データ等を更新する WP REST API でアドバンストカスタムフィールドの値を取得する WordPress製 売上管理システム （専用テーマ販売）の事例 TypeScript入門 TypeScript実践