追記: この記事は こちらの私 (原著者) のブログで公開されました。

C++ は静的型付き言語で、フリーフォーマットな、(通常は) コンパイラ型の言語です。また、C++ は複数のプログラミングパラダイムが組み合わせられている、汎用の中級 (中水準) プログラミング言語です。

簡単に言えば、C++ は C 言語 がベースの、効率的で洗練された汎用プログラミング言語です。

このプログラミング言語は、ビャーネ・ストロヴストルップによって、1979 年に開発されました。

C++ の主な機能のひとつにコンパイラがあります。コンパイラは、C++ のコードをコンパイルし、実行するのに用いられます。

A compiler is a special program that processes statements written in a particular programming language like C++ and turns them into machine language or "code" that a computer's processor uses. (引用元)

(訳: コンパイラは、C++ のような特定のプログラミング言語で書かれたプログラムを、コンピューターのプロセッサーが直接実行できる機械語や「コード」に変換 (コンパイル) する、特別なプログラムです。)

実は、C++ に関する課題でコンパイラを使う必要があったので、この記事を書くことにしました。周りの皆は CodeBlocks IDE または Visual Studio IDE を使っていました。しかし私は、プログラミングには Visual Studio Code を使い慣れていました。

その後私は、VS Code エディターの内部で直接、C++ をコンパイルする方法を見つけようとしました。このような訳で、この記事ができあがりました。

この記事では、コンパイラを VS Code 内に設定する方法についてお伝えし、C++ のとっておきのリソースへのリンクをご紹介いたします。

前提条件

• C++ の事前知識
  (この記事では、読者が C++ を学習しているか、学習を始めようとしているか、または単に記事を読むのを楽しんでいることを想定しています。この記事は C++ 入門チュートリアルではありません。ある程度 C++ を理解している必要があります。)
• Visual Studio Code エディター
  こちら からエディターをダウンロードし、以下の設定ドキュメントをご覧ください: Windows 用、 Linux 用、Mac 用
• インターネット接続 (重要)

免責事項

この記事では Windows OS を使用します。ですが、他のオペレーティングシステムを使用しているユーザーにも参考となるリソースへのリンクをご紹介いたします。

さあはじめましょう！

C++ のコンパイラのダウンロードとインストール

• osdn.net/projects/mingw/ にアクセスしてから、「Windows mingw-get-setup.exe」をクリックして MinGW のセットアップファイルをダウンロードしてください。もしくは、こちら をクリックして Windows 向けのダウンロードサイトへ移動するか、こちらをクリックして Mac にインストールする方法をご確認ください。

MinGW, a contraction of "Minimalist GNU for Windows", is a minimalist development environment for native Microsoft Windows applications. (引用元)

(訳: 「Minimalist GNU for Windows」の短縮形である MinGW は 、Microsoft Windows ネイティブアプリケーション用の最小限の開発環境です。)

• ダウンロードが終わったら、MinGW のインストールを開始して、「MinGW Installation Manager」が表示されるのを待ちます。

• 「MinGW Installation Manager」が表示されたら、mingw32-gcc-g++ のチェックボックスをクリックしてから、「Mark for Installation」を選んでください。

• 上部の左端にあるメニューの中の、「Installation > Apply Changes」をクリックしてください。

• 変更の適用が完了するのを待ちましょう。この処理は必ずインターネット接続が安定している状態で実行してください。

PATH 環境変数を編集して C++ のコンパイラがあるディレクトリを含める

PATH is an environment variable on Unix-like operating systems, DOS, OS/2, and Microsoft Windows, specifying a set of directories where executable programs are located. In general, each executing process or user session has its own PATH setting. (引用元 )

(訳: PATH とは、Unix 系のオペレーティングシステムや DOS、OS/2、Microsoft Windows 上の環境変数であり、実行可能なプログラムが配置されている一連のディレクトリを特定するものです。一般的に、 実行中プロセスまたはユーザーセッションは独自の PATH 設定をもちます。)

インストール後、MinGW は C:\MinGW\bin にあります。ここで、このディレクトリを PATH 環境変数に含める必要があります。コンピューターを長年使用しているなら、その方法をすでにご存じかと思います。そうでない場合は、以下のガイドを参考にしてください:

• Windows OS 向けのガイドはこちら
• Linux 向けのガイドはこちら
• Mac OS 向けのガイドはこちら

Code Runner 拡張機能を VS Code にインストール

これでコンパイラが設定されたので、Code Runner をインストールしましょう。

Code Runner を使えば、次に示した多数の言語のコードスニペットやコードファイルを実行できます:

C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, Lisp, Kit, and custom command.

(訳注: 言語のリストは 2019 年 10 月時点の情報です。最新情報は Code Runner ダウンロードページ を参照してください。)

• こちら をクリックしてダウンロードしてください。
• または VS Code の marketplace の検索ボックスで検索してください。

• インストール後、 VS Code を再起動してください。
• C++ のファイルを VS Code で開きます。ベーシックな hello world を出力するプログラムを以下に示します:

#include <iostream>
using namespace std;
int main() 
{
    cout << "Hello world!";
    return 0;
}

このファイルを test.cpp という名前で保存してください。

Code Runner を使ってコードを実行

• ショートカットキーの Ctrl+Alt+N を使用してコードを実行します。
• または、F1 キーを押してから、Run Code を入力して選択してください。
• あるいは、テキストエディターを右クリックして、エディターコンテキストメニューの中の Run Code をクリックしてください。

コードが実行され、出力パネルに結果が表示されます。ショートカットキーの Ctrl+Shift+U を使用して出力パネルを開いてください。

実行中のコードを停止するには

• ショートカットキーの Ctrl+Alt+M を使用します。
• または、F1 キーを押してから、Stop Code Run を入力して選択してください。
• あるいは、出力パネルを右クリックしてから、コンテキストメニューの中の Stop Run Code をクリックしてください。

これで C++ の開発環境を VS Code の中で設定することができました！

終わりに

もう一つ、アドバイスがあります。

初期設定では、VS Code の出力パネルは読み取り専用です。次のコードのように、ユーザーに入力を要求する場合:

#include <iostream>
using namespace std;

const double pi = 3.14159; 

void calculate()
{
  double area; 
  double radius;

  cout<<"Enter Radius: "<<endl; 
  cin>>radius;

  area = pi * radius * radius; 

  cout<<"area is: "<<area<<endl;
 }
 
int main()
{
  calculate(); 
  return 0;
}

Cannot edit in read-only terminal と表示され、ターミナル (出力パネル) への入力ができません。
これを解決するには、手動で読み取りと書き込みを可能にする必要があります。

• VS Code のメニューから、File > Preference > Setting を選択してください。
• 左側のパネルの User タブの中の、extensions セクションを選択してください。
• スクロールして「Run Code Configuration」 を探してください。
• スクロールして Run in Terminal (組み込みターミナル内でコードを実行するかどうか) のチェックボックスを探し、ボックスにチェックを入れてください。

もしくは

• setting.json ファイル内に、以下の行を追加してください:

"code-runner.runInTerminal": true

これで設定が完了し準備が整いました :)

C++ のリソース

こちらに、C++ の学習を始めるのに役立つリソースをいくつか挙げてみます:

• https://www.learncpp.com/
• https://www.codecademy.com/learn/learn-c-plus-plus
• https://www.udemy.com/free-learn-c-tutorial-beginners/
• https://www.sololearn.com/Course/CPlusPlus/
• https://www.youtube.com/watch?v=vLnPwxZdW4Y
• https://www.tutorialspoint.com/cplusplus/cpp_useful_resources.htm
• https://makeawebsitehub.com/learning-c/

謝辞

• MinGW Project
• Code Runner by Jun Han

お読みくださいましてありがとうございました!

Visual Studio Code は最も人気のあるコードエディターの 1 つです。それは無料で、すっきりしたインターフェースを備えており、プログラミングをより簡単で楽しいものにする無数の拡張機能を備えています。

私 (原著者) はフロントエンドのウェブ開発者で、仕事中や私のYouTube チャンネルで VS Code を使用しています。これまで、コーディング中に再読込ボタンをクリックせずに自動的にブラウザーを再読込させる方法について、多くの人から質問がありました。

それは、Live Server と呼ばれる VS Code の便利な拡張機能を設定することで実現できます。この投稿では、それがどのように動作するのかについて、また VS Code エディターに Live Server をインストールして設定する方法について、詳しくお伝えします。

なぜ Live Server 拡張機能を使用すべきなのか？

通常、コードを変更したり何か新しいものを記述した時には、ページを手動で更新して変更を確認する必要があります。

言い換えれば、毎日 100 回変更する場合、ブラウザーを 100 回更新する必要があります。

ところが Live Server 拡張機能は、これを自動化してくれます。Live Server をインストールした後では、たったひとつのボタンで、自動化されたローカルホスト (localhost) を起動して、ブラウザー上で動作させることができます。

Live Server は、いったんコードを変更したり何か新しいものを記述すると、それを保存した後に、ブラウザーを自動的に更新します。これで、素早く自動的に変更を確認できるようになるでしょう。

もしよろしければ、以下のチュートリアル動画を見ることもできます:

最初に、VS Code をインストール

すでに VS Code をパソコンにインストール済みであれば、この手順をスキップしてかまいません。そうでない場合は、公式サイトから VS Code をダウンロードできます。

VS Code のダウンロードとインストールが済んだら、次のようなウェルカム画面が表示されます:

左側にいくつかのアイコンが見えるはずです。その内の 1 つ (デバッグアイコンの下) が拡張機能のボタンです:

そのボタンをクリックすると、検索バーが現れます。そこに「live server」と入力してください。

多くの選択肢が表示され、システムに適したものをどれでも選ぶことができます。私は Ritwick Dey の Live Server を使用しているので、この例ではそれを選びます:

install ボタンをクリックすると拡張機能をインストールできます。

新しい HTML ページを作成

Live Server を起動するには、少なくとも 1 つの HTML ページを作成する必要があります。それを用意するには、左側に見えているいくつかのボタンの、一番上にあるファイルのアイコンのボタン (Explorer ボタン) をクリックしてから、New File ボタンをクリックし、index.html と入力してください:

設定の問題と対処法

HTML ページを作成して Live Server 拡張機能をインストールした後ならば、「Go Live」アイコンが下の青い領域 (ステータスバー) に表示されるはずです:

表示されていない場合は VS Code を再起動してください。それでうまくいくはずです。

「Go Live」ボタンをクリックすると、(ポート番号が指定された) ローカルホストがデフォルトのブラウザー上で起動するはずです。同じボタンをクリックすることで、Live Server をいつでも起動または停止できます。

もしこの段階に到達したならば、おめでとうございます！ :) これで Live Server と連動できます。その他にまだ問題がある場合は、こちらの投稿で詳細情報をご確認ください。

結論

この投稿が、VS Code の Live Server 拡張機能のインストールと設定に役立つことを願っています。ウェブ開発についてさらに学習したい場合は、私の YouTube チャンネルにお気軽にアクセスしてください。

お読みくださいましてありがとうございました!