VSCodeで始める競技プログラミング(環境構築編)

2018-04-15

入門者向けに競技プログラミングのはじめ方について説明します.
使用するのはC++とVisual Studio Codeです.
そこそこ簡単に競プロを始めるのを目指して紹介していきます.

環境

今回は, macOSで紹介していきます.

コンパイラのインストール

C++を実行形式に変換するために, C++用のコンパイラをインストールします.
とは言ってもmacには,clangがデフォルトで入ってるはずです.
以下のコマンドを実行して, g++ not foundと出力されなければ,コンパイラは既に入っています.
コンパイラが入っていた場合は次のVisual Studio Codeのインストールに進んでください.

which g++

コンパイラが入ってない場合は, ターミナルを起動します.
ターミナルはFinderを開いて, よく使う項目 » アプリケーション » ユーティリティ と移動して, ターミナル.app をダブルクリックで起動できます.

ターミナルが起動したら, 次のコマンドを入力してReturnを押します.

xcode-select --install

ウインドウが表示されたらインストールを押します.
インストールが完了したらコンパイラのインストールは完了です.

VisualStudioCodeのインストール

Visual Studio Code(以下VSCode)は, Microsoftが開発したGUIのエディタです. 
デバッグ, Gitクライアントとの統合, シンタックスハイライトなどの機能があり, 拡張機能が豊富です.
競プロのような1つのファイルで完結するようなプログラムを記述する際はIDEよりもエディタの方が適しています.

早速VSCodeをインストールしましょう.
VSCodeの公式サイト(https://code.visualstudio.com/)のトップにある, 緑のDownload for Mac(Macの場合)をクリックするとzipファイルがダウンロードされます.
ダウンロードされたzipファイルを開くと, Visual Studio Code.app が出てきます.
このappファイルをアプリケーションフォルダに移動すればインストール完了です.

VSCodeの公式サイトトップ VSCodeのインストール

VisualStudioCodeの使い方

VSCodeを起動しましょう.
起動直後は以下のような画面が表示されます.
(前回開いていたウインドウの状態が復元する場合もあります)
まず,フォルダを開く..クリックして適当なフォルダを選択します.
今回はホームディレクトリ以下にCPPフォルダを作成して, そこを選択します.
事前にターミナルでmkdir -p ~/CPPを実行してディレクトリを作っておきます.

起動直後 ディレクトリを開いた後

先ほど開いたディレクトリ(~/CPP)はワークスペースのルートディレクトリになり, このディレクトリ以下でファイルを編集します.
ファイルを新規作成するには, ワークスペースルートディレクトリ名横の新しいファイルをクリックします.
ディレクトリを作成する場合は, その横の新しいフォルダーをクリックします.

新しいファイル 新しいフォルダー

とりあえず, hello.cpp というファイルを作成しましょう.
新しいファイル をクリックすると, ワークスペースルートディレクトリ以下にファイルが出現して, 名前を入力することができます.
そこに hello.cpp と名前をつけて return を押すと, 右にエディタ画面が開きます.
このエディタ画面でソースコードを記述します.
とりあえず, Hello, World と出力するだけのソースコードを書いてみましょう.

#include <iostream>

int main(){
    std::cout << "Hello, World" << std::endl;
    return 0;
}

保存する場合は ⌘(command) + S (commandを押しながらS) または上のツールバーから ファイル>保存 です.
ソースを保存したら, 早速実行してみましょう.
⌃(control)+⇧(shift)+@ を押すと統合ターミナルが開きます.
起動直後はワークスペースルートディレクトリがカレントディレクトリになっています.
以下のコマンドでファイルをコンパイルし, 実行できます.

g++ -std=c++11 hello.cpp
./a.out

1行目がコンパイルするコマンドです.
コンパイルが完了すると, a.out という実行できるファイルが生成されます.
-で始まる部分はオプションで, コンパイラの設定です.
-std=c++11はC++11というバージョンのC++のソースコードをコンパイルするときに指定します.
現在, 多くの競プロのオンラインジャッジではC++11またはC++14までに対応しているので, -std=c++11 または -std=c++14 を指定すれば大丈夫です.
2行目で実行ファイルを実行しています.
Hello, Worldと表示されれば大丈夫です.

Hello.cpp 統合ターミナルを開いた状態

拡張機能のインストール

VSCodeでは拡張機能をインストールすることでエディタをカスタマイズすることができます.
快適に競プロをするために, 拡張機能を入れてみましょう.

C/C++

VSCode画面の一番左にアイコンが5つ縦に並んでいると思います.
その一番下の 拡張機能 をクリックします.
すると, 左タブに拡張機能選択画面が出現します.
上のテキストボックス Marketplaceで拡張機能を検索 の部分に C/C++ と入力して returnキー を押して検索します.
検索して一番上に出てきた, 同じ名前のものを インストール します.
インストールが終了したら, 有効化するために 再度読み込む をクリックするとVSCodeが再起動して拡張機能が有効化されます.
今インストールしたのは言語サポートと呼ばれるもので以下のような機能を一括で提供してくれます.

  • コードフォーマット
  • 自動補完
  • シンボルサーチ
  • デバッグ機能のサポート

これらの機能については, 今回は説明を割愛します.

拡張機能画面 C/C++

C/C++ClangCommandAdapter

次に C/C++ Clang Command Adapter をインストールします.
これは, C++の標準ライブラリなどの関数名補完をしてくれます.
ちなみに, clangというコンパイラが必須です.
(macの場合はデフォルトでclangなので大丈夫です)
先ほどと同様に C/C++ Clang Command Adapter をインストールします.
次に設定ファイルを編集します. 上のバーから Code>設定>基本設定 を選択します.
設定では2つのエディタが開きます. 左がデフォルトの設定で, 右が個人設定です. 基本的に設定を変更したい部分を左から右にコピーして編集します.
右の設定が上書きされる形で設定が適用されます.

テキストボックス設定の検索clang.executableと入力します.
すると, 左のエディタで一致する設定が現れます.
左のエディタで該当する設定の行を選択すると, 鉛筆マークが出てきます. それをクリックすると, 右のエディタに設定がコピーされます.
そしたら, "clang.executable": "clang++",と修正してください.
次に clang.cxxflags と検索して, 同様にコピーをして, "clang.cxxflags": [ "-std=c++14"],と修正します.
修正が完了したら, ⌘(command) + S で設定を保存です.

C/C++ Clang Command Adapter 設定画面
設定例(右のエディタの16, 17行目を参照)

CodeRunner

次に Code Runner をインストールします.
これは, ワンタッチでコンパイルをしてくれる機能です.
同様に Code Runner と検索して同じ名前の機能をインストールしてください.
C/C++ Clang Command Adapterと同様に設定を編集します.
code-runner.runInTerminal と検索し編集します. "code-runner.runInTerminal": true,と修正してください.
次に code-runner.executorMap と検索し編集します.
言語毎に設定するのですが, cppという行を探して, "cpp": "cd $dir && g++ -O2 -std=c++14 $fileName && ./a.out",と修正します.
そして, ⌘(command) + S で保存です.

設定例(右のエディタ21行, 26行を参照)

ソースコードを開いている状態で, ⌃(control) + ⌥(option) + N を押すとターミナルが開いて, コンパイル&実行してくれます.

参考