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

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

Transcript

1. vue-nextのソースコード読み始め
2. フロントエンドエンジニア Vue.js, Nuxt.js Laravel スー Suguru Ohki @gurusu_program 酒は人生
3. https://techbowl.co.jp/techtrain/
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. 準備
14. 何も言わずにClone
16. わかっておくと良いこと
17. 1. 利用されるライブラリ 2. ディレクトリ構成 3. どこを読むと業務に役立つのか
18. 1. 利用されるライブラリ 2. ディレクトリ構成 3. どこを読むと業務に役立つのか
19. ライブラリ名 役割 instanbul テストのカバー率 consola error debugなどの出力調整 rollup 複数ファイルのJavaScriptを、ひ とつにする。バンドル。
20. それぞれがどう使われるのか
21. istanbul
25. elseがカバー率計算から除外される
26. consola
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/
42. 1. compiler- : 2. runtime- :
43. 1. compiler- : コンパイル時に必要な処理 2. runtime- : 実行時に必要な処理
45. めちゃめちゃ読みやすい！！！
46. JavaScriptやったことがなくても if 文読めれば、わかる！！！
47. ソースコード読む会やってます
48. 技術書展に出典します（多分） 主催者ではありませんが 一緒にやりませんか！？