フロントエンドを始める前に どうしていっぱいツールがあるの? - NIFTY Tech Talk #17

Transcript

1. Copyright © NIFTY Corporation All Rights Reserved.
 フロントエンドを始める前に どうしていっぱいツールがあるの? 山田良介 会員システムグループ
2. Copyright © NIFTY Corporation All Rights Reserved.
 自己紹介 2
 名前
 山田 良介 所属
 会員システムグループ 第1開発チーム 担当
 2018~2020 メールストレージ運用 2020-2024 Web検索サービス運用 2021 マイ ニフティ開発 分野

3. Copyright © NIFTY Corporation All Rights Reserved.
 はじめに 00 3

4. Copyright © NIFTY Corporation All Rights Reserved.
 フロントエンドを始めようとした私 4
 そろそろフロント覚えなあかんな まずは開発環境作らな さてやり方はっと...
5. Copyright © NIFTY Corporation All Rights Reserved.
 他言語経験者のイメージ 5
 コンパイラ(?) ↑ こいつがわかればいいんだろう？ ソースコード JavaScript
6. Copyright © NIFTY Corporation All Rights Reserved.
 調べる 6
 webpack npm terser react-scripts pnpm yarn esbuild rollup tsc core-js babel browserslist vite swc
7. Copyright © NIFTY Corporation All Rights Reserved.
 7

8. Copyright © NIFTY Corporation All Rights Reserved.
 そして私は考えるのをやめた 8

9. Copyright © NIFTY Corporation All Rights Reserved.
 9

10. Copyright © NIFTY Corporation All Rights Reserved.
 とならないように 10

11. Copyright © NIFTY Corporation All Rights Reserved.
 今日のお話 11
 いっぱい ↑ これを理解したい ソースコード (TypeScript) JavaScript
12. Copyright © NIFTY Corporation All Rights Reserved.
 大きな流れ 01 12

13. Copyright © NIFTY Corporation All Rights Reserved.
 これをもうちょっと正確に 13
 いっぱい JavaScript ソースコード (TypeScript)
14. Copyright © NIFTY Corporation All Rights Reserved.
 ちょっと細かく 14
 パッケージ マネージャ ビルド ソースコード 開発用JS 本番用JS
15. Copyright © NIFTY Corporation All Rights Reserved.
 ちょっと細かく 15
 パッケージ マネージャ ビルド ソースコード 開発用JS 本番用JS ライブラリ(パッケージ)を ダウンロードしてくる
16. Copyright © NIFTY Corporation All Rights Reserved.
 ちょっと細かく 16
 パッケージ マネージャ ビルド ソースコード 開発用JS 本番用JS 何かする
17. Copyright © NIFTY Corporation All Rights Reserved.
 ちょっと細かく 17
 パッケージ
 マネージャ
 ビルド ソースコード 開発用JS 本番用JS 開発時は デバッグしやすいもの 本番用はサイズを削ったもの
18. Copyright © NIFTY Corporation All Rights Reserved.
 ちょっと細かく 18
 パッケージ マネージャ ビルド ソースコード 開発用JS 本番用JS これ何よ
19. Copyright © NIFTY Corporation All Rights Reserved.
 さらに細かく 19
 パッケージ マネージャ ソースコード 開発用JS 本番用JS transpile minify bundle polyfill 主に4種の処理+ それをまとめるもの タスクランナー
20. Copyright © NIFTY Corporation All Rights Reserved.
 具体的な処理 02 20

21. Copyright © NIFTY Corporation All Rights Reserved.
 ビルドの内容 21
 パッケージ
 マネージャ
 ソースコード
 開発用JS
 本番用JS
 minify
 bundle
 polyfill
 transpile
22. Copyright © NIFTY Corporation All Rights Reserved.
 トランスパイル(transpile) 22
 • あるプログラミング言語から別言語へ、変換を行うこと ◦ プログラミング言語 → 機械語はコンパイル(compile) ◦ 言語変換なので、trans(変換) + compile = transpile • 主に2種類のトランスパイルがある
23. Copyright © NIFTY Corporation All Rights Reserved.
 トランスパイル(transpile) 23
 TypeScript → JavaScript • TypeScriptはブラウザ・Node.jsで実行できないので、JavaScriptへ変換する ◦ 型アノテーションを除去して、ピュアなJavaScriptにする ツール例: tsc, swc, esbuild

24. Copyright © NIFTY Corporation All Rights Reserved.
 トランスパイル(transpile) 24
 JavaScript → JavaScript • 互換性のための処理 • JavaScriptのコードを、より古い文法での表現に変換する ◦ JavaScriptの文法は年々更新されている (ECMAScript2015, 2020, …etc) ◦ 新しい文法は古いブラウザでは動作しないので、変換する必要がある • TypeScript用トランスパイルで同時にやってしまうこともある ツール例: babel, tsc, swc, esbuild
25. Copyright © NIFTY Corporation All Rights Reserved.
 ビルドの内容
 25
 パッケージ
 マネージャ
 ソースコード
 開発用JS
 本番用JS
 transpile
 minify
 bundle
 polyfill

26. Copyright © NIFTY Corporation All Rights Reserved.
 ポリフィル(polyfill) 26
 • これも互換性のための処理 • JavaScriptコードを追加し、古いブラウザに対応させる ◦ トランスパイルは変換、ポリフィルは追加 • トランスパイルまたはバンドル(後述)と一緒に提供されることが多い ツール例: babel plugin, esbuild plugin
27. Copyright © NIFTY Corporation All Rights Reserved.
 ビルドの内容 27
 パッケージ
 マネージャ
 ソースコード
 開発用JS
 本番用JS
 transpile
 minify
 polyfill
 bundle
28. Copyright © NIFTY Corporation All Rights Reserved.
 バンドル(bundle) 28
 • 複数ファイルを結合する処理 • パッケージ読み込みの機能は元々ブラウザになかった ◦ require()やimport ◦ 一応モダンブラウザではimportが使えるが、効率が悪いのであまり使わない • importなどを解釈し、1つ(または複数)のファイルにまとめる ツール例: webpack, esbuild, rollup
29. Copyright © NIFTY Corporation All Rights Reserved.
 ビルドの内容 29
 パッケージ
 マネージャ
 ソースコード
 開発用JS
 本番用JS
 transpile
 bundle
 polyfill
 minify
30. Copyright © NIFTY Corporation All Rights Reserved.
 ミニファイ(minify) 30
 • 容量削減のための圧縮処理 • 同じ動作を維持したまま、ファイル容量を削減する ◦ 改行やスペースの削除、変数名の短縮 ◦ 使われていないコードの削除(Tree Shaking) ツール例: terser, swc
31. Copyright © NIFTY Corporation All Rights Reserved.
 その他 31
 • CSSの処理をしたりもする ◦ SCSS, CSS Modules, …etc • 今回は省略
32. Copyright © NIFTY Corporation All Rights Reserved.
 ビルドの内容 32
 パッケージ
 マネージャ
 ソースコード
 開発用JS
 本番用JS
 transpile minify bundle polyfill タスクランナー
33. Copyright © NIFTY Corporation All Rights Reserved.
 タスクランナー 33
 • トランスパイル等の処理順を管理するもの • バンドルの処理が比較的重いので、同じツールが兼任することが最近は多い ◦ 昔はgulpとかあった ツール例: webpack, esbuild, rollup tsc transpile polyfill bundle minify
34. Copyright © NIFTY Corporation All Rights Reserved.
 まとめ 03 34

35. Copyright © NIFTY Corporation All Rights Reserved.
 まとめ 35
 • ビルドの工程で互換性確保と結合・容量削減を行っている ◦ transpile: コードの変換 ◦ polyfill: コードの追加 ◦ bundle: コードの結合 ◦ minify: コードの圧縮 ▪ bundleをメインにまとめて実行されることが多い • それぞれにバラバラのツールがあるので、数が多くなる
36. Copyright © NIFTY Corporation All Rights Reserved.
 まとめ 36
 • Q: 全部覚えなきゃいけないの？ • A: 始めは覚えなくて問題ない ◦ 大体のフレームワークは自動セットアップツールに従えば良い ▪ React: ▪ Next: ◦ 細かい設定をしようとして初めて、各種ツールに触ることになる ◦ どの役割を持つツールなのか？を意識できると理解しやすい npm create vite@latest {プロジェクト名} -- --template react-ts npx create-next-app@latest
37. Copyright © NIFTY Corporation All Rights Reserved.

38. Copyright © NIFTY Corporation All Rights Reserved.
 おまけ1: パッケージマネージャ 04 38

39. Copyright © NIFTY Corporation All Rights Reserved.
 全体の流れ
 39
 パッケージ
 マネージャ
 ソースコード
 開発用JS
 本番用JS
 transpile
 minify
 bundle
 polyfill

40. Copyright © NIFTY Corporation All Rights Reserved.
 パッケージマネージャ 40
 • 指定したパッケージをダウンロードしてくる ◦ package.jsonに欲しいパッケージを書く ◦ node_modulesディレクトリにダウンロードされる • 指定したパッケージが要求するパッケージもダウンロードする(依存性解決) 代表例: npm, yarn, pnpm
41. Copyright © NIFTY Corporation All Rights Reserved.
 パッケージマネージャ 41
 • Q: 何が違うの？ • A: パッケージ管理が効率化されていたりする プロジェクトA node_modules npm プロジェクトごとに ダウンロード必要 プロジェクトB node_modules pnpm プロジェクトA node_modules プロジェクトB node_modules pnpm-store 1箇所で管理することで 重複パッケージが まとまる = 容量削減 symlink
42. Copyright © NIFTY Corporation All Rights Reserved.
 おまけ2: 何故複数選択肢があるのか 04 42

43. Copyright © NIFTY Corporation All Rights Reserved.
 43
 変化が早いから
44. Copyright © NIFTY Corporation All Rights Reserved.
 44
 の一言で済ませるのも何なので
45. Copyright © NIFTY Corporation All Rights Reserved.
 最近の傾向 45
 Go・Rust製ツールへの移行 • JavaScriptで書かれたツールでは、どうしても速度に限界がある • より高速に動作するGo・Rust製ツールへ移行しつつある • ex) esbuild, swc ECMAScript Modulesの活用 • モダンブラウザではバンドルしなくても動く (ECMAScript Modules) • 開発時にはバンドルをスキップすることで、ビルド工程を速くできる • ex) vite
46. Copyright © NIFTY Corporation All Rights Reserved.
 さらに細かく 46
 パッケージ マネージャ ソースコード 開発用JS 本番用JS transpile minify bundle polyfill バンドルする バンドルしない
47. Copyright © NIFTY Corporation All Rights Reserved.
 おまけ3: メジャーな構成 04 47

48. Copyright © NIFTY Corporation All Rights Reserved.
 React構成1 48
 • create-react-appで作られる構成 ◦ 昔の主流、現在はメンテされておらず、推奨されない tsc transpile polyfill bundle minify react-scripts
49. Copyright © NIFTY Corporation All Rights Reserved.
 React構成2 49
 • create viteで作られる構成 ◦ 開発ビルドと本番ビルドで異なるバンドラーを使う ◦ esbuildが速いが本番用には機能不足、ということらしい tsc transpile vite esbuild rollup polyfill bundle minify transpile polyfill bundle minify esbuild 開発
 本番

50. Copyright © NIFTY Corporation All Rights Reserved.
 Next.js構成 50
 • Next.jsが内部で動かしている構成 ◦ Polyfillコードを独自で持っていたり、独特 ◦ webpackはRust製のturbopackで置き換わる予定 transpile polyfill bundle minify Next.js