Squadbase テックブログPublicationへの投稿
💻

もう環境構築で挫折しない。非エンジニアのためのGitHub Codespaces完全解説

genki
に公開
GitHub
Python
初心者
Codespaces
環境構築
tech

「Python学習を始めたいけど、環境構築でつまづいて諦めた」

こんな経験はありませんか？私自身、普段はBizDevとして働いており、Pythonは決して得意ではありません。しかし、最近ではGitHub CodespacesとAIの助けを借りて、データ可視化ダッシュボードやチャットボットなどをStreamlitで開発できるようになりました。

なぜプログラミング学習は「環境構築」で挫折するのか？- プログラミング初心者が直面する3つの壁

プログラミング学習を始めたばかりの人にとって、環境構築こそが最も困難なステップです。最初の一歩のはずなのに、いきなり高い壁にぶつかることになります。本記事では、ここをスキップするためにGithub Codespacesを紹介しますが、念の為、何がそんなに難しいのか確認しておきたいと思います。

1. 言語と実行環境のインストール (ターミナル操作)

書いたコードを動かすには、その言語の実行環境をマシンにインストールする必要があります。プログラミング言語とその実行環境はアプリストアからインストールするのではなく、基本的にはターミナル (エンジニアが使ってる "黒い画面") からインストールする必要があります。GUIから操作可能なインストーラーが提供されている場合もありますが、プログラミング言語のバージョン管理が必要になったりすると結局ターミナル操作が必要になります。

この際、自分のOS・CPUアーキテクチャの組み合わせに合った手順を選択する必要があるのも、難しいポイントです。AppleシリコンのMacなのか、Intel (x86) のWindowsなのか、WSLなのかで手順が大きく変わります。

2. 言語のバージョン管理や仮想環境の管理

次に立ちはだかるのは、"Python 3.11以上" などの実行環境のバージョン指定をしなければいけない場面です。たとえばオープンソースのAIツールを使おうと思いたったものの、ローカルにインストールされているPythonが3.9で、ドキュメントには Python 3.11 以上が必要と書いてある...。さてどうしたものか、となりがちです。また、Pythonの場合には仮想環境の管理も必要になるかもしれません。

3. 手順通りやったのになぜか動かない... (トラブルシュート)

そして3つ目の壁は、ガイド通りに進めても「なぜかプログラムが動かない」ということが容易に起きることです。手順通りにやったはずなのになぜかエラーメッセージが出るのです。

環境構築だけで膨大な時間を費やしてしまい、肝心のプログラミング学習になかなかたどり着けない、という経験はないでしょうか？これは決して珍しいことではありません。

解決策：GitHub Codespacesとは？- PCに何もインストールしない、画期的な開発環境

この問題を解決するのが GitHub Codespaces です。

一言で表現するとブラウザ一つで、すぐにプログラミングを始められるクラウド開発環境です。数クリックの簡単なセットアップを行うだけで、いつでも使える開発環境が手に入ります。

技術的な仕組み（非エンジニア向け）

GitHub Codespacesは、クラウド上のコンピューターを借りる仕組みです。あなたのPCには何もインストールせず、GitHubが管理するサーバー上でプログラミング環境が動作します。

この背景には、コンテナ技術(Dockerが代表例)があります。コンテナとは、アプリケーションとその実行環境をパッケージ化する技術で、「どのコンピューターでも同じように動く」ことを保証します。難しい設定は全てGitHubが管理してくれるため、利用者は開発に集中できます。

安心材料：Codespacesの料金体系 - ここまで無料で使えます

Codespacesには無料枠があり、まずはお金をかけずに始めることができます。

無料枠の詳細

GitHubの無料アカウントには、毎月120コア時間のコンピューティング利用と15GB/月のストレージが含まれています。

「コア時間」とは「CPUのコア数 × 利用時間」のことです。例えば：

  • 2コアのマシンを1時間使うと → 2コア時間消費（月60時間まで利用可能）
  • 4コアのマシンを1時間使うと → 4コア時間消費（月30時間まで利用可能）

初心者の学習用途であれば、デフォルトの2コアのマシンで十分です。つまり、実質的に月60時間も無料で使えると考えてよいでしょう。これだけあれば、週に数時間の学習ではまず使い切ることはありません。

実践(ハンズオン)：5分で起動！あなたの最初のPython環境を動かしてみよう

実際にGitHub Codespacesを体験してみましょう。

ステップ1: GitHubアカウント作成

既存のアカウントがある場合はスキップしてください。GitHubにアクセスし、無料アカウントを作成します。

ステップ2: 最初のCodespaces起動

  1. GitHubにログイン
  2. 画面右上の「+」から「New repository」を選択
  3. リポジトリ名を入力（例：my-first-codespace）
  4. 「Add a README file」にチェック
  5. 「Create repository」をクリック
  6. 作成されたリポジトリページで緑色の「Code」ボタンをクリック
  7. 「Codespaces」タブを選択
  8. 「Create codespace on main」をクリック

Setup screen

以下の画面画面が開けば成功です！(Codespacesの初期起動には少し時間がかかる場合があります。画面が切り替わるまでしばらくお待ちください。)

Setup completed screen

ステップ3: 実用的なミニプロジェクト体験

「Hello World」だけでは面白くありません。実際にデータを可視化してみましょう。

まず、データファイルを作成します。

Codespacesが起動したら、新しいファイルdata.csvを作成し、以下の内容を入力：

Month,Sales
Jan,100
Feb,150
Mar,200
Apr,175
May,225

次に、Pythonスクリプトを作成します。

新しいファイルmain.pyを作成し、以下のコードを入力：

import pandas as pd
import matplotlib.pyplot as plt

df = pd.read_csv('data.csv')

plt.figure(figsize=(8, 6))
plt.plot(df['Month'], df['Sales'], marker='o')
plt.title('Monthly Sales Chart')
plt.xlabel('Month')
plt.ylabel('Sales (in 10k JPY)')
plt.grid(True)

plt.savefig('sales_chart.png')
print('Chart saved as sales_chart.png!')

続いて、ライブラリをインストールして実行します。

プロジェクトに必要なライブラリはpandasとmatplotlibです。これらを高速なパッケージマネージャーであるuvを使ってインストールしましょう。

Codespacesでuvを使うには、まずuv自体をインストールし、Pythonの仮想環境を作成する必要があります。

ターミナル（画面下部の黒い部分）で以下のコマンドを実行します。

pip install uv
uv init
uv venv
uv add pandas matplotlib

仮想環境とは、Pythonプロジェクトごとに独立した「作業スペース」を作る仕組みです。これにより、プロジェクトAで使うライブラリのバージョンが、プロジェクトBで使うライブラリと衝突するのを防げます。uv venvコマンドは、この仮想環境を簡単に作成してくれます。

上記のコマンドが成功すれば、必要なライブラリのインストールは完了です！

実行中画面

installing

実行完了画面

installed

最後にPythonスクリプトを実行します。

python main.py

数秒で実行が完了し、sales_chart.pngというファイルが生成されます。このファイルをクリックすると、グラフが表示されます。

Execution result screen

これで、「本当に自分のPCを汚さずに、クラウド上で開発が完結するんだ！」と実感できます。

コスト管理のベストプラクティス

Codespaces停止・削除の習慣化が重要です。

作業終了時は必ずCodespacesを停止または削除してください。放置すると課金が続きます。GitHub右上のアイコンから Settings > Codespaces を開き、Default idle timeout の時間を30分（デフォルト）などに設定しておきましょう。

初心者が陥りやすい落とし穴は以下の通りです。

  • 複数のCodespacesを同時に起動したまま放置
  • 大きなファイルをCodespaces内に保存し続ける
  • 無料枠の残量を確認せずに使い続ける

より良い環境のための.devcontainer設定

先ほどのハンズオンでは、ターミナルでいくつかコマンドを実行して環境を整えましたね。これで「とりあえず動かす」ことはできましたが、Codespacesにはもっと便利な使い方があります。それが、.devcontainerという特別な設定ファイルを使う方法です。

この.devcontainerを設定しておけば、Codespaceを起動するたびに、必要なツールやライブラリが自動でインストールされ、Pythonの仮想環境も準備された状態になります。まるで自分専用の完璧な開発マシンが、一瞬でクラウド上に立ち上がるようなものですね。

.devcontainerとは何か？

.devcontainerは、プロジェクトのルートディレクトリに置かれる特殊なフォルダです。この中に、devcontainer.jsonという名前の設定ファイルを作成します。

devcontainer.jsonファイルは、Codespacesに対して以下のような指示を出します。

  • どのOSイメージを使うか: （例: Python開発に適したUbuntuベースのイメージ）

  • どのツールをインストールするか: （例: uvコマンドなど）

  • Codespacesが起動したときにどんなコマンドを実行するか: （例: 必要なライブラリの自動インストール）

このファイルがあることで、開発環境が「コードの一部」として管理されるようになります。

.devcontainer/devcontainer.jsonの設定例

では、実際にuvを使ってpandasとmatplotlibが自動でインストールされるように設定してみましょう。

  1. pyproject.tomlとuv.lockファイルを確認します。

uvはPythonプロジェクトの依存関係を管理するために、主に以下の2つのファイルを使用します。

  • pyproject.toml: プロジェクトに必要な直接的なライブラリが記述されるファイルです。これは人間が読み書きするために使われ、uv addコマンドで自動的に更新されます。

  • uv.lock: pyproject.tomlに記述されたライブラリだけでなく、それらが依存するすべてのサブライブラリまで含め、各ライブラリの正確なバージョンとハッシュ値が厳密に記録されるファイルです。これはuvが自動で生成・更新するファイルで、環境の再現性を保証するために不可欠です。

先ほどuv initとuv add pandas matplotlibを実行したことで、これらのファイルは既に自動で作成・更新されています。pyproject.tomlとuv.lockがプロジェクトのルートディレクトリに存在することを確認してください。

  1. プロジェクトのルートディレクトリに.devcontainerフォルダを作成します。

  2. その.devcontainerフォルダの中に、devcontainer.jsonというファイルを作成し、以下の内容をコピー＆ペーストします。

{
  "name": "Python Development",
  "image": "mcr.microsoft.com/devcontainers/python:1-3.11-bullseye",
  "customizations": {
    "vscode": {
      "extensions": [
        "ms-python.python",
        "ms-python.vscode-pylance"
      ],
      "settings": {
        "python.defaultInterpreterPath": "./.venv/bin/python",
        "python.terminal.activateEnvironment": true,
        "python.terminal.activateEnvInCurrentTerminal": true
      }
    }
  },
  "onCreateCommand": "pip install uv",
  "postCreateCommand": "uv sync && echo 'source .venv/bin/activate' >> ~/.bashrc",
  "remoteUser": "vscode"
}
  1. GitHubリポジトリに変更をプッシュ(保存)します。

これでdevcontainer.jsonの設定ファイルが作成できました。これらのファイルをGitHubリポジトリに保存することで、次回からCodespaceを起動する際に、devcontainer.jsonのpostCreateCommandがこれらのファイルを読み込み、全く同じ開発環境を自動で構築してくれます。

Codespacesのターミナルで以下のコマンドを順番に実行し、変更をGitHubにプッシュしましょう。

git add .
git commit -m "Add devcontainer setup"
git push

これで、あなたのCodespaces環境設定がGitHubに保存され、どこからでも同じ環境を再現できるようになりました！

この設定のポイント解説

  • "image": "mcr.microsoft.com/devcontainers/python:1-3.11-bullseye": Codespacesの土台となるイメージを指定しています。ここでは、Python 3.11 がプリインストールされた Microsoft 公式の Dev Containers イメージ (devcontainers/python) の bullseye バージョンを使用しています。これにより、Python 環境構築の手間を省けます。

  • "customizations": このセクションでは、主に VS Code のカスタマイズに関する設定を記述します。

    • "vscode": VS Code 固有の設定です。

      • "extensions": Codespaces が作られたときに自動でインストールされる VS Code 拡張機能を指定します。

        • "ms-python.python": Python 開発に必須の公式拡張機能です。コード補完やデバッグ、テスト実行など、基本的な機能を提供します。

        • "ms-python.vscode-pylance": Python の高速な言語サーバーです。より賢いコード補完や型チェックを提供し、開発効率を向上させます。

      • "settings": VS Code の各種設定を上書きします。

        • "python.defaultInterpreterPath": "./.venv/bin/python": VS Code がデフォルトで使う Python インタープリタのパスを指定しています。これは通常、後で説明する uv venv で作られる仮想環境内の Python を指します。

        • "python.terminal.activateEnvironment": trueとpython.terminal.activateEnvInCurrentTerminal": true: これらの設定は、VS Code の統合ターミナルを開いたときに、自動的にPython の仮想環境を有効化するためのものです。これで、ターミナルを開くたびに手動で仮想環境に入るコマンドを打つ手間が省けます。

  • "onCreateCommand": "pip install uv": このコマンドはCodespacesが初めて作成されるとき（またはコンテナが再構築されるとき）に実行されます。ここでは、Python のパッケージ管理ツール uv をインストールしています。

  • "postCreateCommand": "uv sync && echo 'source .venv/bin/activate' >> ~/.bashrc": このコマンドは、Codespaces が最初に作成されたとき（またはコンテナを再構築したとき）に、onCreateCommand の後に自動で実行されます。

    • "uv sync": プロジェクトのpyproject.tomlとuv.lockファイルに基づいて、必要なライブラリを全て正確なバージョンでインストールし、仮想環境を同期します。これにより、環境構築の手間が省け、再現性の高い開発環境が自動でセットアップされます。

    • "echo 'source .venv/bin/activate' >> ~/.bashrc": この部分は、Codespaces の起動後に開かれるすべての Bash ターミナルで、自動的に Python 仮想環境がアクティベートされるように .bashrc ファイルに設定を追加しています。これにより、新しいターミナルを開くたびに手動で source .venv/bin/activate を実行する必要がなくなります。

  • "remoteUser": "vscode": Codespaces の中で作業するユーザーを指定しています。ここでは、VS Code が推奨する vscode ユーザーを使用しています。これにより、ファイルのパーミッションに関する問題を避け、スムーズに開発を進められます。

環境の自動化を体験しよう！

上記の変更をGitHubリポジトリにコミットしたら、Codespacesを一度「再構築」してみてください。

  1. VS Codeのコマンドパレットを開きます（Mac: Cmd + Shift + P / Windows/Linux: Ctrl + Shift + P）。

  2. 「rebuild」と入力し、「Codespaces: Rebuild Container」を選択して実行します。

再構築が完了すると、ターミナルを開いた瞬間に、uv syncが実行され、環境が完全に整っているはずです。これで、あなたはもう環境構築に時間をかけることなく、すぐにプログラミングに取り掛かることができますね！

一度、main.pyを実行してみてください。

python main.py

これで.devcontainerとuv.lockを設定したあなたのGitHubリポジトリは、単なるコードの保管場所ではなくなります。

GitHubのフォーク機能（他人のリポジトリを自分のアカウントにコピーする機能）を使えば、誰でもあなたのリポジトリを簡単に複製し、その上でCodespaceを起動するだけで、全く同じ開発環境をすぐに手に入れることができます。

つまり、あなたが作った環境は、特別なセットアップガイドがなくても、GitHub上で公開するだけで誰でもすぐにコードを書き始められる「配布可能な開発環境」として機能するのです！これにより、プロジェクトの共有やコラボレーションが格段にスムーズになります。

おすすめのエクステンション: GitHub Copilotでコード生成もらくらく

Codespacesをさらに便利にするのが、VS Codeのエクステンション（拡張機能）です。特に非エンジニアの方におすすめしたいのが、GitHub Copilotです。

GitHub Copilotは、AIがあなたの書いているコードをリアルタイムで分析し、次に書くべきコードを予測して自動で提案してくれるツールです。さらに、コードに関する質問をしたり、バグの原因を尋ねたりできる「チャット機能」も備わっています。

CodespacesでGitHub Copilotを使う方法

あなたの.devcontainer/devcontainer.jsonファイルを以下のように修正してください。

{
  "name": "Python Development",
  "image": "mcr.microsoft.com/devcontainers/python:1-3.11-bullseye",
  "customizations": {
    "vscode": {
      "extensions": [
        "ms-python.python",
        "ms-python.vscode-pylance",
        "GitHub.copilot"
      ],
      "settings": {
        "python.defaultInterpreterPath": "./.venv/bin/python",
        "python.terminal.activateEnvironment": true,
        "python.terminal.activateEnvInCurrentTerminal": true
      }
    }
  },
  "onCreateCommand": "pip install uv",
  "postCreateCommand": "uv sync && echo 'source .venv/bin/activate' >> ~/.bashrc",
  "remoteUser": "vscode"
}

この設定を追加してCodespacesを再構築すれば、次回Codespacesを起動したときには、GitHub Copilotが自動で有効になり、画面上にコード生成のサポートが表示されるようになります。

Execution result screen

非エンジニアにとって、Pythonの文法やライブラリの使い方をすべて覚えるのは大変です。しかし、GitHub Copilotがあれば、日本語でコメントを書くだけで、適切なコードの候補を提案してくれます。また、わからない部分があればチャットで質問し、その場で解決することも可能です。これにより、ゼロからコードを書くハードルが劇的に下がり、アイデアを素早く形にできるようになるでしょう。

Codespacesで手に入れた快適な開発環境と、AIの強力なサポートであるGitHub Copilotを組み合わせることで、非エンジニアでもプログラミングの楽しさを存分に味わい、様々なアイデアを実現できるようになります。ぜひ、この新しい開発体験を始めてみてください！

参考リンク集

Squadbase テックブログ
Squadbase テックブログPublication

AIアプリのためのデリバリープラットフォーム「Squdbase」のテックブログです。

Discussion