React.jsを導入するときに構文チェックで何を使っていますでしょうか。Rplayの中ではairbnbのJavaScriptのstyleguideがモダンで流行っているということ、書き方としてしっかりしているということ、他の開発者に負の遺産を残さないこと(これがメイン)で、導入しています。
Rplayの開発は一人で行っていますが、Reactを導入してからどのように進めていくか、チームに書き方を浸透させていくかで悩んでいる方に1から導入してみましたので、ご紹介します。
airbnb JavaScript Style guide
https://github.com/airbnb/javascript
airbnbのGithubを見ていただけると詳細がわかりますが、SassやCSSについてもルールを作っているようなので、CSSプリプロセッサでSassを導入しているプロジェクトの方は参考にしてみてください。
airbnbの技術選定について
そもそもなぜairbnbはこういうJavaScriptのstyle guideを作ったのかということが書かれているSlideshareもご紹介しておきます。airbnbの技術の遷移も昔のプロダクトから今のプロダクトへの流れとともに紹介されているので、モダンなアプリケーション開発でどのような技術選定をしているのか参考になるかと思います。
CSSのルールは、OOCSSとBEMを採用
見てみると基本的なことが書かれていますが、OOCSSとBEMを採用しているようです。CSS Modulesを使っておらず、生のCSSでしっかりルール化して運用しているように見えます。
確かにCSSでモジュール化のルールが徹底されている場合はグローバルに汚染されないので、CSSで良いという人もいますよね。
CSSの採用・運用方針
この辺の採用方針は今後チームにフロントエンドの人材が入ってくるか、自分以外の開発者がアサインされた場合にプロダクトがスムーズに進むかどうかなど長期的な視点で選択すると良いかと思います。Rplayではフロントエンド以外の開発者もフロントを触ることになることがありそうなので、CSS Modulesを採用しています。
理由としては、サーバーサイドの方でもCSSの設計を知らなくてもclassが汚染されず、衝突を避けられるのでコードが割と綺麗な状態で維持できるからです。いつどういう開発メンバーになってもプロダクトはユーザーのためにあり、ユーザーがすでにいるプロダクトをいかに良い状態を保つかを考えた結果このような決断に至りました。
airbnbのCSSのルールに関してはこちらの公式サイト
https://github.com/airbnb/css
導入の仕方
導入方法は非常に簡単です。.eslintrcファイルに下記のようにjsonを追加します。
npm install eslint
eslintrcを生成する場合には下記のinitコマンド
eslint --init
{
"extends": "airbnb",
"installedESLint": true,
"plugins": [
"react"
]
}
Atom+ESLintが便利
Atom+ESLintが優れているポイントをいくつかご紹介したいと思います。
コード上でのハイライト
Atomをエディターとして使っている方であれば、linterとlinter-eslintのPackageを導入していると非常にデバックが便利です。表示されているarrow-body-styleなどのエラー内容がリンクになっているので、クリックするとeslintの公式サイトに遷移します。
ES6での記述方法についてと、これまでの書き方を比較して、詳細に書かれているので、修正が非常にやりやすいですよ。下記に比較した場合の書き方の例を載せておきます。
下記のようにincorrectとcorrect codeを示してくれます。
incorrect
/*eslint arrow-body-style: ["error", "as-needed"]*/
/*eslint-env es6*/
let foo = () => {
return 0;
};
let foo = () => {
return {
bar: {
foo: 1,
bar: 2,
}
};
};
correct code
/*eslint arrow-body-style: ["error", "as-needed"]*/
/*eslint-env es6*/
let foo = () => 0;
let foo = (retv, name) => {
retv[name] = true;
return retv;
};
let foo = () => ({
bar: {
foo: 1,
bar: 2,
}
});
let foo = () => { bar(); };
let foo = () => {};
let foo = () => { /* do nothing */ };
let foo = () => {
// do nothing.
};
let foo = () => ({ bar: 0 });
React.jsでデバックや構文チェックに悩んでいたという方はすぐに導入することをお勧めします。
arrow-body-styleのeslintのページ
http://eslint.org/docs/rules/arrow-body-style
プロジェクトやファイル内でのエラーにポイントが可視化
プロジェクトのどこでエラーが起きているのか可視化されると修正がしやすいですよね。さすがに一々ブラウザで確認してConsoleからデバックするということをやっていると時間がかかってしまいます。
上記の画像のようにプロジェクトのエラーが可視化され、さらに白くなっている文字を選択するとそのファイルに遷移して、エラーになっているポイントまで移動してくれるので非常に便利です。使わない手はありませんよね！
ESLintのエラー対応
ESLintで様々なエラーが出たときの対応と効率的な対応方法を随時ご紹介していきます。Rplayの開発部分でリアルに詰まったところなどを集約していきます。ここからはエディターはAtomを使用していますので、Atomでのやり方になります。Atomの回し者ではありませんが、フロントエンドの開発では非常にスムーズでやりやすいのでオススメです！
タブとスペースが混合している場合の解決
タブとスペースが混合しているか、eslintにtabを許可、またはspaceを許可していないときにエラーが起きます。また、React.jsの記法ではスペース2つを基本的なルールとしているためにタブは推奨されていません。ですので、特別.eslintrcに追記がない場合にはエラーが起きているかと思います。
そして一つ一つタブとスペースを変換していたら日が暮れてしまいますよね。そんなときはこの方法です。
スペース→タブ
タブ→スペース
の変換を一括でできるのが、このコマンドです。
command+shift+p で検索窓を開いて、convertを打ち込みます。そうすると、サジェストにtabからspaceへの変換か、spaceからtabへの変換をするかが表示されます。どちらかを選択してクリックすると非常にスッキリしますよ。
また、Reactプロジェクトにeslintを入れる時のプラグインをご紹介します。
yannickcr/eslint-plugin-react:
まとめ
AtomにESLintを導入すると非常に便利だということがお分かりいただけましたでしょうか？
Packageのインストールなどいくつかの準備が必要ですので、最初の準備は手間がかかるかもしれませんが、手軽に構文チェックできるので非常にありがたいです。
そして何より綺麗にコードが書けるということで、しっかりしたコードを書けるように勉強になりますし気持ちが良いものです。まだESLintを導入していないという方がいらっしゃれば導入してみてくださいね。特にReactを使っている方は、今回ご紹介したAirbnbのJavaScriptのスタイルガイドを導入することをお勧めします。では素敵なコーディングライフを！
React.jsの初心者のためのエラー集もストックしていっています。エラーの解決策で悩んでいるという方はこちらも合わせてどうぞ。
