UE4でのC++開発を爆速にするRider for Unreal Engineの紹介

# 最初に
どうも、[ろっさむ](https://twitter.com/4_mio_11)です。

記事で使用する作業環境は以下の通りとなります。

Rider for Unreal Engine：2021.1
Windows：Windows10

また、本記事で気になったことや書いてほしい機能等ありましたら以下Twitterもしくはメールアドレスまでご一報いただけますと幸いです。

Twitter:https://twitter.com/4_mio_11
mail:mio041100505@gmail.com


# Rider for Unreal Engineとは
Rider for Unreal Engine（以下Rider for UE4）は、JetBrainsというIntelliJ IDEAやPyCharmなどのIDEを開発している会社から出ているUnreal Engine対応のIDEです。現在はWindowsとmacOSに対応しております。ただしmacOSに関してはUE4.26以降のみで動作します。今後はLinuxにも対応予定のようです。

### Rider for UE4の特徴

- 高速で多機能なIDE
- ナビゲーション機能
- Git機能サポート（エディタ内で完結可能）
- ブループリントのサポート
- スニペットやテーマ、コーディングに役立つ2300以上のプラグインが公開
- 豊富なデバッグ機能
- VSでの.slnやXcodeでのプロジェクト生成が不必要
- C++の構文チェック


また、現在は早期プレビュー版となっており、無料で使用することができます。


# Rider for UE4の導入

## Rider for UE4のDL

まず、Rider for UE4のインストールのためには以下の公式サイトから早期プレビューの申し込みを行う必要があります。
[Rider for Unreal Engine](https://www.jetbrains.com/ja-jp/lp/rider-unreal/)
<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/8a7745f8-bbdc-1e0d-5cb4-13e89d5fa07f.png">

氏名やメールアドレスなどを入力して申し込むと、以下のようにメールが届きます。
<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/f45a9dcb-4ece-5fd5-3a11-220c9c5b55ef.png">

メール内容に記載されているリンクを押下するとインストーラーがDLされます。
<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/c1cd5935-f9d0-e2a2-51c8-c5256e179fbe.png">

また、開いたページにてRider for UE4をアクティベートするためのコードをDLしておいてください。
<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/3a093f75-2a62-38ae-a82e-99fc2899a755.png">

## Rider for UE4のインストール

1. DLしたインストーラーを起動して下さい。最初のウィンドウは「Next」を押して進めてください。
<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/35984d5b-648c-87a0-1ccb-8fe88ed0ad60.png">

<br>
2. 次にRider for UE4をインストールするフォルダを指定します（基本的にデフォルトのままでOKだと思います）。また、インストールする際に2.4GBの空き容量が必要になるため、こちらも確認してください。
<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/56cc2a3b-ec5d-41b4-5d75-46b070eae87a.png">

<br>

3.Rider for UE4のインストールの設定画面が開かれます。こちらも基本的にデフォルトのままでOKです。私の場合は.slnの拡張子に対してRiderを関連付けするようにしています。
<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/13ee398b-7dd4-7b44-6c98-17ef3a3ddd22.png">

|項目|概要|
|---|---|
|Create Desktop Shortcut|デスクトップにショートカットを追加する設定|
|Update PATH variable|PATH環境変数にRiderを追加するかどうか|
|Update context menu|コンテキストメニューに「Open Folder as Project」を表示するかどうか|
|Additional features|動的プログラム解析機能を一緒にインストールするかどうか|
|Create Associations|.slnなどの拡張子にRiderを関連付けするかどうか|

<br>

4.スタートメニューに追加するかどうか設定できます。こちらもデフォルトのままでOKです。
<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/e363970f-0448-746c-76f9-c413c4162716.png">

Installボタンを押すとインストールが始まるので完了まで待ちましょう。
<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/77756c1d-5621-c5e5-3f2f-116e545cfda8.png">


## Rider for UE4のアクティベート

無事にInstallが完了したら、実際にRiderを開いてみてください。

Licenseのアクティベート画面が開かれるので、以下の手順で設定してください。

1. `Activate Rider for Unreal Engine`にチェックを入れる
2. `Activation code`にチェックを入れる
3. 先ほどDLしたコードを`Activation code:`の枠内にドラッグ&ドロップ
4. `Activate`を押す
<img width="800" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/dc971fa8-f92d-ca2d-b2e6-e17b7a29ce28.png">

これで起動ができるようになりました。

<br>

## Unreal Engine側でデフォルトエディタの設定を変更

まずは任意のUE4プロジェクトを開いてください。上部メニューから `Edit > Editor Preferences...`を選択します。
<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/a6bb1013-d9f5-d9af-eae4-5368172c0d7d.png">

設定の中から、`General > Source Code > Accessor > Source Code Editor`にて「Rider」を選択してください。
<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/4b91c30d-01f1-509b-13f6-5ac65a9cd7a0.png">

これでC++ファイルを開くときなどはRiderを使用して開かれるようになります。

# 画面構成

<img width="800" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/8b02912e-3f45-0ae1-84a5-9d7872b4d36a.png">


  1. **Explorer Window**： ファイルやアセット等を整理して表示してくれるビュー。`Alt + 1`で表示、`Shift + Esc`で非表示の切り替えが可能。ビューの種類切り替えによって見え方を変更できる。
  2. **エディター**：コードの確認・編集・Gitでの差分確認などのメイン作業をこのビューで行います。 他のビューをアクティブ状態にしていても`Escape`でエディターに戻ります。リファクタ等を行う際に表示されるアクションリストもこちらに表示されます。
  3. **Tool Bar**：エラーの確認やILの確認、Databaseの編集などがデフォルトで表示されているビューです。特に エラー一覧をウィンドウ表示にして確認できるので便利です。 `Shift + Esc`で閉じることができます。
  4. **Tool Window**：Gitやデバッグログ、TODO、Terminal等の表示を行います。デフォルトで `Alt + 9`でGitビュー、 `Alt + 5`でデバッグビューが開かれます。こちらも `Shift + Esc`で閉じることができます。また、それぞれのビューを開いた状態で `Alt + 矢印キー`によりタブの移動が可能です。
  5. **ステータスバー**：左側に最新のイベントメッセージ等が表示され、右側にはIDEのステータスなどを示したり、バックグラウンドタスクの進行状況等が表示されます。`8:12`というのが12行中の8行目を選択しているということです。エンコードの変更やファイルを読み取り専用に変更したりも可能です。緑のチェックマークアイコンにて、現在のソリューションの状態がわかります。エラーの場合は以下の画像のように表示され、エラー箇所へジャンプすることができます。<br>
    ![image-20201130220843811.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/1175bc0e-5ece-1c82-0567-172e92c10fcd.png)
  

  上記のアイコンなどはカーソルを合わせてしばらく待つと、説明が表示されるものがほとんどです。機能が豊富なため、最初は少し戸惑うかもしれませんが、慣れると非常に強力なIDEだと実感できるようになるので、是非基本操作を身に着けていきましょう。


  https://pleiades.io/help/rider/Guided_Tour_Around_the_User_Interface.html


# Rider for UE4の機能について

以下の公式ビデオから得た情報をつらつらと。
https://www.youtube.com/watch?v=e6pVSyrQ3JE

## BluePrintのサポート

どのBPがこのクラスを派生しているのか、派生数とリストを確認することができます。
<img width="300" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/cffab3b9-ada2-b153-a385-71bee682e4a2.png">

プロパティでもBP側で値を保存している箇所があれば、検索ウィンドウに表示されるし、クリックすると対象のBPにジャンプすることも可能です。
<img width="900" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/3c540d9c-dee9-d0d6-2bb1-f4537553e427.png">
<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/ccfbbf7f-2aea-0e01-fa6b-39f503695e73.png">

またC++で定義されているプロパティの値をBP側で更新すると、エディタ側でもその値が表示されるように更新されて即座に確認できます。
<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/b9d56770-d1a9-775f-13c7-1945227d5e5e.png">

これらの機能を使用するにはRiderLink.upluginが必要ですが、Unrealプロジェクトを最初に開いたときに自動的にインストールされるようなので、導入したら即座に使用が可能です。



## ナビゲーションダイアログ
`Shift + Shift`でナビゲーションダイアログを開いて様々な検索をかけることができるます。
  
このナビゲーションダイアログは非常に便利です。
例えば、キャメルケースの名前の大文字部分を抜き出して検索をかけてもヒットします。特定のメソッドやファイルを検索したい時に名前さえわかっていればすぐに探すことができます。
<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/3078b524-173e-eeba-8f67-364cc300bf18.png">

Tabで検索範囲を切り替えて、行いたいアクションの検索をすることもできます。Rename等、やりたいことはあるけどショートカットキーを覚えてない時などに有効です。
<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/303155cb-5cec-775a-c0c5-8bbe40fde481.png">

## アクションリスト

`Alt + Enter`で、現在カーソル上にあるコードに対して、実行可能なアクション一覧のメニューを開くことができます。

このメニューは、IntelliJ IDEAだと大体備わってる機能なので馴染みのある人もいると思います。

## リファクタリング機能

「Clean up」系のコマンドを使うことで、プロジェクト全体や指定したファイル内のコードをいい感じにしてくれます。
    - 例えば、オプションとして指定すれば冗長なコードを自動的に削除したり、
    - メンバー関数を可能な場合は`const`や`static`にするなど…。

`Shift + Shift`から打ち込めばすぐ見つかります。
<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/6a23a8e2-025a-dbe7-df3f-b6e7e775b0b8.png">

こちらはオプションの設定画面
<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/bd5ef350-535e-d926-85d6-bb5a56e0dd96.png">

このほかにも、関数の引数を変更する時にアクションメニューから`Change Signature`を行えば一発解決です。

<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/d6560591-5000-3185-971d-60ab7dc147bf.png">

対象のメソッドを使ってる場所があった場合、そこでは何を渡すようにするのかも一括で決めることができます。
<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/8de48ab4-c41f-191a-bc6a-8e223af47c8d.png">
<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/9ecb75ac-1737-b1ad-a809-dda7d784ab38.png">




## バージョン管理サポート機能

  RiderではGitやSubversion、Perforce等を含むバージョン管理システムをサポートする機能があります。ここでは一例としてGit機能での見方を紹介します。

  ファイル等の内容に変更があった場合には`Explorer Window`側にあるCommitタブを開いて表示すると、変更のあったファイル一覧が表示されます。
その中から、任意のファイルを選択すると、どのような差分があるか教えてくれます。
 
<img width="900" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/38403aaf-cbb1-30f2-a243-893459730386.png">

エディタ上ではリモート側のファイルと作業中のファイルが分割表示されます。

- 新しく作成されたコードは緑
- 削除されたコードは青
- 変更があったコードは青と緑で状態によって分けられます

これらの変更したコードの中から、どの変更をコミットするかは、「作業中のファイル」画面の横にある四角いチェックボタンで選択することができます。

その後、左側の緑枠で囲っている部分で、コミットメッセージの編集と、「Commit」または「Commit＆Push」ができます。
また、プルリクのレビューや、コードに対するコメント、マージなども可能です。

ちなみにGitの基本操作は上部のナビゲーションバーの左側にあるアイコン群からも可能となっています。

![image-20201201001704257.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/1def70c8-74c3-0bea-477d-3d56bd886917.png)


  左から `pull`, `commit`, `push`, `history`, `rollback` となっています。


 
## Code Inspections

  Riderでは、コード解析を行うことでコード上のパフォーマンス的に問題のあるコードの検出や、名前・コメントなどのスペルチェックを行ってくれます。

  例えば、Tickメソッド内で負荷が高い処理を使用していた場合は、呼び出しコストが高いため、対象箇所に波線を表示してお知らせしてくれます。または、新しい言語機能が使えたり、冗長なコードが記載されている箇所でも同様にお知らせしてくれます。関数名のスペルチェックもしてくれます。これらの箇所で `Alt + Enter`を押下するとアクションリストが表示され、クイックFixで自動修正したり任意のアクションで修正することができます。

  クイックアクション内ではソリューション内で似た問題があるかどうか、それをFixするかどうかなど、全体を解析した上での修正提案も行ってくれるので非常に便利です。



## クイックFixを適用する 

  `Code Inspections`でも名前が出てきましたが、こちらの機能はエラーや警告が出た箇所をアクションリストから即時に修正を行える機能となります。

  ハイライトされたコードの左側に以下のようなアイコンが表示されます。

![image-20201130224308225.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/75164768-6c34-97ee-29de-f375dcf081d5.png)エラー：例）必要なファイルがimportされていない等
![image-20201130224334816.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/8561c2c6-ab8f-9f26-b522-e2a2721bfa06.png)警告、提案：例）GetComponentをStart又はAwakeで行うように提案、スペルミスを発見したためリネームの提案
![image-20201130224438600.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/dfa0d706-f0f6-084b-5eda-b47ac269a4be.png)提案：例）リネーム、アクセス修飾子の変更

 
## デバッグ機能

もちろんデバッグ機能も充実しています。ローカル値の監視もできるし、指定した変数の値が変更されたときにデバッガを停止するように設定することもできます。

debugger出力タブではUE4のログメッセージも確認可能です。
<img width="800" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/919660e3-1741-9414-5f00-3892789f6f39.png">

<img width="800" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/948bbd83-494c-0c72-849e-ba9e2d623539.png">

  

## ミニドキュメント機能

UE4で使うマクロとかキーワード等にカーソル当てると、それに対するドキュメントが表示されます。補間時のウィンドウで選択してるキーワードでも表示されるので、一々調べる手間が省けます。
<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/be48d13d-147d-2951-80f6-5e63ff3dc758.png">



## Live Template

  Riderではテキストの自動補完機能（つまりスニペット）があり、デフォルトで入っているスニペットを使用したり、自作したりすることができます。

  
https://twitter.com/i/status/1370766591655170049

  

  スニペットの作成は `上部メニューのFile > Settings > Editor > LiveTemplate`から行えるようです。

 
  

## コード生成

  UE4で開発する際にまだcpp側に記述してないメソッドをヘッダーコード内に記述した場合に、cpp側へ自動で生成したりなど至れりつくせりな機能があります。

  
  他にも抽象クラスを継承した場合に、実装メソッドを生成してくれたり……。



## その他

- 標準で.slnを使用するため、チームメンバーが他のIDE（例えばVS）を使っていても、影響はない
- 上部メニューの設定から構成オプション変更もできる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/9e2f2806-65cc-5cbc-66e2-c3133b9befed.png)

- Build.csとかTarget.csみたいなC#もサポートしてくれる
  

# おすすめプラグイン

  JetBrains Riderでは自分好みにプラグインを入れることでカスタマイズしていくことができます。`Ctrl + Alt + S`で設定画面を開き、`Plugins`の選択するとプラグインの管理画面を表示することができます。不必要になったプラグインも `Disable`又は`uninstall`が気軽に行えるので、どんどん試していきましょう。

  

## Japanese Language Pack EAP

![image-20201201005037766.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/6b0e6e9f-2ea2-138c-0087-789a32a3f291.png)


  Riderを日本語対応させるプラグインです（私はそのまま使用しているためINSTALLはしていません）。

  

## IdeaVim

![image-20201201003107416.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/db88e96e-4156-1110-9933-636e28a0d902.png)


  Vim操作に慣れ親しんでいる人なら使用したいプラグインです。このほかにもSublimeやAtomなどのユーザーのためのプラグインも存在しています。

  

## CodeGlance

![image-20201201003542125.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/4c5c1529-468f-617f-3eae-83b91d565a14.png)


  エディターの右側にコードの全体を表す小さいビューが表示されるようになります。

  コード内を移動するときとかに便利です。

## Code Stream

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/a397faf4-d1ff-a3bf-60de-3a0c0d947c5e.png)

GitHubやGitLab、BitbucketでのPRやコードレビューをIDE内で管理したり、通知をSlackに流すことができます。
チーム開発で非常に役立ちそうです。
  

## Key Promoter X

![image-20201201003700135.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/8c8973ad-4b5e-0517-04d5-0183f812c56f.png)


  ショートカットキー全然覚えられん…って人向けです。マウスクリックなどで操作を行った場合に右下に「このショートカットキーで同じ操作できるよ」っていうポップアップを表示してくれたり、そのログをまとめて、Tool Barの方などに「忘れてそうなショートカットキーリスト」を出してくれたりします。

  

## Material Theme UI

![image-20201201003921871.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/d0e2852c-3a88-f013-0dfd-fa1df51a2180.png)


  エクスプローラーウィンドウに表示されるアイコンも含めて、IDEの配色テーマの種類を増やし、セットアップできるプラグインです。気に入るテーマがあるといいですね。

  

## Translation

![image-20201201004347760.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/0473c204-3d91-f07d-1b0c-8e40a72f18ff.png)


  コード内でわからない英単語が出てきた時に右クリックでコンテキストメニューを出すか、 `Ctrl + Shift + Y`で翻訳を行うことができます。オープンソースのコードとか読むときに便利です。


  

## Rainbow CSV

![image-20201201004257410.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/fb9744b1-d677-4ee5-52c0-0bfed86e5afb.png)


  

  CSVファイルにて、項目ごとに色を変えてくれるプラグインです。レインボー。

  

## Nyan Progress Bar

![image-20201201004553167.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/4e3c3ab1-e66b-86ff-2b90-93c82be49399.png)


  ステータスバーにあるプログレスバーがレインボーにゃんこになります。かわいいレインボー。

![image-20201130232948856.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/34c41163-9b5f-d7ca-ecf2-8f4cb615781e.png)


# 最後に

  現在はプレビュー版だけど既に超強力な機能を持つIDEであるRider、使いこなせれば趣味も仕事も実際のコーディングの設計の方にパフォーマンスを発揮できるものとなっております。プレビュー版ですので気楽に試してみましょう。

それではここまで読んでいただいて有難うございました。


# 更新ログ

- Rider for Unreal Engine2021.1.1プレビュー版対応