悪い JavaScript の慣習にさようなら

Nov 29 2022

素晴らしいプログラミングの世界に足を踏み入れると、何百万人もの人々にどのような影響を与えるかを自分の目で確かめることができます。デバイスのいくつかのキーを押すだけで、非常に多くの人々の生活が楽になるのは、プログラミングのおかげです (これは魔法です)。

プログラミングは別の種類のスーパーパワーですが、ベンおじさんが甥のピーター・パーカーに言ったように、「大きな力には大きな責任が伴います。」プログラミングの世界において、私たちの最大の責任は、私たちが書いたコードが簡単にテスト可能であり、長期にわたって保守可能であり続けることを保証することです。

プログラミングには、私たちが作成するコードと最終結果として作成する製品に継続的に悪影響を与える可能性のある小さな慣行がいくつかあります。私はこれらの問題を直接経験しました。それらが何であるか、そしてなぜそれらを絶対に避けるべきかを共有することが重要です.

1. let と const の代わりに var を使用する

var の使用に別れを告げる時が来ました。

次の理由から、let と const のみを使用する必要があります。

● 範囲がより明確になります (中かっこの間)。

● グローバルオブジェクトは作成されません。

● エラーを再宣言すると、エラーにフラグが立てられます。

愛用の IE11 などの古いブラウザーを使用していない限り、var を手放すことが最善の方法です。let と const は、今後の親友になります。

2. コメントを使用してコードを説明する

コメントは、ソフトウェアを構築するときの基本的な部分です。コメントは、読んでいるコードをよりよく理解するのに役立ちますが、コードが何をするかを段階的に説明するというエラーに陥ってはなりません。読み取りとコメントは、コンテキストのみを提供する必要があります。

プロのようにコードコメントを書くためのヒントと注意事項を次に示します。

● コメントは冗長にならないようにしてください。何をするかを書くのではなく、なぜそれをするかを書きなさい。

● 説明的な変数/関数/クラス名は、説明的なコメントよりも優れています。

● できるだけ要約します。絶対に必要でない場合は、段落を書かないでください。

● 常に同じ言語とスタイルのコメントを使用するようにしてください。

● 時間の経過とともに、通常、コメントは維持 (変更) されていないコードです。

3. === の代わりに == を使用する

最初に理解しておくべきことは、視覚的には非常に似ていますが、異なることを行うということです。1 つ目は通常の等価演算子 (==) と呼ばれ、2 つ目は厳密等価演算子 (===) と呼ばれます。

通常の等価演算子 (==) は、オペランドが類似しているかどうかのみをチェックするため、不愉快な驚きを引き起こす可能性があります。

厳密な等価演算子 (===) は、オペランドの型と値が異なること、およびそれらがまったく同じであることを常にチェックします。

4. オプションの連鎖の使用を忘れる

オプションのチェーン演算子 (?) を使用すると、チェーン内のすべての参照をチェックすることなく、接続されたオブジェクトのチェーンの奥深くにあるプロパティの値を読み取ることができます。

これにより、存在しないプロパティにアクセスしようとしたときのエラーを回避できます。例として、そのポケモンの情報を含む Pokémon オブジェクトがあるとします。

この例のように、定義されていないプロパティにアクセスしたい場合、プロパティ 'attack' Javascript にアクセスするとエラーが発生し、アプリケーションが壊れます。オプションのチェーン (?) を使用すると、Javascript はプロパティが未定義であることを通知しますが、エラーは生成しません。時には私たちの手に負えないこれらのタイプのエラーについて考えることは、長期的には大きな違いをもたらします.

5. マジックストリングとマジックナンバーを使用しない

マジックナンバーまたはマジックストリングは、コード内で直接使用される数値またはストリングであり、多くの場合、明確なコンテキストはありませんが、目的があります。これらの値を定数に割り当てることをお勧めします。そうしないと、理解やデバッグが難しくなる可能性があるためです。

6. API 呼び出しエラーの不適切な処理

async/await では常に try/catch を使用してエラーを処理する必要があります。

promise のエラーを処理しないと、アプリケーションが爆発する可能性が非常に高く、私を信じてください。

7. オブジェクトを単一のパラメーターとして使用する

オブジェクトから複数の値が期待される関数を宣言するときは、単一のオブジェクト入力ではなく複数の入力パラメーターを使用することをお勧めします。これは、いくつかの点で役立ちます。

第一に、関数が必要とするパラメータを最初から知っているため、コードが読みやすくなります。

2 つ目は、関数のテストが容易になることです。これら 2 つのことを組み合わせることで、長期にわたって製品を保守しやすくなります。また、プラスとして、ガベージの収集や不要なオブジェクトパラメーターの作成を回避するため、アプリケーションのパフォーマンスが向上します。

もう 1 つの利点は、TypeScript を使用し、複数のパラメーターがある場合、パラメーターのインターフェイスを定義して、エラーを回避できる型チェックと自動提案の恩恵を受けることが容易になることです。

8. 略語の力を忘れる

私たちは皆、変数が存在するのか、それとも null または undefined 以外の値が含まれているのか疑問に思ったことがあるでしょう。このため、このタイプの非常に長い検証を行うことがよくあります。

略語は、この問題を回避するのに役立ちます。よりシンプルで洗練された方法で、上記のコードは次のように短縮できます。

結論

きれいなコードを書くことは、常に私たちの責任です。開発者としての経験から、コードを保守しやすく読みやすいものにすると、あなたとチームの時間を大幅に節約できることがわかりました。

コードを書くよりもコードを読むことに多くの時間を費やしていることを忘れないでください。これらの小さなヒントが、魔法のような素晴らしい製品を作成する作業を容易にすることを願っています.

提案がある場合は、コメントセクションで共有してください。一緒に、私たちは成長し続けることができます。