競プロのC++開発環境をクラウド化する方法

0. はじめに

本記事の対象者は以下を想定しています。

• 競プロ開発環境のVisual Studio Codeをクラウド化したい。
• 手軽にC++開発環境を構築したい。
• 自分の開発環境を友人と共有したい。
• タブレットなどPC以外からコーディングしたい。

1. 導入手順

導入手順はGitHubアカウント作成し、自身のGitHubアカウントに空のリポジトリを作成します。
次にGitPodという「Visual Studio Code」をクラウド化したサービスを利用してC++開発環境を構築します。
※Visual Studio Code の拡張機能は一部のみしか利用できません。
GitPodを無料で利用する場合、以下の制限があります。(2020年8月時点)

• Publicリポジトリ：月50時間以内
• Privateリポジトリ：最初の30日間のみ無料

1.1. GitHubアカウントを作成する

以下URLへアクセスしてアカウント作成してください。
ここで入力したメールアドレスがアカウント名になります。
https://github.com/

1.2. 空リポジトリを作成する

以下画像の「Repositories」の右にある「New」ボタンを押してください。

「Repository name」は英数字で入力してください。
自身のリポジトリを識別するための名称になります。
GitHubの公開範囲は「Public」と「Private」が選択できます。
GitPodを無料で利用する場合は「Public」設定にして、全体に公開してください。

1.3. 作成したリポジトリのURLをコピーする

GitPod経由でGitHubのリポジトリへアクセスするため、作成したリポジトリのURLをコピーしてください。

1.4. GitPod経由でGitHubへアクセスする

以下URLを開き、「get-started」の部分をGitHubのURLへ変更して開いてください。
余談ですが、uBlockなどの広告ブロッカーを入れていると、BackspaceやCtrl+Sが効かなくなるので無効化してください。
https://www.gitpod.io/#get-started

1.5. C++開発するために拡張機能「CodeLLDB」をインストール

以下画像の通りに「CodeLLDB」をインストールしてください。

1.6. C++コンパイルするための設定ファイル作成

以下画像の通りに設定ファイルを作成してください。

launch.json

デバッグするプログラム名や、事前にコンパイルするタスクを指定

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  "version": "0.2.0",
  "configurations": [
        {
            "name": "Launch(C++)",
            "type": "lldb",
            "request": "launch",
            "program": "${fileDirname}/a.out",
            "preLaunchTask": "build before debug",
            "initCommands":["settings set target.disable-aslr false"]
        }
  ]
}

tasks.json

コンパイルするタスクを設定

{
	// See https://go.microsoft.com/fwlink/?LinkId=733558
	// for the documentation about the tasks.json format
	"version": "2.0.0",
	"tasks": [
		{
            "label": "build before debug",
            "type": "shell",
            "command": "g++",
            "args": [
                "-std=c++14",
                "-Wall",
                "-Wextra",
                "-g",
                "${file}",
                "-o",
                "${fileDirname}/a.out"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
	]
}

2. 実際にコンパイル＆デバッグする

2.1. C++ソースを作成する

以下画像のように拡張子cppのファイル作成してください。

# include <bits/stdc++.h>
using namespace std;

int main() {
    int N;
    cin >> N;
    if (N >= 30) {
        cout << "Yes" << endl;
    } else {
        cout << "No" << endl;
    }

    return 0;
}

2.2. 実際にデバッグする

以下画像のようにDebugタブを開き、「Launch(C++)」の左の再生ボタンを押してください。
下部タブの「./workspace/リポジトリ名」がコンソール ウィンドウとなっています。
試しに「30」と入力してEnterを押すと「Yes」と出力されます。

3. おわりに

GitPodはC++以外にも以下言語・フレームワークに対応しています。
https://www.gitpod.io/docs/languages-and-frameworks/

今回作成したリポジトリは以下に置いたので、自由に使ってみてください。
https://github.com/yukkes/atcoder