Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a Vue.js Outline
Semelhante a Vue.js Outline (20)
Mais de Kei Yagi
Último
Último (7)
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. ありがとうございました