Vue.js Hands-on
本資料は 日本システム技研 | Japan System Laboratory で行った、Vue.jsの社内ハンズオン資料となります。
今日のゴール
今日のハンズオンの目的は以下のようになります。
- フロントエンドフレームワークについて知る
- Vue.jsを導入する
- Vue.jsの基本的な構文を理解する
- Vue.jsで簡単なアプリケーションを作成する
vue-cli というスキャフォールド（雛形作成ツール）を使うとVue.jsアプリケーションを簡単に構築できますが、一方で個人の開発環境に依存するトラブルが起きやすいという観点から、今回は使いません。
JavaScript について
JavaScript は唯一、ウェブブラウザで動作する言語です。
Javaとは全く異なる言語です。
従来ウェブアプリケーションは、画面で実行された処理をサーバ側へ送信→サーバ側で処理→処理結果を画面に描画 というようなものが主流でした。
したがって、 JavaScript は画面に簡単な動きをつけるための言語として扱われてきました。
しかし、ajax（非同期通信）の登場や、マシンスペックの向上にともない、ブラウザ側で実行可能な処理が増えてきました。
昨今ではユーザ体験向上の為、サーバを介さず、 JavaScript のみでコンテンツ表示を切り替える SinglePageApplication が増えています。
ポイント
- JavaScript は唯一、ウェブブラウザで動作する言語
JavaScript と ES(ECMAScript)について
JavaScript について調べていると、 ES6 や、 ECMAScript 2015 (エクマスクリプト) のような表記を目にするかもしれません。
先述のとおり、 JavaScript は唯一、ウェブブラウザで動作する言語です。
よって、ブラウザの実装によって挙動が変わってしまうという問題がありました。
現在では Ecma Internatinal という標準化団体によって JavaScript の仕様が策定されています。
策定されている仕様のことを ECMAScript といいます。
ECMAScript は1年ごとにリリースしていく予定のため、仕様の年式を表すために ECMAScript 2015 , 2016 のようなprefixがつけられます。
ES6 は ECMAScript 6th edition を指しており、これは ECMAScript 2015 と同義です。
正式名称は ECMAScript 2015 、通称は ES6 。ややこしいですが、歴史的な経緯があるようです。
現在のstable版の仕様は、 ECMAScript 2015 です。
ポイント
- ECMAScript 2015 = ES6
- JavaScript →実装, ECMAScript →仕様
- JavaScript はブラウザ実装によって挙動が変わる
- 2019/1 時点での安定版は ECMAScript 2015
AltJS について
AltJS (Alternative JavaScript)についても触れておきます。
AltJS は、そのままではブラウザで動きません。
基本的には専用のコンパイラを介して、ブラウザで動作する JavaScript に変換することが想定されています。
設定やコンパイルが面倒な分、 JavaScript の仕様ではカバーできない領域をカバーすることができます。
例えば、Microsoftが開発している TypeScript は型が導入された AltJS です。
フロントエンドフレームワークについて
昨今のウェブ開発において、React や Vue.js 等の JavaScript製のフレームワークの話題を目にしない日はありません。
バックエンドの開発においてフレームワークを利用するように、フロントエンドの開発においても、複雑な画面制御、ダイナミックな画面遷移を実現するためにフレームワークを利用します。
フレームワークはプログラムの基本的な骨組みを提供してくれるため、開発は遥かに容易になります。
代表的なフレームワークを挙げておきます。
ReactVue.jsAngularJS
Vue.js について
Vue.js は「プログレッシブフレームワーク」を自称するフレームワークです。
状況に応じて、少しづつ適用していけるように設計されています。
小規模開発、大規模開発、どちらでも可用性のあるフレームワークといえます。
特徴
一般的に言われる Vue.js の特徴は以下です。
- 学習コストが低い
- SPAの開発が容易
- コミュニティやドキュメントが充実している
- コンポーネントを扱う(今回は範囲外)
困ったときは
先述のとおり、 Vue.js はコミュティやドキュメントが充実しています。
困ったときは公式ドキュメントやフォーラム、日本のユーザグループのSlackに入ってみることがおすすめです。