script要素(スクリプトヨウソ)とは | 意味や読み方など丁寧でわかりやすい用語解説

HTMLにおけるscript要素は、ウェブページに動的な機能を追加するためにクライアントサイドスクリプト、主にJavaScriptを埋め込む、または外部スクリプトファイルを読み込むための要素である。この要素を用いることで、静的なHTMLコンテンツにユーザーとのインタラクションや非同期通信といった振る舞いをもたらし、ウェブアプリケーションのような体験を実現する。ウェブサイトの見た目を変更したり、データに基づいてコンテンツを更新したり、フォームの入力を検証したりするなど、その用途は非常に幅広い。

script要素は、大きく分けて二つの方法で使用される。一つは、要素の開始タグと終了タグの間にJavaScriptコードを直接記述するインラインスクリプトの形式である。もう一つは、src属性を用いて外部のJavaScriptファイルを指定し、そのファイルを読み込んで実行する形式である。後者の外部ファイル形式は、コードの再利用性、保守性、ブラウザによるキャッシュ利用によるパフォーマンス向上といった点で、大規模なプロジェクトや共通スクリプトを扱う場合に一般的に推奨される。

ウェブページの動的な振る舞いを実現するJavaScriptは、Document Object Model（DOM）を操作することで、HTML要素の内容を変更したり、新しい要素を追加・削除したり、スタイルを動的に適用したりする。また、ユーザーがボタンをクリックしたり、フォームに文字を入力したりといったイベントに応答し、特定の処理を実行することも可能にする。さらに、XMLHttpRequestオブジェクトやFetch APIを用いて、ページを再読み込みすることなくサーバーとデータを非同期で送受信する、いわゆるAjax通信を実現し、よりスムーズなユーザー体験を提供する。入力フォームでのリアルタイムな検証や、地図サービスのインタラクティブな操作、アニメーション効果の追加なども、script要素を通じて実行されるJavaScriptの得意とするところである。

script要素の配置場所は、ページのパフォーマンスと動作に大きな影響を与える。伝統的に、script要素はHTMLのhead要素内に配置されることが多かった。しかし、この配置方法には注意が必要である。ブラウザはHTMLの解析中にscript要素に遭遇すると、スクリプトのダウンロードと実行が完了するまでHTMLの解析とページのレンダリングを一時停止する。これは、特に大きなスクリプトや外部スクリプトの場合、ページの表示が遅延し、ユーザーがコンテンツを見られるまでの時間が長くなる、いわゆる「レンダリングブロック」を引き起こす可能性がある。そのため、近年ではscript要素はbody要素の閉じタグ（</body>）の直前に配置することが推奨される。この配置では、HTMLドキュメントが完全に解析され、DOMが構築された後にスクリプトが実行されるため、スクリプトが操作しようとするDOM要素が確実に存在することが保証され、かつページの初期表示がブロックされにくくなるため、ユーザー体験が向上する。

HTML5では、スクリプトのロードと実行を制御するための新しい属性としてasyncとdeferが導入された。これらの属性は、スクリプトがページのレンダリングをブロックするのを防ぐのに役立つ。 async属性が指定されたscript要素は、HTMLの解析と並行してスクリプトファイルがダウンロードされる。ダウンロードが完了すると、HTMLの解析を一時停止してスクリプトが直ちに実行され、その後HTML解析が再開される。この属性を持つスクリプトは、ダウンロードが完了した時点で実行されるため、スクリプト間の実行順序は保証されない。そのため、ページの特定の部分に依存しない、独立したスクリプト、例えばアクセス解析ツールや広告スクリプトなどに適している。 defer属性が指定されたscript要素も、HTMLの解析と並行してスクリプトファイルがダウンロードされる。しかし、スクリプトの実行はHTMLの解析が完全に完了した後、DOMContentLoadedイベントが発火する前に行われる。defer属性を持つスクリプトは、HTMLドキュメント内で定義された順序で実行されることが保証されるため、DOMに依存するスクリプトだが、ページの初期表示をブロックしたくない場合に特に有用である。asyncとdeferの主な違いは、実行タイミングと実行順序の保証にある。

script要素には他にもいくつかの重要な属性がある。 src属性は、外部JavaScriptファイルのURLを指定するために使用される。これは、インラインスクリプトと比べてコードの管理と再利用性を高める上で非常に重要である。 type属性は、スクリプトのMIMEタイプを指定する。JavaScriptの場合はtext/javascriptと指定するが、現代のブラウザではこの属性が省略された場合、デフォルトでJavaScriptとして扱われるため、通常は省略しても問題ない。ただし、ESモジュールを読み込む場合はtype="module"と指定する必要がある。 integrity属性は、サブリソース完全性（Subresource Integrity, SRI）を実現するために使用される。これは、CDN（Content Delivery Network）などの外部サーバーからスクリプトファイルを読み込む際に、ファイルの内容が改ざんされていないことを検証するためのハッシュ値を指定するもので、セキュリティを向上させる上で非常に重要である。 crossorigin属性は、クロスオリジンリソース共有（CORS）を制御する。外部ドメインからのスクリプト読み込み時に、資格情報の送信を制御するために使用される。

script要素を通じて実行されるスクリプトは、ユーザーのブラウザ上で動作し、そのページに対して高い権限を持つため、セキュリティに関する考慮が不可欠である。悪意のあるスクリプトが挿入されると、ユーザーのデータが盗まれたり、不正な操作が行われたりする可能性がある。これはクロスサイトスクリプティング（XSS）と呼ばれる代表的な攻撃手法であり、信頼できないユーザー入力が直接ウェブページに表示されたり、外部の不審なスクリプトが読み込まれたりすることで発生する。開発者は常に、ユーザーからの入力を適切にサニタイズ（無害化）し、信頼できるソースからのスクリプトのみを読み込むよう注意を払う必要がある。

現代のウェブ開発では、JavaScriptコードは複数のファイルに分割され、TypeScriptのような言語で書かれたり、フレームワーク（React, Vue, Angularなど）を用いて構築されることが一般的である。これらの多数のファイルや異なる言語は、本番環境にデプロイされる前に、WebpackやViteといったモジュールバンドラーによって単一のJavaScriptファイル、または最適化された複数のファイルに結合・変換されることが多い。これにより、HTMLファイルに直接記述するscript要素の数は減少し、type="module"属性を使用してESモジュールとして読み込む形式が主流になりつつある。これは、コードの管理性、パフォーマンス、そしてモダンなJavaScriptの機能利用を考慮したものである。