より良いコードを書くためのJavaScriptのベストプラクティス50のルール

原文

JavaScriptは強力で柔軟なため、好きなようにコードを書くことができ、コードのバグにつながる非常に珍しいことを試すことができます。ここでは、私が学んだ、JavaScriptでのコーディングについて知っておくべき50のことを紹介します。

常にuse strictオン

もしあなたがJavaScriptのライブラリやフレームワーク、コンパイラを使っているなら、「use strict」がオンになっている可能性が高いですが、そうでない場合に備えて、ファイルや関数に追加するのを忘れないようにしましょう。そうでない場合は、ファイルや関数に追加することを忘れないでください。

関数宣言の代わりに関数式を使用する

Function の動作やプロパティを利用したいのでなければ、関数式を使うことをお勧めします。関数宣言は、時には便利ですが、コードに奇妙な振る舞いをもたらし、何が起こっているのかが常に明らかではないので、避けてください。変なアクセスにならないように、使う関数がどこから来て、それらは使う前に来るのかを明確にするようにしましょう。

varを使うのはやめましょう

varを使った宣言は、var宣言が起こる前にアクセスできるようにするhoistedもあり、これは奇妙で明白でない動作です。

constと不変性をできるだけ使おう

可能な限り不変性を優先しましょう。常にデータを変更し、それを受け渡しすることは、バグや変更点の追跡を困難にします。データのコピーで作業し、副作用を避ける。

純粋な関数を優先する

副作用の話を続けますが、関数が呼び出されたときのデータや、関数が生成されたときのスコープのデータを変更しないようにします。

コンストラクタ関数よりもクラスを優先する

コンストラクタ関数を使用すると、非常に素晴らしいことができますが、そのプロトタイプに手を伸ばしてしまうようであれば、ほとんどすべての場所でサポートされている「クラス」を使用する必要がある兆候です。その方がすっきりしているし、人々にも理解されやすい。

destructuringを使う

デストラクチャリングはエレガントで、配列やオブジェクトから何が必要かをより明確にし、また、コードに意味を持たせるために名前を変更する機会を与えてくれる。

必要なデータだけを扱う

上記の例と同様に、デストラクチャリングは作業に必要なデータを抽出する良い方法ですが、必要なものだけをメソッドや関数に呼び出す習慣をつけましょう。これは、APIから送られてくるデータにも言えることです。必要なデータだけを抽出し、クリーンアップしてから、保存したり、何かをしたりする。

常に===を使う

トリプルイコールは値と型をチェックするもので、常に行いたいことです。常にトリプルチェックをする習慣をつけ、好ましくない影響を避けるようにしましょう。

グローバル変数を避ける

ライブラリ/フレームワークを作成している場合を除き、グローバルオブジェクトにものを作成することは避けましょう。グローバルなプロパティ名は、サードパーティや同僚が導入したものと衝突する可能性があり、デバッグがしにくくなります。

緩い宣言はブロックで囲む

ロジックを独自のスコープで素早くラップすることで、名前の衝突や緩い一時的な宣言のアクセスを回避することができます。

宣言の仕方を整理する

宣言の仕方は統一してください。定数から始まって変数に至るまで、すべての宣言を一番上に配置します。定数はすべて大文字にして、定数であることを示すと、開発者がそれを変更しようとするのを防ぐことができます。

undefinedで初期化しない

値がないものは "undefined "です。値がない」ものを「値」として割り当てるのは、かなり奇妙な概念であることに同意しましょうか。JavaScriptはすでに物事を「未定義」にしているので、何かが未定義なのはあなたのせいなのかJavaScriptのせいなのか、どうやって見分けるのでしょうか？なぜ「未定義」なのかをデバッグするのは難しいので、代わりに「null」を設定することをお勧めします。

宣言は必ず初期化する

同じ理由で、宣言に「undefined」という値を与えてはいけません。また、デフォルトで「undefined」だからといって、値を与えずに放置してはいけません。

コードのリントを行い、一貫したスタイルを持つ

コードをLintすることは、コードのルック＆フィールを一貫させ、かつ、他の人がコードに対して奇妙なことをしないようにするための最良の方法です。これによって、誰もが同じページに立つことができます。

TypeScriptを使う

TypeScriptは、より良いコードを提供するために大いに役立つ。型システムを試したことがない人は慣れる必要があるが、長い目で見れば報われる。

関数とメソッドは一つのことだけを行うべき

関数に余計なものを追加することに夢中になりがちですが、関数がやりすぎているかどうかを判断する最良の方法は、その名前を見ることです。関数名は、その関数が何をするものかを示すものでなければならず、関係のないものは削除されるべきです。

ネーミングに手抜きは禁物

名前をつけるときは、常に工夫をしましょう。もし名前が難しいなら、あなたはそれに余分な責任を与えたか、それが何であるかを理解していないのでしょう。少なくとも3文字の意味を持つ名前をつけましょう。

不必要な宣言は避ける

宣言の中には、完全に避けることができるものもあるので、厳密に必要なときだけ宣言しましょう。宣言が多すぎる場合は、コード設計や宣言に関する考慮が不十分であることを示唆する場合があります。

可能な限りデフォルト値を使用する

デフォルト値を使用することは、何かが提供されなかったためにエラーをスローするよりも、よりエレガントです。もし本当に値が提供されていないことを検出したいのであれば、私の記事「25 JavaScriptソリューション」を参照してください。

switch文には常にデフォルトのケースを用意する

switchステートメントにデフォルトケースを設けないのは、何か問題が発生したときにそれを確実にキャッチするためです。

evalは使わない

絶対に使ってはいけません。必要ありません。

newキーワードは使わない

クラスやコンストラクタ関数のインスタンス化以外では、"new "キーワードを使うべきではありません。コンパイラの速度を低下させる可能性があります。

当たり前でないことに意味のあるコメントをつける

一般的でないこと、奇妙なこと、理解するために文脈が必要なことをしたときだけ、コメントを追加してください。また、ハックするようなこと、後で改善・修正が必要になりそうなことには、次の人に理由がわかるようにコメントを付けましょう。サードパーティのモジュールや自分のコードベースのモジュールには、アーキテクチャや物事の背後にある意図を説明するためのコメントを追加します。

三項対立はシンプルに

最悪の場合、2つのネストしたサナリーを持つことになります。これより長いものは、可読性とデバッグのしやすさを考慮して、if文かswitchにすべきです。

オプションのチェインでシンプルに

ネストされたチェックを取り除き、"? "演算子を使用します。

コールバックよりプロミスを優先

プロミスは使いやすく、コールバックを持つものはすべて「プロミス化」できる。コールバックは同期かどうかにかかわらず、何かが完了したときに呼び出す関数です。プロミスやasync...awaitを使えば、非同期で物事を行うことができ、特にJavaScriptはシングルスレッドなので、コードを高速化できるかもしれません。特にJavaScriptはシングルスレッドなので、プロミスを使うとコードが速くなる可能性があります。

Forループ > .forEach の場合もある

.forEach "するために配列に変更するのはやめましょう。遅い処理に余計な処理を追加することになる。forループは高速で、continueやbreakといったキーワードでループを制御することができる。

"for...in "と "for...of"

for-inループとfor-ofループは、非常に強力なループの方法である。for-of」ループでは、配列、文字列、Map、Setなどの値を調べていくことができます。.forEachを使うために何かを配列に変更する必要はありません。ループのための "for-in "は最も遅いもので、プロトタイプのキーを繰り返し処理するので、私は避けたいと思います。

ループのために最適化する？

forループはすでにコンパイラによって最適化されているので、そのような最適化は必要ありません。

JSONメソッドは常に "try...catch "すること

JSON メソッド ".stringify" と ".parse" に渡されるものは信用しないでください。失敗してコードが壊れないように、必ずcatchしてください。

テンプレート文字列を優先する

単純なことです。テンプレート文字列は、文字列に値を注入することができ、便利な書式を維持することができます。

ループの入れ子や連結を避ける

ループを連鎖させたり、ループを入れ子にしたりすると、コードが複雑になり、後々データが大きくなったときに処理が遅くなる可能性があります。たとえそれが必要な処理であっても、不要なループや連結可能なループがないように、常にループ戦略を評価するようにしましょう。

読めない変なハックは避ける

これらは、人々が「クール」だと感じるため、インターネット上にあふれています。それらはたいてい、奇妙で、型にはまったものでなく、見ていてわからないものです。適切なパフォーマンスを確保するためには、使用しているツールのガイドラインに従うことが常にベストです。ハッキングは最後の手段であるべきです。

"rest "演算子を "arguments "よりも優先する。

rest "演算子は、"arguments "が使用できない矢印関数で機能します。関数の引数にアクセスする方法はひとつに絞ってください。

グローバルアクセスには "globalThis "を優先する

残りは JavaScript に任せて、Web Worker や Backend Node の内部であなたのコードが動作するようにしましょう。

JavaScriptを理解しつつ、ライブラリやフレームワークで構築する

JavaScript言語そのものを理解するために時間を費やすことをお勧めしますが、よくある間違いを避けるためにReactやAngularのような強力なツールで構築することをお勧めします。これらのツールはすでによくある間違いを防ぎ、ベストプラクティスを採用しているので、必ずそのガイドラインに従ってください。

セミコロンを常に追加する

JavaScriptのコードにセミコロンを付けなくても大丈夫なことに驚くかもしれません。コンパイラはセミコロンを追加し、Babelのようなツールは簡単にあなたのコードを読み間違えて、本番にバグを発生させる可能性があることを知っておいてください。必ずセミコロンをつけてください。

パフォーマンスが必要でない限り、読みやすさよりパフォーマンス

読みにくいことをやってパフォーマンスを上げる方法もありますが、コードレベルでどうしてもパフォーマンスが必要な場合（それは稀）以外は、読みやすいものにしましょう。

Truthy」「Falsy」チェックに気をつけよう

コードにバグを持ち込みやすいので、「truthy」「falsy」チェックに頼らないようにしましょう。予期せぬものがtruthyチェックとして通る可能性があるので、具体的なチェックを心がけましょう。

論理的な"||"や"&&"チェックより三項演算子を優先する

or" と "and" 演算子は、値の "true" と "false" を評価するため、望ましくない結果になる可能性があります。また、変な論理条件チェックは可読性が低く理解しにくいので、これに頼らないでください。

未定義」と「NULL」に気をつける「??」演算子

nullish合体演算子は、nullや未定義の値が選ばれないようにするもので、値があることを確認したい場合やデフォルト値へのフォールバックを行いたい場合に最適です。

自動的な型変換に注意する

これはおそらくTypeScriptを試すもう一つの理由だろう。JavaScriptはその場で自動的に型変換を行うが、それはあなたが期待しているものとは違うかもしれない。「Truthy」値は「true」になり、「Falsy」値は「false」になる。数値と文字列の間で計算をすると、実際に動作する場合と、文字列の連結になる場合があります。数値はほとんどの場合、「Falsy」値を「0」に、「Truthy」値を「1」に変換します。

自分が作成したものではないデータを信用しない

ユーザーやAPIから送られてきた知らないデータを扱うときはいつでも、そのデータが正しい型であり、扱える形式であることを確認してから操作してください。

文字列の中から何かを抽出したり探したりするときは正規表現を使う

正規表現は非常に強力で楽しいものです。インデックスを探したり、物をつかんだりするような変な操作は避けましょう。Regexを使うと、複雑なパターンを探したり

IIFEと小さなユーティリティ・ライブラリ

IIFEはできるだけ早い段階で物事を実行する優れた方法で、コードの残りの部分が実行される前に何らかの設定をするのに活用できます。また、複雑なロジックをカプセル化し、jQueryの構築方法と同様に、対話に使用できるオブジェクトを公開することができるシンプルなAPIを持つ小さなライブラリを初期化するために使用することができます。

ユーティリティで同じことを繰り返さないようにする

繰り返し行うことは、常に小さな汎用関数に変換して、後で再利用できるようにしましょう。開発者として、物事を繰り返すべきではありませんし、小さな関数であれば、テストや再利用が容易になります。

JavaScriptの奇妙な "機能 "を利用しない

配列の長さのプロパティの更新、「with」キーワードの使用、voidキーワード、Date、Array、Objectなどのネイティブのオブジェクトのプロトタイプの更新など。その他、setTimeoutやsetIntervalに文字列を渡すようなこと。言語が許すからといって、そうすべきとは限りません。

単体テストの追加

開発者として、私はしばしばユニットテストを追加し始めるとバグを発見しました。テストは、あなたのコードができるだけエラーフリーであることを保証する究極の方法です。Jestは手始めに使うのに最適なオプションですが、同じように簡単に使える他のテストもあります。