WEBVTT

1
00:00:00.000 --> 00:00:00.836
こんにちは。

2
00:00:00.836 --> 00:00:03.902
エイチティーエムエル、リファレンス解説です。

3
00:00:03.902 --> 00:00:07.386
HTMLタグ編の三十一本目は、スクリプトタグです。

4
00:00:07.386 --> 00:00:13.657
スクリプトは、ジャバスクリプトというプログラムや、データをページに組み込むためのタグです。

5
00:00:13.657 --> 00:00:18.673
エイチティーエムエルが文書の構造、シーエスエスが見た目を担当するのに対して、

6
00:00:18.673 --> 00:00:23.690
スクリプトはクリックへの反応や計算といった、動きや処理を担当します。

7
00:00:23.690 --> 00:00:27.661
今回は、二つの書き方、実行タイミングを変える属性、そして安全に使うための注意点まで、

8
00:00:27.661 --> 00:00:31.633
初心者向けに順番に解説します。

9
00:00:31.633 --> 00:00:34.420
プログラムの入口になる、大切なタグです。

10
00:00:34.420 --> 00:00:37.439
スクリプトの書き方は大きく二つあります。

11
00:00:37.439 --> 00:00:43.929
一つ目はインラインと呼ばれる方法で、開始タグと終了タグの間にプログラムを直接書きます。

12
00:00:43.929 --> 00:00:46.193
短い処理を試すときに便利です。

13
00:00:46.193 --> 00:00:50.721
二つ目は、ソース属性で別ファイルを指定して読み込む方法です。

14
00:00:50.721 --> 00:00:58.871
処理が長くなる場合は、プログラムを専用ファイルに分けた方が読みやすく、複数のページで使い回すこともできます。

15
00:00:58.871 --> 00:01:02.041
どちらの方法でも、終了タグは必ず書きます。

16
00:01:02.041 --> 00:01:07.172
外部ファイルを読み込むときでも、終了タグを省略することはできません。

17
00:01:07.172 --> 00:01:10.040
この二つの形が基本だと覚えてください。

18
00:01:10.040 --> 00:01:12.145
置き場所について確認します。

19
00:01:12.145 --> 00:01:16.806
スクリプトは、ヘッドの中にもボディの中にも置くことができます。

20
00:01:16.806 --> 00:01:21.015
ブラウザーは、エイチティーエムエルを上から順に読み進め、スクリプトに出会うと、

21
00:01:21.015 --> 00:01:25.225
その場で読み込みと実行を行います。

22
00:01:25.225 --> 00:01:33.193
ここで大切なのは、外部ファイルの取得に時間がかかると、その間、後ろの内容の表示が待たされてしまうことです。

23
00:01:33.193 --> 00:01:37.403
そのため、昔はボディの最後に置く方法がよく使われました。

24
00:01:37.403 --> 00:01:45.071
今は、次に紹介する実行タイミングを調整する属性と組み合わせて、ヘッドに置く書き方が主流になっています。

25
00:01:45.071 --> 00:01:48.228
置き場所と順番が、表示の速さに直結します。

26
00:01:48.228 --> 00:01:50.567
記事の活用事例を見てみましょう。

27
00:01:50.567 --> 00:01:52.174
コードは一行だけです。

28
00:01:52.174 --> 00:01:57.583
ソース属性には、読み込むジャバスクリプトファイルへのパスを指定しています。

29
00:01:57.583 --> 00:02:04.891
ドット、スラッシュ、スクリプト、ドット、ジェイエスは、今のページと同じ場所にあるファイルを指します。

30
00:02:04.891 --> 00:02:07.960
そしてディファーという属性が付いています。

31
00:02:07.960 --> 00:02:13.807
これは、エイチティーエムエルの解析が終わってから実行してほしい、という合図です。

32
00:02:13.807 --> 00:02:17.607
注意点として、このファイルは自分で用意するものです。

33
00:02:17.607 --> 00:02:21.261
タグを書いただけではファイルは自動で作られません。

34
00:02:21.261 --> 00:02:29.008
パスが間違っていると読み込みに失敗するので、開発者ツールでエラーが出ていないか確認する習慣を付けましょう。

35
00:02:29.008 --> 00:02:32.494
実行タイミングを調整する二つの属性を比べます。

36
00:02:32.494 --> 00:02:36.965
ディファーは、ファイルの取得を裏側で進め、エイチティーエムエルの解析が終わったあとに、

37
00:02:36.965 --> 00:02:41.437
書かれた順番どおりに実行します。

38
00:02:41.437 --> 00:02:44.165
順番に意味がある処理に向いています。

39
00:02:44.165 --> 00:02:49.167
一方アシンクは、取得が終わったファイルから、その時点で実行します。

40
00:02:49.167 --> 00:02:54.169
表示を待たせない代わりに、複数のファイルの実行順は保証されません。

41
00:02:54.169 --> 00:02:57.503
順番が関係ない、独立した処理に向いています。

42
00:02:57.503 --> 00:03:02.202
もう一つ覚えておきたいのは、タグの中に直接書いたインラインのスクリプトにディファーを付けても、

43
00:03:02.202 --> 00:03:06.901
同じ効果は得られないことです。

44
00:03:06.901 --> 00:03:09.932
どちらも外部スクリプトのための属性です。

45
00:03:09.932 --> 00:03:12.191
タイプ属性にも注目しましょう。

46
00:03:12.191 --> 00:03:18.365
タイプにモジュールと指定すると、そのスクリプトはモジュールという形式で扱われます。

47
00:03:18.365 --> 00:03:24.990
モジュールでは、プログラムを複数のファイルに分け、必要なものを読み込む書き方ができます。

48
00:03:24.990 --> 00:03:31.466
ほかのファイルと名前がぶつかりにくく、大きめのプログラムでも整理しやすいのが利点です。

49
00:03:31.466 --> 00:03:36.435
また、モジュールのスクリプトは、基本的にエイチティーエムエルの解析後に遅延実行されるため、

50
00:03:36.435 --> 00:03:41.404
ディファーを改めて付ける必要はありません。

51
00:03:41.404 --> 00:03:46.298
逆に従来型で実行したい古い環境向けには、ノーモジュール属性を付けた別スクリプトを用意する、

52
00:03:46.298 --> 00:03:51.192
という使い分けも記事で紹介されています。

53
00:03:51.192 --> 00:03:53.301
ここで主な属性を整理します。

54
00:03:53.301 --> 00:03:57.216
まずソースは、読み込む外部ファイルの場所を示します。

55
00:03:57.216 --> 00:04:01.283
実在するファイルへの正しいパスを書くことが大前提です。

56
00:04:01.283 --> 00:04:05.199
次にタイプは、スクリプトの種類や実行形式を示します。

57
00:04:05.199 --> 00:04:13.784
モジュールと書けばモジュール形式になり、それ以外の値を書くとプログラムではなくデータとして扱われる場合もあります。

58
00:04:13.784 --> 00:04:18.905
そしてディファーとアシンクは、先ほど比べた実行タイミングの指定です。

59
00:04:18.905 --> 00:04:23.724
これらは真偽属性といって、書いてあるかどうかで意味が決まります。

60
00:04:23.724 --> 00:04:28.694
たとえばディファーイコールフォルスと書いても、無効にはなりません。

61
00:04:28.694 --> 00:04:32.008
外したいときは、属性そのものを取り除きます。

62
00:04:32.008 --> 00:04:35.020
このルールはほかの真偽属性でも共通です。

63
00:04:35.020 --> 00:04:39.797
続いて、外部サービスと組み合わせるときに使う属性です。

64
00:04:39.797 --> 00:04:48.112
インテグリティは、読み込むファイルが改ざんされていないか確かめるためのハッシュ値を指定します。

65
00:04:48.112 --> 00:04:53.596
配信内容と完全に一致していないと、ブラウザーは実行を止めます。

66
00:04:53.596 --> 00:05:02.619
クロスオリジンは、別のドメインから取得するときの扱いを指定し、配信元側の許可とそろえる必要があります。

67
00:05:02.619 --> 00:05:08.280
ノンスは、セキュリティポリシーが許可したスクリプトであることを示す値で、

68
00:05:08.280 --> 00:05:13.942
サーバー側と一致させ、固定の値を使い回してはいけません。

69
00:05:13.942 --> 00:05:19.249
ほかに、参照元情報の方針を示すリファラーポリシーもあります。

70
00:05:19.249 --> 00:05:23.672
初心者のうちは、名前と役割を知っておけば十分です。

71
00:05:23.672 --> 00:05:25.706
ブラウザー互換性を確認します。

72
00:05:25.706 --> 00:05:32.961
記事が参照するエムディーエヌの記録では、スクリプト要素そのものは、クロームがバージョン一以降、

73
00:05:32.961 --> 00:05:40.215
エッジが十二以降、ファイアフォックスが一以降、サファリが三以降と、とても古くからすべての主要ブラウザーで対応しています。

74
00:05:40.215 --> 00:05:43.199
基本的な使い方で困ることは、まずありません。

75
00:05:43.199 --> 00:05:46.046
ただし注意が必要なのは属性ごとの対応です。

76
00:05:46.046 --> 00:05:50.657
たとえばノーモジュールやインテグリティは、ずっと後になって追加された機能なので、

77
00:05:50.657 --> 00:05:55.267
対応が始まったバージョンが要素本体とは大きく異なります。

78
00:05:55.267 --> 00:06:00.420
新しい属性を使うときは、本体とは別に、その属性の対応状況を確認してください。

79
00:06:00.420 --> 00:06:03.703
実装前後のチェックポイントをまとめます。

80
00:06:03.703 --> 00:06:11.419
一つ目、動かない原因で多いのは、ソースのパス間違いや、ファイル自体を用意していないケースです。

81
00:06:11.419 --> 00:06:15.524
開発者ツールのコンソールでエラーを確認しましょう。

82
00:06:15.524 --> 00:06:23.404
二つ目、プログラムの中に終了タグと同じ文字列が含まれると、そこでスクリプトが途切れてしまいます。

83
00:06:23.404 --> 00:06:27.672
文字列として必要な場合は、書き方を工夫してください。

84
00:06:27.672 --> 00:06:31.941
三つ目は、ジャバスクリプトが無効な環境への配慮です。

85
00:06:31.941 --> 00:06:36.538
代替の内容を示すノースクリプトタグという仲間もあります。

86
00:06:36.538 --> 00:06:41.955
四つ目は表示の確認で、狭い画面でも操作部分が欠けないか確かめます。

87
00:06:41.955 --> 00:06:46.552
小さな確認の積み重ねが、確実に動くページにつながります。

88
00:06:46.552 --> 00:06:48.157
最後に練習とまとめです。

89
00:06:48.157 --> 00:06:52.706
スクリプトは、ジャバスクリプトやデータをページに組み込むタグでした。

90
00:06:52.706 --> 00:06:54.446
大切なポイントは三つです。

91
00:06:54.446 --> 00:06:59.530
一つ目、書き方には直接書く方法と、ソースで外部ファイルを読む方法があること。

92
00:06:59.530 --> 00:07:05.416
二つ目、ディファーやアシンク、モジュールで実行タイミングと順序をコントロールできること。

93
00:07:05.416 --> 00:07:11.972
三つ目、ファイルの用意やパスの指定は自分で行い、セキュリティ系の属性は役割を理解して使うことです。

94
00:07:11.972 --> 00:07:18.929
練習として、ボタンを押したら文字が変わる小さな処理を、ディファー付きの外部ファイルで作ってみてください。

95
00:07:18.929 --> 00:07:20.133
お疲れさまでした。

96
00:07:20.133 --> 00:07:23.612
次回もエイチティーエムエルタグの解説を続けましょう。