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

vscode-mac-catch
 


更新履歴
[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

    参考情報

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

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

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

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

 

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

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

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

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

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

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

で作ってください。

crun_gcc.sh

 




 

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

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

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

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++の設定を行います。

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

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ファイル名は必要なものに書き換えてください。

 

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箇所あります。
ここは緑の波線が付いているので、書き換えます。

ステップ実行する

  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のショートカットのデフォルト

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

  3. 右側にショートカットキーの設定を写して、好きなキーに変更します。

     
    before

      

    after

  4. で、右側のファイルを保存してください。

 




 

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

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

参考書籍

まとめ

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

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

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

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

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

 


 

コメントを残す

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

ABOUTこの記事をかいた人

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