IntelliJ IDEA｜Railsエンジニアが使っているIntelliJのナイスなやつら

![mac-os](https://img.shields.io/badge/macOS-10.14.6 と 10.14.1-<COLOR>) ![ide-ver](https://img.shields.io/badge/IntelliJ IDEA-2020.2-<COLOR>)![keymap](https://img.shields.io/badge/Keymap-Mac OS X 10.5+ copy （ここひとつですんごく変わる）
-<COLOR>)

![dokusha](https://img.shields.io/badge/想定読者-JetBrais系IDE使い始め-orange)


## はじめに（はじめにだけで700字あります）


エンジニアの仕事道具であるエディタ、みなさん何をお使いですか？
JetBrains系のものにしようと考えたことがある人は多いのではないでしょうか。
「うげぇ・・・有料かよ」で候補から外した人も多いはずです。

macだとmiやCotEditorのような軽量なものから、VSCodeのような高性能なエディタ、全部入りのIntelliJまで様々なものがありますよね。

わたしは普段Railsを用いて（少なくとも主観では）Webのコードを書いていまして、IntelliJ IDEAというJetBrains系のIDEをメインの開発ツールとして使用しています。
Railsエンジニアだと候補に上がるのはRubyMineですね。

IntelliJとRubyMineの違いとしては、開発できる言語に差があるだけ（のはず）なので、この記事に書いてあるIntelliJをRubyMineに読みかえても差し支えありません。

RubyMine以外にもPhpStorm、GoLandなどをお使いの人にも役に立つものとなっているのでぜひ読んでいってくださいね。

それでこのエディタ、１ヶ月だけ無料で使用できるため、お試しで使用した人もそれなりにいるのでは？と思っています。
ただ、この子のポテンシャルに気づくには１ヶ月では短すぎるので、３ヶ月程度を目安にお付き合いしてみることをおすすめします。

IntelliJとお付き合いを始めて３年めか４年めですが（記念日を覚えずに喧嘩するタイプ）、そんなわたしでも最近になって新しい一面を知ったほど奥が深いんですよね〜。

この記事ではそんな奥が深いIntelliJの知っておくとスムーズに開発ができる機能を紹介していきます。

**おことわり・注意点**
・エディタの良し悪しに関してはお取り扱いしておりません
・IntelliJ以外では画面が一部異なっていたり、最初から入っているプラグインがあったりするかもしれません、ご了承ください
・RailsエンジニアにつきRailsでしかお役に立てないものがあると思います。あらかじめご了承ください
・バージョン管理の大半と、Railsコマンドのほとんどはターミナルから入力しているのでこの記事ではあまり出てきません
・同じショートカットでは出てこないことがあると思うので（というか多分ほとんど出てこないのでごめんなさい）、nameを元に検索してご自身にあったキーバインドに設定してくださいね！
・IntelliJのSDKを含めた開発環境の構築は終わっているとして進めていきます


ちなみにですが、`control + option + shift + command` はKarabiner-Elementsで１つのキーに設定しています。
あえて名前は挙げませんが、１つだけいらないキーがあるはずなので、これを機に変えてみてはどうでしょうか。


## 一足先にKeymapの設定方法
全体のデフォルトのキーバインを設定するやつですね。
Vimとかいろいろあると思います。

▼設定画面（`command + ,`）の左にあるツリーからKeymapを選択 -> 好みのものを選ぶ（自主的に選択した覚えがないのでデフォルトがMac OS X 10.5+ copyかも）
![keymap.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696117/85094e25-8482-edd6-5365-6472c0102569.png)


---

## プラグイン
###プラグインの探し方
▼設定画面（`command + ,`)の左にあるツリーからPluginsを選択し、上部のMarketplaceを選択してから検索
![plugin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696117/d93e3fb2-5520-f264-8c8d-5b4fc54500d5.png)

---

### Rainbow Brackets
▼ハッシュの`{}`に色がついているように、`()`や`[]`などに色をつけて視認性を上げてくれるやつ
![レインボー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696117/f2dabd50-23df-dbd3-6221-2970f0ca1621.png)

---

### AceJump
▼ファイル内の各行頭行末にキーがマッピングされ、移動したい箇所へかんたんに飛べる
![acejump.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696117/36a29a18-29fe-f382-5ab0-0027f5a45c66.png)

ときどき挙動がおかしくなってその度にdisってるんですけどなんだかんだ言ってずっと使ってます。

name：`Display Line Markers`
key：`control + shift + :`

---

### Railways for IDEA
RailsプロジェクトでRoutesを表示してくれるやつ
検索もできるので重宝してます。

#### 表示・非表示
name：`Routes`
key：`control + command + shift + R`

#### 更新
name：`Update Route List`
key：`shift + command + \`


## ショートカット

### 探し方
#### １）ショートカットから機能を探す

▼設定画面のKeymapから虫眼鏡を選択 -> （たとえばこの記事のkeyのvalueなど）ショートカット押下で機能を検索できるので、なにか発動させたときに確認したりできますよ
![find_shortcut.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696117/464d4369-2fad-8830-6c6d-ed82750396b1.png)

#### ２）機能名から探す
▼この記事にあるnameのvalueをいれると出てくる
![find_shortcut2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696117/0c3266d4-0227-1ac3-6d10-7415f61f4fa8.png)

▼例だとcopyを検索。Copy ... `command C`とあるのでcommand + Cで発動できることが分かる
![find_key.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696117/7b3e249e-7863-3cc0-a7c5-5db11e8f1336.png)

---

### 設定方法
▼例だとcopyを検索 -> Copyをダブルクリック
![how_setting_key.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696117/12f252ae-3088-5c21-5297-3eb8e791be82.png)


▼Add Keyboard Shortcut 押下 -> 好みのキーを設定 -> ポップアップのOK -> 右下のApply -> OK で完了
![add_shortcut.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696117/8a0559cf-2c99-1f24-6d91-666ebcb420c2.png)

---

### わからなくなったらここから検索、IntelliJの物知り博士
この子にできることは多分きっとぜんぶここからアクセスできる。
name：`どこでも検索﻿`
key：`shift２連打`

---

### コックピットの断捨離

ノイズは少ないほうがいいと思っているので色々閉じちゃいます。
▼下記のように設定すると
![editor_view_setting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696117/07f6ea2a-fd37-0447-6d17-eb31249bb5de.png)

▼before（初期設定はこうだと思う）
![hud_before.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696117/53ada78c-0c61-1643-3f33-1a9778641228.png)

▼after（スマートでしょ？）
![hud_after.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696117/0e91a21e-9dc3-db5c-56b0-42f12048386d.png)

好みがあると思うのでViewの設定からポチポチしてみるといいと思います。

beforeのときに外側にある数字は`command + 数字`がショートカットですよ。
外側の数字を消したけど忘れたときはView -> Tool Windows で確認。

---

### プロジェクトツリーを表示・非表示
name：`Tool Windows -> Project`
key：`command + 1`

---

### ファイルの作成、ディレクトリの作成

![command_n.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696117/fcc1a49d-9b3f-a4ac-ae85-0cf569f92149.png)

name：`Generate...`
key：プロジェクトツリーの任意の階層で`command + N`

---

### Tool Windowの幅を変更する
Tool WindowっていうのはプロジェクトツリーやStructuresといった`command + 数字`で表示できるやつのことです。
name：`Stretch to` + `Top` or `Bottom` or `Left` or `Right`
key：`shift + command + 動かしたい方向キー`


---


### カーソル行コピー
選択せずともカーソルが合っていれば行をコピーできる。
name：`Copy`
key：`command + C`

※改行文字が入るのでターミナルなどに貼り付けると実行されてしまう点に注意

---

### カーソル行、もしくは選択範囲を削除してクリップボードにコピー
name：`Cut`
key：`command + X`

---

### カーソルから後ろを削除してクリップボードにコピー
これはmacの標準機能にコピー機能がついたやつですね。

name：`Cut up to Line End`
key：`control + K`

---

### カーソル行複製
カーソルにある行を真下に複製します。
name：`Duplicate Line or Selection`
key：`command + D`

---

### カーソル行移動
#### 上に移動
name：`Move Line Up`
key：`option + shift + ↑`

#### 下に移動
name：`Move Line Down`
key：`option + shift + ↓`

---

### ウィンドウ分割
#### 縦割り
name：`Split Vertically`
key：`control + -`

#### 横割り
name：`Split Horizontally`
key：`control + =`

---

### 次のペインに移動
name：`Goto Next Splitter`
key：`command + _`

---

### タブ
#### 次に移動
name：`Select Next Tab`
key：`control + ]`

#### 前に移動
name：`Select Previous Tab`
key：`control + [`

---


### プロジェクト内ファイル検索
name：`Go to File`
key：`command + O`

---


### プロジェクト内文字列検索
name：`Find in Path`
key：`shift + command + F`

---


### プロジェクト内文字列置換
name：`Replace in Path`
key：`shift + command + R`

---


### ファイル内検索
選択しているファイルで利用されているものを検索する
name：`Find`
key：`command + F`

---


### ファイル内置換
name：`Replace`
key：`command + R`


---


### 選択ファイルで指定行に移動

name：`Line/Column...`
key：`command + L`

---

### コードジャンプ
カーソルをクラスやメソッドに合わせてから使うと定義してある場所 or 利用されている場所に飛べる
name：`Go to Declaration or Usages`
key：`command + B`

---


### 最後のコミットに追加したやつ確認

▼Local Changes
![local_change.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696117/1e95409a-0c49-9354-5695-ad6b8a7c8dac.png)

オレンジ枠の隣にあるLogを選択すれば今までのコミット履歴を確認できる。

name：`Git`
key：`command + 9`

---


### テストとクラス間を行き来する
RSpec以外では使ったことない

いつの日からかテストがない場合にはディレクトリ含めて作成してくれるようになりました。なったんですけど呼び出しのテンプレートいじりたいですね。
name：`Go to Test`
key：`command + shift + T`

---

### 利用してる箇所をプロジェクト内から検索して一括リネームできるヤツ
これのすごいのはクラス名をリネームしたらファイル名も関連するテストも呼び出し先も全部名前を変えてくれることろ！
一時的にコメントアウトしたロジックも含めて変換してくれるので本当に助かってます。
▼コメントも置換するにはオレンジ枠のチェックマークをつけてから
![rename.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696117/7c2a72fc-ab84-0ff3-eee6-17d550a3b330.png)


すると編集画面が開くのでポチポチやっていくだけ。

name：`Replace...`
key：`shift + F6`

---


### アクエティブなタブを新しいウィンドウで開いて一つのファイルに集中
画面分割してやっていると、ときどきアクティブなタブ以外がノイズになって集中できないときがあると思うんです。というかあるんです。
２枚で作業しているときにどっちの画面にも全画面で表示したいな〜・・・ってときなどにも使います。

name：`Open source in new window`
key：`shift F4`

---


### ミニマムな検証に便利なスクラッチファイル
こいつどういう挙動だっけなー・・・とかそういうときに使います。
プロジェクトで設定してあるSDKを一緒に呼び出してくれるので設定などをせずにすぐに書き出せるのがGoodです。
１日１０回ぐらいは開いている頻出機能ですね。
name：`Scratch File`
key：`control + option + shift + command + N` で呼び出して、書きたいプログラム言語を選択

---


### ファイル実行
カーソルが合っているファイル or 箇所を実行します。
基本はファイルを実行する挙動ですが、たとえば、RSpecでdescribe行にカーソルが合っていたら、そのdescribeブロックだけを実行。it行に合っていればitブロックだけ実行という感じでちょっと挙動が変わることがあります。

name：`Run context configuration`
key：`control + option + shift + command + R`

---


### 選択して実行
▼ポップアップで実行する対象を選んでから実行します。Railsサーバーを起動するのによく使ってます
![選択実行.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696117/3084e0ef-cd90-287a-45b9-9276b16ab7bf.png)


name：`Run...`RunはRunでも点々がついているほう
key：`control + option + shift + command + R`


---


### 最後に実行したファイルをもう一回実行
▼オレンジ枠のファイル名を再実行
![re_run.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696117/54cb0070-c784-add0-dcff-501e10e6fb16.png)


name：`Run` RunはRunでも点々がついてないほう
key：`control + R`

---


### 顔ぶれを確認
開いているファイルの構成要素を確認するのに使っています。

▼このクラスどんな感じで構成されてるんだろうって確認したり
![structure.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696117/decb46cf-4610-ad60-e510-f1811b266b71.png)

privateメソッドとpublicメソッドの色分けされているのが分かりやすくてスキ。

▼テストどれぐらい書かれてるかなって確認したり
![kouseiyouso.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696117/1e26935e-878f-0dd9-980f-17f4a3242e61.png)


▼最近知ったのですがJSONのファイルで使うとkey:valueが分かりますです
![json_structure.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696117/d95593ea-0ba5-03ac-5938-eab47d8b9028.png)


べんりですね。

name：`Structure`
key：`command + F7`

---


### スペース打つのもめんどくさいからキレイにしてください
インデント、スペース、その他諸々、プロジェクト毎に設定されたフォーマットに直してくれる。
name：`Reformat Code`
key：`command + L`


▼その基となるコードの設定は設定画面 -> Editor -> Code Style -> 設定したい言語で設定
![style.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696117/aa4ce919-87d0-4154-be5e-9fa12e8c26b4.png)

---


### 犯人を捜せ！！
このコード書いたんは誰やねん！（いらいら annotateぽちー）
……あっワイや・・・そっ閉じ and サイレント Fix

いつもごめんなさいね。

▼行番号のところに変更した日付と編集者を表示する
![git_annotate.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696117/c66ba27a-00eb-53a0-f4b0-bead897fee42.png)

▼記録にカーソル合わせて右クリックすれば表示項目を選べる
![annotate_detail.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696117/6c1a9e6f-cf53-5c58-0b8b-25b4f889b620.png)

記録をダブルクリックすればそのときのコミット内容も表示されますよ！


name：`Annotate`
key：`control + option + shift + command + G`

---


### スネークとキャメルの変換
表記を変更したい文字を選択してから利用。

snake_case -> SnakeCase
SnakeCase -> snake_case

name：`Toggle Camel/Snake Case`
key：`option + shift + U`

---


### 大文字に変換
カーソルに隣接している単語、もしくは選択文字を大文字に変換する。ぐっばいcapsキー。

name：`Toggle Case`
key：`command + shift + U`

---

## お兄さんが困ったこと

### 大変！spec以下でディレクトリが作れない！！
▼ツリーに表示されているディレクトリの色がマークなしの緑色だったら変更が必要
![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696117/1cf4e409-ed88-2dd5-e14e-183cb178d7b1.png)

▼Project Structure -> Modules -> テストディレクトリを選択 -> 多分Testsってなっていると思うのでTest Resourcesに変更 -> Apply -> OK
![test_resource.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696117/3a822103-f56f-a711-8c46-f379d9781791.png)



▼するとディレクトリを作成できるようになる
![after_test_dir.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696117/0c7a0b0f-f66d-a58b-8876-95ef793721ac.png)

いやぁ・・・これ見つける３年間程度、ターミナルから毎回mkdirしてたんですよ（笑）
テストなんだからTests選ぶでしょ・・・

name：`Project Structure...`
key：`command + :`

---



### 設定が反映されない、挙動がおかしい。そんなときは
きほんのき、エディタを再起動
それでもだめならマシンを再起動
でもでもだめならキャッシュを削除してみよう！

▼エディタ名の横にあるFileからInvalidate Caches / Restart...
![clear_cache1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696117/eb43ff3d-e9d0-7281-7707-0ddb34407fb3.png)

▼一番右を選択
![clear_cache2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696117/18917c4d-56ce-c86c-6422-22139d86a68a.png)


キャッシュがクリアされて変な挙動（わたしの環境でよくあるのが予測変換が使えない）が直ると思います。
ただし再起動後はプロジェクトのインデックスを作り直すのに時間かかるので注意ですね。



## おわりに
( ᐛ)いかがでしたか？
( ᐛ)いかがでしたか？



次回、かゆいところに手が届くIntelliJのイカしたやつら


**参考**
[Qiita記事にさりげなく（けど、わかりやすく）環境を記載する](https://qiita.com/zizi4n5/items/c5f0013236fd055c3e02)
[忙しい人のためのIntelliJ IDEAショートカット集（´-`）](https://qiita.com/yoppe/items/f7cbeb825c071691d3f2)
[JSONの生成はこちら](https://www.json-generator.com/)