Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vue.jsのソースコードリーディング事始め

Suguru Ohki
December 11, 2019

 Vue.jsのソースコードリーディング事始め

Vue.jsのVersion3にあたるvue-nextのソースコードが公開されたのを受けて、ソースコードリーディングにあった方が良い知識をまとめてみました。Yumemi.vue #4にて登壇させていただいた時の内容ほぼそのままになります。

Suguru Ohki

December 11, 2019
Tweet

More Decks by Suguru Ohki

Other Decks in Programming

Transcript

  1. vue-nextのソースコード読み始め

    View full-size slide

  2. フロントエンドエンジニア
    Vue.js, Nuxt.js
    Laravel
    スー
    Suguru Ohki
    @gurusu_program
    酒は人生

    View full-size slide

  3. https://techbowl.co.jp/techtrain/

    View full-size slide

  4. 1. Vue.jsちょっとかけるようになってきたぜ
    2. 他の言語からVue.jsに移ってきたのである
    3. Nuxt.js書いているのである
    4. vue-next気になっているぜ
    今回のお話のターゲット

    View full-size slide

  5. Vue.jsって良いフレームワークですね。

    View full-size slide

  6. vue-nextのソースコード読み始め

    View full-size slide

  7. 「vue-next」って何?

    View full-size slide

  8. 乱暴にいうとVersion 3

    View full-size slide

  9. 何も言わずにClone

    View full-size slide

  10. わかっておくと良いこと

    View full-size slide

  11. 1. 利用されるライブラリ
    2. ディレクトリ構成
    3. どこを読むと業務に役立つのか

    View full-size slide

  12. 1. 利用されるライブラリ
    2. ディレクトリ構成
    3. どこを読むと業務に役立つのか

    View full-size slide

  13. ライブラリ名 役割
    instanbul テストのカバー率
    consola error debugなどの出力調整
    rollup 複数ファイルのJavaScriptを、ひ
    とつにする。バンドル。

    View full-size slide

  14. それぞれがどう使われるのか

    View full-size slide

  15. elseがカバー率計算から除外される

    View full-size slide

  16. この色付きのコンソールとか頑張ってくれてる。

    View full-size slide

  17. ブラウザ側の出力もそう。

    View full-size slide

  18. バンドル。以上。

    View full-size slide

  19. (面倒くさいとか
    そういうのではない)

    View full-size slide

  20. 1. 利用されるライブラリ
    2. ディレクトリ構成
    3. どこを読むと業務に役立つのか

    View full-size slide

  21. vue vue-next

    View full-size slide

  22. 1. 利用されるライブラリ
    2. ディレクトリ構成
    3. どこを読むと業務に役立つのか

    View full-size slide

  23. ディレクトリの中の読むとこ

    View full-size slide

  24. vue vue-next

    View full-size slide

  25. vue vue-next
    ソース

    View full-size slide

  26. vue vue-next
    便利な
    やつ

    View full-size slide

  27. 実際読んでみるとどうか
    in packages/

    View full-size slide

  28. 1. compiler- :
    2. runtime- :

    View full-size slide

  29. 1. compiler- : コンパイル時に必要な処理
    2. runtime- : 実行時に必要な処理

    View full-size slide

  30. めちゃめちゃ読みやすい!!!

    View full-size slide

  31. JavaScriptやったことがなくても
    if 文読めれば、わかる!!!

    View full-size slide

  32. ソースコード読む会やってます

    View full-size slide

  33. 技術書展に出典します(多分)
    主催者ではありませんが
    一緒にやりませんか!?

    View full-size slide