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()メソッドで配列を集計する
- 項目を調べてデータから削除する
- ボタンを加える
- 条件にしたがってデータを除く
- 項目に削除ボタンを加える
- ボタンクリックした項目をデータから除く
- 表示する項目をフィルタで切り替える
- フィルタ切り替えボタンを加える
- 選択したボタンのスタイルをクラスバインディングで変える
- フィルタでリスト項目を切り替える
- ハッシュの扱いを点検する
- フィルタをボタンで切り替える
- フィルタの切り替えの設定を確かめる
- 選択したボタンのスタイルをクラスバインディングで変える
＊カリキュラムの進度および内容は、受講者全員の理解度・習得度によって変更される場合があります。
- 使用OS
- macOS X
※普段使用しているOSと異なっている場合でも講座内容の習得に大きく影響はありません。
PCの持ち込みも可能です。講座内で使用するソフトウェアの設定、環境構築をしておくようお願いします。
- 使用アプリケーション
- Dreamweaver CC + JavaScript + Vue.js
- 講師
- 野中文雄
- 定員
- 6名
- 対象
- HTMLとCSSの基礎知識があり、変数や関数を用いた基本的なJavaScriptコードが書ける方
- 会場
- ロクナナワークショップ
東京都渋谷区神宮前1-1-12 原宿ニュースカイハイツ 204号室
JR山手線「原宿駅」・東京メトロ副都心線「北参道駅」から徒歩7分
受講料
29,800円（税込み）
受講料には、テキストやノートPCの使用料金などを含んでおります。入会金などは一切必要ありません。
開講日・お申し込み
この講座には現在募集日程がありません。次回開講日程は 67WSカレンダー共有 などでご確認ください。また、企業研修などで開講をご希望の場合はお気軽に ご相談 ください。
受講希望の方は 受講規約 および よくある質問 のページを閲覧していただき、ご了承の後にお申し込みフォームからお申し込みください。また お申し込みの流れ もご参照ください。
受講対象レベルチェック問題
以下の問題はJavaScriptで書かれたコードです。それぞれのコードを実行した場合の問 にお答えください。
＊全問正解が受講の必須条件ではなく、受講対象レベルの具体的な目安とお考えください。
問1： 変数aの値はいくつになりますか。
var a = 2;
a = getSquare(a);
function getSquare(value) {
var answer = value * value;
return answer;
}問2： 変数nの値はいくつになりますか。
var n = 0;
for (var i = 1; i < 3; i++) {
n += i;
}問3： 変数hasElementの値はどうなりますか。
var _array = [];
var hasElement;
if (_array.length > 0) {
hasElement = true;
} else {
hasElement = false;
}答1： 4
答2： 3
答3： false
