読者です 読者をやめる 読者になる 読者になる

CoffeeScript スタイルガイドの公開とその目的

こんにちは、クックパッド編集室の太田(@os0x)です。 普段は料理動画やクックパッドニュースなど、メディア寄りのサービスを担当しながら、社内のCoffeeScriptを中心としたウェブフロントエンドのコードレビューなどを行っています。 今回は、そのCoffeeScriptのレビューを円滑に行うためのコーディングスタイルについてお話したいと思います。

Style guides in Cookpad

クックパッドでは、github.com上でスタイルガイドを公開しているのをご存知でしょうか? cookpad/styleguide

これまで、Ruby / Objective-C / Java のコーディングスタイルが公開されていました。そして、本日 CoffeeScript のコーディングスタイルを追加しました。

さて、そもそもスタイルガイドとはなんでしょうか?コーディング規約とも言われたりしますが、スタイルガイドとコーディング規約はどう違うのでしょうか?

コーディング規約(ルール)とは

コーディング規約は、こう書かなければいけないというルールを定めたものです。それはルールなので、必ず従わなければいけません。 例えばJavaのコーディング規約はIDEの構文チェックツール*1とセットになっていて、その規約に従わなければわかりやすいエラーメッセージを表示してくれるといった具合です。 Javaような静的型付け言語では、言語の特性に加えてIDEの強力なサポートもあるので、ルールがあることでコードが書きやすくなる上に、レビュー時も細かいスペースについて指摘し合うような時間を節約することができます。

スタイルガイドとは

スタイルガイドは、ガイドという名前の通り、ルールほど強制力が強くないところがコーディング規約との大きな違いといえるでしょう。 こう書いたほうが読みやすいという部分を定めたものなので、ガイドに従っても読みやすくならない場合などはガイドに従わないということもあります。

RubyやJavaScript、CoffeeScriptのような動的型付けでインタプリタで実行される言語の場合、その動的さ故にIDEによるサポートは十分ではありません。 そういった環境で厳密なルールを決めて強制した場合、コードを書くことが窮屈になり、楽しくなくなってしまいます。 RubyやCoffeeScriptのような言語は書いていて楽しいというのが最大の長所と言っても過言ではないと思う*2のですが、そこに厳密なルールを適用してしまうと、その長所を潰してしまいかねません。 だからこそ、スタイルガイドという形がこれらの言語には最適なのです。

コードレビューとガイド

そもそも、なぜコーディング規約・スタイルガイドが必要なんでしょうか。 ガイドがあることで、

  • スペースの取り方などを統一されてコードがキレイになる
  • 議論になりそうな部分を定めておくことで、議論の時間を節約できる(文字列リテラルにシングルクォートとダブルクォートのどちらを使うかとか)
  • 書きやすさより、読みやすさを優先したコードにできる

といったメリットがあります。これらのメリットはコードのメンテナンス性を上げ、同時にレビューの効率をあげることに貢献します。

「書きやすさ」より「読みやすさ」

さて、スタイルガイドのメリットとして「書きやすさより、読みやすさを優先したコードにできる」という項目を挙げましたが、これについて少し掘り下げたいと思います。

コードの書き方というのは人それぞれですが、その書き方は、意識して書き方を変えていたりしない限りは、自分が書きやすい書き方で書いているはずです。 自分が書きやすい書き方が他の人、もしくは3日後の自分に取って読みやすい書き方とは限りません。 コードを書くのは一瞬(完成するかは別の話)ですが、一度書かれたコードはその瞬間から自分自身が繰り返し読むはずです。例えば、1行追加するだけの修正でも、前後の行はしっかり見てから追加しますよね。そういったことを繰り返し行なっているはずです。 さらにレビューなどで他人も読むのであれば、コードは書かれている時間より読まれている時間のほうが圧倒的に長くなります。

だからこそ、クックパッドのスタイルガイドは、書きやすさより、読みやすさを優先しています。 例えば、CoffeeScriptのガイドでは、「[MUST] メソッドの呼び出しの括弧は基本的に省略しない」という項目があります。 書きやすさだけを考えたら、括弧は省略したほうが書きやすいことはまず間違いないでしょう。しかし、読みやすさについて考えてみると、括弧がしっかり書いてあったほうが読み間違いをしにくく、レビューなどもしやすいと考えているので、括弧を省略しないというガイドを作りました。

最後に

スタイルガイドを定めておくと、レビューを円滑にすることができるので、より本質的な部分に集中しやすくなります。今回公開したCoffeeScript以外にも、Ruby / Objective-C / Javaのコーディングスタイルも公開していますので、この機会に目を通して頂ければ幸いです。

クックパッドでは一緒にレビューしあう仲間を募集しています。是非ご応募ください。

ソフトウェアエンジニア | クックパッド株式会社 採用情報

*1:CheckStyleやFindBugsなど

*2:あくまで個人的な意見です

/* */ @import "/css/theme/report/report.css"; /* */ /* */ body{ background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/c/cookpadtech/20140527/20140527163350.png'); background-repeat: repeat-x; background-color:transparent; background-attachment: scroll; background-position: left top;} /* */ body{ border-top: 3px solid orange; color: #3c3c3c; font-family: 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, Osaka, 'MS Pゴシック', sans-serif; line-height: 1.8; font-size: 16px; } a { text-decoration: underline; color: #693e1c; } a:hover { color: #80400e; text-decoration: underline; } .entry-title a{ color: rgb(176, 108, 28); cursor: auto; display: inline; font-family: 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, Osaka, 'MS Pゴシック', sans-serif; font-size: 30px; font-weight: bold; height: auto; line-height: 40.5px; text-decoration: underline solid rgb(176, 108, 28); width: auto; line-height: 1.35; } .date a { color: #9b8b6c; font-size: 14px; text-decoration: none; font-weight: normal; } .urllist-title-link { font-size: 14px; } /* Recent Entries */ .recent-entries a{ color: #693e1c; } .recent-entries a:visited { color: #4d2200; text-decoration: none; } .hatena-module-recent-entries li { padding-bottom: 8px; border-bottom-width: 0px; } /*Widget*/ .hatena-module-body li { list-style-type: circle; } .hatena-module-body a{ text-decoration: none; } .hatena-module-body a:hover{ text-decoration: underline; } /* Widget name */ .hatena-module-title, .hatena-module-title a{ color: #b06c1c; margin-top: 20px; margin-bottom: 7px; } /* work frame*/ #container { width: 970px; text-align: center; margin: 0 auto; background: transparent; padding: 0 30px; } #wrapper { float: left; overflow: hidden; width: 660px; } #box2 { width: 240px; float: right; font-size: 14px; word-wrap: break-word; } /*#blog-title-inner{*/ /*margin-top: 3px;*/ /*height: 125px;*/ /*background-position: left 0px;*/ /*}*/ /*.header-image-only #blog-title-inner {*/ /*background-repeat: no-repeat;*/ /*position: relative;*/ /*height: 200px;*/ /*display: none;*/ /*}*/ /*#blog-title {*/ /*margin-top: 3px;*/ /*height: 125px;*/ /*background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/c/cookpadtech/20140527/20140527172848.png');*/ /*background-repeat: no-repeat;*/ /*background-position: left 0px;*/ /*}*/