目立たないJavaScript

非侵入型 JavaScript は、 Web ページでクライアント側のJavaScriptを使用する一般的なアプローチであり、ユーザーのWeb ブラウザで JavaScript 機能が部分的または完全に欠落している場合でも、Web ページの JavaScript 機能の不足をユーザーができるだけ気づかないようにします。^{[ 1 ]}この用語は、さまざまなテクニカル ライターによって、フロントエンド Web 開発のさまざまな側面を強調するために使用されてきました。一部のライターにとって、この用語は、機能(「動作レイヤー」) を Web ページの構造/コンテンツおよびプレゼンテーションから分離することを指すものとしてより一般的に理解されていますが、^{[ 2 ]}他のライターは、特定の JavaScript 機能が欠落しているユーザー エージェントや JavaScript を無効にしているユーザーをサポートするためにプログレッシブ エンハンスメントを使用することを指すものとして、この用語をより正確に使用しています。 ^{[ 3 ]}後者の定義に従うと、非侵入型 JavaScript は、コンピューティング プラットフォームに関係なく、すべてのユーザーが Web ページのすべての情報と機能にほぼ平等にアクセスできるようにすることで、Web アクセシビリティに貢献します。 ^{[ 4 ] [ 5 ]}

典型的なクライアントサイドの動的ウェブページは、マークアップされたコンテンツ（HTML）、スタイルシート（CSS）、クライアントサイドJavaScript、および画像などの埋め込みオブジェクトの4つの部分から構成されていると考えることができます。 ^{[ 6 ]： 5}クライアントサイドJavaScriptの部分は、JavaScriptなしでは実現できない機能を追加することで、他の部分を拡張するものと考えることができます。^{[ 6 ]： 3}

クライアントサイド JavaScript に関連する「非侵入性」の概念は、2002 年にStuart Langridge ^{[ 7 ]}が「非侵入性 DHTML と順不同リストの力」という記事で提唱しました。^{[ 8 ]}この記事で Langridge は、動的 HTML (DHTML)を使用する際に、イベント ハンドラを含むすべての JavaScript コードを HTML の外に置く方法を主張しました。 ^{[ 7 ]}彼は、このようなコードの構成の目的は「ブラウザがサポートしているユーザーにはより良いユーザー エクスペリエンスを提供し、サポートしていないブラウザのユーザーには影響を与えないこと」であり、同時にWeb 開発者にとってスクリプト作成が容易になることだと述べました。^{[ 7 ]} Langridge は後にこの考えをさらに発展させ、「非侵入性」の核心的な意味は「特定の Web ブラウザが使用している DHTML 機能をサポートしていない場合でも、その欠如がユーザー エクスペリエンスにできるだけ影響を与えないようにすること」であると強調しました。^{[ 1 ]}つまり、ラングリッジにとって「目立たない」とは、主に特定の状況でJa​​vaScript機能が存在しないというユーザーの体験を指す。^{[ 1 ]}

他の著者らは、目立たないことの本質的な要素に関する様々なバリエーションについて述べている。

デビッド・フラナガンの著書『JavaScript: The Definitive Guide』（2006年）では、特定の公式はないものの、目立たないJavaScriptには3つの主な目標があると述べている。^{[ 4 ]}

• JavaScriptをHTMLマークアップから分離し、名前空間の衝突を防ぐための名前空間の使用やモジュール初期化コードの使用といった基本的な慣習を用いて、JavaScriptのモジュールを他のモジュールから独立させる。
• 適切に機能低下させるには、JavaScript の全部または一部が正常に実行されなくても、すべてのコンテンツが利用可能である必要があります。
• ユーザーが個人的な障害を持っている場合や、通常とは異なる、または通常とは異なる設定のブラウザを使用している場合でも、 HTMLのアクセシビリティを妨げないようにし、理想的にはそれを向上させる。

Web Standards Project はJavaScript マニフェスト(2006 年)の中で、「JavaScript の目的は、ウェブ ページにインタラクションを追加することでユーザビリティを向上させることである」と述べ、目立たないDOMスクリプティングの 4 つの利点を説明しています。^{[ 9 ]}

1. ユーザビリティ：目立たないDOMスクリプトはユーザーの注意を引かないため、「訪問者は何も考えずにそれを使用する」。
2. グレースフルデグラデーション：目立たないDOMスクリプトは、どのブラウザでも、たとえ失敗した場合でもエラーメッセージを生成しません。機能が正しく表示できない場合は、静かに消えていきます。
3. アクセシビリティ：スクリプトが失敗した場合でも、ページはマークアップ、スタイルシート、および/またはサーバーサイドスクリプトを介してコア機能と情報を提供します。
4. 分離：他のWeb開発者や将来のWeb開発者の便宜を図るため、すべてのJavaScriptコードは、他のスクリプト、マークアップ、またはコードファイルに影響を与えることなく、個別に管理されます。

2007年のパリWebカンファレンスで、クリスチャン・ハイルマンは、目立たないJavaScriptの7つのルールを特定しました。そのうちのいくつかは、「目立たない」の他の狭い定義よりも範囲が広いものでした: ^{[ 10 ]}

1. 「憶測はしない」:防御的なプログラミング手法では、JavaScript が実行されない可能性、ブラウザが想定されるメソッドをサポートしていない可能性、HTML が変更されている可能性、予期しない入力デバイスが使用されている可能性、他のスクリプトが存在しない、またはグローバル名前空間を侵害している可能性などを考慮する必要があります。
2. IDや期待されるHTMLのその他の要素など、「フックと関連性」を見つけてください。
3. 個々のDOMオブジェクトの走査は、可能な限りブラウザに組み込まれているCSSハンドラなどの専門家に任せましょう。
4. 「ブラウザとユーザーを理解する」、特にブラウザがどのように不具合を起こすか、ユーザーがどのような前提を置いているか、そして通常とは異なる設定や使用方法を理解する。
5. イベントを理解する。これには、イベントがどのように「バブリング」されるか、そしてEventほとんどのイベントハンドラに渡されるオブジェクトの機能などが含まれる。
6. グローバル関数名やグローバル変数名の使用を避けることで、他のスクリプトとの連携を良好に保つことができます。
7. 分かりやすい変数名や関数名を使用し、論理的で読みやすいコードを作成し、依存関係を明確にし、それでも混乱を招く可能性のあるコードにはコメントを付けるなどして、「次の開発者のために」作業を進めましょう。

非侵入型JavaScriptのより広い定義は、カプセル化と抽象化レイヤー、グローバル変数の回避、意味のある命名規則、適切なデザインパターンの使用、体系的なテストなど、一般的なプログラミングのベストプラクティスと多くの共通点がある。^{[ 11 ]}