Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フロントエンドを始める前に どうしていっぱいツールがあるの? - NIFTY Tech Talk #17
Search
ニフティ株式会社
PRO
March 21, 2024
Video
Resources
Programming
1
110
フロントエンドを始める前に どうしていっぱいツールがあるの? - NIFTY Tech Talk #17
ニフティ株式会社
PRO
March 21, 2024
Tweet
Share
Video
Resources
超入門 ここから始める開発環境 - NIFTY Tech Talk #17
https://nifty.connpass.com/event/312139/
More Decks by ニフティ株式会社
See All by ニフティ株式会社
チーム力を高めるスクラム実践法:カンバン公開と課題攻略について - ニフティのスクラムトーク Vol. 2 - NIFTY Tech Talk #18
niftycorp
PRO
1
110
スクラムチームと認知負荷 - ニフティのスクラムトーク Vol2. / NIFTY Tech Talk #18
niftycorp
PRO
1
120
Visual Studio Code Dev Containers ススメ Python編 - NIFTY Tech Talk #17
niftycorp
PRO
1
76
dotfilesを作ろう - NIFTY Tech Talk #17
niftycorp
PRO
1
80
サービスシステム監視 (シフト例)
niftycorp
PRO
0
56
スクラムマスターの技を磨く! ニフティのスクラムトーク vol. 1 - NIFTY Tech Talk #16
niftycorp
PRO
1
130
AWS基礎 / 2023 ニフティ新人研修
niftycorp
PRO
0
280
データベース / 2023 ニフティ新人研修
niftycorp
PRO
0
160
フレームワーク フロントエンド / 2023 ニフティ新人研修
niftycorp
PRO
0
180
Other Decks in Programming
See All in Programming
PostmanでAPIの動作確認が楽になった話
h455h1
0
170
CDKコントリビュートの最初の壁を越えよう! -簡単issueの見つけ方-
badmintoncryer
2
130
Goのエラースタックトレースの歴史と今後
sonatard
9
1.6k
Ruby Pattern Matching
bkuhlmann
0
930
Elm 0.19.0 Changes
bkuhlmann
0
490
Implementing Design Systems in Swift
seyfoyun
0
230
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
220
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
エンターテイメント業界で利用されるAWS
demuyan
0
210
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
930
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
810
Featured
See All Featured
Building Adaptive Systems
keathley
32
1.9k
Designing with Data
zakiwarfel
96
4.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
1.9k
Building Flexible Design Systems
yeseniaperezcruz
320
37k
Practical Orchestrator
shlominoach
183
9.7k
How STYLIGHT went responsive
nonsquared
92
4.8k
Building Your Own Lightsaber
phodgson
100
5.7k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
11
8.3k
Agile that works and the tools we love
rasmusluckow
325
20k
Atom: Resistance is Futile
akmur
260
25k
The Cult of Friendly URLs
andyhume
74
5.7k
Transcript
Copyright © NIFTY Corporation All Rights Reserved. フロントエンドを始める前に どうしていっぱいツールがあるの? 山田良介
会員システムグループ
Copyright © NIFTY Corporation All Rights Reserved. 自己紹介 2 名前
山田 良介 所属 会員システムグループ 第1開発チーム 担当 2018~2020 メールストレージ運用 2020-2024 Web検索サービス運用 2021 マイ ニフティ開発 分野
Copyright © NIFTY Corporation All Rights Reserved. はじめに 00 3
Copyright © NIFTY Corporation All Rights Reserved. フロントエンドを始めようとした私 4 そろそろフロント覚えなあかんな
まずは開発環境作らな さてやり方はっと...
Copyright © NIFTY Corporation All Rights Reserved. 他言語経験者のイメージ 5 コンパイラ(?)
↑ こいつがわかればいいんだろう? ソースコード JavaScript
Copyright © NIFTY Corporation All Rights Reserved. 調べる 6 webpack
npm terser react-scripts pnpm yarn esbuild rollup tsc core-js babel browserslist vite swc
Copyright © NIFTY Corporation All Rights Reserved. 7
Copyright © NIFTY Corporation All Rights Reserved. そして私は考えるのをやめた 8
Copyright © NIFTY Corporation All Rights Reserved. 9
Copyright © NIFTY Corporation All Rights Reserved. とならないように 10
Copyright © NIFTY Corporation All Rights Reserved. 今日のお話 11 いっぱい
↑ これを理解したい ソースコード (TypeScript) JavaScript
Copyright © NIFTY Corporation All Rights Reserved. 大きな流れ 01 12
Copyright © NIFTY Corporation All Rights Reserved. これをもうちょっと正確に 13 いっぱい
JavaScript ソースコード (TypeScript)
Copyright © NIFTY Corporation All Rights Reserved. ちょっと細かく 14 パッケージ
マネージャ ビルド ソースコード 開発用JS 本番用JS
Copyright © NIFTY Corporation All Rights Reserved. ちょっと細かく 15 パッケージ
マネージャ ビルド ソースコード 開発用JS 本番用JS ライブラリ(パッケージ)を ダウンロードしてくる
Copyright © NIFTY Corporation All Rights Reserved. ちょっと細かく 16 パッケージ
マネージャ ビルド ソースコード 開発用JS 本番用JS 何かする
Copyright © NIFTY Corporation All Rights Reserved. ちょっと細かく 17 パッケージ
マネージャ ビルド ソースコード 開発用JS 本番用JS 開発時は デバッグしやすいもの 本番用はサイズを削ったもの
Copyright © NIFTY Corporation All Rights Reserved. ちょっと細かく 18 パッケージ
マネージャ ビルド ソースコード 開発用JS 本番用JS これ何よ
Copyright © NIFTY Corporation All Rights Reserved. さらに細かく 19 パッケージ
マネージャ ソースコード 開発用JS 本番用JS transpile minify bundle polyfill 主に4種の処理+ それをまとめるもの タスクランナー
Copyright © NIFTY Corporation All Rights Reserved. 具体的な処理 02 20
Copyright © NIFTY Corporation All Rights Reserved. ビルドの内容 21 パッケージ
マネージャ ソースコード 開発用JS 本番用JS minify bundle polyfill transpile
Copyright © NIFTY Corporation All Rights Reserved. トランスパイル(transpile) 22 •
あるプログラミング言語から別言語へ、変換を行うこと ◦ プログラミング言語 → 機械語はコンパイル(compile) ◦ 言語変換なので、trans(変換) + compile = transpile • 主に2種類のトランスパイルがある
Copyright © NIFTY Corporation All Rights Reserved. トランスパイル(transpile) 23 TypeScript
→ JavaScript • TypeScriptはブラウザ・Node.jsで実行できないので、JavaScriptへ変換する ◦ 型アノテーションを除去して、ピュアなJavaScriptにする ツール例: tsc, swc, esbuild
Copyright © NIFTY Corporation All Rights Reserved. トランスパイル(transpile) 24 JavaScript
→ JavaScript • 互換性のための処理 • JavaScriptのコードを、より古い文法での表現に変換する ◦ JavaScriptの文法は年々更新されている (ECMAScript2015, 2020, …etc) ◦ 新しい文法は古いブラウザでは動作しないので、変換する必要がある • TypeScript用トランスパイルで同時にやってしまうこともある ツール例: babel, tsc, swc, esbuild
Copyright © NIFTY Corporation All Rights Reserved. ビルドの内容 25 パッケージ
マネージャ ソースコード 開発用JS 本番用JS transpile minify bundle polyfill
Copyright © NIFTY Corporation All Rights Reserved. ポリフィル(polyfill) 26 •
これも互換性のための処理 • JavaScriptコードを追加し、古いブラウザに対応させる ◦ トランスパイルは変換、ポリフィルは追加 • トランスパイルまたはバンドル(後述)と一緒に提供されることが多い ツール例: babel plugin, esbuild plugin
Copyright © NIFTY Corporation All Rights Reserved. ビルドの内容 27 パッケージ
マネージャ ソースコード 開発用JS 本番用JS transpile minify polyfill bundle
Copyright © NIFTY Corporation All Rights Reserved. バンドル(bundle) 28 •
複数ファイルを結合する処理 • パッケージ読み込みの機能は元々ブラウザになかった ◦ require()やimport ◦ 一応モダンブラウザではimportが使えるが、効率が悪いのであまり使わない • importなどを解釈し、1つ(または複数)のファイルにまとめる ツール例: webpack, esbuild, rollup
Copyright © NIFTY Corporation All Rights Reserved. ビルドの内容 29 パッケージ
マネージャ ソースコード 開発用JS 本番用JS transpile bundle polyfill minify
Copyright © NIFTY Corporation All Rights Reserved. ミニファイ(minify) 30 •
容量削減のための圧縮処理 • 同じ動作を維持したまま、ファイル容量を削減する ◦ 改行やスペースの削除、変数名の短縮 ◦ 使われていないコードの削除(Tree Shaking) ツール例: terser, swc
Copyright © NIFTY Corporation All Rights Reserved. その他 31 •
CSSの処理をしたりもする ◦ SCSS, CSS Modules, …etc • 今回は省略
Copyright © NIFTY Corporation All Rights Reserved. ビルドの内容 32 パッケージ
マネージャ ソースコード 開発用JS 本番用JS transpile minify bundle polyfill タスクランナー
Copyright © NIFTY Corporation All Rights Reserved. タスクランナー 33 •
トランスパイル等の処理順を管理するもの • バンドルの処理が比較的重いので、同じツールが兼任することが最近は多い ◦ 昔はgulpとかあった ツール例: webpack, esbuild, rollup tsc transpile polyfill bundle minify
Copyright © NIFTY Corporation All Rights Reserved. まとめ 03 34
Copyright © NIFTY Corporation All Rights Reserved. まとめ 35 •
ビルドの工程で互換性確保と結合・容量削減を行っている ◦ transpile: コードの変換 ◦ polyfill: コードの追加 ◦ bundle: コードの結合 ◦ minify: コードの圧縮 ▪ bundleをメインにまとめて実行されることが多い • それぞれにバラバラのツールがあるので、数が多くなる
Copyright © NIFTY Corporation All Rights Reserved. まとめ 36 •
Q: 全部覚えなきゃいけないの? • A: 始めは覚えなくて問題ない ◦ 大体のフレームワークは自動セットアップツールに従えば良い ▪ React: ▪ Next: ◦ 細かい設定をしようとして初めて、各種ツールに触ることになる ◦ どの役割を持つツールなのか?を意識できると理解しやすい npm create vite@latest {プロジェクト名} -- --template react-ts npx create-next-app@latest
Copyright © NIFTY Corporation All Rights Reserved.
Copyright © NIFTY Corporation All Rights Reserved. おまけ1: パッケージマネージャ 04
38
Copyright © NIFTY Corporation All Rights Reserved. 全体の流れ 39 パッケージ
マネージャ ソースコード 開発用JS 本番用JS transpile minify bundle polyfill
Copyright © NIFTY Corporation All Rights Reserved. パッケージマネージャ 40 •
指定したパッケージをダウンロードしてくる ◦ package.jsonに欲しいパッケージを書く ◦ node_modulesディレクトリにダウンロードされる • 指定したパッケージが要求するパッケージもダウンロードする(依存性解決) 代表例: npm, yarn, pnpm
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
Copyright © NIFTY Corporation All Rights Reserved. おまけ2: 何故複数選択肢があるのか 04
42
Copyright © NIFTY Corporation All Rights Reserved. 43 変化が早いから
Copyright © NIFTY Corporation All Rights Reserved. 44 の一言で済ませるのも何なので
Copyright © NIFTY Corporation All Rights Reserved. 最近の傾向 45 Go・Rust製ツールへの移行
• JavaScriptで書かれたツールでは、どうしても速度に限界がある • より高速に動作するGo・Rust製ツールへ移行しつつある • ex) esbuild, swc ECMAScript Modulesの活用 • モダンブラウザではバンドルしなくても動く (ECMAScript Modules) • 開発時にはバンドルをスキップすることで、ビルド工程を速くできる • ex) vite
Copyright © NIFTY Corporation All Rights Reserved. さらに細かく 46 パッケージ
マネージャ ソースコード 開発用JS 本番用JS transpile minify bundle polyfill バンドルする バンドルしない
Copyright © NIFTY Corporation All Rights Reserved. おまけ3: メジャーな構成 04
47
Copyright © NIFTY Corporation All Rights Reserved. React構成1 48 •
create-react-appで作られる構成 ◦ 昔の主流、現在はメンテされておらず、推奨されない tsc transpile polyfill bundle minify react-scripts
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 開発 本番
Copyright © NIFTY Corporation All Rights Reserved. Next.js構成 50 •
Next.jsが内部で動かしている構成 ◦ Polyfillコードを独自で持っていたり、独特 ◦ webpackはRust製のturbopackで置き換わる予定 transpile polyfill bundle minify Next.js