フロントエンドを始める前にどうしていっぱいツールがあるの? - NIFTY Tech Talk #17

by ニフティ株式会社

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Copyright © NIFTY Corporation All Rights Reserved.  トランスパイル(transpile) 23  TypeScript → JavaScript ● TypeScriptはブラウザ・Node.jsで実行できないので、JavaScriptへ変換する ○ 型アノテーションを除去して、ピュアなJavaScriptにするツール例: tsc, swc, esbuild 

Slide 24

Slide 24 text

Copyright © NIFTY Corporation All Rights Reserved.  トランスパイル(transpile) 24  JavaScript → JavaScript ● 互換性のための処理 ● JavaScriptのコードを、より古い文法での表現に変換する ○ JavaScriptの文法は年々更新されている (ECMAScript2015, 2020, …etc) ○ 新しい文法は古いブラウザでは動作しないので、変換する必要がある ● TypeScript用トランスパイルで同時にやってしまうこともあるツール例: babel, tsc, swc, esbuild

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Copyright © NIFTY Corporation All Rights Reserved.  ポリフィル(polyﬁll) 26  ● これも互換性のための処理 ● JavaScriptコードを追加し、古いブラウザに対応させる ○ トランスパイルは変換、ポリフィルは追加 ● トランスパイルまたはバンドル(後述)と一緒に提供されることが多いツール例: babel plugin, esbuild plugin

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Copyright © NIFTY Corporation All Rights Reserved.  バンドル(bundle) 28  ● 複数ファイルを結合する処理 ● パッケージ読み込みの機能は元々ブラウザになかった ○ require()やimport ○ 一応モダンブラウザではimportが使えるが、効率が悪いのであまり使わない ● importなどを解釈し、1つ(または複数)のファイルにまとめるツール例: webpack, esbuild, rollup

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Copyright © NIFTY Corporation All Rights Reserved.  タスクランナー 33  ● トランスパイル等の処理順を管理するもの ● バンドルの処理が比較的重いので、同じツールが兼任することが最近は多い ○ 昔はgulpとかあったツール例: webpack, esbuild, rollup tsc transpile polyﬁll bundle minify

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Copyright © NIFTY Corporation All Rights Reserved.  まとめ 35  ● ビルドの工程で互換性確保と結合・容量削減を行っている ○ transpile: コードの変換 ○ polyﬁll: コードの追加 ○ bundle: コードの結合 ○ minify: コードの圧縮 ■ bundleをメインにまとめて実行されることが多い ● それぞれにバラバラのツールがあるので、数が多くなる

Slide 36

Slide 36 text

Copyright © NIFTY Corporation All Rights Reserved.  まとめ 36  ● Q: 全部覚えなきゃいけないの？ ● A: 始めは覚えなくて問題ない ○ 大体のフレームワークは自動セットアップツールに従えば良い ■ React: ■ Next: ○ 細かい設定をしようとして初めて、各種ツールに触ることになる ○ どの役割を持つツールなのか？を意識できると理解しやすい npm create vite@latest {プロジェクト名} -- --template react-ts npx create-next-app@latest

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Copyright © NIFTY Corporation All Rights Reserved.  パッケージマネージャ 40  ● 指定したパッケージをダウンロードしてくる ○ package.jsonに欲しいパッケージを書く ○ node_modulesディレクトリにダウンロードされる ● 指定したパッケージが要求するパッケージもダウンロードする(依存性解決) 代表例: npm, yarn, pnpm

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Copyright © NIFTY Corporation All Rights Reserved.  最近の傾向 45  Go・Rust製ツールへの移行 ● JavaScriptで書かれたツールでは、どうしても速度に限界がある ● より高速に動作するGo・Rust製ツールへ移行しつつある ● ex) esbuild, swc ECMAScript Modulesの活用 ● モダンブラウザではバンドルしなくても動く (ECMAScript Modules) ● 開発時にはバンドルをスキップすることで、ビルド工程を速くできる ● ex) vite

Slide 46

Slide 46 text

Slide 47

Slide 47 text

Slide 48

Slide 48 text

Slide 49

Slide 49 text

Copyright © NIFTY Corporation All Rights Reserved.  React構成2 49  ● create viteで作られる構成 ○ 開発ビルドと本番ビルドで異なるバンドラーを使う ○ esbuildが速いが本番用には機能不足、ということらしい tsc transpile vite esbuild rollup polyﬁll bundle minify transpile polyﬁll bundle minify esbuild 開発  本番 

Slide 50

Slide 50 text