WEBVTT

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

2
00:00:00.872 --> 00:00:07.416
今回はジャバスクリプトのインターナショナル・リストフォーマット・フォーマットを紹介します。

3
00:00:07.416 --> 00:00:11.632
選択した商品や参加者の名前を画面に表示するとき、ただカンマでつなぐだけでは、

4
00:00:11.632 --> 00:00:15.849
言語に合わない表現になることがあります。

5
00:00:15.849 --> 00:00:22.392
英語なら最後にアンドやオアを入れたいですし、項目が一件か複数件かでもつなぎ方は変わります。

6
00:00:22.392 --> 00:00:27.336
このメソッドは、文字列の一覧を指定した言語の規則でつなぐ仕組みです。

7
00:00:27.336 --> 00:00:31.843
接続詞の位置や件数ごとの分岐を自分で組み立てる手間が減ります。

8
00:00:31.843 --> 00:00:37.223
ただし項目そのものを翻訳する機能ではない点も、最初に押さえておきましょう。

9
00:00:37.223 --> 00:00:40.713
自力でアンドやオアの位置を決めようとすると、言語が増えるたびに分岐が増え、

10
00:00:40.713 --> 00:00:44.202
保守も難しくなります。

11
00:00:44.202 --> 00:00:47.692
その悩みを標準機能で解くのが、このメソッドです。

12
00:00:47.692 --> 00:00:49.058
まず動作環境です。

13
00:00:49.058 --> 00:00:56.041
この機能は画面要素に依存しないため、対応するブラウザーとノード・ジェイエスの両方で使えます。

14
00:00:56.041 --> 00:01:00.595
外部パッケージのインストールも、ネットワーク通信も不要です。

15
00:01:00.595 --> 00:01:05.756
二千二十一年四月から主要ブラウザー間で広く使える機能として扱われており、

16
00:01:05.756 --> 00:01:10.917
現在のクローム、エッジ、ファイアフォックス、サファリが対象です。

17
00:01:10.917 --> 00:01:15.471
記事のサンプルはノード・ジェイエス二十四系を想定しています。

18
00:01:15.471 --> 00:01:22.606
注意したいのは、機能自体が存在しても、使いたい言語のデータまで揃っているとは限らないことです。

19
00:01:22.606 --> 00:01:27.615
古いブラウザーや組み込み環境では、使う前に存在確認をしてください。

20
00:01:27.615 --> 00:01:29.181
基本の書き方を見ましょう。

21
00:01:29.181 --> 00:01:34.724
まずニュー・インターナショナル・リストフォーマットで、表示規則を持つオブジェクトを作ります。

22
00:01:34.724 --> 00:01:38.338
第一引数に言語タグ、第二引数に設定のオブジェクトを渡します。

23
00:01:38.338 --> 00:01:43.278
そのうえで、作ったオブジェクトのフォーマットに、文字列の配列を渡して呼び出します。

24
00:01:43.278 --> 00:01:46.893
アメリカ英語でアップル、バナナ、オレンジを渡すと、最後の項目の前にアンドが入り、

25
00:01:46.893 --> 00:01:50.508
その前にもカンマが入った文章が返ります。

26
00:01:50.508 --> 00:01:55.207
役割分担がポイントで、設定はコンストラクターへ、一覧はフォーマットへ渡します。

27
00:01:55.207 --> 00:01:58.701
戻り値は整形済みの文字列で、元の配列は書き換えられません。

28
00:01:58.701 --> 00:02:00.470
設定の中心がタイプです。

29
00:02:00.470 --> 00:02:05.483
コンジャンクションは、エーとビーのように項目を並べる既定の設定です。

30
00:02:05.483 --> 00:02:11.527
ディスジャンクションは、エーまたはビーのように、どれか一つを選ぶ選択肢を並べます。

31
00:02:11.527 --> 00:02:16.245
ユニットは接続詞を使わず、単位を含む項目などをまとめる用途です。

32
00:02:16.245 --> 00:02:25.091
アメリカ英語の例では、コンジャンクションなら最後がアンド・オレンジに、ディスジャンクションならオア・オレンジになります。

33
00:02:25.091 --> 00:02:29.956
文章の意味に合わせて選ぶことが大切で、すべてを列挙するならコンジャンクション、

34
00:02:29.956 --> 00:02:34.821
どれか一つならディスジャンクション、と覚えてください。

35
00:02:34.821 --> 00:02:41.308
ユニットの例としては、長さや重さなど、単位を含む短い項目を並べる場面が想定されています。

36
00:02:41.308 --> 00:02:45.289
文章ではなく値の並びとして見せたいときに適しています。

37
00:02:45.289 --> 00:02:47.603
もう一つの設定がスタイルです。

38
00:02:47.603 --> 00:02:52.230
ロング、ショート、ナローの三つから選べ、既定値はロングです。

39
00:02:52.230 --> 00:02:56.934
アメリカ英語の例では、ロングはアンドを使い、ショートはアンド記号に変わり、

40
00:02:56.934 --> 00:03:01.638
ナローは接続詞なしでカンマだけの並びになります。

41
00:03:01.638 --> 00:03:09.350
ここで誤解しやすいのは、短いスタイルを選んでも、長い商品名そのものが省略されるわけではないことです。

42
00:03:09.350 --> 00:03:11.818
変わるのは主につなぎ方だけです。

43
00:03:11.818 --> 00:03:17.217
また言語によっては、スタイルを変えても表示が同じになる場合があります。

44
00:03:17.217 --> 00:03:22.615
画面の広さや文章の丁寧さに合わせて選び、実際の表示で確認してください。

45
00:03:22.615 --> 00:03:26.441
同じ配列でも、ロケールによって出力は変わります。

46
00:03:26.441 --> 00:03:29.629
代表例がアメリカ英語とイギリス英語です。

47
00:03:29.629 --> 00:03:36.802
アメリカ英語では最後のアンドの前にもカンマが入り、イギリス英語では入らない形が代表的です。

48
00:03:36.802 --> 00:03:40.628
日本語では、りんご、バナナ、みかんのように読点でつながり、選択肢なら最後に、

49
00:03:40.628 --> 00:03:44.454
または、が付きます。

50
00:03:44.454 --> 00:03:50.671
ロケールを省略すると実行環境の既定言語が使われるため、画面の言語が決まっている場合は、

51
00:03:50.671 --> 00:03:56.888
ジェイエーやイーエヌ・ユーエスのように明示すると再現しやすくなります。

52
00:03:56.888 --> 00:04:01.989
項目名自体は翻訳されないので、名前の翻訳は別に用意してください。

53
00:04:01.989 --> 00:04:04.598
件数による変化も確認しましょう。

54
00:04:04.598 --> 00:04:07.858
空の配列を渡すと、戻り値は空文字列です。

55
00:04:07.858 --> 00:04:11.282
一件だけなら、その項目がそのまま返ります。

56
00:04:11.282 --> 00:04:18.456
二件の場合はカンマは使われず、アップル・アンド・バナナのように接続詞だけでつながります。

57
00:04:18.456 --> 00:04:23.836
三件以上になって初めて、カンマと接続詞を組み合わせた形になります。

58
00:04:23.836 --> 00:04:32.640
引数を省略した場合も空の一覧として扱われますが、意図を明確にするため、常に配列を渡す書き方をおすすめします。

59
00:04:32.640 --> 00:04:40.140
導入時には、空、一件、二件、三件以上の四パターンを先に試すと、つなぎ方の全体像がつかめます。

60
00:04:40.140 --> 00:04:45.194
この件数ごとの自動調整こそが、手作業の連結と大きく違う点です。

61
00:04:45.194 --> 00:04:50.737
項目が動的に変わる画面でも、つなぎ方を毎回考え直す必要がありません。

62
00:04:50.737 --> 00:04:53.126
完全な実行例の流れを追います。

63
00:04:53.126 --> 00:04:59.098
まずインターナショナル・リストフォーマットが存在するかを確認し、次にサポーテッドロケールズオブで、

64
00:04:59.098 --> 00:05:05.071
使いたいロケールが対応一覧に含まれるかを確認します。

65
00:05:05.071 --> 00:05:13.511
必要な言語が揃っていなければ処理を止め、別の言語へ暗黙に切り替わった結果をそのまま表示しない設計にします。

66
00:05:13.511 --> 00:05:21.156
そのうえで、アメリカ英語とイギリス英語の列挙、選択肢の表示、空配列と一件だけの一覧を表示します。

67
00:05:21.156 --> 00:05:27.367
記事の期待出力は、ノード・ジェイエスの実機出力とも一致することを確認済みです。

68
00:05:27.367 --> 00:05:29.597
安心して手元で再現できます。

69
00:05:29.597 --> 00:05:31.342
失敗例を二つ押さえます。

70
00:05:31.342 --> 00:05:32.942
一つ目は要素の型です。

71
00:05:32.942 --> 00:05:38.178
配列の要素には文字列が必要で、数値の百を含めるとタイプエラーになります。

72
00:05:38.178 --> 00:05:40.650
数値は自動では文字列になりません。

73
00:05:40.650 --> 00:05:45.159
数値を表示したいなら、事前に表示用の文字列へ変換してください。

74
00:05:45.159 --> 00:05:51.558
オブジェクトをそのまま渡すのではなく、商品名など必要な項目だけを取り出すことも大切です。

75
00:05:51.558 --> 00:05:57.812
二つ目は設定の誤りで、タイプにアンドのような未定義の値を渡すとレンジエラーになります。

76
00:05:57.812 --> 00:06:05.811
一方、正しい形式の言語タグでも未対応なら、例外ではなく別のロケールへ切り替わることがある点にも注意が必要です。

77
00:06:05.811 --> 00:06:07.313
活用場面を見ましょう。

78
00:06:07.313 --> 00:06:15.232
フォームで選んだ配送方法、参加者の名前、対応するファイル形式などを、確認画面の短い文章にまとめる用途に適しています。

79
00:06:15.232 --> 00:06:19.806
英語画面でどれか一つを表すならディスジャンクション、すべてを列挙するならコンジャンクションというように、

80
00:06:19.806 --> 00:06:24.380
意味に合わせて設定を選びます。

81
00:06:24.380 --> 00:06:29.569
同じ設定で多数の一覧を描画する場合は、作ったフォーマッターを再利用できます。

82
00:06:29.569 --> 00:06:35.576
保守のコツは、選択した項目という見出しの翻訳と、項目同士の接続を分けて管理することです。

83
00:06:35.576 --> 00:06:41.311
長い一覧は読みにくくなるため、文章として表示する件数の上限も別に決めておきましょう。

84
00:06:41.311 --> 00:06:42.646
制約とまとめです。

85
00:06:42.646 --> 00:06:47.391
この処理は同期的で、プロミスは返さないためアウェイトは不要です。

86
00:06:47.391 --> 00:06:52.878
翻訳、重複の除去、並べ替え、エイチティーエムエルのエスケープも行いません。

87
00:06:52.878 --> 00:06:56.733
必要な処理は整形の前後に明示的に組み込んでください。

88
00:06:56.733 --> 00:07:01.627
また表示結果には、空白の種類や句読点の差が生じる可能性があります。

89
00:07:01.627 --> 00:07:06.224
そのため、フォーマットの結果を固定の文字列と比較して業務判定に使ったり、

90
00:07:06.224 --> 00:07:10.821
保存データの識別子にしたりする使い方は避けましょう。

91
00:07:10.821 --> 00:07:16.011
判定や保存には元の配列を使い、整形結果は表示用として扱うのが原則です。

92
00:07:16.011 --> 00:07:20.608
言語に合わせて項目を自然につなぐ場面で、ぜひ活用してください。

93
00:07:20.608 --> 00:07:25.131
まずは一つの表示箇所から試し、対応する言語ごとに空、一件、二件、三件以上の見た目を確認するのが、

94
00:07:25.131 --> 00:07:29.654
導入の確実な進め方です。

95
00:07:29.654 --> 00:07:30.989
お疲れさまでした。