SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

JavaScriptのIntl.ListFormat.format()：言語に合わせて項目を自然につなぐの解説動画

再生時間 7:31動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

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

  1. 0:00こんにちは。
  2. 0:00今回はジャバスクリプトのインターナショナル・リストフォーマット・フォーマットを紹介します。
  3. 0:07選択した商品や参加者の名前を画面に表示するとき、ただカンマでつなぐだけでは、
  4. 0:11言語に合わない表現になることがあります。
  5. 0:15英語なら最後にアンドやオアを入れたいですし、項目が一件か複数件かでもつなぎ方は変わります。
  6. 0:22このメソッドは、文字列の一覧を指定した言語の規則でつなぐ仕組みです。
  7. 0:27接続詞の位置や件数ごとの分岐を自分で組み立てる手間が減ります。
  8. 0:31ただし項目そのものを翻訳する機能ではない点も、最初に押さえておきましょう。
  9. 0:37自力でアンドやオアの位置を決めようとすると、言語が増えるたびに分岐が増え、
  10. 0:40保守も難しくなります。
  11. 0:44その悩みを標準機能で解くのが、このメソッドです。
  12. 0:47まず動作環境です。
  13. 0:49この機能は画面要素に依存しないため、対応するブラウザーとノード・ジェイエスの両方で使えます。
  14. 0:56外部パッケージのインストールも、ネットワーク通信も不要です。
  15. 1:00二千二十一年四月から主要ブラウザー間で広く使える機能として扱われており、
  16. 1:05現在のクローム、エッジ、ファイアフォックス、サファリが対象です。
  17. 1:10記事のサンプルはノード・ジェイエス二十四系を想定しています。
  18. 1:15注意したいのは、機能自体が存在しても、使いたい言語のデータまで揃っているとは限らないことです。
  19. 1:22古いブラウザーや組み込み環境では、使う前に存在確認をしてください。
  20. 1:27基本の書き方を見ましょう。
  21. 1:29まずニュー・インターナショナル・リストフォーマットで、表示規則を持つオブジェクトを作ります。
  22. 1:34第一引数に言語タグ、第二引数に設定のオブジェクトを渡します。
  23. 1:38そのうえで、作ったオブジェクトのフォーマットに、文字列の配列を渡して呼び出します。
  24. 1:43アメリカ英語でアップル、バナナ、オレンジを渡すと、最後の項目の前にアンドが入り、
  25. 1:46その前にもカンマが入った文章が返ります。
  26. 1:50役割分担がポイントで、設定はコンストラクターへ、一覧はフォーマットへ渡します。
  27. 1:55戻り値は整形済みの文字列で、元の配列は書き換えられません。
  28. 1:58設定の中心がタイプです。
  29. 2:00コンジャンクションは、エーとビーのように項目を並べる既定の設定です。
  30. 2:05ディスジャンクションは、エーまたはビーのように、どれか一つを選ぶ選択肢を並べます。
  31. 2:11ユニットは接続詞を使わず、単位を含む項目などをまとめる用途です。
  32. 2:16アメリカ英語の例では、コンジャンクションなら最後がアンド・オレンジに、ディスジャンクションならオア・オレンジになります。
  33. 2:25文章の意味に合わせて選ぶことが大切で、すべてを列挙するならコンジャンクション、
  34. 2:29どれか一つならディスジャンクション、と覚えてください。
  35. 2:34ユニットの例としては、長さや重さなど、単位を含む短い項目を並べる場面が想定されています。
  36. 2:41文章ではなく値の並びとして見せたいときに適しています。
  37. 2:45もう一つの設定がスタイルです。
  38. 2:47ロング、ショート、ナローの三つから選べ、既定値はロングです。
  39. 2:52アメリカ英語の例では、ロングはアンドを使い、ショートはアンド記号に変わり、
  40. 2:56ナローは接続詞なしでカンマだけの並びになります。
  41. 3:01ここで誤解しやすいのは、短いスタイルを選んでも、長い商品名そのものが省略されるわけではないことです。
  42. 3:09変わるのは主につなぎ方だけです。
  43. 3:11また言語によっては、スタイルを変えても表示が同じになる場合があります。
  44. 3:17画面の広さや文章の丁寧さに合わせて選び、実際の表示で確認してください。
  45. 3:22同じ配列でも、ロケールによって出力は変わります。
  46. 3:26代表例がアメリカ英語とイギリス英語です。
  47. 3:29アメリカ英語では最後のアンドの前にもカンマが入り、イギリス英語では入らない形が代表的です。
  48. 3:36日本語では、りんご、バナナ、みかんのように読点でつながり、選択肢なら最後に、
  49. 3:40または、が付きます。
  50. 3:44ロケールを省略すると実行環境の既定言語が使われるため、画面の言語が決まっている場合は、
  51. 3:50ジェイエーやイーエヌ・ユーエスのように明示すると再現しやすくなります。
  52. 3:56項目名自体は翻訳されないので、名前の翻訳は別に用意してください。
  53. 4:01件数による変化も確認しましょう。
  54. 4:04空の配列を渡すと、戻り値は空文字列です。
  55. 4:07一件だけなら、その項目がそのまま返ります。
  56. 4:11二件の場合はカンマは使われず、アップル・アンド・バナナのように接続詞だけでつながります。
  57. 4:18三件以上になって初めて、カンマと接続詞を組み合わせた形になります。
  58. 4:23引数を省略した場合も空の一覧として扱われますが、意図を明確にするため、常に配列を渡す書き方をおすすめします。
  59. 4:32導入時には、空、一件、二件、三件以上の四パターンを先に試すと、つなぎ方の全体像がつかめます。
  60. 4:40この件数ごとの自動調整こそが、手作業の連結と大きく違う点です。
  61. 4:45項目が動的に変わる画面でも、つなぎ方を毎回考え直す必要がありません。
  62. 4:50完全な実行例の流れを追います。
  63. 4:53まずインターナショナル・リストフォーマットが存在するかを確認し、次にサポーテッドロケールズオブで、
  64. 4:59使いたいロケールが対応一覧に含まれるかを確認します。
  65. 5:05必要な言語が揃っていなければ処理を止め、別の言語へ暗黙に切り替わった結果をそのまま表示しない設計にします。
  66. 5:13そのうえで、アメリカ英語とイギリス英語の列挙、選択肢の表示、空配列と一件だけの一覧を表示します。
  67. 5:21記事の期待出力は、ノード・ジェイエスの実機出力とも一致することを確認済みです。
  68. 5:27安心して手元で再現できます。
  69. 5:29失敗例を二つ押さえます。
  70. 5:31一つ目は要素の型です。
  71. 5:32配列の要素には文字列が必要で、数値の百を含めるとタイプエラーになります。
  72. 5:38数値は自動では文字列になりません。
  73. 5:40数値を表示したいなら、事前に表示用の文字列へ変換してください。
  74. 5:45オブジェクトをそのまま渡すのではなく、商品名など必要な項目だけを取り出すことも大切です。
  75. 5:51二つ目は設定の誤りで、タイプにアンドのような未定義の値を渡すとレンジエラーになります。
  76. 5:57一方、正しい形式の言語タグでも未対応なら、例外ではなく別のロケールへ切り替わることがある点にも注意が必要です。
  77. 6:05活用場面を見ましょう。
  78. 6:07フォームで選んだ配送方法、参加者の名前、対応するファイル形式などを、確認画面の短い文章にまとめる用途に適しています。
  79. 6:15英語画面でどれか一つを表すならディスジャンクション、すべてを列挙するならコンジャンクションというように、
  80. 6:19意味に合わせて設定を選びます。
  81. 6:24同じ設定で多数の一覧を描画する場合は、作ったフォーマッターを再利用できます。
  82. 6:29保守のコツは、選択した項目という見出しの翻訳と、項目同士の接続を分けて管理することです。
  83. 6:35長い一覧は読みにくくなるため、文章として表示する件数の上限も別に決めておきましょう。
  84. 6:41制約とまとめです。
  85. 6:42この処理は同期的で、プロミスは返さないためアウェイトは不要です。
  86. 6:47翻訳、重複の除去、並べ替え、エイチティーエムエルのエスケープも行いません。
  87. 6:52必要な処理は整形の前後に明示的に組み込んでください。
  88. 6:56また表示結果には、空白の種類や句読点の差が生じる可能性があります。
  89. 7:01そのため、フォーマットの結果を固定の文字列と比較して業務判定に使ったり、
  90. 7:06保存データの識別子にしたりする使い方は避けましょう。
  91. 7:10判定や保存には元の配列を使い、整形結果は表示用として扱うのが原則です。
  92. 7:16言語に合わせて項目を自然につなぐ場面で、ぜひ活用してください。
  93. 7:20まずは一つの表示箇所から試し、対応する言語ごとに空、一件、二件、三件以上の見た目を確認するのが、
  94. 7:25導入の確実な進め方です。
  95. 7:29お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

Intl.ListFormat.format()で項目を言語に合った文章へつなぐ方法を解説。引数・戻り値、ブラウザーとNode.jsの実行手順、入力の型制約とロケールによる出力差を学べます。

解説記事・サンプルコードを読む：JavaScriptのIntl.ListFormat.format()：言語に合わせて項目を自然につなぐ →