競プロの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日間のみ無料

https://www.gitpod.io/pricing/

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

##1.2. 空リポジトリを作成する
以下画像の「Repositories」の右にある「New」ボタンを押してください。
![r1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514612/35447742-8fa9-0583-01b2-a52e78030f30.png)

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


![r2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514612/fc7445f6-10f4-680a-3c57-b5d56454ed5d.png)

##1.3. 作成したリポジトリのURLをコピーする
GitPod経由でGitHubのリポジトリへアクセスするため、作成したリポジトリのURLをコピーしてください。
![r3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514612/41356273-bb7b-235a-5ccf-7965f75e3e5f.png)

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

##1.5. C++開発するために拡張機能「CodeLLDB」をインストール
以下画像の通りに「CodeLLDB」をインストールしてください。
![r4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514612/78ca352a-5c32-61d6-ad13-58dfcb66ab74.png)

##1.6. C++コンパイルするための設定ファイル作成
以下画像の通りに設定ファイルを作成してください。
![r5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514612/71f1c2d0-8171-1e27-b043-70eeeffe0c18.png)

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

```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
コンパイルするタスクを設定

```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のファイル作成してください。
![r6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514612/90f4b245-dee5-fd00-6efe-15d12e13d214.png)

```c++
#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」と出力されます。
![r7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514612/2400ba5a-c1e7-0aa4-45eb-2547a6e320fe.png)


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

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