logologo
GitHub Codespacesで手軽に始めるソフトウェア開発。料金や使い方も解説
thumb_githubcodespaces_01

GitHub Codespacesで手軽に始めるソフトウェア開発。料金や使い方も解説

アンドエンジニア編集部
2022.09.17
この記事でわかること
GitHub Codespacesは、ブラウザさえあればタブレットでもPCでも開発が始められます
クリック1つで開発環境が起動し、すぐに開発作業に入ることができるので生産性が向上します
現在、個人向け無料プランはベータ版のみですが、将来的には、無料で正式提供される予定です

GitHub Codespacesとは

img_githubcodespaces_01

GitHub Codespacesとは、GitHubが提供するクラウドホステッド開発環境を指します。GitHubのウェブサイトから起動することが可能で、ウェブベースの統合開発環境(IDE)として用いることができます。フロントエンドにコードを展開することなく、ウェブブラウザだけで開発することが可能です。

【参考】:GitHub Codespaces 【参考】:GitHub Docs: GitHub Codespaces

分かりやすく言うと、タブレットやPCなどのクライアントにブラウザさえあれば、クリック1つで開発環境が起動し、すぐに開発作業に入ることができるというサービスです。

IDEとは?詳細やメリット、おすすめのIDEを紹介します!

そもそもGitHubとは

GitHubとは、オープンソースやプライベートリポジトリベースの、ソフトウェア開発プラットフォームを指します。ソースコードをホスティングすることで、多くのソフトウェア開発者が連携してコードをレビューする開発プロジェクトとして利用されます。日本語サイトも公開され、開発者に利用されています。

【参考】:GitHub Japan 【参考】:GitHub ブログ

GitHub Codespacesの特徴

GitHub Codespacesは、VS Code(Visual Studio Code)のバックエンド処理を高速に行うだけではなく、VS Codeの機能をフル活用し、ローカル環境と同等の操作感を得ることができます。Docker-composeを用いることで、コンテナベースの開発環境を整備し統一することもできます。

あらかじめプリビルド構成を作成し、簡単に開発環境をセットアップ管理する機能も追加されました。この機能では、環境構築時間を短縮することができるメリットがあります。2022年2月よりパブリックベータ版が提供されていましたが、2022年6月に正式リリースとなりました。

【参考】:Prebuilding codespaces is generally available 【参考】:GitHub ブログ: GitHub Codespacesのプレビルド機能がリリースされました

GitHub Codespacesの活用方法

GitHub Codespacesは、ウェブブラウザだけで開発することができます。そのため、iPadなどのタブレットやChromebookのように、VS Codeデスクトップのインストールをサポートしていないデバイスを用いた開発も可能です。

VS Code拡張機能に対応しますので、ローカルのVS Codeと連携させることもできます。整備した開発環境は、Dev containerの仕組みによりコード化し、共有することができます。

GitHub Codespacesの料金プラン

GitHub Codespacesの料金プランですが、現在GitHub TeamsとGitHub Enterprise Cloudユーザーのみに提供されています。VMごとに課金されており、最小構成が2コア・4GBメモリで時間あたり0.18USドルです。最大構成時は、32コア・64GBメモリで時間あたり2.88USドルです。このほか、ストレージ使用量でも課金されます。

【参考】:GitHub Codespaces 【参考】:GitHub Codespaces の支払いについて

個人向けFreeプラン(無料)のユーザーには、現在Codespacesベータ版のみが提供されています。将来的には、無料で個人向けに提供される予定です。

GitHubチームでの利用状況

2021年8月11日・同30日のBlogでは、GitHub開発チームでもCodespacesを利用していることが公表されました。Blogによると、従来はインフラのメンテナンスに際し環境維持と構築に多くの時間を費やしていたとのことです。 【参考】:GitHub’s Engineering Team has moved to Codespaces 【参考】:GitHub開発チームでのCodespacesの利用

GitHubチームでの利用効果

GitHubではCodespacesの導入により、タスクごとに開発環境をオンデマンド構築することが可能になったと公表しています。従来の作業が45分から5分に短縮し、さらに設定済みプリビルド構成のCodespacesを用いることで10秒に短縮しました。 【参考】:GitHub開発チームでのCodespacesの利用

このことからCodespacesでは、開発環境構築を素早く簡単に提供することで、利用者は開発作業に注力し生産性向上が期待できると考えられます。

GitHub Codespacesの使い方

img_githubcodespaces_02

GitHub Codespacesは、GitHubアカウントがあれば利用可能です。個人アカウント向けにはベータ版が提供されます。ベータ版は申し込み登録後、GitHubの承認手順を経て利用通知が届く仕組みです。詳細な使い方は以降で解説していきます。

【参考】:GitHub Docs: Deep dive into GitHub Codespaces

Codespaceの作成方法

利用に際して、最初にCodespaceを作成します。ウェブやCLIを用いて、ご利用のリポジトリや履歴から作成します。

具体的には、GitHubのリポジトリのメインページに表示されている、リポジトリ名の「Branch」ドロップダウンメニューから作成するBranchを選択します。そこで「<> Code」のボタンをクリックし、「Codespaces」のタブから「Create codespace on master」を選択することで作成を行います。

【参考】:GitHub Docs: codespace を作成する

Codespaceの構成変更

Codespace作成時に必要に応じて、マシンタイプ等の構成を変更することも可能です。構成が決まったら、「Start session」で作成処理を開始します。このCodespaceの作成は、VS Codeから作成することもできます。VS Codeデスクトップ版で利用するには GitHub Codespaces拡張をインストールしておきます。

【参考】:GitHub Codespaces

Codespaceの設定とセットアップ

Codespaceの作成によって、VMとストレージが割り当てられます。その後、開発環境で利用するコンテナが作成されます。作成時には、リポジトリ内のdevcontainer.jsonファイルやDockerfileで定義できる設定が用いられます。devcontainer.jsonファイルにより、codespace作成後の自動セットアップも可能です。

Codespaceの終了方法

Codespaceの停止は、VS Codeのコマンドパレットから行うことができます。stopコマンドを実行せずにブラウザのタブを閉じるなどを行った場合は、非アクティブウィンドウの状態に遷移し、デフォルトでは30分後に停止します。

GitHub Codespacesは、インスタンス稼働時間で利用料が課金されます。無駄な支払いを防ぐためには、明示的に停止することをおすすめします。

Codespaceの削除方法

Codespaceの削除は、GitHubのメニューから「Your codepaces」を開きます。ここで「・・・」から「delete」をクリックすることで、作成したCodespaceを削除することができます。

GitHub Codespacesは、アカウントのすべてのCodespacesストレージ使用量の合計で請求されます。無駄な支払いを防ぐためには、不要なCodespaceはこまめに削除することをおすすめします。

開発環境構築が手軽にできます

img_githubcodespaces_03

GitHub Codespacesでは、クリック1つで開発環境が利用開始できるメリットがあります。VS Codeデスクトップ版に対応していないタブレットでも気軽に開発を行うことができます。バックエンドにVMとストレージが割り当てられるので、お手軽です。その効果を1度体験するとVS Codeベースの開発に弾みがつき、おすすめの開発方法と言えます。

気になる人のXをフォローしよう!
公式LINE
公式YouTube
マイナビITエージェント

編集部オススメコンテンツ

thumb_gptowten_01
ChatGPTの面白い使い方15選!ビジネスや遊び相手になる事例
アンドエンジニア編集部
2024.02.19

アンドエンジニアへの取材依頼、情報提供などはこちらから

お問い合わせ・情報提供

カテゴリー

編集部おすすめコンテンツ

アンドエンジニアへの取材依頼、情報提供などはこちらから

logologo
Powered by マイナビ AGENT