【びるど】

ビルド とは?

最終更新:
💡 ソースコードを「動かせる形」に変える一連の処理
📌 このページのポイント
ビルドの流れ ソースコード .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」 = 建てる・組み立てる
💬 ソースコードのパーツを「組み立てて」動くプログラムを「建築する」イメージから
← 用語集にもどる