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
240
フロントエンドを始める前に どうしていっぱいツールがあるの? - 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 ニフティ株式会社
2つのスクラムチームの 調和的な協働・連携について - ニフティのスクラムトーク Vol. 3 / NIFTY Tech Talk #19
niftycorp
PRO
1
15
チーム力を高めるスクラム実践法:カンバン公開と課題攻略について - ニフティのスクラムトーク Vol. 2 - NIFTY Tech Talk #18
niftycorp
PRO
1
190
スクラムチームと認知負荷 - ニフティのスクラムトーク Vol2. / NIFTY Tech Talk #18
niftycorp
PRO
1
190
Visual Studio Code Dev Containers ススメ Python編 - NIFTY Tech Talk #17
niftycorp
PRO
1
140
dotfilesを作ろう - NIFTY Tech Talk #17
niftycorp
PRO
1
130
サービスシステム監視 (シフト例)
niftycorp
PRO
0
94
スクラムマスターの技を磨く! ニフティのスクラムトーク vol. 1 - NIFTY Tech Talk #16
niftycorp
PRO
1
210
AWS基礎 / 2023 ニフティ新人研修
niftycorp
PRO
0
550
データベース / 2023 ニフティ新人研修
niftycorp
PRO
0
260
Other Decks in Programming
See All in Programming
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
AWS CDKにおける「再利用性」を考える / aws-cdk-reusability
gotok365
6
1.3k
大規模マルチテナントを解決するYugabyteDBという選択肢
nnaka2992
1
250
Activities at Cairo Library
cairolibrary720
0
1.2k
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
81k
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
140
Product Management LT会_クアンド新家
shinshin
0
260
Introduction of Happy Eyeballs Version 2 (RFC8305) to the Socket library
coe401_
1
220
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
[After Kotlin Fest 2024 LT Night @ Sansan] もっともっとKotlinを好きになる!K2 Compiler Pluginで遊んでみよう!
kitakkun
2
260
CSC307 Lecture 11
javiergs
PRO
0
240
Javaの現状2024夏 / Java current status 2024 summer
kishida
4
1.4k
Featured
See All Featured
Thoughts on Productivity
jonyablonski
64
4.1k
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
Documentation Writing (for coders)
carmenintech
63
4.2k
Adopting Sorbet at Scale
ufuk
71
8.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
Fireside Chat
paigeccino
25
2.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.3k
We Have a Design System, Now What?
morganepeng
46
7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
26
1.6k
YesSQL, Process and Tooling at Scale
rocio
166
14k
Creatively Recalculating Your Daily Design Routine
revolveconf
214
11k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
44
4.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