JavaScript をより良くするための 7 つの注意事項_JavaScript のヒント

ブラウザのパフォーマンスの向上と新しい HTML5 プログラミング インターフェイスの着実な採用により、Web ページ上の JavaScript の量は徐々に増加しています。ただし、コーディングが不十分だと、Web サイト全体が壊れ、ユーザーがイライラし、潜在的な顧客を遠ざけてしまう可能性があります。
開発者は、コードの品質を向上させ、実行が常に予測可能であるという確信を得るために、自由に使えるすべてのツールとテクニックを使用する必要があります。これは私にとって身近なテーマであり、私は長年にわたって、最高品質のコードのみがリリースされるように、開発プロセスで従うべき一連の手順を見つけるために取り組んできました。
これら 7 つの手順に従うだけで、JavaScript プロジェクトの品質が大幅に向上します。このワークフローを使用すると、エラーが減少し、多くのプロセスが最適化され、ユーザーは快適なブラウジング エクスペリエンスを得ることができます。

01.コード

まず、関数内で ECMAScript5 の厳密モードと「厳密モード」宣言を呼び出し、モジュールの設計パターンを使用して、自己実行関数クロージャでサンドボックスに依存しないコード モジュールのグローバルな影響を最小限に抑えます。モジュール内の変数を使用します。外部依存関係を介して、グローバル変数を明確かつ簡潔に保ちます。確立され、実証済み、テスト済みの実績のあるサードパーティのライブラリとフレームワークのみを使用し、関数を小さくし、モジュール操作や他のビュー層コードから分離してください。
複数の開発者が参加する大規模なプロジェクトでは、Google の JavaScript スタイル ガイドなど、確立された一連のコーディング原則に従う必要があり、厳密なパッケージ管理モジュール定義 (AMD) を使用した、RequireJS などのライブラリを介した非同期の使用を含む、より強力なコード管理ルールが必要です。依存関係管理、Bower または Jam (クライアント ライブラリ管理ツール) パッケージ管理を使用して依存関係ファイルの特定のバージョンを参照し、便宜上オブザーバー パターンなどの構造設計パターンを採用します。 異なるコード モジュール間の疎結合通信。これは賢明なアイデアでもあります。Git や Subversion などのコード リポジトリ システムを使用し、コードをクラウドにバックアップし、以前のバージョンに復元する機能を提供し、ソース コードや Beanstalk などのサービスを通じて、より高度なプロジェクトを作成します。さまざまな機能を実行し、完了前にそれらをマージするためのコードの分岐。

02.ファイル

YUIDoc や JsDoc などの構造化されたコメント ブロック形式を使用して機能を文書化すると、開発者はコードを勉強することなくその目的を理解でき、誤解が減ります。 Markdown 構文を使用して、より豊富で長いコメントや説明を作成します。関連するコマンド ライン ツールを使用して、サイトのドキュメントを自動的に生成します。これらの構造コメントに基づいて、コードに加えられた変更の最新の状態と一致します。

03. 過去のパフォーマンス分析

コードに対して JSHint や JSLint などの静的コード分析ツールを定期的に実行します。これらは、既知のコーディング上の欠陥や潜在的なエラー (厳密モードの使用忘れ、宣言されていない変数の参照、括弧やセミコロンの欠落など) をチェックします。問題を修正してコードの品質を向上させるためのツール コントロール。各行をスペースでインデントする、中括弧を配置する場所、コード ファイル全体で使用される一重引用符または二重引用符の数など、コーディング標準を適用するためにプロジェクト チームのデフォルト オプションを設定してみてください。

04. テスト

単体テストは、特定の入力を使用してメイン コード ベースの関数の 1 つを実行し、期待される値が出力されることを確認する、小さな独立した機能です。コードが期待どおりに動作するという信頼性を高めるには、Jasmine や QUnit などのフレームワークを使用して、期待される入力パラメーターと予期しない入力パラメーターを指定して関数ごとに単体テストを作成します。ただし、特殊なケースも忘れないでください。
BrowserStack や Sauce Labs などのサービスを利用して、複数のオペレーティング システムの複数のブラウザ上でこれらのテストを実行すると、クラウド内の仮想マシンのオンデマンド テストを高速化できます。これら 2 つのサービスは、単体テストを複数のブラウザで同時に自動的に実行できる API を提供し、テストが完了すると結果がフィードバックされます。おまけに、コードが GitHub に保存されている場合は、コードをコミットするときに単体テストを自動的に実行するツールである BrowserSwarm を利用できます。

05. 測定

Istanbul などのコード カバレッジ ツールは、単体テストが関数に対して実行されたときに実行されたコード行を測定し、コードの総行数に対する割合として報告します。単体テストに対してコード カバレッジ ツールを実行し、追加のテストを追加すると、カバレッジ スコアが 100% に向上し、コードに対する信頼性が高まります。
関数の複雑さは、1970 年代にコンピューター科学者のモーリス ハルステッドによって開発された方程式であるハルステッド複雑性メトリックを使用して測定できます。関数の複雑さは、ループ、分岐、および反復によって定量化されます。複雑さは、ハルステッドの複雑さの尺度を使用して測定できます。この複雑さのスコアが下がると、関数の理解と維持が容易になり、エラーの可能性が減ります。コマンドライン ツール PLATO は、JavaScript コードの複雑さを測定して視覚化して、改善できる機能を特定するのに役立ちます。また、以前の結果を保存して、品質の進捗状況を長期的に追跡できるようにします。

06. 自動化

Grunt などのタスク ランナーを使用すると、文書化、分析、テスト、カバレッジおよび複雑さのレポート生成のプロセスが自動化され、時間と労力が節約され、発生した品質上の問題を解決できる可能性が高まります。この記事で取り上げたツールとテスト フレームワークのほとんどは Grunt に関連しており、何もせずにワークフローとコードの品質を向上させるのに役立ちます。

07. 例外の処理

コードを実行すると、必ずある時点でエラーがスローされます。 「try...catch」ステートメントを使用して、実行時エラーを適切に処理し、サイトへの動作の影響を制限します。ネットワーク サービスを使用して、ランタイム エラーをログに記録します。そして、この情報を使用して新しい単体テストを追加し、コードを改善し、これらのバグを 1 つずつ排除します。

成功へのステップ

これらの 7 つのステップは、これまでのキャリアの中で最も誇りに思うコードのいくつかを作成するのに役立ちました。それらは将来への素晴らしい基盤でもあります。これらの手順を使用して、独自のプロジェクトで高品質の JavaScript コードを作成することに専念し、成功に向けて一歩ずつ Web を改善するために協力しましょう。