Javascriptでクリーンなコードを書くための絶対知っておくべき8つのコツ Cover image for 8 must-know tips for writing clean code with Javascript

Alex Omeyer

2022年10月27日に投稿・2023年2月8日に更新

Javascriptは最高のプログラミング言語ですが、クリーンなJavascriptコードを書くのは熟練のプログラマーでさえも難関です。

では、クリーンなJavascriptコードとはどのようなものでしょうか。次のような特徴を持っているべきです。

  1. 読みやすい
  2. デバッグしやすい
  3. 効率が良く、パフォーマンスが高い

以下は、Javascriptコードの品質を次のレベルに引き上げるために役立つトップのツールとコツです:

1. すべてのAPIリクエストやJSONメソッドにtry catchを使う

データを取得するためのAPIリクエストを行う際には、数々の問題が発生する可能性があります。そのためこれらのシナリオに対応することは必須です。JSONを扱うときには、与えられたものを盲信せず、あり得る不整合に対処できるように、より堅牢なコードを書くように心がけましょう。

2. Linterを使う(ESLint)
Linterは、あらかじめ定義されたルールと設定に基づいて、プログラム上のスタイルのエラーを確認する静的コード分析ツールです。要するに、Javascript/Typescriptを改善し、より一貫性のあるコードにするのに役立ちます。

3. エディタでJavascriptの問題を追跡する

クリーンなJavascriptコードベースを維持する重要な要素の一つは、コード自体の問題を追跡して見やすくすることです。エディタでコードベースの問題を追跡することで、エンジニアは以下のことができます:

  • 技術的負債のような大きな問題に関する完全な可視性を得る
  • 各コードベースの問題についての文脈を与える
  • コンテキストスイッチングを減らす
  • 継続的に技術的負債を解決する

技術的負債を追跡するためにさまざまなツールを使用できますが、始めるために最も速くて簡単なのは、Jira、Linear、Asanaなどのプロジェクト管理ツールと統合するVSCodeとJetBrains用の無料のStepsize拡張機能を使用することです。

4. テンプレート文字列を活用する
テンプレート文字列を使用することで、フォーマットを保ちながら文字列に値を注入することができ、文字列算術を行うよりも読みやすいコードになります。

5. 文字列検索には正規表現を活用する
外から見れば正規表現は奥義的に思えますが、これは非常に強力な文字列解析ツールであり、多様な難しい文字列マッチングシナリオを考慮に入れた複雑なパターンを構築できます。

6. オプショナルチェーンを活用する
長く複雑な論理結合の使用をやめて、オプショナルチェーンでコードをシンプルにしましょう。

7. ネストを避ける

ネストはコードを複雑にし、読みづらくする確実な方法です。2レベルより深い場合はリファクタリングを検討しましょう。これには、最上位レベルのリターン条件、短いブロックの使用、ネストされたロジックを独立した関数に抽象化することが含まれます。

8. 一般的でないコードはすべてコメントを付けるが、読みやすいコードを書くことに置き換えてはいけない

一般的ではないシナリオを扱う必要がある場合、確立された慣例がない場合もあるでしょう。コードにコメントを付けて、何を行っているのか、考慮されている文脈を説明することは、他のプログラマーにとって非常に役立つだけでなく、将来コードに戻ったとき自分自身にとってのメモにもなります。しかし、最初に読みやすいコードを書くことについて考えることを怠ってはいけません!

こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/alexomeyer/8-must-know-tips-for-writing-clean-code-with-javascript-i4