| layout | default |
|---|---|
| title | 開発環境の準備 |
本講義中は、GitHub Codespacesを用いてCodex CLIを利用します。 GitHub Codespacesは、クラウド上で開発環境を提供するサービスで、ブラウザーだけで開発環境を利用できます。 これにより、インストールやセットアップの手間を省き、すぐに開発を始めることができます。
GitHubが提供するクラウドの開発環境です。 GitHub Codespaces
-
環境構築不要 通常、プログラミングや開発を行う際は複数のツールをインストールする必要がありますが、Codespaces上のマシンには主要なツールがすでにインストールされています。 自分のPCには何もインストールしなくても、すぐに開発を始められます。
-
どのPCでも同じ環境 クラウド上で開発を行うことができるため、個人のPCの設定などに左右されず、チーム全員が同じ設定で作業できます。
まずはじめに、GitHubでリポジトリを作成しましょう。
- リポジトリとは、Gitで管理しているフォルダー、ディレクトリのことです。
補足：💡フォルダー、ディレクトリ、リポジトリの違い
- パソコンの中でファイルを入れる「入れ物」
- 物理的なディレクトリ構造の見た目のこと
- フォルダーとほぼ同じ意味ですが、コンピューター用語寄り
- ターミナルやコマンドラインで「今いる場所」を指すときに「ディレクトリ」と言う
- 例：
cd my-siteは「my-site」というディレクトリに移動するという意味です。
- Gitで管理されているフォルダー（＋その中の履歴データ）
- 普通のフォルダーとの違いは「中に
.gitという隠しフォルダーがあり、過去の履歴や設定が入っている」こと - GitHubにアップすると、そのままインターネット上のリポジトリにもなります。
- GitHub にログインし、右上の「＋」→ New repository をクリック
- Repository name に任意の名前（例：
my-site）を入力し、Add READMEをオンにして、Create repository をクリックします。
- 作成したリポジトリのトップページがこのようになっていることを確認します。
- 右上の「＋」→ New Codespace をクリックします。
- Codespace作成の設定画面に移行するので、Repositoryから先ほど作成したリポジトリを選択します。その他の設定はデフォルトのままでOKです。Create codespaceをクリックします。
作成から起動までに1〜3分ほどかかる場合があります。ブラウザーは閉じずにそのまま待ちましょう。
Codespacesの料金について
Codespacesは毎月一定量まで無料で使用することができます。 個人用のGitHubアカウントには、月あたり15GBのストレージと、120コア時間の使用時間が付与されます。 コア時間は使用するマシンのスペックによって消費量が異なります。 2コアマシンを1時間使うと2コア時間を消費し、8コアマシンを1時間使うと8コア時間という計算です。 詳しくはGitHub Codespacesの料金についてをご確認ください。
GitHub Codespacesは、クラウド上で動作するVS Code（Visual Studio Code）です。 VS Codeは、Microsoftが提供する無料のソースコードエディターで、多くのプログラミング言語をサポートし、拡張機能を通じて機能を追加することができます。
Codespaces/VS Codeの画面構成について簡単に説明します。
-
ファイルエクスプローラー 左側に表示されるファイルエクスプローラーは、プロジェクト内のファイルやフォルダーを表示します。ここからファイルをクリックすることで、エディターで開くことができます。
-
エディター 画面中央に位置するエディターは、コードを編集するための領域です。シンタックスハイライトやコード補完機能が利用でき、効率的にコードを書くことができます。
-
ターミナル 画面下部に表示されるターミナルは、コマンドを実行するためのインターフェースです。ここでGitコマンドやnpmコマンドを実行して、プロジェクトの管理やビルドを行うことができます。
それでは実際にCodespaces上でCodex CLIを動かしてみましょう。
まず、Codespacesのターミナルで以下のコマンドを実行し、Codex CLIをインストールします。 実行は、このコマンドをターミナルに入力（コピー＆ペースト）し、Enterキーを押すことでできます。
npm i -g @openai/codexこのコマンドで、Codex CLIがCodespaces上のマシンにグローバルにインストールされます。
インストールが完了したら、以下のコマンドでCodex CLIを起動します。
codex実行すると、以下のように回転するロゴが表示されます。
この講義では、APIキーを使ってCodex CLIにサインインします。 APIキーは、AIを使うための合言葉のようなものです。他人に見せたり、GitHubや公開ページに貼ったりしないでください。 講義用APIキーが配布される場合は、先生やTAの案内に従って入力します。
講義では、ChatGPTアカウントでのサインイン手順は扱いません。画面に複数の認証方法が表示された場合は、APIキーを使う選択肢を選んでください。
API key と書いてあるところに、講義中に案内されたAPIキーをペーストします。 講義用APIキーが配布される場合は、下の欄に授業中に共有されたパスワードを入力すると表示できます。
講師向け：講義用APIキーを公開する手順
授業前に、ローカルで次のコマンドを実行します。入力したAPIキーとパスワードは画面に表示されません。
node scripts/encrypt-class-api-key.mjs作成された assets/data/class-api-key.enc.json をGitHub Pagesに公開すると、このページのフォームから復号できます。授業後はOpenAI Platform側で講義用APIキーを削除してください。
成功すると、上記のような画面になります。 失敗する場合は、APIキーのコピー漏れや入力場所を確認してください。講義用APIキーを使っている場合は、先生やTAに確認しましょう。
Codexでは複数のモデルを選択できます。モデル一覧は頻繁に更新されるため、講義資料のスクリーンショットと実際の画面でモデル名が違う場合があります。
2026年5月時点では、OpenAIの公式ドキュメントでは多くのコード生成タスクの標準として gpt-5.5 が案内されています。Codex CLIのモデル選択画面では、APIキーの設定や利用できるモデルによって、gpt-5.5、gpt-5.4、gpt-5.3-codex など表示される候補が変わることがあります。
表示されていれば、公式ドキュメントで案内されている最新モデルの gpt-5.5 を選びます。表示されない場合は、gpt-5.4 や gpt-5.3-codex など、その時点で選べる新しいモデルを選べばOKです。迷った場合は、最初はデフォルトのモデルのまま進めても構いません。
Codexを起動している画面で、
/model
と入力してください。
すると、このようにどのモデルを選択するかの画面が出てきます。
注: この資料の画像は講義作成時点のスクリーンショットを含むため、画像内のモデル名が古い場合があります。画面に古いモデル名が写っていても、実際にはその時点で表示される新しいモデルを選んでください。
キーボードの上下矢印キーで使いたいモデルに移動し、Enterキーを押します。
すると、Reasoning Levelの選択画面に移ります。 Reasoningとは、AIが考えるプロセスのことであり、ReasoningのLevelを上げると、AIがより多く考えて良い答えが返ってくる可能性が高まります。
本講習で扱う静的なWebサイトのコーディングは比較的シンプルなので、Reasoning Levelは最初は Low を選べば十分です。複雑なバグ修正や大きな設計変更を依頼する場合は、Medium (default)、High、Extra high を検討します。
どんな時にReasoningが必要？
以下のようなケースでは、Reasoningがあるとより良い結果を得られやすいです。- バグの原因特定
- アルゴリズムの設計・選定
- コードレビューでの問題発見
- 複雑なデータ分析
- 数学の問題
Reasoningをおこなうようにすると、その分解答にかかる時間も増えるので、Codex CLIに限らず、普段生成AIを使用するときも使い分けを意識するとよいかもしれません。
- Codex CLIを終了するには、CLIを実行しているターミナルで
Ctrl + Cを押します。 - この後は「Codex CLI用ターミナル（対話用）」と「通常のbashターミナル（コマンド実行用）」の2つを並行して使います。画面右上の「＋」から新しいターミナルを開き、
bashと表示されるタブでコマンドを実行してください。 - モデル名やUIは変わりやすいので、迷った場合はCodex CLI公式ドキュメントも確認してください。
前へ → はじめに 次へ → Codex CLI でサイト作成 目次へ → ホーム