はじめに
「AIを使ったアプリを作ってみたいけど、どうしたら良いかわからない」「AIを使用してどんなことができるか試してみたい」という方はいませんか？
この記事では、以下の2つのツールを使って、環境構築なしで生成AIアプリ開発をスタートする方法を紹介します。
- GitHub Codespaces: クラウド上の開発環境（無料枠あり）
- Claude Code CLI: AI支援でコーディング（Claude Proプラン利用）
GitHub Codespacesとは？
プログラミングを始めるとき、通常は以下のような準備が必要です。
- プログラミング言語（Node.js、Pythonなど）のインストール
- コードエディタ（VS Codeなど）のインストールと設定
- 各種ライブラリやツールのインストール
- 環境変数の設定
- プロジェクトごとの環境の切り替え など
初心者にとって、この段階でエラーが出ると解決が難しく、挫折の原因になっていました。
Codespacesについて
GitHub Codespacesは、クラウドの開発環境です。
主なメリット
-
環境構築が不要
必要なツールがすでにインストール済みの状態で使い始められます。 -
どのデバイスからでもアクセス可能
PCのスペックを気にする必要がありません。タブレットやChromebookからでも開発できます。 -
無料枠で十分に試せる
個人利用なら月60時間まで無料で使えます（2コア）。
無料枠について
GitHub Codespacesの無料プランでは、以下が提供されます。
- コンピュート時間: 120コアアワー/月（2コアマシンで60時間相当）
- ストレージ: 15GB/月
実際にどのくらい使えるの？
- 1日2時間の使用で約1ヶ月間使える
- 学習や個人プロジェクトには十分な量
- 30分操作がないと自動的にサスペンドされるので、無駄な消費を防げる
Codespacesの使い方
1. GitHubアカウントの作成
まだGitHubアカウントをお持ちでない方は、GitHubにアクセスして無料アカウントを作成してください。
2. リポジトリの作成
- GitHubにログイン
- 右上の「+」マークから「New repository」を選択
- リポジトリ名を入力（例：
my-first-ai-app） - 「Public」または「Private」を選択
- 「Add a README file」にチェック
- 「Create repository」をクリック
3. Codespacesの起動
-
左上のハンバーガーメニューをクリック
-
以下画像の「Codespaces」タブを選択
-
画面右上の「New Codespace」をクリック
-
以下の内容を選択して、「Create codespace」を選択する
「Repository」：先ほど作成したリポジトリを選択する
「Machine type」：2-core
数十秒〜1分程度で、ブラウザ上にVS Code環境が立ち上がります。
4. 基本的な使い方
起動したCodespaces環境では、以下のことができます。
- ファイルの作成・編集: 左側のファイルツリーから操作
- ターミナルの使用: 下部のターミナルでコマンド実行
5. 注意点
- 定期的に保存：変更は自動でGitにコミットされないので、定期的に保存しましょう。
- 使い終わったら停止：使わない時は停止して、無料枠を節約しましょう。
Claude Code CLIとは？
Claude Code CLIは、Anthropic社が提供するAIによるコーディング支援ツールです。ターミナルから対話的にClaudeとやり取りしながら、コードの生成、デバッグ、リファクタリングなどを行えます。
必要なもの
-
Claude Proプラン（月額$20）への加入
- Claude.aiでProプランにアップグレード
- Proプランに加入していれば、追加のAPI料金なしでClaude Code CLIを使用できます
インストール方法
Codespaces環境（またはローカルのターミナル）で以下を実行します。
# Claude Code CLIのインストール
npm install -g @anthropic-ai/claude-code
認証
インストール後、以下のコマンドで認証を行います。
claude login
-
プロプランに入っているので1を選択
-
「Code で外部の Web サイトを開きますか?」は「開く」を選択し、承認する
-
認証コードを入力して、「Enter」を押す
認証が完了すれば、準備完了です。
インストールの確認
正しくインストールされたか確認しましょう。
claude --version
バージョン番号が表示されればOKです。
基本的な使い方
ターミナルでclaudeコマンドを実行するだけで、対話的なセッションが始まります。
claude
できること
- コードの生成
- バグの修正
- コードの説明
- リファクタリング提案
- ファイルの読み書き
- ターミナルコマンドの実行 など
終了方法
-
/exitコマンドまたはCtrl+C
利用上の注意点
-
Proプランの割り当て内で使用
追加のAPI料金は発生しませんが、Proプランの利用制限があります。 -
APIキーの設定に注意
環境変数ANTHROPIC_API_KEYが設定されていると、そちらが優先されてAPI料金が発生する可能性があります。Proプランのみで使いたい場合は、この環境変数が設定されていないことを確認してください。
まとめ
この記事では、環境構築なしで生成AIアプリ開発を始めるための準備として、以下の2つのツールを紹介しました。
GitHub Codespaces
- ブラウザだけで使える開発環境
- 月60時間ほどまで無料
- どのデバイスからでもアクセス可能
Claude Code CLI
- Claude Proプランで追加料金なしで使える
- AIがコーディングを支援してくれる
- ターミナルから対話的に使える
次のステップ
次回の記事では、生成AIで要件定義を行う方法をプロンプトのポイントなどと一緒に紹介します。Claude Codeの力を借りながら、プログラミング初心者でもアプリを作れることを体験していただければと思います。