WEBVTT

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

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

3
00:00:04.282 --> 00:00:08.258
HTMLタグ編の四十二本目は、アウトプットタグです。

4
00:00:08.258 --> 00:00:13.458
アウトプットは、計算や操作によって生まれた結果を示すためのタグです。

5
00:00:13.458 --> 00:00:17.893
たとえば人数を変えたら合計金額がその場で変わる、数量を選んだら小計が更新される、

6
00:00:17.893 --> 00:00:22.328
といった場面を思い浮かべてください。

7
00:00:22.328 --> 00:00:26.151
その結果を表示する場所こそが、このタグの担当です。

8
00:00:26.151 --> 00:00:33.950
入力欄が利用者から値を受け取る入り口だとすれば、アウトプットはプログラムが計算した答えを返す出口です。

9
00:00:33.950 --> 00:00:38.385
今回は基本の書き方、専用属性、そして計算自体はジャバスクリプトが行うという大切な役割分担まで、

10
00:00:38.385 --> 00:00:42.820
順に確認していきます。

11
00:00:42.820 --> 00:00:45.466
どんな場面で使うのかを整理します。

12
00:00:45.466 --> 00:00:49.668
典型例は、フォームの中で入力に連動して変わる結果です。

13
00:00:49.668 --> 00:00:53.714
人数と単価から料金を求める、個数を変えて小計を出す、条件を選んで見積もりを表示する、

14
00:00:53.714 --> 00:00:57.760
といった使い方です。

15
00:00:57.760 --> 00:01:05.386
ポイントは、その数字が最初から決まった文章ではなく、利用者の操作によって変わる結果であることです。

16
00:01:05.386 --> 00:01:14.568
最初から固定された説明文なら段落のピータグで十分ですし、進み具合を示すならプログレスタグやメータータグが向いています。

17
00:01:14.568 --> 00:01:20.794
操作の答えとして変化する値を置く場所、それがアウトプットタグだと覚えてください。

18
00:01:20.794 --> 00:01:26.552
結果であることを意味として伝えられる点が、ただの文字表示と違うところです。

19
00:01:26.552 --> 00:01:28.337
基本の書き方を確認します。

20
00:01:28.337 --> 00:01:33.143
アウトプットの開始タグと終了タグで、最初に表示したい値を囲むだけです。

21
00:01:33.143 --> 00:01:37.263
画面のような例では、料金の横に千という初期値を置いています。

22
00:01:37.263 --> 00:01:42.756
この時点ではまだ計算は始まっておらず、タグの中身がそのまま最初の表示になります。

23
00:01:42.756 --> 00:01:47.562
見た目は普通の文字とほとんど変わりませんが、意味ははっきりしています。

24
00:01:47.562 --> 00:01:52.642
この場所は計算結果を置く場所だ、とブラウザーや支援技術に伝えているのです。

25
00:01:52.642 --> 00:01:58.410
まずは結果を表示したい位置に、アウトプットタグと初期値を置くことから始めてください。

26
00:01:58.410 --> 00:02:01.980
あとからプログラムで、この中身を書き換えていきます。

27
00:02:01.980 --> 00:02:05.888
記事の活用例を、自分の言葉でたどってみましょう。

28
00:02:05.888 --> 00:02:08.005
構成はとてもシンプルです。

29
00:02:08.005 --> 00:02:15.495
まずラベルとインプットで人数を入力する欄を用意し、初期値は一人、最小値も一人にしておきます。

30
00:02:15.495 --> 00:02:21.031
その下の段落の中にアウトプットを置き、ここに料金の結果を表示します。

31
00:02:21.031 --> 00:02:24.939
単価は一人あたり千円なので、初期表示は千円です。

32
00:02:24.939 --> 00:02:27.381
ここで大切なのは対応関係です。

33
00:02:27.381 --> 00:02:33.568
インプットにはカウントというアイディー、アウトプットにはトータルというアイディーを付け、

34
00:02:33.568 --> 00:02:39.756
どちらが入力で、どちらが結果なのかを区別できるようにしています。

35
00:02:39.756 --> 00:02:44.152
この対応付けが、次の属性とプログラムの土台になります。

36
00:02:44.152 --> 00:02:47.750
専用属性の中心、フォー属性を解説します。

37
00:02:47.750 --> 00:02:54.225
フォー属性には、この結果の計算に関係する入力要素のアイディーを書きます。

38
00:02:54.225 --> 00:03:04.838
先ほどの例では、人数を入れるインプットのアイディーがカウントなので、アウトプットのフォーにもカウントと指定しています。

39
00:03:04.838 --> 00:03:10.055
入力が複数ある場合は、空白で区切って並べることもできます。

40
00:03:10.055 --> 00:03:12.573
ただし誤解しないでください。

41
00:03:12.573 --> 00:03:21.208
フォーはあくまで関係を示す目印であり、フォーを書いただけで計算が自動で始まるわけではありません。

42
00:03:21.208 --> 00:03:25.705
実際の計算と更新は、ジャバスクリプトが担当します。

43
00:03:25.705 --> 00:03:32.900
フォーは、その計算がどの入力に基づくのかを、文書の意味として残すための属性です。

44
00:03:32.900 --> 00:03:35.363
残り二つの専用属性を確認します。

45
00:03:35.363 --> 00:03:43.215
フォーム属性は、このアウトプットをどのフォームに関連付けるかを、そのフォームのアイディーで指定します。

46
00:03:43.215 --> 00:03:49.834
アウトプットがフォームの外に置かれている場合でも、関係をはっきりさせるために使います。

47
00:03:49.834 --> 00:03:53.375
次にネーム属性は、この結果につける項目名です。

48
00:03:53.375 --> 00:03:57.224
ほかのフォーム部品と同じように名前を付けられます。

49
00:03:57.224 --> 00:04:01.996
加えて、アイディーやクラスのような共通属性ももちろん使えます。

50
00:04:01.996 --> 00:04:08.462
アイディーはプログラムから結果を書き換える際の目印になるので、実務ではほぼ必須です。

51
00:04:08.462 --> 00:04:14.928
属性は飾りではなく、入力、結果、フォームの三者の関係を表すものだと理解してください。

52
00:04:14.928 --> 00:04:17.192
いよいよ計算の仕組みです。

53
00:04:17.192 --> 00:04:18.760
流れは三段階です。

54
00:04:18.760 --> 00:04:26.598
まずクエリーセレクターで、人数のインプットと結果のアウトプットをプログラムから取得します。

55
00:04:26.598 --> 00:04:34.087
次に、インプットにインベントリスナーを付け、入力が変わるたびに処理が動くようにします。

56
00:04:34.087 --> 00:04:41.403
最後に、人数に千を掛けた答えを文字列に直して、アウトプットのバリューに入れ直します。

57
00:04:41.403 --> 00:04:49.415
これで、人数を二人に変えれば表示は二千円に、三人に変えれば三千円に、その場で切り替わります。

58
00:04:49.415 --> 00:04:56.208
エイチティーエムエルは場所と意味を用意し、計算と更新はジャバスクリプトが行う。

59
00:04:56.208 --> 00:05:00.388
この役割分担が、アウトプットタグ理解の核心です。

60
00:05:00.388 --> 00:05:06.088
実務で欠かせないのが、入力が空っぽだったり不正だったりする場合の扱いです。

61
00:05:06.088 --> 00:05:13.021
人数欄を空にしたまま計算すると、ゼロや変な文字が料金として表示されてしまうことがあります。

62
00:05:13.021 --> 00:05:20.724
記事の例では、バリディティで入力が正しいかどうかを確認し、さらに空欄でないこともチェックしています。

63
00:05:20.724 --> 00:05:27.503
どちらも満たせば通常どおり計算し、そうでなければ料金の代わりにダッシュ記号を表示します。

64
00:05:27.503 --> 00:05:32.587
結果の欄だからこそ、おかしな答えをそのまま出さない配慮が大切です。

65
00:05:32.587 --> 00:05:40.136
計算式を書くときは、正常な入力だけでなく、空欄や範囲外の値のときの表示も一緒に決めておきましょう。

66
00:05:40.136 --> 00:05:42.933
使うときの注意点を三つまとめます。

67
00:05:42.933 --> 00:05:51.323
一つ目、アウトプットの値は、通常の入力欄のようにそのまま送信されるものではないと理解しておくことです。

68
00:05:51.323 --> 00:05:56.094
あくまで画面上で結果を見せるための要素であり、サーバーへ確実に送りたい値は、

69
00:05:56.094 --> 00:06:00.865
別途入力欄などで扱う設計にしてください。

70
00:06:00.865 --> 00:06:04.320
二つ目、タグを置くだけで計算はできません。

71
00:06:04.320 --> 00:06:11.558
イベントの監視と計算処理をプログラムで用意しなければ、初期値が表示されたままになります。

72
00:06:11.558 --> 00:06:14.190
三つ目、見た目と意味の分担です。

73
00:06:14.190 --> 00:06:23.403
結果を太くしたり色を付けたりするのはシーエスエスの仕事であり、結果であるという意味はアウトプットタグが担います。

74
00:06:23.403 --> 00:06:27.516
ついでに使うのではなく、意味で選ぶことが大切です。

75
00:06:27.516 --> 00:06:29.714
ブラウザー互換性を確認します。

76
00:06:29.714 --> 00:06:35.722
記事が参照するエムディーエヌの記録では、アウトプットタグはクロームが十以降、

77
00:06:35.722 --> 00:06:41.729
エッジが十八以前の版から、ファイアフォックスが四以降、サファリが七以降で対応しています。

78
00:06:41.729 --> 00:06:47.737
専用属性のフォー、フォーム、ネームについても、同じ時期から対応が記録されています。

79
00:06:47.737 --> 00:06:55.942
かなり早い時期から主要ブラウザーにそろって入っている要素なので、対応を理由に使用をためらう場面は少ないでしょう。

80
00:06:55.942 --> 00:07:00.924
ただし、表示されるかどうかと、計算が正しく動くかどうかは別の話です。

81
00:07:00.924 --> 00:07:08.104
プログラム側の処理や、スマートフォンなど実際の利用環境での動作確認は、公開前に必ず行ってください。

82
00:07:08.104 --> 00:07:09.342
最後にまとめです。

83
00:07:09.342 --> 00:07:14.432
アウトプットタグは、計算や操作による結果を示す、フォームの中の出口でした。

84
00:07:14.432 --> 00:07:15.807
ポイントは三つです。

85
00:07:15.807 --> 00:07:20.071
一つ目、入力を受け取る欄ではなく、答えを表示する欄であること。

86
00:07:20.071 --> 00:07:26.674
二つ目、フォー属性で関係する入力を示し、フォーム属性やネーム属性でフォームとの関係を補えること。

87
00:07:26.674 --> 00:07:33.827
三つ目、計算自体はジャバスクリプトが行い、アウトプットはその結果を受け取って表示する場所であることです。

88
00:07:33.827 --> 00:07:38.917
練習として、人数と単価から合計を出す小さな計算ページを作ってみてください。

89
00:07:38.917 --> 00:07:43.456
入力を変えて結果がその場で変われば、仕組みはもう理解できています。

90
00:07:43.456 --> 00:07:44.694
お疲れさまでした。

91
00:07:44.694 --> 00:07:45.932
次回もお楽しみに。