【びるど】

ビルド とは?

💡 ソースコードを「動かせる形」に変える一連の処理
📌 このページのポイント
ビルドの流れ ソースコード .js / .ts .css / .html 設定ファイル 画像・アセット ビルドプロセス コンパイル(変換) バンドル(結合) 最適化(圧縮) 成果物 実行ファイル デプロイ用 パッケージ 人間が書いたコードを、コンピュータが実行できる形に変換する工程
ビルドのイメージ
ひよこ ひよこ

ビルドってコンパイルと何が違うの?

ペンギン先生 ペンギン先生

コンパイルはビルドの一工程。ビルドはより広い概念で「コンパイル→リンク(ライブラリを結合)→テスト実行→パッケージ作成」という一連の処理をまとめて指す。Mavenでの「mvn build」やnpmでの「npm run build」がその例。

ひよこ ひよこ

フロントエンドのビルドは何をするの?

ペンギン先生 ペンギン先生

ReactTypeScriptのコードをブラウザが実行できる普通のJavaScriptに変換(トランスパイル)して、複数ファイルを1つにまとめ(バンドル)、画像を最適化するなどの処理をする。ViteWebpackなどがフロントエンドのビルドツール。

ひよこ ひよこ

CI/CDでビルドが失敗するって?

ペンギン先生 ペンギン先生

GitHubにコードをプッシュすると自動でビルドが走る。構文エラー・型エラー・テスト失敗・依存パッケージの問題などでビルドが失敗する。「ビルドが赤い(失敗)」はチームに共有される問題なので早急な対応が必要。

ひよこ ひよこ

ビルド時間が長いと何か困ることがあるの?

ペンギン先生 ペンギン先生

開発体験(DX)に直結するよ。変更を加えるたびに5分待つとしたら、1日に何十回もある「保存して確認」のサイクルが大幅に遅くなる。だからViteesbuildのような高速ビルドツールが人気なんだ。実はGoogleは社内の巨大リポジトリのビルドに「Bazel」という分散ビルドシステムを使っていて、変更された部分だけを増分ビルドする。これがなければ全体ビルドに何時間もかかるんだよ。「ビルド時間の短縮は生産性への最高の投資」と言われるくらい重要な課題なんだ。

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
ビルドって出てきたら「ソースコードを実行可能な形に変える一連の処理(コンパイル・パッケージングなど)」と思えばOK!
📖 おまけ:英語の意味
「Build」 = 建てる・組み立てる
💬 ソースコードのパーツを「組み立てて」動くプログラムを「建築する」イメージから
← 用語集にもどる