【図解】Visual Studio CodeのインストールからC++によるHello Worldまで（Windows編）
Visual Studio Codeは、Microsoftが提供しているフリーのエディターで、Windows、Mac、Linux問わず使用できます。機能は少ないですが、わかりやすく、見やすいのですごく重宝します。
このページでは、Windows10にVisual Studio Codeをインストールする方法とC++によるコンパイルおよび、実行環境の構築、Hello World!を表示させるまでを図解で解説していきます。
※今回インストールした環境は、Windows10（64bit-ver：1903）、ディスク空き容量53.4GBです。ソフトはVisual Studio Code（ver：1.42.1）、mingw-get（ver：0.6.3-pre-20170905-1）
全て最新バージョンで確認済み（2020/03/12現在）
Visual Studio Codeとは
Visual Studio CodeはMicrosoftが2015年にリリースしたソースコードエディタです。
デバッグ、Gitクライアントの統合、シンタックスハイライト、インテリセンス、スニペット、リファクタリングなどの機能を持っています。また、カスタマイズもでき、豊富な拡張機能が公開されており、非常に便利なエディタです。
対応言語はC言語、C++、Go、Java、Objective-C、Python、Rubyなど様々です。
Visual Studio CodeとGCCコンパイラのインストール
インストールに必要なもの
Windows PC（Windows10推奨）
ディスク空き容量1.5GB以上（筆者環境）
Visual Studio Codeインストール
準備が整ったら早速、Visual Studio Codeをインストールしましょう。
①「Visual Studio Code」のインストーラのダウンロード
Visual Studio Code公式サイト（←クリック）に移動します。
以下のページに飛ぶと思うので、「Download for Windows」をクリックしてください。
クリックしても保存されない人はこちらをクリックしてください。
Firefoxを使用している人で以下の警告ダイアログが出てきた場合は、「ファイルを保存」をクリックします。
②「Visual Studio Code」のインストール
「タスクバー」の「エクスプローラー」を起動します。
サイドバー内PCの「ダウンロード」をクリックします。
「VSCodeUserSetup-x64-1.43.0.exe」をダブルクリックします。
※1.43.0などのバージョン情報は各自の環境で読み替えてください。
インストーラーが起動したら「同意する」を選択して「次へ」をクリックします。
インストール先を指定する設定です。
特にいじる必要はないので、何もせず「次へ」をクリックします。
プログラムグループを指定する設定です。
特にいじる必要はないので、何もせず「次へ」をクリックします。
実行する追加タスクを選択します。
「デスクトップアイコンを作成する」にチェックを入れ、「次へ」をクリックします。
Visual Studio Codeをインストールする準備ができました。
「インストール」をクリックします。
インストール中の様子は以下の通りです。気長に待ちましょう。
インストールが完了すると以下の画面に変わります。
「完了」をクリックします。
GCCコンパイラのインストール
自分の書いたプログラムを機械が理解できるか、文法が間違っていないか、などの確認はコンパイラが行ってくれます。
Windows10の「Visual Studio Code」ではMinGWというソフトを使用してコンパイラを導入します。
①「MinGW」のインストーラーのダウンロード
MinGWの公式サイト（←クリック）に移動します。
以下のページに飛んだら、「mingw-get-setup.exe」をクリックしてダウンロードします。
クリックしても保存されない人はこちらをクリックしてください。
※私の場合（2020/03/12現在）では「mingw-get-setup.exe（Date: 2017-09-06，Size: 91.00KB）」でした。
Firefoxを使用している人で以下の警告ダイアログが出てきた場合は、「ファイルを保存」をクリックします。
②「MinGW」のインストール
「タスクバー」の「エクスプローラー」を起動します。
サイドバー内PCの「ダウンロード」をクリックします。
「mingw-get-setup.exe」をダブルクリックします。
MinGWのインストーラーが起動し以下の画面が現れたら、「Install」をクリックします。
インストールの設定です。
特に設定する項目はなくデフォルトで構わないので、「Continue」をクリックします。
インストールが始まります。インストール中は以下の画面が表示されます。
インストールが終了して、以下の画面になるまで気長に待ちましょう。
以下の画面のようにゲージが全て緑になり、「100％」と表示されていることが確認できたら「Continue」をクリックします。
「GCCコンパイラ」のインストール
正常に「MinGW」のインストールが完了したら以下の画面が立ち上がるはずです。
「mingw32-base-bin」を右クリックして、「Mark for Installation」をクリックします。
同じように「mingw32-gcc-g++-bin」を右クリックして、「Mark for Installation」をクリックします。
以下の画像のように「mingw32-base-bin」および「mingw32-gcc-g++-bin」の左側のチェックボックスに黄色の矢印が追加されていることを確認します。続いて「Installation」タブをクリックして「Apply Changes」をクリックします。
以下の画面が現れたら、「Apply」をクリックします。
ダウンロードおよびインストールが始まるので、終わるまで気長に待ちましょう。
ダウンロードおよびインストール中は以下の画像のような画面が現れると思います。
インストール全てが完了すると以下の画面が現れます。「All Changes were applied successfully」と表示されていることを確認し、「Close」をクリックします。
以下の画面のように、「mingw32-base-bin」および「mingw32-gcc-g++-bin」の左側のチェックボックスが緑になっていればインストール完了です。
MinGWの画面を閉じましょう。
③「MinGW」の環境変数設定
Windowsで「MinGW」のコンパイラを使えるようにシステム環境変数に登録していきます。
まず、Windowsマークを右クリックし、「システム」をクリックします。
「バージョン情報」ページが開いたら、「関連設定」項目内の「システム情報」をクリックします。
「コンピュータの基本的な情報の表示」画面が表示されたら、「システムの詳細設定」をクリックします。
「システムのプロパティ」画面が表示されたら、「環境変数」をクリックします。
「システム環境変数」内の「Path」をクリックして選択した後、「編集」をクリックします。
「環境変数名の編集」画面が表示されたら、「新規」をクリックします。
一番したの行が青く選択された状態になったら、「参照」をクリックします。
「PC」→「ローカルディスク（C:）」→「MinGW」→「bin」の順番でクリックして選択していきます。最後に「OK」をクリックしてください。
環境変数名の一覧末行に「C:MinGW\bin」が追加されたことを確認後に「OK」をクリックします。
その他開かれているウィンドウは閉じていただいて構いません。
以上で、「MinGW」の環境変数設定は終わりです。
④「MinGW」のインストール確認
「MinGW」が正常にインストールされたかを確認しましょう。
「Windowsマーク」の横にある検索バーに「cm」と入力後、「コマンドプロンプト」をクリックします。
コマンドプロンプトが開いたら以下の画像のような画面が表示されます。
「>」マークの後ろに
|
1 |
gcc -v |
と入力後「Enter↩︎」を押します。
gcc -v：gccというコンパイラのバージョンを表示するコマンドです。
「Enter↩︎」を押したら、ずらずらと情報が画面に表示されますが、慌てなくて大丈夫です。
最終行（C:Users\ユーザー名>）の一つ上の行にgcc version 9.2.0 (MinGW.org GCC Build-20200227-1)と出力されていれば問題ないです。
versionは各自の環境で違いますので、筆者の結果は参考程度に確認お願いします。
以上で、MinGWのインストールから確認までの手順は終了です。
Visual Studio Codeの初期設定とC++でHello World!
もう少しで、Visual Studio Codeを使う準備は整います。プログラムを書いて実行するまでに必要な初期設定とC++でHello World!を表示させるプログラムを書いて実行してみます。
Visual Studio Codeの初期設定
ここからは、Visual Studio Codeを使いやすくする設定です。今回は、日本語環境の設定とC++の環境を整えていきます。
Visual Studio Codeが起動すると以下の画像のような画面が表示されます。
拡張機能導入することによってVisual Studio Codeを日本語化したり、C++を使いやすくしたりすることができます。
①拡張機能「Japanese Language Pack for Visual Studio Code」の導入
まずは、Visual Studio Codeを日本語化していきます。
- 左のアイコン一覧の一番下にある四角いアイコンをクリックします
- 上の方にある検索窓に「Japanese」と入力します
- 検索結果一覧の「Japanese Language Pack for Visual Studio Code」をクリックします
- 緑の「Install」をクリックします
右下に通知ウインドウが出てくるので「Restart Now」をクリックして、Visual Studio Codeを再起動します。
再起動後に以下の画像のようにVisual Studio Codeが日本語化しているのを確認してください。
②拡張機能「C/C++」の導入
続いて、C++の環境を使いやすくする拡張機能を導入します。
この「C/C++」拡張機能ではC言語やC++記述時に文法ミスの指摘や補完機能が追加されます。
アイコン一覧の一番下にある拡張機能アイコンをクリックします。
- 検索窓に「c++」と入力します
- 検索結果一覧内の「C/C++」をクリックします
- 緑の「Install」をクリックします
インストールが完了すると以下の画像のように画面表示が変わります。
以上で基本的な拡張機能のインストールは終了です。
C++でHello World!
最後にC++を用いてhello world!とVisual Studio Code上に表示するプログラムを作って動かして見ましょう！
①ファイルの作成
左上の「ファイル」をクリック後、「新規ファイル」をクリックして、新しいファイルを作成します。
続いて、今作ったファイルを保存します。
左上の「ファイル」をクリック後、「名前をつけて保存」をクリックしましょう。
保存場所はデスクトップ内のc++講座という新規フォルダを指定しましょう。
- 「PC」をクリック
- 「デスクトップ」をクリック
- 「新しいフォルダ」をクリック
- 「c++講座」に名前を変更
（※慣れている方は上記に従う必要はありません。）
続いて、今作成した「c++講座」を選択します。
「c++講座」をダブルクリックしてください。
ファイル名を決めて、C++のファイル形式で保存します。
ファイル名に「hello」と入力し、ファイルの種類の「プレーンテキスト（*.txt;*.gitignore）」をクリックし、「C++（*.cpp;*.cc;*.cxx;*.c++:*.hpp;*.hh;*.hxx;*.h;*.ii;*.ino）」をクリックします。
最後にファイルを保存しましょう。
「保存」をクリックしてください。
以上で、やっとプログラムを書く準備ができました。
以下の画像のような画面になっていると思います。
②プログラム作成
Hello World!と表示するプログラムを書いて見ましょう。ソースコードは以下の通りです。
|
1 2 3 4 5 6 7 8 |
#include <stdio.h> int main(void) { printf("Hello World\n"); return 0; } |
ソースコードの解説に関しては「【図解】XcodeのインストールからC言語によるhello world!まで」をお読みください。
https://k-ham.com/xcode-install/#toc_id_3_2プログラムの保存ですが、Visual Studio Codeは自動保存されるので、気にしなくて大丈夫です。
Hello World!のプログラムをVisual Studio Codeに打ち込んだら以下の画像のようになります。
③プログラムの実行
プログラムをターミナルから実行していきます。
上部の「ターミナル」をクリックし、「新しいターミナル」をクリックします。
下の方に出てくるターミナルの
|
1 |
PS C:\Users\ユーザー名> |
の横に以下のコマンドを打ち込み、「Enter↩︎」を押します。
|
1 |
cd .\Desktop\ |
このコマンドはデスクトップフォルダに移動するというコマンドです。
cdが「Change Directory」のことです。
cdの後にスペースを入れて「De」と入力後に「Tabキー」を入力すると「Desktop」と補完してくれます。
入力後の画面は以下の画像の通りです。
次に先ほど作成したデスクトップ内にある「c++講座」フォルダに移動します。
ターミナルに以下のコマンドを打ち込んだ後、「Enter↩︎」を押してください。
|
1 |
cd .\c++講座\ |
入力後の画面は以下の画像の通りです。
続いて「MinGW」を用いたコンパイルを行います。
ターミナルに以下のコマンドを打ち込んだ後、「Enter↩︎」を押してください。
|
1 |
gcc -o program .\hello.cpp |
gcc -o 結果ファイル名 コンパイル元ファイル名
上記のコマンドはコンパイル元ファイルをコンパイル後に結果ファイル名として出力します。という意味です。
つまり、「hello.cpp」ファイルをコンパイル後に「program」というファイル名で出力します。
コマンド実行後の画面は以下の画像の通りです。
最後にコンパイルしたプログラムを実行します。
ターミナルに以下のコマンドを打ち込んだ後、「Enter↩︎」を押してください。
|
1 |
./program |
「Enter↩︎」を押した後、ターミナルに「Hello World!」と以下の画像のように表示されればプログラムが正常に実行されています。
./実行ファイル名（コンパイルの結果ファイル名）
上記のコマンドで実行ファイル（コンパイルの結果ファイル名）を実行することができます。
もし動いていない方がいたら、C++でHello World!からもう一度見直してください。
最後に私が実行した際のターミナルのログを参考として置いておきます。全く同じになるかはわかりませんが、同じような結果が表示されれば大丈夫です。
|
1 2 3 4 5 6 7 8 9 10 11 |
Windows PowerShell Copyright (C) Microsoft Corporation. All rights reserved. 新しいクロスプラットフォームの PowerShell をお試しください https://aka.ms/pscore6 PS C:\Users\ユーザー名> cd .\Desktop\ PS C:\Users\ユーザー名\Desktop> cd .\c++講座\ PS C:\Users\ユーザー名\Desktop\c++講座> gcc -o program .\hello.cpp PS C:\Users\ユーザー名\Desktop\c++講座> ./program Hello World PS C:\Users\ユーザー名\Desktop\c++講座> |
これでVisual Studio Codeの初期設定〜Hello World!全ての工程が終わりました。お疲れ様でした。
printfの""の間に他の文字を入れて出力させても面白いと思います。ぜひ試してみてください。