概要

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はモダンブラウザで実装が進み、これからの開発にはぜひ知っておきたい知識といえます。

trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"React js","geo":"JP","time":"2016-12-03 2017-12-03"},{"keyword":"Angular js","geo":"JP","time":"2016-12-03 2017-12-03"},{"keyword":"Vue js","geo":"JP","time":"2016-12-03 2017-12-03"},{"keyword":"Backbone js","geo":"JP","time":"2016-12-03 2017-12-03"},{"keyword":"Knockout js","geo":"JP","time":"2016-12-03 2017-12-03"}],"category":0,"property":""}, {"exploreQuery":"date=2016-12-03%202017-12-03,2016-12-03%202017-12-03,2016-12-03%202017-12-03,2016-12-03%202017-12-03,2016-12-03%202017-12-03&geo=JP,JP,JP,JP,JP&q=React%20js,Angular%20js,Vue%20js,Backbone%20js,Knockout%20js","guestPath":"<a href="https://trends.google.co.jp:443/trends/embed/">https://trends.google.co.jp:443/trends/embed/</a>"}); JavaScriptフレームワークの人気度の動向（Googleトレンド）

修了目標

本講座の受講修了時に、以下のスキル習得を目指します。

1. データバインディングができる

2. データやDOM要素を動的に扱える

3. 基本的なディレクティブが使える

4. メソッドや算出プロパティを定められる

5. ECMAScript 6の基本的な構文の使い方がわかる

カリキュラム概要

1. Vue.js入門 01: Vue.jsを始める

• Vue.jsのインストールと設定
• 見出しと入力フィールドを加える
• データを要素に表示する
• データと要素の値をバインディングする
• JavaScriptコードを要素に書く

2. 要素のclass属性を動的に変える

• 入力フィールドにバインディングを定める
• バインディングでクラス属性を動的に変える

3. データから動的にリストをつくる

• 項目のデータを複数にする
• テキスト入力フィールドのバインディングを改める

4. フィールドに入力したテキストを動的に項目として加える

• 入力フィールドに追加ボタンを加える
• 入力フィールドの項目をデータに加える
• Vueの省略記法とECMAScript 6の構文を使う

5. 項目を数えて表示する

• 項目の数を示す
• 条件に合ったデータを数えて返す
• 算出プロパティとメソッドの違い
• forループに替えてArray.filter()メソッドとアロー関数式を使う

6. 項目を調べてデータから削除する

• ボタンを加える
• 条件にしたがってデータを除く
• forループの処理をArray.filter()メソッドで書き替える

7. データを項目ごとに削除する

• 削除ボタンを加える
• クリックした項目をデータから除く
• Array.filter()メソッドで要素を除く

＊カリキュラムの進度および内容は、受講者全員の理解度・習得度によって変更される場合があります。

使用OS

macOS X

※普段使用しているOSと異なっている場合でも講座内容の習得に大きく影響はありません。 PCの持ち込みも可能です。講座内で使用するソフトウェアの設定、環境構築をしておくようお願いします。

使用アプリケーション

Dreamweaver CC + JavaScript + Vue.js

講師

野中文雄

定員

6名(各種申込みサイト合計)

対象

HTMLとCSSの基礎知識があり、変数や関数を用いた基本的なJavaScriptコードが書ける方

料金

29,800円（税込み） 各種割引あり

会場

東京・原宿　ロクナナワークショップ

募集締切後のお申込み、お問合せ

本サイトでのお申し込みは、講座開催の1週間前に締め切られますが ロクナナワークショップ内講座概要ページからは開催前日までお申込みいただけます。

受講規約など

受講希望の方は受講規約およびよくある質問のページを閲覧していただき、ご了承の後にお申し込みください。