【入門編】CircleCIパイプラインの監視：テスト結果の可視化と通知設定で失敗にすぐ気づく – バージョン管理・CI/CD活用バイブル

こんにちは！開発チームの毎日のビルド結果に一喜一憂しているそこのあなた。
「あ、また誰かのコミットでビルドが落ちてる……でも、気づいたのは数時間後だった」なんて悲劇、やってしまっていませんか？

CI/CDツールを導入したものの、「結果を見に行くのを忘れる」「エラーに気づくのが遅れてマージが滞る」というのは、チーム開発あるあるのワーストランキング上位常連です。

今回は、世界中のエンジニアに愛されているCI/CDプラットフォーム「CircleCI」を使って、「テスト結果を美しく可視化し、失敗したら即座にチャットへ通知する」ための極上のセットアップ術を解説します。

これをマスターすれば、あなたはもう黒い画面やダッシュボードを一日中リロードする必要から解放されます。さあ、一緒に快適な自動化の世界へ足を踏み入れましょう！

—

1. CircleCIってそもそも何をするツールなの？

一言で言うと、CircleCIは「あなたの代わりにコードのテストやビルドを24時間体制で厳しくチェックしてくれる、超優秀なロボット執事」です。

あなたがGitHubなどにコードをプッシュ（`git push`）した瞬間、CircleCIが裏側で自動的に立ち上がり、こんな作業をこなしてくれます。
1. 新しいコードを安全な仮想環境にクローンする
2. 必要なライブラリをインストールする
3. 単体テストや結合テストを実行する
4. 結果を報告する

人間が手動でやると「あ、テスト実行するの忘れてた！」というヒューマンエラーが起きますが、CircleCIなら100%確実に、同じ手順でチェックしてくれます。

—

2. 失敗にすぐ気づく！Slack / Microsoft Teamsへの通知設定

まずは「通知」の要（かなめ）、チャットツール連携から始めましょう。
ビルドが落ちたとき、わざわざCircleCIの画面を開きにいかなくても、使い慣れたSlackやMicrosoft Teamsへダイレクトに叫んでもらう設定を作ります。

Slack通知の基本アプローチ

CircleCIには公式の「Slack Orb（オーブ：再利用可能な設定パーツ）」が用意されています。これを使うと、たった数行のYAML記述でSlackへの通知が実現できます。

まずは、Slack側で「Incoming Webhook」のURLを発行しておいてください。そして、そのURLをCircleCIの「Project Settings > Environment Variables（環境変数）」に `SLACK_WEBHOOK` という名前で登録します（セキュリティ上、コードに直接URLを書くのは絶対NGです！）。

以下が、通知を組み込んだ設定ファイルのサンプルです。

version: 2.1

外部から便利なパーツ（Orb）をインポートします
orbs:
slack: circleci/slack@4.12.0

jobs:
build-and-test:
docker:

image: cimg/node:18.16.0 # Node.jsの環境を使用

steps:

checkout # コードを手元に持ってくる

run:

name: 依存関係のインストール
command: npm ci

run:

name: テストの実行
command: npm test

# 【重要】テストが失敗したときだけSlackに叫ぶステップ

slack/notify:

event: fail
template: basic_fail_1
custom: |
{
“blocks”: [
{
“type”: “section”,
“text”: {
“type”: “mrkdwn”,
“text”: “🚨 ビルドまたはテストが失敗しました！\n担当者: $CIRCLE_USERNAME\nブランチ: $CIRCLE_BRANCH”
}
},
{
“type”: “actions”,
“elements”: [
{
“type”: “button”,
“text”: {
“type”: “plain_text”,
“text”: “失敗したビルドを見る”
},
“url”: “$CIRCLE_BUILD_URL”
}
]
}
]
}

workflows:
test-workflow:
jobs:

build-and-test

この設定の推しポイント

`event: fail` と指定しているため、「テストがコケたときだけ」通知が飛みます。成功するたびにSlackがピコピコ鳴ってチャンネルがうるさくなるのを防ぐ、これぞスマートなエンジニアの配慮です。
通知メッセージの中に、失敗したビルドへ直接飛べるボタン（`$CIRCLE_BUILD_URL`）を仕込んでいます。通知を見たらワンクリックで原因調査へ直行できます。

(※ Microsoft Teamsに通知したい場合も、基本思想は同じです。Teamsの「Incoming Webhook」コネクタを作成し、`curl` コマンドでJSONペイロードをPOSTするステップを失敗時に実行するだけで簡単に連携できます。)

—

3. テスト結果をUI上で美しく可視化する（Test Results）

「テストが落ちたのは分かったけど、どのテストケースが、なぜ落ちたのか？」
これをターミナルのログの海から探すのは、老眼が進むと辛い作業です。CircleCIには、テスト結果のXMLファイルを読み取って、ダッシュボード上にリッチなグラフや失敗箇所のリストとして可視化する機能があります。

準備するもの：JUnit形式のレポート出力

ほとんどのテストフレームワーク（Jest, PyTest, JUnit, RSpecなど）は、テスト結果をXML（JUnit形式）で出力する機能を持っています。例えばJestであれば、専用のレポーターを入れるか設定を有効にするだけです。

CircleCI設定への組み込み

CircleCIに「このフォルダにあるXMLを読み取ってね」と教えるには、`store_test_results` という特別なステップを使います。

run:

name: テスト実行（JUnit形式でレポートを出力）
# 例としてJestを想定。junit形式の出力設定がされている前提です
command: npm test — –reporter=jest-junit
when: always # テストが失敗しても、この後のステップ（レポート保存）を確実に実行させるため

# CircleCIのUI上でテスト結果を可視化するための保存ステップ

store_test_results:

path: reports/junit # テスト結果XMLが出力されるディレクトリを指定

これを設定してビルドを走らせると、CircleCIのWebダッシュボードの 「Tests」タブ に、以下のような極上の情報が並びます。

どのテストファイルがパスして、どれが落ちたのかの一覧
テストの実行にかかった時間のランキング（ボトルネックの発見に役立ちます！）
過去のビルドを含めた、テストの成功率の推移グラフ

「あ、このテスト、最近やたらと実行に時間がかかってるな」という兆候にすぐ気づけるようになります。

—

4. ダッシュボードでチーム全体の稼働状況を俯瞰する

個別のビルド結果だけでなく、チーム全体やプロジェクト全体の健康状態を把握するには、CircleCIの「Insights（インサイト）」ダッシュボードを活用しましょう。

画面左側のメニューにある「Insights」をクリックすると、以下のデータが美しいグラフで可視化されます。

Workflow Success Rate（ワークフローの成功率）: 最近のビルドが何％成功しているか。ここが下がっていたら赤信号です。
Duration（実行時間）: ビルドやテストに何分かかっているかの推移。「最近、テストが遅くなってない？」というチームの違和感を数字で裏付けられます。
Flaky Tests（不安定なテスト）: コードを変えていないのに、時々なぜか失敗する「気まぐれなテスト（Flaky Test）」を自動で検知してくれます。

不安定なテストは開発チームの生産性をじわじわと削る大敵です。Insightsダッシュボードで「最近よくコケるテスト」を特定し、優先的に修正していきましょう。

—

まとめ：今日からできる第一歩

今回は、CircleCIを使ったテスト結果の可視化と、Slack等へのスマートな通知設定について解説しました。

1. Slack Orbを使って、テストが失敗したときだけ担当者に通知を飛ばす
2. `store_test_results` を使って、リッチなテストレポートをUI上に表示する
3. Insightsダッシュボードで、チームのビルド成功率やボトルネックを俯瞰する

これをマスターすれば、あなたのチームの「エラー発見スピード」は劇的に向上し、マージまでのリードタイムが短縮されます。日々の開発のストレスがスッと消えていくのを実感できるはずです。

まずは今日の業務で、Slackの失敗通知だけでも設定してみませんか？
あなたのCI/CDライフが、より快適でエキサイティングなものになりますように！