![??法?カヤックの設?20周年?カヤック展
https://20th.kayac.com/
[ 特設サイト ]](https://image.slidesharecdn.com/ltvue-basic-190115111612/85/Vue-js-Outline-9-320.jpg)
![斎藤?のるろ検
https://rurouni-hokkaido-comic.jp/
[ キャンペーンサイト?ゲーム ]](https://image.slidesharecdn.com/ltvue-basic-190115111612/85/Vue-js-Outline-10-320.jpg)
![ケフカ?パラッツォのパラパラケフカ
https://ffrk.jp/cpn/parapara_kefka/
[ キャンペーンサイト?ゲーム ]](https://image.slidesharecdn.com/ltvue-basic-190115111612/85/Vue-js-Outline-11-320.jpg)
![HERM?S JINGLE GAMES!
https://noel.maisonhermes.jp/ja/#/
[ キャンペーンサイト?ゲーム ]](https://image.slidesharecdn.com/ltvue-basic-190115111612/85/Vue-js-Outline-12-320.jpg)
![https://nitta.studio/
https://trs.mn/portfolio/
[ ポートフォリオサイト ]](https://image.slidesharecdn.com/ltvue-basic-190115111612/85/Vue-js-Outline-13-320.jpg)
![[ Webサービス ]
MORE WORKS
https://www.moreworks.jp/](https://image.slidesharecdn.com/ltvue-basic-190115111612/85/Vue-js-Outline-14-320.jpg)
![[ Webサービス ]
note
https://note.mu/konpyu/n/n9b7bf4343514](https://image.slidesharecdn.com/ltvue-basic-190115111612/85/Vue-js-Outline-15-320.jpg)
Vue.js Outline
- 2. ??紹介 SIer で運?系エンジニアとして勤務。 デジタルハリウッドで Web 制作について学び、 Web ディレクターを経て、 現在は広告系制作会社のフロントエンドエンジニアとして従事。 今この?境
- 3. アジェンダ 1. Vue.js について 3. Vue.js の特徴 5. これから Vue.js をはじめるには 2. Vue.js でつくられたもの (?例) ? 概論によるざっくりイメージをつかんでもらえればとm(_ _)m 4. Vue.js サンプル (カウンターアプリ)
- 4. Vue.js について
- 5. Google で AngularJS を使?した開発に携わった Evan You ?が開発、2014年にリリース。 先?して Facebook が開発した UI ライブラリ React に 影響を受けている模様。 現在のバージョンは2.5、 今年メジャーバージョン3にアップデート予定。 https://ja.wikipedia.org/wiki/Vue.js
- 6. 2018年に Github のスター数が React 超え。 https://zendev.com/2018/06/19/react-usage-beating-vue-angular.html https://qiita.com/a________kaito/items/9e8d86094c3821d0611a
- 7. 同年11?には、?本で初めて Vue.js のカンファレンス 「 Vue Fes Japan 」が開催。 https://vuefes.jp/
- 12. HERM?S JINGLE GAMES! https://noel.maisonhermes.jp/ja/#/ [ キャンペーンサイト?ゲーム ]
- 14. [ Webサービス ] MORE WORKS https://www.moreworks.jp/
- 16. Vue.js の特徴
- 17. Vue.js は、3D グラフィック等の視覚的演出?表現や Web 標準の API を活?したライブラリと違い、 View 層 (表?系) にフォーカスしたフレームワーク。 Web サイトの?た?を作るフロントエンド制作にとって、 開発環境や設計を?据えた技術選定の?つになっています。 React とは記述の違いはあるが?部分の特徴が類似。
- 18. ① リアクティブな更新 「?た?(表?)」と「状態」を分けた記述となっています。 ボタン等のUIイベントから状態が更新されると、状態に紐づ いて表?されている要素も更新に合わせて反映されるように なっています。 表 ? 状 態 更新! ?動的に反映 通常のJSは ?動で記述
- 19. ② 仮想 DOM 通常 JS は DOM(htmlの要素を操作する仕組み) に対する更新処理が 低速とされています。 それに対し、仮想DOM は更新差分を検知して該当部分のみ 更新を反映するため描画が?較的速い仕組みになっています。 Vue.js はバージョン2系から仮想 DOM を採?。 https://qiita.com/risagon/items/019942c60e9c3e6c05a5
- 20. ③ コンポーネント志向 Web サイトは、ページレイアウトからボタンやアイコンの ような単?パーツ等様々な要素で構成されています。 それらのように再利?可能な粒度を「コンポーネント」とい い、Vue.js ではコンポーネント単位で作り込むことが可能で す。それにより、作ったパーツを他のページや別サイトに使っ たり、チーム開発をスムーズに進めることができます。 html/css/js をセット
- 21. ④ プログレッシブフレームワーク Vue.js はページ内の?部要素から、SPA(シングルページ? アプリケーション)や?規模システムの構築と柔軟に扱えるも のになっています。 ルーティングを扱うVue Router、状態管理を?うVuex、 それらをパッケージ化した Nuxt 等、Vue のコア機能とは 別にした機能別関連ツールも増えてきています。
- 22. ⑤ 学習環境(?本語サポート) Vue.js は、基本となるhtml/css/js をおさえておけば、 初?者も?較的導?しやすい設計になっています。 また、?本語の翻訳もされている点や、近年利?する開発者 も増えてきてそれに関連するTipsも公開されていることから、 つまづいても解決できる学習環境が整っています。
- 24. 1. Vue.js をダウンロード 公式サイトよりファイルをダウンロード。 もしくは、サーバにあるライブラリを参照する CDN でも可。 使?する html で読み込みます。 https://jp.vuejs.org/v2/guide/installation.html#lt-script-gt- %E7%9B%B4%E6%8E%A5%E7%B5%84%E3%81%BF%E8%BE%BC%E3%81%BF
- 25. 2. HTML を作成 id=“app”のdiv要素の中で上記のように記述。 Vue には「ディレクティブ」という組み込み機能があります。 今回はクリックイベントを受け取って処理を?う、 v-onディレクティブを使います。 ?重中括弧({{ … }})で囲まれた箇所は、 Vue で定義した状態等を記述、JS の式も使?。 v-on:(イベント名)=“関数名”を使って、 クリックしたら countUp/countDown を実?。
- 26. 3. JS を作成 new Vue({ …}) という基本構?の中に オプションを追加していきます。 el プロパティで Vue の使?範囲を指定 (ここでは id=“app” の要素)。 methods プロパティで、 Vue で使?する関数を定義。 ここで html 側に記述した countUp/countDown を定義します。 状態を data プロパティで管理 ここでは count というキーの値を初期値0に設定。
- 27. 4. 完成 「Count Up」「Count Down」ボタンを押すと、 上部の数値が増減します。
- 28. 通常の JS で記述した場合 html の要素を取得、イベント登録から 状態の更新後?動で反映を?う必要があります。
- 30. ① JS もある程度基礎を固める Vue.js を扱うにあたり固有の API を主におさえる必要があ りますが、それだけでは対応しきれない部分が出てきます。 Vue.js も JS ライブラリの?つであり、ロジックの組み?て には最低限 JS の基礎を習得しておく必要があります。 とはいえ、まだ基礎?がない?でも、Vue を勉強しつつ JS の基礎を固める?JSの基礎を固めながら Vue の練習をする というように双??き来するように勉強していくのも?かと 思います。
- 32. ③ 簡単なサンプルから練習し、使い所を考える 他のJSライブラリと同様、いきなり実戦投?しようとすると ?持ちの知識が少ないことから頓挫しやすいです。 Vue.js は構?をある程度知っておけば、 通常の html/css/js ベースで使えるものの、作りもののボ リュームやレベル次第なところがあります。 先の公式ドキュメントや参考書をベースに、まずは簡単なサ ンプルを作って、?た?と状態の管理や状態の更新フローを 理解した上で、実案件やポートフォリオ等で実際に使ってみ ることをオススメします。
- 33. ④ サンプル事例から学ぶ Vue.js で作られた事例を紹介しているサイトや、 公式サイトでも Vue を使ったサンプルが公開されています。 具体的に作りたいもののイメージや、サンプルにあるコード の書き?を学んでいくのも良いです。 ?公式サイトサンプル (https://vuejs.org/v2/examples/) ?Vue.js Examples (https://vuejsexamples.com/) ?made with vue.js (https://madewithvuejs.com/)
- 34. ありがとうございました