viewsES5なJavaScriptをESLintとPrettierで改善するこんにちは。普段はLOHACOのフロントエンド寄りな開発を担当しています。JavaScriptをES201xで書いてますか?最近のJavaScriptの技術記事ではES201x&BabelかTypeScript/Flow等のAltJSを使うのが当然になっている印象を受けます。・・・ですが、古くからあるサービスではなかなか移行に踏み切れなかったりもする訳です。最新フロントエンド技術を導入したいなぁと思いつつ、後回しにしてES5で開発を続けている現場もまだまだ世の中多いのではないかと思います。私の担当するLOHACOでもES5とjQueryで書かれた古いJavaScriptのコードが至るところに存在しており、ES201x化/AltJSの導入には至っていません。ツールなら導入できるとはいえ近年進化し続けるJavaScript開発ツールの恩恵にあやからないのは勿体ないものです。コード本体に手をいれるのは難しくても、ツールの導入で開発を便利にしていくことは可能です。Lintツールやコードフォーマッタの導入は余計なレビューの工数を減らせるコードの品質を即向上させることができるので現場への導入も周りの賛同を得やすいのではないでしょうか。以下、LOHACOでどんな取り組みをしてきたのかご紹介します。v8.x.xの最新版をインストール済みの想定で書いてありますまずはコーディング規約を決めるツール導入するぞ!の前にやるべきことがあります。コーディング規約を決める、です。コードの書き方がバラバラな状態ではコードレビューがしんどくなります。Requestを活用し日々活発にコードレビューが行われています)またJavaScript初心者にとってもどういう書き方がベストなのか?の指針もあった方がいいと思います。Guideをコーディング規約としました。Guideにしたのか?ですが2018/04/27時点でスター数が69983もあるので、「これが世界標準です」といえる強さES5のスタイルとベストプラクティスについてほどよくまとまっていてちょうどいい感じここはささっと決めて次の段階に進みましょう。次に自動でチェックできるようにするコーディング規約を決めたのはいいのですが、インデントがッ!、スペースがッ!、といった内容は人間の目で見てレビューするものではありません。ここではESLintを導入して、AirbnbのES5のESLintルール(eslint-config-airbnb-base/legacy)を適用します。ESLintとは?ESLintとは現在JavaScript界でデファクトスタンダードなLintツール、eslint-config-airbnb-base/legacyはAirbnbで使われている(た)ESLint用ルールのプリセットです。Guideに則っているかのチェックの大半をツールに任せることができます。ESLint&eslint-config-airbnb-baseをインストールターミナルから以下のコマンドを打ちましょう。peerDependencies結果出力されたパッケージを以下のようにインストールしましょう。いうESLint用設定ファイルを書きます。・・・現状とあまりに違いすぎる箇所と、諸事情により変更したい箇所はルールを上書きしてカスタマイズしました。'rules':を空にしてから対象のソースコードにESLintをかけて調整していくのが良いでしょう。.としてみてください。カレントディレクトリ配下のjsファイルをESLintでチェックできます。さらなる高みをPrettierで目指すこれでESLintで自動チェックできるようになりました。キレイなコードを目指してPrettierを導入します。Prettierとは?Prettierとは現在JavaScript界でデファクトスタンダードなコードフォーマッタです。ESLintと機能的に被っていますが、Prettierの方が行の長さも考慮してコードをきれいにしてくれるので、コーディングスタイルの統一はPrettier任せにした方が良いでしょう。ESLintとの衝突をさけるため、eslint-config-prettierを入れます。コードがPrettier整形後のフォーマットに則っているかをESLint経由で確認するためにeslint-plugin-prettierも入れておきましょう。}};また、.prettierrc.js(Prettier用の設定ファイル)も追加しておきます。100};.eslintrc.jsと.prettierrc.jsを除外したいなら.prettierignoreというファイルも作っておきましょう。以下のコマンドを実行すればコードがフォーマットされます。実はPrettierでフォーマットされる結果はAirbnbのスタイルガイドと一部異なります。以下のようなスタイルの違いがあります。{})();このissueを見た感じAirbnbのスタイルをPrettierに寄せるみたいなことはなさそうです。Prettierを設定でAirbnbのスタイルに寄せることもできません。Guideからは外れているのでした。Guideはとても参考になりますが、どうしても現状のコードにそぐわない部分は出てきます。そこは環境に応じてフォークして修正するなりした方がよいでしょう。今後と、このようにES5でいかに頑張るか書いてきましたが、やはりES5のままでは限界があります。Modules使わないと話にならん等々。タイミングを見計らって、ES201xかAltJSに移行せねばと思ってます。まとめ生々しい現場の声をお伝えしました。この記事が同じような環境で悩んでいる人の参考になれば大変うれしいです。/北海道出身で横浜在住。株式会社アイスタイルにて新規事業開発や、ポイントサイト、@cosmeの運用に担当。engineerFollowアスクル株式会社アスクルは、「お客様のために進化する」という企業理念のもと、法人・事業所向け及び一般消費者向け通信販売サービスを展開しています。法人・事業所向けサービスは、1993年のスタートから多くのお客様にご支持いただき、今ではオフィス用品だけではなく、医療・介護施設や工場などあらゆる仕事場の必需品取りそろえています。一般消費者向けサービスは「忙しい女性の暮らしをらくにする」ことをコンセプトに、毎日使っていただける日用品ショッピングサイトとして2012年にスタート、いまでは累計お客様数が500万人を超えています。BtoBもBtoCも、ともに「今日来る」・「明日来る」のスピーディーなお届けの便利さによって、多くのお客様からのご支持をいただいています。現在、「テクノロジーファースト」を掲げ、AI・ビッグデータ・ロボティクスなどの最先端技術を駆使し、商品開発・ECマーケティング・物流・配送・お問い合わせなど、様々な領域を進化させています。今後も、EコマースNo.1を目指し、「社会最適」への進化を加速します。アスクル株式会社が法人向け(BtoB)にあらゆる仕事場で必要なモノを提供する通信販売サービス「ASKUL」は2017年に創業25年を迎え、日本中の多くのお客様にご支持をいただいています。注射・輸液などの医薬品・医療機器などの医療材料まで、約550万アイテムの商品をASKULサイトからワンストップでご注文いただけます。億円(2018年5月期)を達成し、また、2018年8月には累計のお客様数が500万人を超えるなど、多くのみなさまにご支持いただいています。Communities。“くらしをかるくする”をコンセプトに、飲料・食品、キッチン用品から医薬品、コスメなどの日用品をはじめ、暮らしを潤すこだわりの商品を、いつでもリーズナブルかつスピーディーにお届けする日用品ショッピングサイトです。物流力を背景に、簡単でスピーディーにお買い物をしていただける新しいショッピングスタイル“スマートショッピング”を提案しています。