投稿日:2024/11/30
更新日:2024/11/30
Reactとかを触っているとビルドする・ビルドした後の云々みたいな話をすると思いますが、しっかり理解できていなかったのでビルドとはなんなのかについてまとめておきます。
「build(ビルド)」は、主にソフトウェア開発において、**ソースコードを製品として動作可能な形に変換するプロセスのことです。**特にフロントエンド開発(JavaScriptやTypeScriptなど)で使われる場合、以下のような操作が含まれます。
TypeScriptはそのままではブラウザで実行できないので、JavaScriptに変換(トランスパイル)します。
一部の古いブラウザでも動くように、コードを後方互換性のある形式に変換します。
空白やコメントを削除し、コードサイズを小さくしてページの読み込み速度を改善します。
使われていないコード(未使用の関数など)を削除して、サイズをさらに小さくします。
基本的にビルドは何からのツールを使って行います。JavaScriptやTypeScriptのプロジェクトでよく使われるビルドツールは以下です。
例えば、TypeScriptのプロジェクトでビルドを行う場合、以下のようなコマンドが使われます。
tsc
webpack.config.js
を設定した後、以下を実行します。
npx webpack --mode production
ビルドを実行すると、以下のようなファイルが生成されます。
src/index.ts
src/styles.scss
dist/main.js
(圧縮済みJavaScript)dist/styles.css
(CSSに変換済み)ビルドは、コードを実際に動作可能な形に変換し、最適化する重要なプロセスです。特に、モダンな開発環境ではほぼ必須のステップであり、最終的なパフォーマンスや互換性を大きく向上させます。