【5ヶ月連続!3位】ほかにも多くのプログラミングスクールがありますが、現役エンジニアが利用して間違いないスクールを厳選しています。プログラミング未経験からエンジニアへReact.jsを導入するときに構文チェックで何を使っていますでしょうか。Rplayの中ではairbnbのJavaScriptのstyleguideがモダンで流行っているということ、書き方としてしっかりしているということ、他の開発者に負の遺産を残さないこと(これがメイン)で、導入しています。Rplayの開発は一人で行っていますが、Reactを導入してからどのように進めていくか、チームに書き方を浸透させていくかで悩んでいる方に1から導入してみましたので、ご紹介します。guidehttps://github.com/airbnb/javascriptairbnbのGithubを見ていただけると詳細がわかりますが、SassやCSSについてもルールを作っているようなので、CSSプリプロセッサでSassを導入しているプロジェクトの方は参考にしてみてください。guideを作ったのかということが書かれているSlideshareもご紹介しておきます。airbnbの技術の遷移も昔のプロダクトから今のプロダクトへの流れとともに紹介されているので、モダンなアプリケーション開発でどのような技術選定をしているのか参考になるかと思います。見てみると基本的なことが書かれていますが、OOCSSとBEMを採用しているようです。Modulesを使っておらず、生のCSSでしっかりルール化して運用しているように見えます。確かにCSSでモジュール化のルールが徹底されている場合はグローバルに汚染されないので、CSSで良いという人もいますよね。CSSの採用・運用方針この辺の採用方針は今後チームにフロントエンドの人材が入ってくるか、自分以外の開発者がアサインされた場合にプロダクトがスムーズに進むかどうかなど長期的な視点で選択すると良いかと思います。Modulesを採用しています。理由としては、サーバーサイドの方でもCSSの設計を知らなくてもclassが汚染されず、衝突を避けられるのでコードが割と綺麗な状態で維持できるからです。いつどういう開発メンバーになってもプロダクトはユーザーのためにあり、ユーザーがすでにいるプロダクトをいかに良い状態を保つかを考えた結果このような決断に至りました。導入方法は非常に簡単です。.eslintrcファイルに下記のようにjsonを追加します。]}Atom+ESLintが便利Atom+ESLintが優れているポイントをいくつかご紹介したいと思います。コード上でのハイライトAtomをエディターとして使っている方であれば、linterとlinter-eslintのPackageを導入していると非常にデバックが便利です。表示されているarrow-body-styleなどのエラー内容がリンクになっているので、クリックするとeslintの公式サイトに遷移します。ES6での記述方法についてと、これまでの書き方を比較して、詳細に書かれているので、修正が非常にやりやすいですよ。下記に比較した場合の書き方の例を載せておきます。codeを示してくれます。});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に追記がない場合にはエラーが起きているかと思います。一つ一つタブとスペースを変換していたら日が暮れてしまいますよね。そんなときはこの方法です。スペース→タブタブ→スペースの変換を一括でできるのが、このコマンドです。検索窓を開いて、convertを打ち込みます。すると、サジェストにtabからspaceへの変換か、spaceからtabへの変換をするかが表示されます。どちらかを選択してクリックすると非常にスッキリしますよ。Reactプロジェクトにeslintを入れる時のプラグインをご紹介します。yannickcr/eslint-plugin-react:まとめAtomにESLintを導入すると非常に便利だということがお分かりいただけましたでしょうか?Packageのインストールなどいくつかの準備が必要ですので、最初の準備は手間がかかるかもしれませんが、手軽に構文チェックできるので非常にありがたいです。何より綺麗にコードが書けるということで、しっかりしたコードを書けるように勉強になりますし気持ちが良いものです。ESLintを導入していないという方がいらっしゃれば導入してみてくださいね。Reactを使っている方は、今回ご紹介したAirbnbのJavaScriptのスタイルガイドを導入することをお勧めします。素敵なコーディングライフを!React.jsの初心者のためのエラー集もストックしていっています。エラーの解決策で悩んでいるという方はこちらも合わせてどうぞ。ccのイラストレーターのインストールができない問題とその解決策docker起動時のエラーと対処方まとめ在宅ワーカー・アルバイトが知るべき初心者OKの稼げるお仕事3選プログラミング言語別WebCamp成功体験談1ヶ月みっちり通って使い倒した、ウェブキャンプの転職成功体験談です。企業情報と評判から会社をえらぶ口コミや企業情報から入社対策をしましょう。