[初心者向け] AI と一緒に CircleCI 再入門

Last updated at 2025-08-20Posted at 2025-08-16

はじめに

最近記事のペースが落ち始めて、月 1 投稿をキープできればいいやと思い始めている Xu です。

ふとした瞬間で CircleCI を思い出しました。
~~決して偶然転職サイトで調べたら給料が高かったとかじゃなくて~~

まあ、~~GitHub Actions でほぼ事足りているし~~ほぼ使い方忘れていたので、再入門して整理してみようかなと思います。

前半： AI と一緒に勉強する学習方法

まずは最近使っている勉強方法について紹介します。
使用モデル：GPT-5

1. 勉強スケジュールを作成させる

以下のようなプロンプトを使って一週間で業務レベルに仕上げるような計画を立ててもらいます。

Prompt:

CircleCI について勉強をしたいと思います今は一旦アカウントだけ作りました一週間で最低限仕事で使えるようにするにはどのようなスケジュールで勉強すればいいでしょうか具体的な一週間のスケジュールと毎日の達成目標、勉強内容、参考資料が載った勉強スケジュールを作成してください

スケジュール:

🎯 ゴール設定

CircleCI の基本構造と概念を理解する（ワークフロー、ジョブ、ステップ、オーブなど）
.circleci/config.yml を自力で書ける
GitHub リポジトリと連携し、CI パイプラインを動かす
**実務で使えるレベルの設定（テスト・ビルド・デプロイ）**を作成
よくあるエラーとデバッグ方法を理解

📅 1週間の学習スケジュール

日	達成目標	勉強内容	参考資料
Day 1	CircleCI の全体像と用語を理解	- CircleCI の役割とCI/CDの基礎 - ワークフロー・ジョブ・ステップ・オーブの概念 - GitHub連携の流れ	公式概要公式用語集
Day 2	最小構成の .circleci/config.yml を書く	- version, jobs, steps の基本構造 - Hello World ビルドを作成し、GitHub に push → 実行 - Web UI のジョブ結果の見方	Config の書き方
Day 3	実務的なテストパイプライン作成	- Node.js / Python などのプロジェクトをテストするパイプライン作成 - キャッシュの使い方 - `.env` や secrets の設定キャッシュ設定	環境変数
Day 4	並列実行とワークフロー制御を学ぶ	- 複数ジョブの並列実行 - requires による依存制御 - 条件分岐（filters / branch）	ワークフロー設定
Day 5	デプロイ設定の追加	- デプロイジョブの作成（例: GitHub Pages / AWS S3 / Vercel） - オーブを使ったデプロイ簡略化	Orbsの使い方
Day 6	トラブルシューティング・最適化	- よくあるエラー（パーミッション、キャッシュ、パス問題） - 再実行・SSHデバッグ方法 - 実行時間短縮のベストプラクティス	デバッグ方法
Day 7	総合演習	- 小規模プロジェクトをGitHubに作り、テスト・ビルド・デプロイまでを自動化 - プルリク作成 → 自動テスト → デプロイの一連の流れを完成	サンプルプロジェクト集

💡 学び方のコツ

毎日必ず GitHub に push して実行確認 → 理解が早まります
最初はオーブ（Orbs）で簡略化、慣れてきたら自分で YAML を書く
ワークフロー図を Web UI で必ず確認して、実行順をイメージ化
失敗したビルドは必ず SSH で入ってデバッグ → 実務でも役立ちます

皆さんすでにご存知かと思いますが、あくまで AI で生成した内容なので、果たして本当に業務レベルに達する計画なのか、想定されたワークフローに含まれる知識が網羅されているか、何回か確認と再生成を繰り返す必要がある場合がございます。

また、参考資料の一部は適当だったり、切れたリンクだったりします。
例：

いざ [公式概要] のリンクをクリックすると、Not Found が表示されます
https://circleci.com/docs/ja/getting-started/

/ja/ が入っているのは、おそらく日本語で聞いたからだと思います。
正しくは：https://circleci.com/docs/guides/getting-started/getting-started/
当方はこのまま読みましたが、日本語の資料が提供されているかは不明です。

2. 理解度確認テストを出題させる

「締め切りを提示しないことはやる気がないこと、具体性がないことはやらないほうがいいと思ってること」

個人的にこう信じてます。
なので毎日同じ時間に ChatGPT の Task 機能で確認テストを送信するように設定します。

参考： Tasks in ChatGPT
https://help.openai.com/en/articles/10291617-tasks-in-chatgpt

確認クイズ：

✅ Day1（CircleCI の全体像と用語）

CI/CD の「CI」とは何の略ですか？
CircleCI でコードを実行する単位を何と呼びますか？（例: build, test）
CircleCI の .circleci/config.yml ファイルはプロジェクトのどこに置きますか？
CircleCI の「ワークフロー(workflow)」は何を管理しますか？
ジョブ内で個々の処理を記述する最小単位を何と呼びますか？
CircleCI の実行環境として指定できる 2 つの形式は？（ヒント: Docker / ○○○○）
CircleCI が GitHub や Bitbucket と統合されるのはどのタイミングですか？
CircleCI の無料プランで使える「ビルド分」の単位は何と呼ばれますか？
Orbs（オーブ）とは何のための仕組みですか？
CircleCI の設定ファイルのバージョンは現時点で主に何が使われていますか？

3. Notion で学習内容をまとめて進捗を管理

Notion（ほかのメモアプリなどなんでも可）で 1. で出力されたスケジュールに 1 列を追加し、出来具合を管理します。
今回は復習がメインなので、ほぼ参考資料に目を通したかどうかくらいのしかしてませんが、理解度パーセンテージ（2. のクイズと組み合わせて参考にしてもいいと思います。）を記入して管理することもできます。

その後、スケジュールされた日ごとに勉強内容をまとめて行きます。

自分の理解や参考した記事、勉強したことをすべて書き出していきましょう。
参考した記事も載せると後々見返りやすくなります。

※ここで注意していただきたいことは、メモることが目的になって、「技術を勉強して覚える」という本当のゴールを忘れてしまうと、ただの転写マシーンになってしまうので、理解してからまとめましょう。
参考：目的、目標、手段の違いと注意点
https://note.com/bnseat/n/na5cb959d1070

場合によっては文言を自分の言葉・より正確（だと思う）言葉に変えてもいいと思います。
その時はこう理解したけど、このように形に残るものであれば、時間が経って見直したときに無意識的に理解が深まることもあるかと。

後半：CircleCI について

まず、CI/CD とは？

基本的な概念のおさらいから始めましょう。

CI/CD とは、ソフトウェアやアプリ開発には欠かせない開発手法の一つであり日本語では「継続的インテグレーション＆継続的デリバリー」、英語では「Continuous Integration・CI / Continuous Delivery・CD」二つの言葉を一つに略して「CI/CD」と略します。CI/CDを開発プロセスに導入することにより、コードの品質チェックはもちろん、バグの発見、テストの自動化、自動化デリバリー、デプロイメントが実現し、開発者やチーム全体の生産性の向上にも非常に効果があると知られている開発手法です。

CircleCI の役割とCI/CDの基礎- ワークフロー・ジョブ・ステップ・オーブの概念

パイプライン (Pipeline)
パイプラインは、CircleCIにおける一連のプロセスの全体像を表します。通常、GitHubやBitbucketのリポジトリへのコードのpushなどをトリガーとして開始されます。1つのパイプラインは、1つ以上のワークフローで構成されます。
ワークフロー (Workflow)
ワークフローは、パイプライン内で実行されるジョブの実行順序や依存関係を定義するものです。例えば、「ビルドジョブが成功したら、テストジョブを実行し、テストジョブも成功したらデプロイジョブを実行する」といった流れを定義できます。ジョブを並列に実行したり、特定のブランチでのみ実行したりといった制御も可能です。これにより、複雑なプロセスも効率的に管理できます。
ジョブ (Job)
ジョブは、特定のタスクを実行する単位です。例えば、「コードのビルド」「単体テストの実行」「Dockerイメージの作成」「サーバーへのデプロイ」などがそれぞれジョブとして定義されます。各ジョブは、指定されたExecutor（実行環境）上で、一連のステップを実行します。
ステップ (Step)
ステップは、ジョブ内で実行される個々のコマンドやアクションです。シェルのコマンドを実行するrunステップ、ソースコードをチェックアウトするcheckoutステップ、キャッシュを保存・復元するsave_cache/restore_cacheステップなど、様々な種類のステップが用意されています。
Executor (実行環境)
Executorは、ジョブが実行される環境を指定します。CircleCIでは、主に以下のExecutorが利用可能です。
- docker: 指定したDockerイメージ内でジョブを実行します。最も一般的に利用されます。
- machine: Linux, Windows, macOS の仮想マシン上でジョブを実行します。Dockerが利用できない場合や、より多くのリソースが必要な場合に使用します。
- macos: macOSアプリの開発など、macOS環境が必要な場合に使用します。
  プロジェクトの要件に合わせて適切なExecutorを選択することが重要です。
オーブ (Orb)
オーブは、再利用可能な設定のパッケージです。よく使われるタスク（例: AWSへのデプロイ、Slackへの通知、特定のフレームワークのテスト設定）がオーブとして提供されており、config.ymlに数行追加するだけで簡単に利用できます。自分でオーブを作成して共有することも可能です。これにより、設定ファイルの記述量を削減し、メンテナンス性を向上させることができます。

GitHub リポジトリで試してみよう

CircleCI アプリにて、GitHub アカウントでログインし、自分の GitHub アカウントをクリックします。

CircleCI と GitHub の連携はレポジトリ内に .circleci/config.yml を配置することで簡単に設定できます。

その後、CircleCI アプリの Projects にて、対象リポジトリの [Set up] ボタンをクリックすると Pipeline を構築できます。

Pipelines にて作成された pipeline の管理を行うことができます。

まずはディレクトリ内で create-next-app でデフォルトの Next.js アプリを作成します。
ここでは circlecitestapp という名前で作ります。

構成図

-dir
|-README.md
|-circlecitestapp
|-.circleci
    |-config.yml

Config の書き方について

まずは最低限 Hello world を出力するだけの Config.yml の例を見てみましょう。

version: 2.1

jobs:
  say-hello:
    docker:
      - image: cimg/base:stable
    steps:
      - run: echo "Hello, CircleCI!"

workflows:
  main:
    jobs:
      - say-hello

解説

version: 2.1: CircleCIの設定ファイルフォーマットのバージョンを指定しています。最新の機能を利用するために2.1が推奨されています。
jobs: 実行される可能性のあるジョブのリストを定義します。
say-hello: jobs の中に定義されたジョブの名前です。
docker: - image: cimg/base:stable: このジョブがcimg/base:stableという Docker イメージ上で実行されることを指定しています。これは CircleCI が提供する汎用の Linux 環境イメージです。
steps: ジョブ内で実行される具体的な手順のリストです。
run: echo "Hello, CircleCI!": シェルでechoコマンドを実行し、Hello, CircleCI!という文字列を出力するステップです。
workflows: どのジョブをどの順序で実行するかを定義します。
main: ワークフローの名前です。
jobs: - say-hello: main ワークフローでは、say-hello というジョブを実行することを指定しています。

Next.js プロジェクトにおいての最小限 pipeline

上記ではリポジトリの内容に関係なく、ただ出力をするだけのものでしたが、今回は Lint を走らせてみましょう。
※いったんローカルで npm run lint を走らせておかないとビルドエラーになります。

version: 2.1

jobs:
  build:
    docker:
      - image: cimg/node:20.10
      # Node.js 公式 CircleCI イメージ（バージョンはプロジェクトに合わせる）
    working_directory: ~/repo

    steps:
      - checkout
      # リポジトリをクローン
      - restore_cache:
          keys:
            - v1-deps-{{ checksum "circlecitestapp/package-lock.json" }}
            - v1-deps-
      - run:
          name: Install dependencies
          command: |
            cd circlecitestapp
            npm ci
      - save_cache:
          paths:
            - ~/.npm
          key: v1-deps-{{ checksum "circlecitestapp/package-lock.json" }}
      - run:
          name: Run lint
          command: |
            cd circlecitestapp
            npm run lint
      - run:
          name: Build Next.js app
          command: |
            cd circlecitestapp
            npm run build

workflows:
  version: 2
  build_and_test:
    jobs:
      - build

解説

cimg/node:20.10
- CircleCI が提供する公式 Node.js イメージを利用。
- プロジェクトの package.json に合わせて Node のバージョンを指定するとよいです。
キャッシュ (restore_cache / save_cache)
- package-lock.json の checksum をキーにしてキャッシュすることで、依存関係インストールを高速化できます。
npm ci
- 再現性のあるクリーンインストール。CI/CD では npm install より推奨。
テスト → ビルドの順序
- npm test はデフォルトでは Next.js プロジェクトにテストがないので失敗する可能性あり。
- もしまだテストを用意していなければ、npm test のステップは一旦コメントアウトして OK。
- ここでは一旦 npm run lint で取り急ぎ走れるものだけで動きを確認。

最後に

CI/CD の分野は色々と話し出すとキリがないので、一旦今回の記事はここまででございます。
また今後 CI/CD・DevOps 分野でネタを用意してお話しできればと思います。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up