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 Tal...
Search
ニフティ株式会社
PRO
March 21, 2024
Video
Resources
Programming
1
510
フロントエンドを始める前に どうしていっぱいツールがあるの? - 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 ニフティ株式会社
会員管理基盤をオンプレからクラウド移行した時に起きた障害たち - asken tech talk vol.13
niftycorp
PRO
0
2.5k
モニタリング統一への道のり - 分散モニタリングツール統合のためのオブザーバビリティプロジェクト
niftycorp
PRO
1
920
2025-07-08 InnerSource Commons Japan Meetup #14 【OST】チームの壁、ぶっ壊そ!壁の乗り越え方、一緒に考えよう!
niftycorp
PRO
0
94
2025-04-25 NIFTY's InnerSource Activites
niftycorp
PRO
0
350
外コミュニティ活動や登壇活動が技術 広報として大事だよ、と改めて周囲に伝 えられた件 - EM Oasis 特別会
niftycorp
PRO
0
190
Dify触ってみた。
niftycorp
PRO
1
290
Amazon Bedrockを使用して、 運用対応を楽にしてみた
niftycorp
PRO
1
310
自社製CMSからの脱却:10件のWebサイト再構築に学ぶ運用重視の技術選定 - NIFTY Tech Day 2025
niftycorp
PRO
0
140
エンジニアの殻を破る:インナーソースと社外活動がもたらした成長 - NIFTY Tech Day 2025
niftycorp
PRO
0
110
Other Decks in Programming
See All in Programming
三者三様 宣言的UI
kkagurazaka
0
250
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
650
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
190
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
440
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
670
Go言語はstack overflowの夢を見るか?
logica0419
0
620
Claude Agent SDK を使ってみよう
hyshu
0
1.4k
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
aoseyuu
2
730
Devvox Belgium - Agentic AI Patterns
kdubois
1
150
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
190
AI Agent 時代的開發者生存指南
eddie
4
2.2k
contribution to astral-sh/uv
shunsock
0
550
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
Building Adaptive Systems
keathley
44
2.8k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Facilitating Awesome Meetings
lara
57
6.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Fireside Chat
paigeccino
41
3.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
890
BBQ
matthewcrist
89
9.9k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Agile that works and the tools we love
rasmusluckow
331
21k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
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