💭

CodespacesのAtCoder競技プログラミング環境を構築してみた

2024/03/23に公開

はじめに

競技プログラミングの環境をCodeSpacesで実行できる環境を構築しました。
作った環境はAtCoder専用にしていますがちょっと弄れば他のサイトでも使えると思います。

この記事は作った背景やどのように作ったかをまとめます。
実際の使い方やはリポジトリを見てください。

TL;DR

リポジトリはこちらになります。

https://github.com/Takahiro3D/AtCoder

GitHubのアカウントを持っていればこのボタンを押すだけで実行できます。
コンテストを受けるだけなら無料枠で十分使えます。

Open in GitHub Codespaces

背景

普段AtCoderのコンテストに使っているメインPCの調子が悪くて入院している間に、サブPCでコンテストを受けようと思ったのですが

  • 環境構築が面倒
    環境構築あるあるですが一度セットアップしたら基本的に二度目はないので、別のPCでセットアップする時にどうやってセットアップしたか忘れてもう一度イチから調べ直す羽目に
  • マシンスペックが貧弱
    使用しているサブPCが10年以上前のものなので、コンパイルに時間がかかる始末
    普段は使わないPCだから買い替えはしたくない…

といった感じで結構躓いたので、前々からやりたかった環境のポータブル化をするために始めました。

Codespacesを利用すると以下のようなメリットがあります。

  • 新規環境構築が一瞬で終わる
    冒頭にも書いたとおりボタン一つで環境がセットアップできるので超簡単です。
    普段とは違うPCから実行したいときに便利です。
  • 環境の一元管理ができる
    開発環境をリポジトリで管理することになるので、複数PCの環境メンテナンスが楽になるメリットもあります。
  • 外出先でも簡単に実行できる
    (意外と実家は暇になるので) 帰省したときに実家のPCから動かすことが可能になります。ローカルに開発環境を入れて汚さなくて良いメリットがあります。
    また、Webブラウザ上からも動くので、自分のタブレットやスマホから動かすことも出来ます。PCは結構荷物になるので持ち運ぶ必要なくなるメリットは大きいです。
  • 低スペックPCでも動かせる
    競技プログラミングではスペックは求められませんが、高負荷な処理にもある程度対応できます。
    処理はクラウド上で行われるため、低スペックPCでも快適に開発できます。Codespacesで使用するマシンのスペックを選べるので、環境に応じて適宜リソースを使い分けられます。(勿論使いすぎると有料になるので注意が必要です)

構築方法

環境構築に設定した主要なファイルは以下になります。

.
├── .devcontainer              : Devcontainerの設定ディレクトリ 
│   ├── devcontainer.json        : Devcontainerの設定
│   └── Dockerfile               : Dockerイメージを作成するためのファイル
└── .vscode                    : VSCode作業環境の設定ディレクトリ
    ├── c_cpp_properties.json    : C/C++のコンパイラなどの設定
    ├── launch.json              : デバッグの実行設定
    ├── settings.json            : VSCodeの一般設定
    └── tasks.json               : ビルドやスクリプトの設定

Devcontinerの設定 (devcontainer.json)

Devcontainerはテンプレートが提供されているので、以下からC++のテンプレートを選択しました。
Available Dev Container Templates

以下でコンテナ実行時の引数を設定します。
GDBのデバッグを動かすために必要になります。
"runArgs": [ "--cap-add=SYS_PTRACE", "--security-opt", "seccomp=unconfined" ]

ターミナルで開くシェルを指定します。
デフォルトはbashのようなので、書かなくても問題ないです。
"terminal.integrated.shell.linux": "bash"

extensitonsでVSCodeの拡張機能を設定できます。
追加方法はExtenstionsのタブから入れたい拡張機能を右クリックしてAdd to devcontainer.jsonで行えます。

Dockerfileの設定 (Dockerfile)

テンプレートのDockerfileのコンテナイメージはオプション設定になっています。
今回は用途が決まっているのでコンテナイメージを固定にします

以下から使用できるタグを調べられます。
VS Code Remote / GitHub Codespaces Development Container Images

今回はgcc-12を使用したいので、インストールできるDebianバージョンを検索し、Debian-12を選択しました。普段Ubuntuを使用している人もDebianのほうが軽量なためDockerイメージを作成する場合はDebian推奨です。
Debian パッケージ検索

後は必要な追加パッケージをインストールするだけなので割愛。

VSCodeの設定

VSCodeの設定はCodespacesとは直接関係はないですが、快適に開発するための設定を行います。
各設定ファイルは以下を参考に作成します。
Using C++ on Linux in VS Code

一般設定 (settings.json)

ファイルフォーマット周りの設定をしています。
"files.associations"の設定は弄っているときに自動で追加されたのをそのまま使用しています。

ファイルの末尾に改行を入れる

"files.insertFinalNewline": trueでファイル保存時に末尾が改行で終わるようにフォーマットされるようになります。

コードフォーマットの設定

"editor.formatOnSave": trueで保存時にコードフォーマットが実施されます。
"C_Cpp.clang_format_style"でフォーマット時の設定をしています。

C/C++の設定 (c_cpp_properties.json)

C/C++の言語設定を行います。
コマンドでC/C++: Egit Configurations (UI)を実行するとUIでの設定も出来ます。

インクルードパスの設定

"includePath"にコンパイル時の追加インクルードパスを設定します。
${workspaceFolder}/**で作業ディレクトリ内を再帰的に検索されインクルードパスが追加されます。
(gccのデフォルトインクルードパスも設定してありますが、必要ないみたいです。)

言語バージョンの設定

"cStandard""cppStandard"に使用する言語バージョンを設定します。
AtCoderの提出時のデフォルト言語のC++20にしようと思いましたが、ojで言語設定のIDがわからなかったので最新のC++23を設定しています。

inteliSenseの設定

"intelliSenseMode"でinteliSenseにコンパイラとアーキテクチャを指示します。
今回はgccを使用するので"gcc-x64"にします。

Taskの設定 (tasks.json)

ビルドとスクリプトをタスク実行できるように設定します。

ビルド設定

ビルド設定をします。
今回は言語バージョンを変更しているのでg++の引数に"-std=gnu++23"を追加します。
また再ビルドする際にコンパイルエラー時に過去のプログラムを参照しないようするため、ビルド前にプログラムファイルを削除する託すを実行するよう設定します。
"dependsOn"にタスクを記載することで、ビルド前に設定されたタスクが実行されます。

スクリプト設定

online-judge-toolsのコマンドを毎回打つのは大変なので、taskに登録して簡単に実行できるようにする設定をします。
ただtasks.jsonにコマンドを記述する場合、改行が使用できない制約があります。
そのため、コマンドはbashを呼び出すようにして、実際の処理はbashファイル内に記述しました。

タスク実行時に引数設定したいタスクは、"inputs"を使用してタスク実行時にダイアログから入力できるように設定します。

デバッグの設定 (launch.json)

サンプルテストで失敗した時にデバッグできる設定をします。
サンプルテストの入力を毎回コンソールから行うのは面倒なので、リダイレクトを用いて実行時にサンプルテストのinputファイルを渡すようにしました。
使用するサンプルテストは"tasks.json"と同様に"inputs"を使用してデバッグ実行時にダイアログから入力できるように設定します。

まとめ

今回はAtCoder競技プログラミング環境をCodespaceで実行できる環境方法についてまとめました。
Codesaceの実行環境を整えることで、VSCodeで開発環境やエディターの設定をコード化の仕方を学習することが出来たのでぜひ試してみてください。

参照

Discussion