Rails Tutorialをやっててハマったこと - 01_環境構築編

　Qiitaに初投稿。会社都合で退職になったので、一度挫折した[Ruby on Rails Tutorial](https://railstutorial.jp/)を今後の就活のためにやってみることにした。その時に躓いたりハマって苦しんだりしたことをメモとして残しておく。

# エンジニア歴
　プログラミングは少しだけ触った程度でSEになりたくて就活。普段はWindows使いなのでMacOSは殆ど触ったことなし(コマンドは全然知らない)。Web系の会社に就職した後、Ruby on RailsやSinatra使って社内ツールを作ってた。1年２ヶ月で退職。

# Sublime編
## インデントでかい。Rubyのコーディング規約にインデントを合わせたい。
　Q: 他言語をいじることもあるから、Railsで触るファイルだけ設定したいのだが、どうすれば？
　A: 今回は個別の設定ファイルを作成する。

`新規作成`で新しいファイルを開いた後に右下の`Plain text`をクリックして`Ruby`を選択、もしくは何かしらのrbファイルを開く。次に`Sublime Text`→`Preferences`→`基本設定 - 拡張`→`シンタックス指定 - ユーザ`を選択。新たに開かれたファイルに以下を追記する。

```text:Ruby.sublime-settings
{
  "tab_size": 2,
  "translate_tabs_to_spaces": true 
}
```
同様に、`Ruby Slim`, `JavaScript`, `SCSS`のsublime-settingファイルにも書き込んでおく。今はこれだけだが、後で書き足すかもしれない。

##### 【参考URL】
- [Sublime Text 2で、rubyのインデントだけ変更する by skoji on Qiita](http://qiita.com/skoji/items/4e918780a5c2f372556b)

## 不可視なスペースやタブを可視化したい
　Q: タブと半角スペースの区別がつかなくて不便である。どうすれば？
　A: タブ・スペースの可視化がおすすめ。

`Sublime Text`→`Preferences`→`基本設定 - ユーザ`を選択。以下を追記する。

```text:Preferences.sublime-settings
"draw_white_space": "all"
```

##### 【参考URL】
* [【Mac】Sublime Text 3のインデント設定と表示について（タブとスペース） - TASK NOTES](http://www.task-notes.com/entry/20150312/1426129200)

## 日本語検索がうまく出来ない
　Q: 日本語を検索しようとすると、検索ワードが消えてしまう。どうすれば？
　A: 正直言って不満が残る対処法だが、"`Enter`で`次を検索`"の機能を停止するしかなさそう。

まず、`Default(OSX).sublime-keymap`を編集できるようにしておく(下記URL参照)。
`Sublime Text`→`Preferences`→`キーバインド - 標準`を選択。次に`Find panel key bindings`という文字列を検索。以下のコードをコメントアウトすると、Enterが改行として入力されるようになる。

```
// { "keys": ["enter"], "command": "find_next", "context":
//	[{"key": "panel", "operand": "find"}, {"key": "panel_has_focus"}]
// }
```
Enterで`次を検索`ができなくなるため、以下のコードを追加して、`command + n`で`次を検索`、`command + p`で`前を検索`を追加した。

```
{ "keys": ["super+n"], "command": "find_next", "context":
	[{"key": "panel", "operand": "find"}, {"key": "panel_has_focus"}]
},
{ "keys": ["super+p"], "command": "find_prev", "context":
	[{"key": "panel", "operand": "find"}, {"key": "panel_has_focus"}]
},
```

##### 【参考URL】
* [Sublime Text 3 で日本語を検索したとき文字が消える不具合を直す - MEMOGRAPHIX](http://memo.sanographix.net/post/101061111635)
* [Sublime Text 3でgoogle IMEの予測変換問題を無理やり解決する - 剥いだ布団とメモランダム.old](http://sheemaa.hatenablog.jp/entry/2013/11/21/015541)

## インデントに色を付けたい
　Q: インデント幅が狭いと、階層構造がわかりにくい。どうすれば？
　A: インデント毎に線を引くことにする。

![スクリーンショット 2017-06-15 13.31.08.png](https://qiita-image-store.s3.amazonaws.com/0/130268/4f7b1b14-9612-2db1-adf6-25dd77c6645d.png)

`Sublime Text`→`Preferences`→`基本設定 - ユーザ`を選択。以下を追記する。

```
"draw_indent_guides": true,
"indent_guide_options": ["draw_normal", "draw_active"],
```

更に`[カラーテーマ名].tmTheme`に、以下を追記。自分は`Monokai`を使っているので、そこに追記した。

```diff:Monokai(SL).tmTheme
<dict>
	<key>name</key>
	<string>Monokai</string>
	<key>settings</key>
	<array>
		<dict>
			<key>settings</key>
			<dict>
				<key>background</key>
				<string>#272822</string>

				...

+				<!-- インデント設定 -->
+				<!-- 親インデント -->
+				<key>stackGuide</key>
+				<string>#00ff00</string>
+				<!-- 現在のインデント -->
+				<key>activeGuide</key>
+				<string>#ff0000</string>
+				<!-- 基本インデント -->
+				<key>guide</key>
+				<string>#ffffff</string>
			</dict>
		</dict>
	</array>
</dict>
```

ちなみに`.tmTheme`の場所がわからない場合は、以下のコマンドをターミナルで走らせるとディレクトリをリストアップしてくれる。

```shell-session
$ mdfind -name .tmTheme
```

##### 【参考URL】
* [おれのさぶらいむてきすとはインデントが見やすい - fukayatsu.dev](http://blog.fukayatsu.com/2013/12/14/my-sublime-text-indent-guide/)

# ターミナル編
## gitコマンドの補完が使えない
　Q: gitのブランチ名を補完して欲しい。どうすれば？
　A: Git-Completionを導入すべし。

gitをどうやって導入したのかで対応が変わるらしいため、詳しくは下記URLを参照。

##### 【参考URL】
* [Macのターミナルでgitコマンドを補完できるようにする - タイトル未設定](http://smootech.hatenablog.com/entry/2017/02/23/102531)
* [【2ステップ】Gitコマンドでtab補完を有効にする on Qiita](http://qiita.com/growsic/items/1fff6286061e0cd27d54)

# とりあえず
　こんな感じ。本当はsublimeに導入したパッケージもまとめたいけど、もう昔のことで忘れてしまった。次回はRails Tutorialでの躓きポイントをまとめたい。