参考にしたい! JavaScript(CoffeeScript)スタイルガイド7選!

こんにちはー。
フロントエンドエンジニアの平山です。

JavaScript(CoffeeScript)の役割が増えてきた昨今。
ここいらで一度、有名なスタイルガイドを追ってみたいと思います。

一緒にスタイルガイドを策定したり、あーやこーや語らいながらよりよいスタイルガイドを考えたいフロントエンドエンジニアの方は、とりあえず一緒に開発しましょう!

【採用サイト】
『マネーフォワード採用サイト』 https://recruit.moneyforward.com/
『Wantedly』 https://www.wantedly.com/companies/moneyforward
 

JavaScript

AirBnB

Airbnb JavaScript Style Guide
Airbnb JavaScript Style Guide(es5)
和訳(非公式)
JSスタイルガイドだと有名な感じがあるAirBnbのスタイルガイドです。es2015(es6)もあり、情報のキャッチアップという意味でもチェックしたいガイドですね。
eslintrcもあるので、まだ整備されていないときはぜひ試してみましょう!

Google

Google JavaScript Style Guide
和訳(非公式)
いわずと知れたGoogleのスタイルガイド。説明が細かくなされていて、理由などもついているものがあるのでスキルアップにも参考にしたいガイド!

MDN

JavaScript style guide(日本語)
DOM要素」という項目がとても印象に残るガイド。
ブラウザベンダーぽい雰囲気を感じます(なにそれ)。

jQuery

JavaScript Style Guide
こちらは「Type Checks」が印象的かつ参考になりそうなガイド。
いつもお世話になってますm(_ _)m

Apple

Apple JavaScript Coding Guidelines(PDF)
Legacy(2011)と記載がありますが、参考までに。
 

CoffeeScript

GitHub

Coding Style(CoffeeScript)
あっさりしてます。
AtomでもわかるようにCoffeeScriptを全面的に採用してるようです。
一行120文字が「おっ」ってなる。

Cookpad

Cookpad CoffeeScript Coding Style Guide(CoffeeScript)
Google JavaScript Style Guideを参考にされているようです。
ハッシュ時に省略などCoffeeScriptらしい部分もあるのでCoffeeScriptを採用しているととても参考になりそう。
 

最後に

Cookpadさんのスタイルガイドにあるように、

「bad」として例示されている記法の中には、特に悪いと思えないようなものも存在していますが、その理由は、「書きやすさ」よりも「読みやすさ」、コードの一貫性などを優先するためです。

がとても大事なことだと思います。

またこれらは機械が得意なことなので、JSHintESLintJSCSなどを利用したいですね。

設定ファイルが置かれているスタイルガイドも多々あるので活用したいところ!
スタイルガイドを策定・利用することでより質・生産性を向上していきましょう!
 
こんな感じで、一緒にフロントエンドから盛り上げてくれるエンジニアを募集しています。
ご応募お待ちしています。

【採用サイト】 ※ 再掲
『マネーフォワード採用サイト』 https://recruit.moneyforward.com/
『Wantedly』 https://www.wantedly.com/companies/moneyforward

【公開カレンダー】
マネーフォワード公開カレンダー

【プロダクト一覧】
家計簿アプリ・クラウド家計簿ソフト『マネーフォワード』 https://moneyforward.com/
家計簿アプリ・クラウド家計簿ソフト『マネーフォワード』 iPhone,iPad
家計簿アプリ・クラウド家計簿ソフト『マネーフォワード』 Android
クラウド型会計ソフト『MFクラウド会計』 https://biz.moneyforward.com/
クラウド型請求書管理ソフト『MFクラウド請求書』 https://invoice.moneyforward.com/
クラウド型給与計算ソフト『MFクラウド給与』 https://payroll.moneyforward.com/
消込ソフト・システム『MFクラウド消込』 https://biz.moneyforward.com/reconciliation/
マイナンバー管理システム『MFクラウドマイナンバー』 https://biz.moneyforward.com/mynumber

Pocket