Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【HTML Living Standard】script要素の使い方

script要素の使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

scriptオブジェクトは、HTMLドキュメントにJavaScriptコードを埋め込んだり、外部JavaScriptファイルを読み込んだりするために使用される要素を表すオブジェクトです。ウェブページに動的な動作や対話機能を追加する際に不可欠な役割を担っています。

具体的には、<script>タグの開始タグと終了タグの間に直接JavaScriptコードを記述することで、インラインスクリプトとして実行できます。これは、ユーザーのアクションに応じてコンテンツを変更したり、フォームの入力値を検証したりする処理を実装する際に利用されます。

また、src属性を使用することで、別のファイルに保存されたJavaScriptコードを読み込むことができます。例えば、src="path/to/your-script.js"のように記述することで、複数のHTMLページで共通のスクリプトを再利用でき、コードの管理が容易になります。

スクリプトの実行タイミングは重要です。通常、スクリプトはHTMLの解析と同時に上から順に実行されますが、これによりページの描画がブロックされる場合があります。この問題を避けるため、async属性やdefer属性を使用できます。async属性を付与すると、スクリプトは非同期でダウンロード・実行され、HTMLの解析をブロックしません。defer属性を付与すると、スクリプトはHTMLの解析が完了した後に、記述された順序で実行されます。これらの属性は、特に大規模なアプリケーションにおいて、ページの読み込みパフォーマンスを向上させるために役立ちます。

多くの場合、スクリプトはウェブページのインタラクティブな機能やユーザー体験を向上させるために活用され、現代のウェブ開発において中心的な役割を果たす要素です。

公式リファレンス: <script>: The Script element

構文(syntax)

1<script>
2  // JavaScriptコードをここに記述します
3  console.log("Hello, world!");
4</script>

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

関連コンテンツ