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
880
2025-07-08 InnerSource Commons Japan Meetup #14 【OST】チームの壁、ぶっ壊そ!壁の乗り越え方、一緒に考えよう!
niftycorp
PRO
0
89
2025-04-25 NIFTY's InnerSource Activites
niftycorp
PRO
0
300
外コミュニティ活動や登壇活動が技術 広報として大事だよ、と改めて周囲に伝 えられた件 - EM Oasis 特別会
niftycorp
PRO
0
190
Dify触ってみた。
niftycorp
PRO
1
280
Amazon Bedrockを使用して、 運用対応を楽にしてみた
niftycorp
PRO
1
300
自社製CMSからの脱却:10件のWebサイト再構築に学ぶ運用重視の技術選定 - NIFTY Tech Day 2025
niftycorp
PRO
0
130
エンジニアの殻を破る:インナーソースと社外活動がもたらした成長 - NIFTY Tech Day 2025
niftycorp
PRO
0
100
Other Decks in Programming
See All in Programming
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
180
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
190
CSC509 Lecture 01
javiergs
PRO
1
430
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
170
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.1k
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
160
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
200
XP, Testing and ninja testing ZOZ5
m_seki
3
360
クラシルを支える技術と組織
rakutek
0
190
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
940
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
430
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
210
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Code Review Best Practice
trishagee
72
19k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Building Adaptive Systems
keathley
43
2.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
How STYLIGHT went responsive
nonsquared
100
5.8k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
The Language of Interfaces
destraynor
162
25k
Speed Design
sergeychernyshev
32
1.1k
Navigating Team Friction
lara
189
15k
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