【再増枠】Vue.js入門 in CODE BASE

▼内容

ハンズオン形式でVue.jsのインストールから簡単なWebアプリ作成まで行います。

▼Vue.jsとは

Vue (発音は / v j u ː / 、 view と同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。

▼タイムスケジュール

▼必要なもの

• PC

鈴木 孝之(株式会社Re:Build)

1990年神奈川県生まれ。多摩大学経営情報学部卒。 文系の学部を卒業後、2013年に東京のITベンチャー企業にシステムエンジニアとして入社し、プログラミングを習得。 その後、株式会社フルスピードにwebエンジニアとして入社。フルスピードでは、大規模な広告配信サービスの管理画面開発を担当し、サーバサイド(php)からフロントエンド(JavaScript)まで幅広い開発に従事。また、社内では新卒研修も担当し、新人育成カリキュラムの作成や指導に携わる。2017年11月に沖縄で起業し、株式会社Re:Buildを設立。東京の企業様からの開発案件を請けつつ、自社Webサービスを開発中。 開発で使用する技術はPHP(Symfony2・Laravel5・CakePHP3)、JavaScript(AngularJS・Angular2～4・TypeScript・backbone.js)など。

講義内容 Vue.js入門

01 Vue.jsを使ってみよう

• 公式サイトの確認
• index.htmlの作成
• main.jsの作成
• Vue.jsの読み込み
• styles.cssの作成

02 Vue.jsの基本をおさえよう

• 双方向データバインディング
• v-model

03 ToDoアプリを作ってみよう

• データの用意
• v-for

04 アプリの見た目を整えよう

• アプリのスタイリング
• ブラウザでの確認

05 v-onでイベントを設定しよう

• addItemの実装
• v-on
• prevent

06 ToDoを削除できるようにしよう

• deleteItemの実装
• 動作確認

07 完了状態を管理してみよう

• isDoneの追加
• 既存コードの修正

08 v-bindでクラスを操作しよう

• チェックボックスの追加
• v-bind

09 v-ifで条件分岐をしてみよう

• v-show
• v-ifで条件分岐する際の注意点

10 算出プロパティを使ってみよう

• 算出プロパティ
• filter

11 完了したToDoを一括削除しよう

• Purgeボタンの作成
• purgeの実装
• リファクタリング

12 LocalStorageでデータを永続化させてみよう

• LocalStorage
• watch
• deep watcher

13 LocalStorageからデータを読み出してみよう

• LocalStorageの確認
• mounted

14 Componentに機能をもたせよう

• Componentの登録
• 動作確認

15 いいね！ボタンを実装してみよう

• coutUpメソッドの実装
• dataの用意

16 Propsで値を渡してみよう

• props
• デフォルト値や型の指定

17 $emitを使ってイベントを発火させよう

• Componentから親要素へのデータ渡し
• $emit