[初心者向け]JetBrains製IDE CLionでC/C++快適デバッグ

この記事は[eeic Advent Calender 2017](https://qiita.com/advent-calendar/2017/eeic) の6日目の記事です。

プログラミングを始めたばかりで何か使いやすいエディターやIDEがあれば知りたい、という方向け(主にB3、B4向け)の記事になっています。すでに好みがあったり、環境構築が万全な方は ほほーんなんか言ってるぞ 程度で流して読んでくれると嬉しいです。

# はじめに
JetBrainsは様々な言語向けのIDE(統合開発環境　ざっくり言うとそれ一つでコーディングからコンパイル、デバッグまでできるソフトウェア)を提供している企業です。例として有名なところではJava向けのIntelliJ IDEAやAndroid開発向けのAndroid StudioなんかがJetBrainsのIDEです。基本的にどれもWindows、Mac、Linuxとほぼすべてのプラットフォームに対応しています。

IDEを用いるメリットとして、コード補完や整形などコーディングが楽になる機能が充実していたり、デバッグ・コンパイルが容易に行えることなどが挙げられます([tips参照](https://qiita.com/hasepy/items/22cbaa9e232f5dc891ca#%E3%81%9D%E3%81%AE%E4%BB%96%E4%BE%BF%E5%88%A9%E6%A9%9F%E8%83%BD))。その他、JetBrains製IDEの場合はvimキーマップなどのプラグインが豊富だったり、フレームワークへの対応も充実していたり、また様々な言語で似たようなUI/UXのIDEを使えるので新しい言語を扱うときも若干コストが減ったりするとかしないとか、といったメリットもあります。
特にIDEを用いたデバッグは、今までprintfデバッグばかりしていた人にとっては、感動するくらい便利に感じられると思います(実体験)。
IDEはプログラミングに慣れている人が利用していることが多い気がしますが(?)、初心者にこそこれらの恩恵は大きいと思うので、IDEを使って快適にプログラミングしましょう！

JetBrains製の多くのIDEは有料ですが、学生アカウントを作ることでこれらを(非商用目的でのみ)無料で使うことができます。
今回はそれらのうち、C/C++向けのCLionをそれぞれ使って、実際にコンパイル・デバッグまでしてみます。前述のとおりJetBrains製のIDEはどれもUIが似ているので、どれか一つに慣れていればほかの言語向けのIDEでも直感的に同様のデバッグを行うことができます。python用のPycharmやruby用のrubymine、js用のweb stormなんかもあるので、気になった方は是非使ってみてください。

# CLionのインストール
実際にインストールして試したい方向けに軽くインストールの方法を載せておきます。記事読むだけって方は飛ばしてOKです。

(学生の方は)まずは[ここ](https://www.jetbrains.com/shop/eform/students)から、JetBrainsの学生アカウントを申請します。
学生アカウントが取得できたら、[ここ](https://www.jetbrains.com/clion/)からCLionをダウンロードしてください。
学生でない場合も、30日間のフリートライアルがあるので、そちらで試してみるのもおすすめです。

インストールが終わると起動後にアカウントの確認があるので、先ほど取得したアカウント情報を入力してください。その後、初期設定を行えば完了です。

学生アカウント取得に関して何か不明なところがあれば、[こちら](https://qiita.com/tetrapod117/items/92f965cf1928739b70e4)の記事を参考にしてみてください。

※C/C++ファイルを実行するにはコンパイラが必要なので、CLionをインストールする方でコンパイラがない方はインストールする前に用意しておいてください。Macの方はxcodeがインストールされていれば大丈夫ですが、Windowsの方はMinGWもしくはCygwinなどのダウンロードが必要です。

# 実際にコンパイル・デバッグしてみよう
## プロジェクトの作成
CLionを起動するとこのような画面になるので、New projectを選びます。

<img width="774" alt="スクリーンショット 2017-12-04 21.30.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/185134/14b84dfb-7dd1-ac82-8821-311c97e2e776.png">

すると、新しいプロジェクトの名前と場所の選択画面が出るので、好きな場所・名前を指定して作成してください。
プロジェクトが作成されると、以下のような画面がでてきます。

<img width="800" alt="スクリーンショット 2017-12-04 21.44.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/185134/4f78e151-794d-21a3-fb10-7afe23a680cf.png">

Hello, World!を出力するおなじみのサンプルプログラムになっていますね。

## 実行・デバッグボタン
実際に動かす前に、実行周りのUIの説明をします。右上の部分にこのようなボタンがありますが、それぞれ
1. 実行するファイル(make)の指定
2. 実行
3. デバッグ
の機能が割り当てられています。

<img width="211" alt="スクリーンショット 2017-12-04 23.38.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/185134/e8141500-acc4-67c8-c947-688c4c958ba6.png">

実行するファイルの指定は、今回はプロジェクト名が選択されていると思います。main.cppを実行する分にはデフォルトから変更する必要がないです(今回はmain.cppで完結するので何もいじらなくてOK)。もし他のファイルや複数ファイルのコンパイルを行いたい場合はCMakeLists.txtを編集する必要があります(詳しくは後述)

実行時に引数を指定したい場合は、実行するファイルの指定から、Edit Configurationを選択すると指定することができます。

## プロジェクトの実行
それでは、試しにサンプルプログラムを実行してみましょう。
②実行ボタンを押してみてください。すると、実行結果がでました！

<img width="493" alt="スクリーンショット 2017-12-04 21.50.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/185134/f45cc0b6-5408-9aa5-e3a6-f9e8b22a6f17.png">

コンパイルから実行まで、ボタン1つで簡単に行うことができました。

## デバッグ
それでは次に、デバッグを試すために以下のような標準偏差を求めるプログラムを考えます。

```cpp
#include <iostream>
#include <cmath>

double average_stddev ( double *data, int count ) {
    double sum, square_sum, ave, var, std_dev;
    int i;
    // 総和と二乗の総和を計算
    sum = square_sum = 0.0;
    for (i = 0 ; i < count ; i++) {
        sum += data[i];
        square_sum += data[i] * data[i];
    }
    // 標準偏差の計算
    ave = var = std_dev = 0.0;
    if (count > 0) {
        ave = sum / (double)count;
        // (分散) = (二乗の平均) - (平均)^2
        var = square_sum / (double)count - ave * ave;
        std_dev = sqrt(var);
    }
    return std_dev;
}

int main() {
　　　　　　　　//　今回用いるデータは0.2 0.2 0.2 の配列で、標準偏差は0になるはずである。
    double data[] = { 0.2, 0.2, 0.2 };
    printf("std_dev: %f", average_stddev(data, 3));
    return 0;
}
```
一見問題なさそうに見えますが、実行してみると次のような結果になります。

<img width="580" alt="スクリーンショット 2017-12-04 22.36.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/185134/9d442771-e148-e628-b227-77ec0da7d184.png">

ここで、aveやvarの値を確認するために、(まあ普通はこのくらいならprintfで十分なんですが)デバッグしてみます。まずはブレークポイント(プログラムを中断する点)を設定しましょう。gdbなどではいちいち起動してブレークポイントをコマンドで設定する手間がありましたが、JetBrainsのIDEではブレークポイントにしたい行の行番号の右をクリックするだけで設定できます。

ここでは、std_dev = sqrt(var)の行をブレークポイントとして設定します。設定できると、このように行番号の右に赤い丸が表示されます。

<img width="545" alt="スクリーンショット 2017-12-04 22.41.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/185134/87f4ff4a-4ab7-aeb6-8802-5b9ef2f78a3d.png">


それでは、デバッグを実行してみましょう。前述の③のボタンを押すと、デバッグが実行されます。
すると、ブレークポイントでプログラムが中断され、下段に中断時点での変数の値の一覧がでます。

<img width="1016" alt="スクリーンショット 2017-12-04 22.44.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/185134/2c437af5-d2da-2ea1-9d62-1d8a1fb9c1c6.png">
<img width="954" alt="スクリーンショット 2017-12-04 22.45.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/185134/36527001-d573-61c0-bff1-51ce9a71d6ed.png">


これを見ると、本来必ず正であるはずのvarが負になっていることがわかります。他の変数の値から、おそらく、浮動小数点の誤差の影響でvarが負になっているため、sqrtでルートをとったときにnanになっていることがわかりました。

今回は使用しませんでしたが、ブレーク後に操作を行いたい場合は主に以下の3つのボタンを使用します。それぞれ①は次のブレークポイントで止まるまでプログラムを実行、②は一行進める(関数の中に入らない)、③は一行進める(関数があれば関数の中に入る)、となっています。
<img width="544" alt="スクリーンショット 2017-12-05 10.54.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/185134/cfaf7f4a-a44a-8582-783a-1cb9b9dc8ee9.png">

それでは、該当部分を次のように修正して実行してみましょう。(デバッグは下段の❌ボタンで終了できます)

```cpp
// (分散) = (二乗の平均) - (平均)^2
// 負の値になる場合は0にする
var = fmax(square_sum / (double)count - ave * ave, 0);
```
すると、今度は正しい実行結果が出ました。

<img width="374" alt="スクリーンショット 2017-12-04 22.53.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/185134/f3b0e87e-c91c-ebc2-32b6-9ca807db6e1b.png">


このように、ブレークポイントの設定からデバッグまでIDEを使うととても簡単に行うことができました。printfをしなくとも全ての変数の値が把握でき、ブレークポイントの設定も直感的で、とても快適にデバッグができます！

# (番外編)CMakeLists.txtの基本的な書き方
ここまで、簡単に実行からデバッグまで試して見ましたが、最後に、CMakeLists.txtについて説明します。
これについては知見が浅いので、何か間違いがありましたら指摘してくださると助かります。

## CMakeListsとは？
CMakeLists.txtは、makeファイルを自動で生成するための設定ファイルです。(makeファイルとは、コンパイルの設定を記述するファイルで、コンパイル時のオプションや複数ファイルをコンパイルする設定などを記述することで、makeコマンドで簡単にコンパイルできるようになります。)
つまり、CMakeLists.txtに実行バイナリ名とファイル名(一つもしくは複数)、コンパイル時のオプションをセットで登録しておくと、自動でそれぞれの実行バイナリ名ごとにmakeファイルが生成されるということです。
CLionでは、このCMakeLists.txtを読み込みmakeファイルを生成し、ファイルをコンパイル・実行してくれています。

## 基本的な書き方
では、初期設定でのCMakeLists.txtを解説していきます。

```cmake
# 以下三行は特にいじる必要なし
cmake_minimum_required(VERSION 3.7)
project(hoge)
set(CMAKE_CXX_STANDARD 11)

# 'SOURCE_FILES' という変数に 'main.cpp' をセット
set(SOURCE_FILES main.cpp)
# 'SOURCE_FILES' に含まれているファイルコンパイルして 'hoge' というバイナリ名で実行
add_executable(hoge ${SOURCE_FILES})
```
ここで、setは変数にファイルを格納しています。重要なのは、add_exceutableで、ここで実行バイナリと実行ファイルの設定を行なっています。
このとき確認ですが、CLionは次のような実行オプションを持っています。
<img width="214" alt="スクリーンショット 2017-12-05 11.18.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/185134/6f47dfce-0904-5c52-a3b3-3785af1e7411.png">
hogeという実行オプションがありますね。これは、CMakeLists.txtのadd_excecutableの部分に対応しています。

今回はmain.cppの1ファイルのみしか実行しないので、わざわざset(SOURCE_FILES main.cpp)をする必要がないため、以下のように書き換えてみます。

```cmake
cmake_minimum_required(VERSION 3.7)
project(hoge)
set(CMAKE_CXX_STANDARD 11)

# 'main.cpp' というファイルをコンパイルして 'fuga' というバイナリ名で実行
add_executable(fuga main.cpp)
```

CMakeLists.txtのリロードが促されるので、ボタンを押してリロードすると、
<img width="1039" alt="スクリーンショット 2017-12-05 11.24.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/185134/258e00d5-9a31-3d8a-6c6f-e6080fad5986.png">

実行オプションに変更が反映されます。
<img width="209" alt="スクリーンショット 2017-12-05 11.24.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/185134/bc090cc5-a3af-4cb0-d249-178a4963bcb2.png">

このように、新しく作ったファイルを単一で実行したいときは、

```cmake
add_executable(実行バイナリ名 ファイル名)
```

と書けば、実行オプションに追加され、実行することができるようになります。

複数ファイルのコンパイルでは、SOURCE_FILESのように変数にファイルを格納してまとめてadd_excutableに渡したりする必要があります。また、オプションをつける場合は、target_linkなどを利用したりしますので、もし必要な場合は調べて見てください。

※参考までに、OpenCV/OpenGLを使うために書いたCMakeLists.txtは次のようになります。

```cmake
cmake_minimum_required(VERSION 2.8)

project(opengl)

set( OpenCV_DIR "/home/denjo/opencv-2.4.9/release" )
set( OpenCV_FOUND 1 )
find_package(GLUT)
find_package(OpenGL)
find_package(OpenCV REQUIRED)

add_executable(hoge hoge.cpp)
target_link_libraries(hoge ${GLUT_LIBRARY})
target_link_libraries(hoge ${OPENGL_LIBRARY})
target_link_libraries(hoge ${OpenCV_LIBS})
```

# おわりに
拙い文章でしたが、ここまで読んでくださりありがとうございました。この記事がJetBrains製のIDEを試してみるきっかけになることがあれば幸いです。本来は課金して使えるIDEを、学生の特権でただで使えるので、是非一度くらいは触ってみることをおすすめします！(※学生でも仕事で使う人は課金必要なので注意です)
<a name="#tips"></a>
# その他便利機能
## コーディングを助ける便利な機能
### 自動補完
<img width="522" alt="スクリーンショット 2017-12-04 22.57.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/185134/9df5005e-57b4-3f52-fccf-2d8afc09ea9c.png">

### typoチェック
<img width="233" alt="スクリーンショット 2017-12-04 23.51.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/185134/c00c7a87-b805-0114-7734-5019b01b9419.png">

<img width="221" alt="スクリーンショット 2017-12-04 23.52.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/185134/5bb16865-cd54-be39-d4a4-943ac009a26b.png">

## コード整形
Alt + command(winはctrl) + L でコードを自動整形してくれます。
<img width="485" alt="スクリーンショット 2017-12-05 11.50.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/185134/ca1ee11b-ae97-2393-6cea-cd3ef0c839dd.png">

　　　　　　　　　　　　　　↓
<img width="580" alt="スクリーンショット 2017-12-05 11.50.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/185134/3a2cbc5a-8589-3110-b42f-59de31a32b62.png">

## 自動インポート
Alt + enter で、外部ライブラリのインポート文を自動で書いてくれます。

## リファクタ
shift + F6 で、変数をrenameできます。ファイル内のその変数を全て変更してくれたり、他の依存箇所も自動でリファクタしてくれます。

## リンク
commandを押しながらオブジェクトをクリックすると、そのオブジェクトが宣言されている場所に飛ぶことができます。

## その他
他にも様々な機能がありますが、[こちら](https://qiita.com/yoppe/items/f7cbeb825c071691d3f2)の記事がよくまとまっていて参考になります。