JavaScript講座講師
野中文雄 ノナカ フミオ
ソフトウェアトレーナー、テクニカルライター、オーサリングエンジニア
野中文雄 のVue.js入門講座
Vue.jsは、ユーザーインタフェースをつくるためのプログレッシブフレームワークです。画面の表示（View）に絞った操作を扱います。jQueryでは手間がかかるようなインターフェイスも、簡単にわかりやすく組み立てられます。ECMAScript 6は、正規の名称をECMAScript 2015と呼び、JavaScriptがもとづく標準仕様の最新バージョンです。2009年に標準化されたECMAScript 5が2011年に 5.1に改訂されてから、はじめての重要なアップデートになります。
このコースはJavaScriptの文法の基礎を学んだ方が対象です。Vue.jsライブラリの設定と簡単なデータバインディングのやり方から始め、データや要素の動的な書き替え、ユーザーによるデータの操作などひとつずつ段階を踏んでコードを書き進めながら、Todoリストのアプリケーションをつくります。構文はECMAScript 6にもとづき、新しいキーワードや記述法、それらの利点などを具体的なJavaScriptコードで解説します。
Vue.jsは手軽に始められ、小回りが効くとともに、シングルページwebアプリケーション（SPA）をつくるときにも使える今注目の技術です。また、ECMAScript 6はモダンブラウザで実装が進み、これからの開発にはぜひ知っておきたい知識といえます。
修了目標
本講座の受講修了時に、以下のスキル習得を目指します。
- データバインディングができる
- データやDOM要素を動的に扱える
- 基本的なディレクティブが使える
- メソッドや算出プロパティを定められる
- ECMAScript 6の基本的な構文の使い方がわかる
カリキュラム概要
- Vue.jsを始める
- Vue.jsのインストールと設定
- 見出しと入力フィールドを加える
- データを要素に表示する
- データと要素の値をバインディングする
- JavaScriptコードを<head>要素に書く
- 要素のclass属性を動的に変える
- vm.$mount()メソッドでVueインスタンスを要素に関連づける
- 入力フィールドにバインディングを定める
- バインディングでクラス属性を動的に変える
- データから動的にリストをつくる
- 項目のデータを複数にする
- テキスト入力フィールドのバインディングを改める
- フィールドに入力したテキストを動的に項目として加える
- 入力フィールドに追加ボタンを加える
- 入力フィールドの項目をデータに加える
- Vueの省略記法とECMAScript 2015のスプレッドの構文を使う
- 項目を数えて表示する
- 項目の数を示す
- 条件に合ったデータを数えて返す
- 算出プロパティを使う
- Array.prototype.reduce()メソッドで配列を集計する
- 項目を調べてデータから削除する
- ボタンを加える
- 条件にしたがってデータを除く
- 項目に削除ボタンを加える
- ボタンクリックした項目をデータから除く
- 表示する項目をフィルタで切り替える
- フィルタ切り替えボタンを加える
- 選択したボタンのスタイルをクラスバインディングで変える
- フィルタでリスト項目を切り替える
- ハッシュの扱いを点検する
- フィルタをボタンで切り替える
- フィルタの切り替えの設定を確かめる
- 選択したボタンのスタイルをクラスバインディングで変える
＊カリキュラムの進度および内容は、受講者全員の理解度・習得度によって変更される場合があります。
- 使用アプリケーション
- Dreamweaver CC + JavaScript + Vue.js
- 講師
- 野中文雄
- 定員
- 6名
- 対象
- HTMLとCSSの基礎知識があり、変数や関数を用いた基本的なJavaScriptコードが書ける方