JavaScript Style

# はじめに
プログラムを書くときに重要であるコーディングスタイルについて。
`ES6`でどないしょーという感じである(まああまり`ES6`関係なく`JS`だけど）。
主に、**スペース**と**改行**の話。

## 参考
http://cou929.nu/data/google_javascript_style_guide/
https://github.com/airbnb/javascript

## ツールを使いこなす
ツールを使いこなすのはプログラミングと同等もしくはそれ以上に重要な事である。RubyMineでできるようにして、あとは設定をExportでもしよう。
https://www.jetbrains.com/ruby/help/exporting-and-importing-settings.html

## command + option + l
`command + option + l`でファイル内を一発整形可能である。

# Spaces（スペースの設定）
いよいよ　ここからスペースの間隔をどうするかの設定に入る。
設定できる項目は大きく以下のようになっている。

- Before Parenthese
- Around Operators
- Before Left Brace
- Befor Keywords
- Within
- In Ternary Operator(?:)
- Other

が、しかし、
**Functionの定義とその呼び出し**
**ifとforの書き方**
みたいに考えたほうが、わかりやすかったので、
下記はそのような考えに基づいて書いてある。

## Functionの定義
**Google JavaScript Style Guide 和訳**

```
function SomeConstructor() 
Foo.prototype.bar = function() {
```
**Airbnb JavaScript Style Guide**

```
function yup(name, options, args) {
var named = function named() {
```

ということで、`function`に関しては、
`Function left brace`にのみチェックを入れておけばよいだろう。
![Screen Shot 2015-08-31 at 8.58.00 AM.png](https://qiita-image-store.s3.amazonaws.com/0/27895/67ff850e-77b3-84ab-4321-6cce69d5f9f6.png)

## Functionの呼び出し
**Google JavaScript Style Guide 和訳**
`bar(a, b);`
**Airbnb JavaScript Style Guide**
`thing1();`
![Screen Shot 2015-08-31 at 9.05.05 AM.png](https://qiita-image-store.s3.amazonaws.com/0/27895/c0dc626a-31f4-d613-624d-14a206329235.png)
ということで、`Function call parentheses`と`Function declaration parentheses`にチェックは入れない。

## if文, for文
**Google JavaScript Style Guide 和訳**

```
for (var key in arr) {
    print(arr[key]);
}
if (y != null && y != '') {
```

**Airbnb JavaScript Style Guide (badの方にしか載ってないけど）**

```
for (i = 0; i < len; i++) {
  itemsCopy[i] = items[i];
}
```
**結構スペースあける**のね。ということで、
![Screen Shot 2015-08-31 at 9.13.57 AM.png](https://qiita-image-store.s3.amazonaws.com/0/27895/3b38b5d2-5aa3-dee7-729a-6ef513295e47.png)
このあたりはがっつりチェックを入れる。
`Within`の方は、逆にスペースを開けてないのでチェックを外しておく。

## 代入、四則演算等
さすがに、

```
i ++
! i
```
ここにスペース開くのは嫌なので、ここ以外にスペースを開けた
![Screen Shot 2015-08-31 at 9.19.34 AM.png](https://qiita-image-store.s3.amazonaws.com/0/27895/6c977281-4de0-208f-2f93-dc0efaf04006.png)
かな。個人的には掛け算の`*`はくっつけたい時があるような気がするけどまあいいか。

## 引数とかオブジェクト（ハッシュ）生成時のスペース具合
こうでしょう
![Screen Shot 2015-08-31 at 9.23.39 AM.png](https://qiita-image-store.s3.amazonaws.com/0/27895/0d950c08-9af1-501d-c766-c132cb06f725.png)

## 3項演算子
全部チェックでよいでしょう。
![Screen Shot 2015-08-31 at 9.25.06 AM.png](https://qiita-image-store.s3.amazonaws.com/0/27895/07d6bd57-a2d9-d443-5ef1-032d4d67897c.png)

## スペース設定全体像
![Screen Shot 2015-08-31 at 11.29.34 AM.png](https://qiita-image-store.s3.amazonaws.com/0/27895/667d2b8c-4421-ccf8-9dec-39d9045fb886.png)


# Wrapping and Braces（改行の設定）
よしスペースはやっつけたので、
`Wrapping and Braces`に入ろう。
改行とかどうするねんという設定がここだ。

設定項目の上から順番にいく

![Screen Shot 2015-08-31 at 9.43.53 AM.png](https://qiita-image-store.s3.amazonaws.com/0/27895/9a02fb83-030a-5c8c-1e79-1dd5b68db7d8.png)

## Keep when reformatting
なんか　`command + option + l` しても効果が出てないきがするような感じなのだが、なぜだろう。見た感じ、すべてのチェックをはずしておいた。

と思ったが、

`Line breaks` は、自分で打った改行を残して置いてくれる設定のようだ。（強制的に改行を消される場面も多々ある）
残してくれる場面は、

```
hoges = [
  1,
  2
];
```
みたいな配列を作っているところとかだ（今はまだ全てを把握しきれていない）。

改行を残したい場面はあるので、`Line breaks`にチェックを入れておこう。
![Screen Shot 2015-08-31 at 10.52.04 AM.png](https://qiita-image-store.s3.amazonaws.com/0/27895/94af7f76-70bc-0b73-8e2b-1d00d64409e7.png)


## Comments
コメントで改行いっぱいとるのもなんなんで、ここもチェックをはずした。

## Braces placement
`In function declaration`と`Other`の設定がある。
ここはチェックボックスではなく、セレクト式だ。
![Screen Shot 2015-08-31 at 9.45.18 AM.png](https://qiita-image-store.s3.amazonaws.com/0/27895/0d64e000-6a24-3220-a9e2-636604a58f2e.png)
`Egyptian Brackets(エジプト人ブレース)`とかあのあたりを設定する項目である。私の好みはどちらも`End of line`である。
**Google JavaScript Style Guide 和訳**も**Airbnb JavaScript Style Guide**も`End of line`な設定な気がするし、`End of line`でよいだろう。

## Function declaration parametersとFunction call arguments
`Function declaration parameters`
関数宣言の引数とかの部分でどんな感じで改行するかの設定。
![Screen Shot 2015-08-31 at 9.49.07 AM.png](https://qiita-image-store.s3.amazonaws.com/0/27895/a81feca3-2c52-8c15-0d8e-b9b2aae8b604.png)
ここのチェックボックスは`Do not wrap`以外を選択しないとそもそも機能しないようだ(追記：もしかしたら効くかも。他で選択式で`Do not wrap`で効いてた項目があったので）。ではどんなものが選択できるのかというと、
![Screen Shot 2015-08-31 at 9.50.48 AM.png](https://qiita-image-store.s3.amazonaws.com/0/27895/77121f20-6e41-6ad6-34cd-44b7dd1683cb.png)
こんな感じなのだが、`Wrap if long(もし長ければ）` とかあったりで、
もし長いとか、「君の言う長いとは何かね？」とか言われたら、なんかどーしよーもない気がするので、ここは手動かなあ。ということで、`Do not wrap`にしといて、自分で本当に長いと思ったら改行しようかな。
と思ったら、`Do not wrap`にしておくと、自分で改行したやつが、`command + option + l`で強制的に消されてしまう。
`Keep when reformatting`の`Line breaks`にチェックを入れててもビミョー（理由は後述というかこの項目は悩んでたので日本語ぐちゃぐちゃ）。

ううううううう。
まいった。
うーん。
やむなし。

長いと改行したい。空気を読んでくれることを祈って、
`Chop down if long`
![Screen Shot 2015-08-31 at 10.27.26 AM.png](https://qiita-image-store.s3.amazonaws.com/0/27895/a1d05253-64b7-58df-4924-424d8dcf1c0b.png)
てか引数が長い時に僕がやってた改行の仕方って、
`Chop down`って言うのね。加えて`(`と`)`の前後で改行するのが好き。

と思ったのだが（二転三転してます）、ここと、
`Function call arguments`は同じにしたかったのだけど、
`(`と`)`の前後に改行いれると、

```
$.ajax(
            {
              url: 'hoge/hoge.json', data: {
              hoge: 'hoge'
            }
            }
          ).done(
            (res) => {
```
となってすごく嫌。
んじゃあ、この設定である
`New line after(`と`Place ) on new line`のチェックは外して、自分で改行したいところだけ、改行しよう（`Line breaks`が効いてくれるはず）と思ったのに、`command + option + l`で整形かけると、ここの改行は消されてしまった........

どうやっても、満足できないので`Do not wrap`でチェック全外しでいこう。

![Screen Shot 2015-08-31 at 11.08.04 AM.png](https://qiita-image-store.s3.amazonaws.com/0/27895/0345d81b-30da-2ca0-66bc-4a26d68c66a7.png)



## if() statement
![Screen Shot 2015-08-31 at 9.57.58 AM.png](https://qiita-image-store.s3.amazonaws.com/0/27895/3df2d8a7-3df2-ec74-744a-ab5618b7da20.png)
`Force braces` が選択式だ。`if`の`{ }`は省略できる場面があるが、これは省略しない方がよいだろう。よって、`When multiline`にしておいた。

## for() statement
![Screen Shot 2015-08-31 at 10.03.42 AM.png](https://qiita-image-store.s3.amazonaws.com/0/27895/58725f40-daa4-db1c-89bb-7d740784a2e3.png)
`Do not wrap`以外を選択するとどうも改行しすぎな感があるので、`Do not wrap`を選んだ。`Force braces`は`if`同様`for`も`{}`を省略できる場面があるが、省略したくないので、`When multiline`を選択した。

## while, do..while
余程のことがないとこの2つは書かないかな。
![Screen Shot 2015-08-31 at 10.06.23 AM.png](https://qiita-image-store.s3.amazonaws.com/0/27895/50a89c00-d465-ec2e-01ca-182371b5dc6b.png)
まあ`if`や`for`に合わせる感じで、`When multiline`にしとこう。

## switch statement
んー　インデントない方がちょっと好きかなあ。
**Google JavaScript Style Guide 和訳**はインデントありなので、つけときました。
![Screen Shot 2015-08-31 at 10.09.04 AM.png](https://qiita-image-store.s3.amazonaws.com/0/27895/3c5782d4-c809-5aa9-8c8f-04c0a3aed7f0.png)

## try statement
`catch`や`finally`の`}`で改行するかという話。
しない派なので、チェックはなしで。

## Binary expressions
主に`if`の条件とかの式の設定ぽい。`Do not wrap`以外を選択すると改行が多すぎる気がする。`Do not warp`にしとこう。
![Screen Shot 2015-08-31 at 10.15.13 AM.png](https://qiita-image-store.s3.amazonaws.com/0/27895/7696ad10-bf19-d9e9-ed79-2c112c2bc313.png)

## Assignment statement
代入の`=`で改行するかどうかの設定ぽい。改行しないので、
`Do not wrap`

## Ternary operation
3項演算子で改行するかどうか。私はしません。
`Do not wrap`
![Screen Shot 2015-08-31 at 10.20.11 AM.png](https://qiita-image-store.s3.amazonaws.com/0/27895/a25a3e04-6ded-6e0d-b105-b9fc8aae8102.png)

## 改行設定全体像
![Screen Shot 2015-08-31 at 11.29.46 AM.png](https://qiita-image-store.s3.amazonaws.com/0/27895/a3a4feae-82d9-bcc0-754c-0652d8731835.png)