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

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

562779f94b64f72e5a6d38b637516d24?s=47 Suguru Ohki
December 11, 2019

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

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

562779f94b64f72e5a6d38b637516d24?s=128

Suguru Ohki

December 11, 2019
Tweet

More Decks by Suguru Ohki

Other Decks in Programming

Transcript

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

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

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

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

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

  8. 告知

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

  10. 「vue-next」って何?

  11. 乱暴にいうとVersion 3

  12. 準備

  13. None
  14. 何も言わずにClone

  15. None
  16. わかっておくと良いこと

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

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

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

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

  21. istanbul

  22. None
  23. None
  24. None
  25. elseがカバー率計算から除外される

  26. consola

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

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

  30. rollup

  31. バンドル。以上。

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

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

  34. vue vue-next

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

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

  37. vue vue-next

  38. vue vue-next ソース

  39. vue vue-next 便利な やつ

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

  41. None
  42. 1. compiler- : 2. runtime- :

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

  44. None
  45. めちゃめちゃ読みやすい!!!

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

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

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