VIDEO LESSON

HTMLのscriptタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:03HTMLタグ編の三十一本目は、スクリプトタグです。
0:07スクリプトは、ジャバスクリプトというプログラムや、データをページに組み込むためのタグです。
0:13エイチティーエムエルが文書の構造、シーエスエスが見た目を担当するのに対して、
0:18スクリプトはクリックへの反応や計算といった、動きや処理を担当します。
0:23今回は、二つの書き方、実行タイミングを変える属性、そして安全に使うための注意点まで、
0:27初心者向けに順番に解説します。
0:31プログラムの入口になる、大切なタグです。
0:34スクリプトの書き方は大きく二つあります。
0:37一つ目はインラインと呼ばれる方法で、開始タグと終了タグの間にプログラムを直接書きます。
0:43短い処理を試すときに便利です。
0:46二つ目は、ソース属性で別ファイルを指定して読み込む方法です。
0:50処理が長くなる場合は、プログラムを専用ファイルに分けた方が読みやすく、複数のページで使い回すこともできます。
0:58どちらの方法でも、終了タグは必ず書きます。
1:02外部ファイルを読み込むときでも、終了タグを省略することはできません。
1:07この二つの形が基本だと覚えてください。
1:10置き場所について確認します。
1:12スクリプトは、ヘッドの中にもボディの中にも置くことができます。
1:16ブラウザーは、エイチティーエムエルを上から順に読み進め、スクリプトに出会うと、
1:21その場で読み込みと実行を行います。
1:25ここで大切なのは、外部ファイルの取得に時間がかかると、その間、後ろの内容の表示が待たされてしまうことです。
1:33そのため、昔はボディの最後に置く方法がよく使われました。
1:37今は、次に紹介する実行タイミングを調整する属性と組み合わせて、ヘッドに置く書き方が主流になっています。
1:45置き場所と順番が、表示の速さに直結します。
1:48記事の活用事例を見てみましょう。
1:50コードは一行だけです。
1:52ソース属性には、読み込むジャバスクリプトファイルへのパスを指定しています。
1:57ドット、スラッシュ、スクリプト、ドット、ジェイエスは、今のページと同じ場所にあるファイルを指します。
2:04そしてディファーという属性が付いています。
2:07これは、エイチティーエムエルの解析が終わってから実行してほしい、という合図です。
2:13注意点として、このファイルは自分で用意するものです。
2:17タグを書いただけではファイルは自動で作られません。
2:21パスが間違っていると読み込みに失敗するので、開発者ツールでエラーが出ていないか確認する習慣を付けましょう。
2:29実行タイミングを調整する二つの属性を比べます。
2:32ディファーは、ファイルの取得を裏側で進め、エイチティーエムエルの解析が終わったあとに、
2:36書かれた順番どおりに実行します。
2:41順番に意味がある処理に向いています。
2:44一方アシンクは、取得が終わったファイルから、その時点で実行します。
2:49表示を待たせない代わりに、複数のファイルの実行順は保証されません。
2:54順番が関係ない、独立した処理に向いています。
2:57もう一つ覚えておきたいのは、タグの中に直接書いたインラインのスクリプトにディファーを付けても、
3:02同じ効果は得られないことです。
3:06どちらも外部スクリプトのための属性です。
3:09タイプ属性にも注目しましょう。
3:12タイプにモジュールと指定すると、そのスクリプトはモジュールという形式で扱われます。
3:18モジュールでは、プログラムを複数のファイルに分け、必要なものを読み込む書き方ができます。
3:24ほかのファイルと名前がぶつかりにくく、大きめのプログラムでも整理しやすいのが利点です。
3:31また、モジュールのスクリプトは、基本的にエイチティーエムエルの解析後に遅延実行されるため、
3:36ディファーを改めて付ける必要はありません。
3:41逆に従来型で実行したい古い環境向けには、ノーモジュール属性を付けた別スクリプトを用意する、
3:46という使い分けも記事で紹介されています。
3:51ここで主な属性を整理します。
3:53まずソースは、読み込む外部ファイルの場所を示します。
3:57実在するファイルへの正しいパスを書くことが大前提です。
4:01次にタイプは、スクリプトの種類や実行形式を示します。
4:05モジュールと書けばモジュール形式になり、それ以外の値を書くとプログラムではなくデータとして扱われる場合もあります。
4:13そしてディファーとアシンクは、先ほど比べた実行タイミングの指定です。
4:18これらは真偽属性といって、書いてあるかどうかで意味が決まります。
4:23たとえばディファーイコールフォルスと書いても、無効にはなりません。
4:28外したいときは、属性そのものを取り除きます。
4:32このルールはほかの真偽属性でも共通です。
4:35続いて、外部サービスと組み合わせるときに使う属性です。
4:39インテグリティは、読み込むファイルが改ざんされていないか確かめるためのハッシュ値を指定します。
4:48配信内容と完全に一致していないと、ブラウザーは実行を止めます。
4:53クロスオリジンは、別のドメインから取得するときの扱いを指定し、配信元側の許可とそろえる必要があります。
5:02ノンスは、セキュリティポリシーが許可したスクリプトであることを示す値で、
5:08サーバー側と一致させ、固定の値を使い回してはいけません。
5:13ほかに、参照元情報の方針を示すリファラーポリシーもあります。
5:19初心者のうちは、名前と役割を知っておけば十分です。
5:23ブラウザー互換性を確認します。
5:25記事が参照するエムディーエヌの記録では、スクリプト要素そのものは、クロームがバージョン一以降、
5:32エッジが十二以降、ファイアフォックスが一以降、サファリが三以降と、とても古くからすべての主要ブラウザーで対応しています。
5:40基本的な使い方で困ることは、まずありません。
5:43ただし注意が必要なのは属性ごとの対応です。
5:46たとえばノーモジュールやインテグリティは、ずっと後になって追加された機能なので、
5:50対応が始まったバージョンが要素本体とは大きく異なります。
5:55新しい属性を使うときは、本体とは別に、その属性の対応状況を確認してください。
6:00実装前後のチェックポイントをまとめます。
6:03一つ目、動かない原因で多いのは、ソースのパス間違いや、ファイル自体を用意していないケースです。
6:11開発者ツールのコンソールでエラーを確認しましょう。
6:15二つ目、プログラムの中に終了タグと同じ文字列が含まれると、そこでスクリプトが途切れてしまいます。
6:23文字列として必要な場合は、書き方を工夫してください。
6:27三つ目は、ジャバスクリプトが無効な環境への配慮です。
6:31代替の内容を示すノースクリプトタグという仲間もあります。
6:36四つ目は表示の確認で、狭い画面でも操作部分が欠けないか確かめます。
6:41小さな確認の積み重ねが、確実に動くページにつながります。
6:46最後に練習とまとめです。
6:48スクリプトは、ジャバスクリプトやデータをページに組み込むタグでした。
6:52大切なポイントは三つです。
6:54一つ目、書き方には直接書く方法と、ソースで外部ファイルを読む方法があること。
6:59二つ目、ディファーやアシンク、モジュールで実行タイミングと順序をコントロールできること。
7:05三つ目、ファイルの用意やパスの指定は自分で行い、セキュリティ系の属性は役割を理解して使うことです。
7:11練習として、ボタンを押したら文字が変わる小さな処理を、ディファー付きの外部ファイルで作ってみてください。
7:18お疲れさまでした。
7:20次回もエイチティーエムエルタグの解説を続けましょう。

この動画で学べること

scriptタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。JavaScriptやデータを記述。外部スクリプトには src、モジュールには type="module" を使います。

解説記事・サンプルコードを読む：HTMLのscriptタグとは？属性・使い方・ブラウザー互換性と活用例 →