[Visual Studio Code][Mac] C言語をビルド(コンパイル)&ステップ実行する

vscode-mac-catch
 

ホントに手っ取り早くC言語の開発環境を作りたい方へ
最近はエディタのAtomやVisual Studio Codeを使って開発環境を作ることが流行っていますが、もっと簡単にやりたいなら統合開発環境のXcodeやVisual Studioをインストールするのがラクチンです。
※統合開発環境のVisual StudioはMac版もあります

もしくはコチラの記事を参考にどうぞ
>> [Win/Mac][超初心者向け]C言語の開発環境の初歩の初歩、シンプルな開発環境を作って使う

Visual Studio Codeについて
バージョンアップが早いため、この記事内容が現在でも有効かどうかは分かりませんのでご注意ください。


更新履歴
[2017/05/01]拡張機能Runnerがどれか分からないというお問い合わせを戴きましたので、Runnerの画像を付けました
[2016/10/19]本記事公開

 

こんにちは。kei(@boot_kt)です。

前回のWindows編に引き続き、今回はMac編です。

MacでもVisual Studio Codeを使ってC言語をコンパイル(ビルド)&ステップ実行します。

Mac編と言いましても、設定内容や手順はWindows編と同じです。
詳細な説明はWindows編をご覧ください。

この記事の概要

  • エディタ:Visual Studio Code Ver.1.6.1
  • 拡張機能:C/C++、Runner
  • OS:Mac OS X El Capitan
  • コンパイラ;gcc
重要!:ショートカットキーについて
この記事ではVisual Studio Codeの拡張機能としてRunnerとC/C++をインストールします。
どちらもショートカットキーを使うのですが、そのショートカットキーが効かないことあります。(押しても無反応な状態)

もしも同じようにショートカットキーに無反応という事があれば、この記事の最後の方にある ショートカットキーが効かない場合の対処法 をご参照ください。

ちなみにこの記事を書くにあたり使ったマシンはMacBook AirのUS配列キーボードです。
他のMacマシンでは試していないので分かりませんが、もしかしてUSキーボードがまずかったのかな?

コンパイラのみインストールの場合
Visual Studio Codeなんて要らない!!
コンパイラだけインストールしてC言語使えればええねん!!

とおっしゃる方はコチラの記事をご覧ください。
>> [Win/Mac][超初心者向け]C言語の開発環境の初歩の初歩、シンプルな開発環境を作って使う


 




VS Codeを使ってC言語を手っ取り早く動かす手順(概要)

  1. コンパイラのインストール
  2. VS Codeのインストール
  3. VS Codeの拡張機能のインストール
  4. VS Codeの設定ファイルの書き込み
  5. コンパイル用のshファイルを作る
  6. プログラムを書いてみよう
  7. プログラムを動かしてみよう
  8. ステップ実行をできるようにするための設定手順

上記手順を次項から説明します。

 

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

C言語を実行するためには、C言語で書かれたプログラムを実行ファイルに変換する必要があります。
実行ファイルに変換する作業をコンパイル/ビルドと言います。

さすがにVS Code単体ではビルドはできません。

別途コンパイルをしてくれるソフト(コンパイラと呼びます)のインストールが必要になります。

で、コンパイラはgccを使います。
いや、他にもっとありますけど、代表的なのがgccってことで。

  • gcc
    言わずと知れたgcc。
    コンパイラと言えばgcc。
    Macでのgccのインストール方法は幾つかあります。

    • Xcodeをインストールすることでgccも同時に入る
    • Homebrewでgccをインストール
    • MacPortsでgccをインストール

    私はXcodeをインストールすることでgccが入りました。

    Xcodeのインストールは問題が発生することがあります。
    その際はこちらの記事がお役に立てるかも知れません。
    >> App StoreからXcodeをインストールできない!?

gccのインストール

インストール手順については省略します。
XcodeのインストールはApp Storeからインストールできるので簡単です。

Homebrewを使いたいなら『homebrew gcc』、MacPortを使いたいなら『macport gcc』でググってみてください。

Xcodeのインストールは問題が発生することがあります。
その際はこちらの記事がお役に立てるかも知れません。
>> App StoreからXcodeをインストールできない!?

VS Codeのインストール

  1. VS Codeはここからダウンロードしてください。
     

    vscode_00000

  2. ダウンロードしたらZIPファイル(VSCode-darwin-stable.zip)ができます。
  3. これをダブルクリックして解凍します。
    解凍したらVisual Studio Code.appが出来ますので、それをアプリケーションに入れてください。
    Macでよくあるインストール方法ですね。

    vscode-mac-appicon
  4. あとはLaunchpadで起動するだけです。
     
    vscode-mac-00003

VS Codeの拡張機能のインストール

拡張機能は以下の2つをインストールします。

  • C/C++
    デバッグ情報付きコンパイル+ステップ実行に使います
  • Runner
    即実行するのに使います。(コンパイルもしますが、実行ファイルは即削除します)

C/C++のインストール手順

  1. 以下のいずれかの操作で拡張機能のパネルを出してください
     

    • メニュー表示拡張機能
    • Shift( + Command(⌘) + X vscode-mac-00034
    • 拡張機能のボタン

      vscode-mac-00035

  2. そしたらこんな画面が出ます
    拡張機能が何も表示されていなければ『C/C++』で検索してください。
    vscode-mac-00007
  3. C/C++のインストールをクリック
  4. こんな感じになるので有効をクリック
    vscode-mac-00008
  5. OKをクリックしてVS Codeを再起動
    vscode-mac-00009
  6. で、こんな画面になります
    vscode_00021

Runnerのインストール手順

  1. 拡張機能のパネルを出します
    ※手順は省略
  2. 『Runner』を検索
  3. Runnerのインストール&有効をクリック
  4. 再起動を促すダイアログが出るのでOKをクリックしてVS Codeを再起動

VS Codeの設定ファイルの書き込み

Runnerを導入したらVS Codeの設定ファイルに『runner.languageMap』の設定値が必要になります。

Runner用の設定

  1. 設定画面を出します。
    Code基本設定ユーザー設定

    vscode-mac-00014

  2. settings.json が開きます。
    vscode-mac-00015
    参考情報
    settings.jsonはここにあります↓
    /Users/(ユーザー名)/Library/Application Support/Code/User/settings.json
  3. 左側はデフォルト設定です。必要に応じて参考程度に見てください。
  4. 右側にRunner用の設定を書き込みます。
     
    before

    // 既定の設定を上書きするには、このファイル内に設定を挿入します
    {
    }
    

      

    after

    // Place your settings in this file to overwrite the default settings
    {
        "runner.languageMap": {
            "c": "/Users/(ユーザー名)/VisualCodeRunner/crun_gcc.sh"
        }
    }
    

    参考情報

    • crun_gcc.shは次項で作ります
    • /Users/(ユーザー名)/VisualCodeRunner としていますが、場所はどこでもいいです
    • shのファイル名もお好きに変えてOKです

JavaとかRubyとかにも対応したい場合

以下を追加してください。

        "cpp": "C:/VisualCodeRunner/cpprun.sh",
        "java": "C:/VisualCodeRunner/javarun.sh",
        "csharp": "C:/VisualCodeRunner/csrun.sh",
        "scala": "C:/VisualCodeRunner/scalarun.sh",
        "ruby": "C:/VisualCodeRunner/rubyrun.sh"

但し、各shファイルを作る必要があります。
本記事ではC言語以外のshの作り方は説明していませんので、下記の記事を参照してください。

 

コンパイル用のbatファイルを作る

/Users/(ユーザー名)/VisualCodeRunner もしくはお好みの場所にフォルダを作ってください。
その中に以下のバッチファイルを作ってください。

ファイル名はお好みで変更してもOKです。

ファイル名やパスを変更したらsettings.jsonに反映してくださいね。

注意:shファイルについて

  • 文字コード:UTF-8
  • 改行コード:LF

で作ってください。

crun_gcc.sh

#!/bin/sh

if [ -z "$1" ]
then
    echo "need argument"
    exit
fi

#-------------------------------
# 一時的に使う実行ファイル名を作る
#-------------------------------
tempfile=`date '+%m%d%H%M%S'`

#-------------------------------
# コンパイル実行
#-------------------------------
gcc -o $tempfile $1

#-------------------------------
# 実行
#-------------------------------
./$tempfile

#-------------------------------
# 実行ファイル削除
#-------------------------------
rm $tempfile

		

 




 

プログラムを書いてみよう

で、早速プログラムを書いてみましょう。
以下をコピペでいいですよ。

#include <stdio.h>

int main(void)
{
    printf("Hello, hello, world! \n");
    return 0;
}

プログラムを動かしてみよう

Ctrl + Shift + R

↑このショートカットで動きます。

vscode-mac-00021
ここまでのまとめ

  • 拡張機能を入れましたが、Runnerの機能だけを使って実行しました
  • Ctrl + Shift + R はRunnerのショートカットキーです
  • C/C++の拡張機能はまだ使っていません

ステップ実行をできるようにするための設定手順

さてここまでの手順を行うと、おそらく #include <stdio.h> の部分に緑の波線が引かれてあると思います。
カーソルをその中に移動すれば電球マークが出るでしょう。
vscode_20001

マウスその上に持っていけば Include file not found in include directory と表示されるでしょう。
vscode_20002

これは拡張機能のC/C++が出しています。
しかしC/C++の機能はまだ使っていませんので問題にはなりませんし、(Runnerによる)実行は可能です。

ここからはC言語のプログラムを一行ずつ実行するステップ実行をできるようにします。
そのためにC/C++の設定を行います。

ここからは以下のプログラムを使います。

#include <stdio.h>
int main(void)
{
    int a = 2;
    int b = 3;
    int c;

    c = a + b;

    printf("c(%d) = a(%d) + b(%d) \n", c, a, b);

    return 0;
}

C/C++用の設定(インクルードパス/c_cpp_properties.json)

  1. 上記のプログラムをどこかに保存
    まだVS Codeで開かなくていい。むしろVS Codeはまだ何も開かないで。

  2. ファイル開く... で上記ソースコード(step.c)を保存したフォルダを開く(開くときにファイルじゃなくてフォルダを選択してくださいね)
     

    vscode-mac-00029

    『フォルダーを開く』ボタンでもOKです。

    vscode-mac-00027
  3. エクスプローラーが表示されるので、step.cをダブルクリックして開く
    今回はSTEP01というフォルダにstep.cを保存している

    ※画像ではフォルダを STEP01 → VS1、ファイルを step.c → test.c に読み替えてください。

    vscode-mac-00028
  4. step.cを開くと前述した通り #include のところに緑の波線が出ているので、いずれかの操作をする(どっちでもいいです)
    • 電球アイコンをクリック
      Add include path to settings をクリック

      vscode_20006
    • ⌘cmmand + Shift + PF1 でもOK)
      C/Cpp: Edit Configurations を選択

      vscode-mac-00036
  5. c_cpp_properties.jsonが開くと同時に、step.cの保存フォルダの中に『.vscode』フォルダが自動作成されます。
    .vscodeフォルダの中にc_cpp_properties.jsonが保存されています。

  6. "Mac" のところの "includePath" を確認及び変更します。
    "includePath": ["/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.11.sdk/usr/include/c++/4.2.1/tr1"],
    ※ご自分の環境でstdio.hがどこにあるか探してくださいね。

  7. これでstep.cを確認すると緑の波線は取れているはず

C/C++用の設定(タスクランナー/tasks.json)

⌘command + Shift + B を押してみてください。
『タスクランナーが構成されていません。』というエラー情報が出るはずです。
以下の手順でtasks.jsonを作ってください。

  1. Ctrl + Shift + P
  2. Tasks: Configure Task Runner (or タスクランナーの構成)を入力or選択
  3. Others(or 任意の外部コマンドを実行する例)を入力or選択
  4. tasks.jsonが開くと同時に、.vscodeフォルダの中にtasks.jsonが保存されています。
  5. tasks.jsonを書き換えます。
    • gccの場合
      "args" に注目してください。
      -g :デバッグ情報を付加してコンパイル(ステップ実行するためにはデバッグ情報を実行ファイルに入れておく必要がある)
      -O0:最適化無しでコンパイル(最適化の意味が分からない方は気にしないでください)

      あと、実行ファイル名とcファイル名は必要なものに書き換えてください。

      {
          // See https://go.microsoft.com/fwlink/?LinkId=733558
          // for the documentation about the tasks.json format
          "version": "0.1.0",
          "command": "gcc",                       // このタスクランナーで実行するコマンド
          "isShellCommand": true,                 //  実行するコマンドがVS Code外部のシェルやコマンドプロンプトから実行されるものか。この場合は値がtrueなので、これは外部コマンド
          "showOutput": "always",                 // 出力方法の指定。always(常にVS Codeに出力結果を表示)/silent(problemMatcherプロパティが指定されていないときにのみ、VS Codeに出力結果を表示)/never(VS Codeに出力結果を常に表示しない)を指定可能
          "args": ["-g", "-O0", "-o", "step.out", "step.c"],
                                                  // 実行するコマンドに渡す引数
          "problemMatcher": "$tsc"                // エラー発生時にVS Codeに渡されるメッセージのフォーマットをどんな形式のメッセージとして処理するかの指定。この場合は「$tsc」となっているが、これはtscコマンド(TypeScriptコンパイラー)が出力する形式のメッセージとして処理することを指定している
      }
      

 

tasks.jsonができたら、⌘command + Shift + B を押してみてください。
今度は実行ファイルが生成されるはずです。されない場合は、プログラムソースかtasks.jsonのどちらかが間違っているので見直してください。

C/C++用の設定(タスクランナー/launch.json)

画面左の4番目のアイコン(虫みたいなマーク)をクリックするとデバッグのウィンドウが表示されます
vscode_20008
※図はWindowsのものですがMacも同じです。

ソースコードの行番号の左側をクリックするか、F9 キーを押すかすればブレイクポイントを付けたり外したりできます。

画面上の緑の▶マーク(再生ボタンみたいなやつ)をクリック

launch.jsonが無いため、このような画面がでます。
vscode_20009
※図はWindowsのものですがMacも同じです。

『C++ (GDB/LLDB)』を選択

launch.jsonが開くと同時に、.vscodeフォルダの中にlaunch.jsonが保存されています。

"program" が2箇所あります。
ここは緑の波線が付いているので、書き換えます。

            "program": "${workspaceRoot}/step.out",

ステップ実行する

  1. launch.json への追記が終わったら、step.cに戻って、緑の再生ボタン(デバッグ開始の▶ボタン/F5 キー)をクリック
  2. outファイルが実行されて、ブレイクポイントで止まっているはずです。
    vscode_20010
    ※図はWindowsのものですがMacも同じです。

  3. あとは思う存分ステップ実行してください。
    裏にコマンドプロンプトが立ち上がっていると思います。
    Visual Studio Codeの裏に隠れているかも知れませんので注意してください。
    printfなんかはコマンドプロンプトに表示されます。

ショートカットキーが効かない場合の対処法

デフォルトのショートカットキーが効くならこの設定は不要です。

Runnerでは Ctrl + Shift + R、C/C++では ⌘Command + Shift + B を使うのですが、どうもすんなり使えません。
押しても押しても無反応なんです。
Windowsの場合はそんな事無かったんですけど。

Ctrl + Shift + R はGoogle日本語入力で取られているみたいです。(Google日本語入力で使えないようにしようと設定をいじりましたが、そうすることはできませんでした)
⌘Command + Shift + B はなぜ効かないのかさっぱり分かりません。

で、『Visual Studio Codeにショートカットキーを変更登録』をしました。

(変更前)Ctrl + Shift + R → (変更後)Ctrl + Shift + E

(変更前)⌘Command + Shift + B → (変更後)Ctrl + Shift + B

キーは好きなように設定してください。
他で使ってるキーとカブらないように。

ショートカットキーの変更の仕方

vscode-mac-00034
  1. ショートカットキー設定画面を出します。
    Code基本設定キーボード ショートカット
     
    vscode-mac-00035

  2. 左側はデフォルト設定です。必要に応じて参考程度に見てください。

    デフォルト値はこれを探してください。
    ※これらはそれぞれの機能拡張をインストールしたら追加されているはずです

    Runnerのショートカットのデフォルト

    { "key": "ctrl+shift+r",          "command": "extension.runner.start",
                                         "when": "editorTextFocus" },
    

    C/C++のショートカットのデフォルト

    { "key": "shift+cmd+b",           "command": "workbench.action.tasks.build" },
    
  3. 右側にショートカットキーの設定を写して、好きなキーに変更します。

     
    before

    // 既定値を上書きするには、このファイル内にキー バインドを挿入します
    [
    ]
    

      

    after

    // 既定値を上書きするには、このファイル内にキー バインドを挿入します
    [
        { "key": "ctrl+shift+e",          "command": "extension.runner.start",
                                            "when": "editorTextFocus" },
        { "key": "ctrl+shift+b",           "command": "workbench.action.tasks.build" }
    ]
    
  4. で、右側のファイルを保存してください。

 




 

参考URL(この記事の元ネタ)

本記事の元ネタは以下のサイトから参照させて頂きました。
有益な情報をありがとうございます。

参考書籍

まとめ

Atomもそうなんですけど、Visual Studio Codeはエディタとは思わず統合開発環境だと考える方が個人的にはしっくりきます。
便利な機能(と言うかプラグイン)が沢山あって、使っていても楽しいですし、これからのエディタはAtomやVisual Studio Codeみたいになっていくでしょう。

しかしその反面、『エディタとして』の機能は弱いと感じる部分もあります。
これは個人個人の好みですので良い悪いというつもりは全くありませんが、個人的にはテキストを効率良く扱う基本機能が弱いという印象があります。
 

いずれにせよ今後はAtomやVisual Studio Codeのようなエディタが主流になると見て間違いないでしょう。

最近はAtomが人気ですがVisual Studio Codeも機能としては負けていません。
いや、個人的にはVisual Studio Codeの方が使い易く感じています。
 

みなさんもぜひぜひVisual Studio Codeを使い倒してみてください。

 


 

5 件のコメント

  • ④まではできたのですが、その次の進め方がさっぱりわかりません。教えてくださると嬉しいです。

    • 「5.コンパイル用のbatファイルを作る」ですかね?

      バッチファイル(シェルスクリプト)の作り方が分からないってことですかね?

      テキストファイルで書いて保存すればいいんですけど。
      ターミナルが使えるならターミナルで。
      ターミナルの使い方が分からないなら、、、、
      ファインダー(Windowsで言うところのエクスプローラー)→メニューの「移動」→フォルダへ移動→『/Users/hogehoge/VisualCodeRunner/』(hogehogeはあなたのユーザー名)を記述→移動ボタン
      ※ただし、VisualCodeRunnerフォルダは無いと思うので、『/Users/hogehoge/』に移動してフォルダ作成してください。

      で、テキストエディタでcrun_gcc.shを記事からコピって保存してください。

  • 6.のプログラムはどこで実行するのでしょうか?
    VisualCodeRunnerの中にcrun_gcc.shとは別にフォルダを作り、その中で新たに作ったファイルを開いて、記事のコードを貼り付けてデバッグの実行ボタン(緑の再生ボタンみたいなもの)を押したら以下のようなエラーが出ました。

    launch: program ‘enter program name, for example /Users/(ユーザー名)/VisualCodeRunner/c_practice/a.out’ does not exist

    よろしくお願いいたします。

  • 7. プログラムを動かしてみよう ができません
    VisualCodeRunnder/c_practice/practice.c にコードをコピペしたのですが問題点が二つあります。
    ①ctr+shift+Rでショートカットが実行されません
    ②デバッグモードのボタンを押すと以下のエラー文が出てしまいました

    launch: program ‘enter program name, for example /Users/(ユーザー名)/VisualCodeRunner/c_practice/a.out’ does not exist

    記事にあるような電球が出ないのですが、どんな原因が考えられるでしょうか?
    ご教授いただけると嬉しいです

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    ABOUTこの記事をかいた人

    Windows/Mac/Linuxを使う現役システムエンジニア&プログラマ。オープン系・組み込み系・制御系・Webシステム系と幅広い案件に携わる。C言語やC#やJava等数多くのコンパイラ言語を経験したが、少し飽きてきたので、最近はRubyやPython、WordPressなどのWeb系を修得中。初心者向けのプログラミング教室も運営中。オンライン・対面・出張等でプログラミングをレッスンします。