まだ間に合う「Vue」勉強会資料

Transcript

1. Vue勉強会
   今日からなれるVueエンジニア！
   

   View Slide

2. プロフィール
   ● 布村武大
   ● エッグシステムの社員
   ● コンサルティングエンジニア
   ● 具体的には、以下の仕事をしている
   ○ PM及びフルスタックエンジニア
   ■ AWS
   ● Docker
   ■ Laravel, Rails
   ■ Vue, Nuxt
   ○ ITコンサルタント
   

   View Slide

3. この勉強会の対象
   ● こんなことを思っている方
   ○ Vueの記事読んでいるけど、意味がわからない
   ○ なんとなく、Vueに触っているけど、よくわからない
   ● マニュアルではない、知識を勉強しにきた
   ● Vueの現場に入ったけど、全然わからない
   ● 現場で、Vueを導入したいけど、どうすればいいの？
   ● SPAとか、JAMstackとか、よくわからないけど、楽しそう
   

   View Slide

4. この勉強会で学べること
   ● Vueの導入パターン
   ● Vueの大枠の知識
   ● Vueを実装する上での癖
   ● SPAを作る上でのVueのポイント
   

   View Slide

5. みなさんの勉強会の目的は
   なんでしょうか？
   

   View Slide

6. Vue学習の難点
   ● qitaなどに転がっているVueの解説は、node.jsとJavaScriptが混在している
   ○ 導入方法によって、 node.jsでも、JavaScriptでも動かせる
   ○ 上記の説明がなく、 Vueの解説が始まる
   ○ 初心者向けの記事は特に、混在しているものが多い
   ● Vueは癖が強いフレームワークになる
   ○ 癖により厄介なバグが発生する
   ○ この癖にフォーカスした解説は少ない
   

   View Slide

7. 本日のアジェンダ
   1. Vueの設計思想
   2. Vueの基本機能
   3. コンポーネントの基本
   4. 代表的なプラグインの紹介
   5. SPAという選択肢
   

   View Slide

8. 1. Vueの設計思想
   

   View Slide

9. そもそも、Vueとは？
   ● JavaScriptのフレームワーク
   ● コンポーネント指向に対応した言語
   ● プログレッシブフレームワーク
   ○ プロジェクトの規模やフェーズにあわせた使い方ができる
   ○ 対義語として、フルスタックフレームワーク
   ● Laravelの標準ライブラリになったため、一気に広まった
   

   View Slide

10. コンポーネント指向とは
    ● UI / UXをコンポーネント(部品)単位で設計しようという考え方
    ○ 現状は、画面遷移図など、画面単位の設計が多い
    ● コンポーネント指向には、以下のメリットがある
    ○ デザインに一貫性を強化
    ○ マークアップの工数削減
    ● コンポーネント指向においては、画面という単位は存在しない
    ○ コンポーネントの集合としての画面はあるが、画面を定義するのは難しい
    ● コンポーネント指向の具体論として、
    Atomic Designがある
    ○ Object指向でいう「継承」「多態化」「カプセル化」的な定義をした考え方
    

    View Slide

11. Vueの導入例
    ● CDN版を参照する
    ○ とりあえず、Vue使う際にオススメ
    ○ スクリプトタグで、 Vueを参照するだけで使える
    ● webpackでコンパイルする
    ○ やや中規模になってきた段階でオススメ
    ● nuxtの導入
    ○ 多人数でフロントエンドを開発するなら、オススメ
    ● vue-cliによる導入
    ○ 細かいカスタマイズをしながら、開発するならオススメ
    

    View Slide

12. 2. Vueの基本機能
    

    View Slide

13. ● Vueは基本的に一つのインスタンスである
    ○ 複数のVueインスタンスを生成することは可能だが、バグの元になる
    ● elで指定した要素にVueはマウントする
    ○ 1プリケーションに 1Vueのイメージ
    ● Vueインスタンス内で、パッケージなどを登録する
    ○ 規模が大きくなると、 Vueインスタンスが大きくなる
    ○ 大きくなってきたタイミングで、 webpackなど別のサービスに切り替えるといい
    Vueの基本
    

    View Slide

14. 細かい環境設定などは特に不要で、このコードだけで vueは動作する
    Vueの基本的なコード
    
    
    {{ msg }}
    
    
    <br/>new Vue({ el: '#app', data() { return { msg: 'testです。' } } })<br/>
    
    

    View Slide

15. 仮想DOM構造について
    ● VueはDOMを描画してくれる
    ○ HTMLには、なにも書いていなくてもよい
    ● DOMと同様にVueも階層構造になっている
    ○ 1つのVueインスタンスに、複数の子インスタンスを登録できる
    ○ bodyタグが1ファイルに1つなのと、同様のイメージ
    ● 1つのVueインスタンスは、1つのDOM構造を持てる
    ○ 最終的なHTMLはVueが描画したHTMLになる
    ● Vueのコードがどれだけ増えても、ルートインスタンスは
    1つである
    

    View Slide

16. TIPS: DOMとは？
    ● Document Object Modelの略
    ● 要するに、タグのこと
    ○ ブラウザは、タグの 1つ1つをObjectとして、読み込んでいる
    ○ これにより、CSSスタイルをあてることができる
    ● DOM構造はnodeとelementからなる
    ○ 全部のタグはツリー構造になっているということ
    ○ タグは自分自身の情報と、親子関係の情報の２つを持っている
    

    View Slide

17. bodyタグ内には、divタグ以外、何も書かれていない
    Vueの仮想DOM構造
    
    
    <br/>new Vue({<br/>el: '#app',<br/>template: '<div><vue-header/><div>ルートインスタンス</div><vue-footer/></div>',<br/>components: {<br/>VueHeader: { template: '<header>ヘッダー</header>' },<br/>VueFooter: { template: '<div>フッター</div>' }<br/>}<br/>})<br/>
    

    View Slide

18. がなくなり、別のタグになっている
    Vueにより描画された後のDOM構造
    
    ヘッダールートインスタンスフッター
    
    　new Vue({<br/>el: '#app',<br/>　　template: '<div><vue-header/><div>ルートインスタンス</div><vue-footer/></div>',<br/>components: {<br/>VueHeader: { template: '<header>ヘッダー</header>' },<br/>VueFooter: { template: '<div>フッター</div>' }<br/>}<br/>})
    

    View Slide

19. jQueryとの違い
    ● Vueは自分自身でDOM構造を持っている
    ○ jQueryはあくまでクエリ、 DOM構造自体は持っていない
    ○ jQueryは、既存のDOMの書き換えが得意
    ○ 大規模なDOMの書き換えは、jQueryだと厳しい
    ● 例えるなら、jQueryはポインタで、Vueはオブジェクトになる
    ○ そもそも、VueはDOM自体は書き換えない
    ● VueとjQueryは混ぜるな危険
    ○ Vueでは、直接のDOM操作を非推奨にしている
    

    View Slide

20. 3. コンポーネントの基本
    

    View Slide

21. 単一ファイルコンポーネント
    ● webpackを用いて、Vueを実装する場合、使う機能になる
    ○ 正確には、vue-loaderというwebpackのプラグインの持つ機能である
    ● .vueの拡張子でVueのコンポーネントを定義することができる
    ● html、css、jsを1つのファイルにまとめたもの
    ○ まとめることにより、管理が楽になる
    ○ スタイルシートを sassなどの言語で書くことができる
    ■ webpackの設定は必要
    ● nodeやtype scriptの記法で、vueを書くことができる
    

    View Slide

22. templateがhtml、scriptがjs、styleがcssになる
    単一ファイルコンポーネントの実装例
    
    
    
    <br/>import VueHeader from '~/VueHeader.vue'<br/>import VueFooter from '~/VueFooter.vue'<br/>export default {<br/>compoents: [VueHeader, VueFooter]<br/>}<br/>
    
    

    View Slide

23. TIPS：nodeの記法について
    ● 単一ファイルコンポーネントになる
    export defaultやimportはnodeの記法
    ● exportとimportは対になっている
    ● exportはファイル内で定義したものを出力している
    ● 以下のコードはexport defaultの内容をHogeHoge変数に格納している
    ○ import HogeHoge from ‘hogehoge.js’
    

    View Slide

24. export default は、単純にimportする値を定義している
    export importの例
    // in test.js
    export default {
    export: 'test'
    }
    // in import.js
    import test from './test.js'
    // 上記のコードは以下と同じ
    test = { export: 'test' }
    

    View Slide

25. ● コンポーネントは以下のキーを持つ
    Objectになる
    ● components
    ● props
    ● data
    ● computed
    ● watch
    ● methods
    Vueコンポーネントのデータ構造
    

    View Slide

26. components, props, data, computed
    import child from './child.js'
    export default {
    components: { child }, // 子コンポーネントを定義
    props: { // 親から渡される値を定義
    value: { type: String } // 型指定が可能
    },
    data() { return { data: '初期値' } }, // コンポーネント自体が持つ値
    computed: {
    isInitial() { return this.data === '初期値' } // getterを定義
    }
    }
    

    View Slide

27. methods, watchの例
    export default {
    data() { return { value: '初期値', init: true } },
    watch: {
    value() { // 値が変更した際の動作を定義できる
    this.setInit(this.value !== '初期値')
    }
    },
    methods: { // メソッドを定義できる
    setInit(value) { this.init = value }
    }
    }
    

    View Slide

28. ● Vueではpropsで渡された値は変更できない
    ● emitを使い、親のデータを変更する
    ○ これにより、親子間のデータ不整合が起きないようにする
    ○ 書き方によっては、 propsを直接変更できる
    ■ バグになるので、要注意
    ● emitはイベントを投げている
    ○ emitとは、発生の意味
    ● 親コンポーネントは、イベントに対応するメソッドを定義できる
    emit / propsによる親子関のデータ連携
    

    View Slide

29. porps / emitの実装例
    
    //@updateでchildからupdateイベントを受け取るように設定している
    
    
    <br/>import child from 'child.js'<br/>export default {<br/>data() { return { data: 'props' } },<br/>methods: { setData(data) { this.data = data } }<br/>}<br/>
    

    View Slide

30. porps / emitの実装例
    
    // clickもイベントになる
    
    
    <br/>export default {<br/>props: { data: { type: String } },<br/>// $emitでupdateイベントを起こしている<br/>methods: { emitUpdate(value) { this.$emit('update', data) } }<br/>}<br/>
    

    View Slide

31. 制御構文
    ● Vueには描画用の制御構文がある
    ● if文としての、v-ifがある
    ○ 表示/非表示の切り替えができる
    ○ 似たようなもので、 v-showがある
    ■ v-showはdisplay: none;を当てる
    ■ v-ifはDOM自体を消す
    ● v-forは繰り返しで描画できる
    ○ カレンダーや一覧画面などで使える
    

    View Slide

32. v-ifの実装例
    
    表示中 // 切り替えボタンで表示/非表示を変更できる
    非表示 // elseも可能
    切り替え
    
    <br/>export default {<br/>data() { return { display: false } },<br/>methods: { switch() { this.display = this.display } }<br/>}<br/>
    

    View Slide

33. v-forの実装例
    
    項目{{ number }}
    追加 // 追加ボタンで項目が増える
    削除 // ロジックも書ける
    
    <br/>export default {<br/>data() { return { numbers: 100 } }<br/>}<br/>
    

    View Slide

34. 4. 代表的なプラグイン
    

    View Slide

35. 代表的なプラグイン
    ● Vuex
    ○ Vueによるfluxパターンの実装用プラグイン
    ○ props / emitの関係が深くなると導入
    ● Vue Router
    ○ URLからVueのコンポーネントを変更できるようになる
    ○ 主として、SPAを作る際に使う
    ● vue-meta
    ○ Vue Routerの拡張プラグイン
    ○ URLが変更した際に、メタタグも変更する
    

    View Slide

36. TIPS：Fluxパターンについて
    ● MVVMなどのパターンには問題があった
    ○ Model-ViewModel-View
    ○ 1画面に複数ViewModelが欲しい場合がある
    ○ 複数のViewModelに依存関係があると、同期などがややこしくなる
    ● Fluxパターンは以下の構成になる
    ○ Action->Dispatcher->Store->View->Action...
    ○ Storeがグローバル変数になる
    ○ Dispatcherが変更を制御する
    ● Fluxパターンは以下のメリットがある
    ○ グローバル変数の変更に DBでいうトランザクションを使えるようになる
    ○ Dispatcherから変更ログを終えるようになる
    

    View Slide

37. 5. SPAという選択肢
    

    View Slide

38. SPAとは？
    ● Single Page Applicationの略
    ● htmlは1枚しかなくても、複数のページを持つ
    ○ Vueなどのjsによりページを変更する
    ● jsで画面遷移するため、UXを向上できる
    ● jsだけで完結するロジックであれば、オフラインでも使用できる
    ○ jsやcssをキャッシュさせることでオフラインでも使用可能にする
    ○ pwa（Progressive Web Applications）と呼ばれる技術になる
    

    View Slide

39. SPAの問題点
    ● 初期ローディングが遅くなる
    ○ 1ページ内に全ページが入っていると考えてもらえばいい
    ○ jsの容量は大きくなるため、どうしてもサイトは重くなる
    ● SEO対策に弱い
    ○ jsの動作が終わるまで、メタタグが変わらない
    ○ メタタグの読み込みはクローラーが行うため、ブラウザとは違う挙動をする
    

    View Slide

40. ● Server Side Renderingの略
    ● サーバー側で、jsを動作させてから、htmlを送る
    ● 実現方法として、以下がある
    ○ サーバーにnode.jsをインストールし、 Vueをnode.jsで動作させる
    ○ nuxt.jsを使い、各URLに対応するhtmlを予め作っておく
    ○ ある程度のhtmlはphpなどのプログラムで描画する
    SSRという解決方法
    

    View Slide

41. その他の解決方法
    ● SEO対策について
    ○ FaaS（Function as a Service）を使う
    ■ Aws Lamdaなど
    ○ FaaSでクローラからのアクセスかどうかを切り分ける処理を書く
    ○ クローラならば、 FaaS内でレスポンスを返す
    ○ その他ブラウザならば、 htmlを返す
    ● 初回ローディングについて
    ○ Vueのファイルを分割する
    ○ 遅延ローディング機能を使う
    ■ Promiseにより、ファイルを importする機能が存在する
    ■ const Foo = () => import(‘./Foo.vue’)
    

    View Slide

42. 6. Vueを実装する
    

    View Slide

43. Vueを実装してみよう
    ● VueのCDN版をscriptタグで参照する
    ● ハンバーガーメニューを実装してみる
    ○ ボタンを押すと、表示されるハンバーガーメニュー
    ● プルダウンを実装してみる
    ○ 文字列を打ち込むと絞り込めるプルダウン
    ○ 自由入力は不可
    

    View Slide