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
400
フロントエンドを始める前に どうしていっぱいツールがあるの? - 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 ニフティ株式会社
GitHubで育つ コラボレーション文化 : ニフティでのインナーソース挑戦事例 - 2024-12-16 GitHub Universe 2024 Recap in ZOZO
niftycorp
PRO
0
2.3k
Grow on GitHub Collaboration Culture: Case Study of InnerSource Challenge - GitHub Universe 2024 Recap in ZOZO
niftycorp
PRO
0
31
これが俺の”自分戦略” プロセスを楽しんでいこう! - Developers CAREER Boost 2024
niftycorp
PRO
0
260
継続的な改善のためのmodulesの適切な分割単位 - NIFTY Tech Talk #23
niftycorp
PRO
0
130
Re:ゼロから始めるTerraform生活 ~IaC入門編~ - NIFTY Tech Talk #23
niftycorp
PRO
0
130
Terraformにベストプラクティスを取り入れた - NIFTY Tech Talk #23
niftycorp
PRO
0
160
AWS AppSyncを用いた GraphQL APIの開発について - NIFTY Tech Talk #22
niftycorp
PRO
0
220
「天気予報があなたに届けられるまで」 - NIFTY Tech Talk #22
niftycorp
PRO
0
220
@nifty天気予報:フルリニューアルの挑戦 - NIFTY Tech Talk #22
niftycorp
PRO
0
480
Other Decks in Programming
See All in Programming
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
最近のVS Codeで気になるニュース 2025/01
74th
1
250
Ruby on cygwin 2025-02
fd0
0
140
ARA Ansible for the teams
kksat
0
150
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
3
4.1k
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
240
Introduction to kotlinx.rpc
arawn
0
630
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
41
15k
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
100
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
4
1.3k
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
10
1.8k
SwiftUI Viewの責務分離
elmetal
PRO
0
140
Featured
See All Featured
Making Projects Easy
brettharned
116
6k
Designing Experiences People Love
moore
139
23k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
Faster Mobile Websites
deanohume
306
31k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
The Language of Interfaces
destraynor
156
24k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
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