【登壇資料】翻訳辞書にも型がほしい：ypecriptで考えるi18n

2026/06/12　TSKaigi2026〜アフターパーティー〜

Transcript

1. 翻訳辞書にも型がほしい：TypeScriptで考えるi18n michika.kurotaka / 株式会社エブリー
2. Copyright © 2015 every, Inc. All rights reserved. 2 自己紹介 / 会社紹介 自己紹介 Michika Kurotaka / 黒髙未知可 # 株式会社エブリー # 新卒2年目 # デリッシュキッチンの開発 # Go, Next.js, AIエージェント, 料理󰠉 # 業務のTypeScript歴は3ヶ月
3. 3 Copyright © 2015 every, Inc. All rights reserved. every - Company Profile 会社名 設立 株式会社エブリー 東京都港区六本木 3-2-1 住友不動産六本木グランドタワー 38F 133.3億円 所在地 2015年9月1日（6月決算） 累計調達 主要株主 KDDI、伊藤忠食品、加藤産業、旭食品、セイノーホー ルディングス、味の素、 DCMベンチャーズ、グロービス・ キャピタル・パートナーズ、 WiL、DBJキャピタル、 SMBCベンチャーキャピタル、 SBIインベストメント他 エブリーは 3つの領域で日本最大級のメディアを運営！ 生活に寄り添ったサービスを提供しています。
4. Copyright © 2015 every, Inc. All rights reserved. 4 5,600万人以上の”食”と”健康”を支える、多様なプロダクト展開 レシピ動画サービス『デリッシュキッチン』 媒体 月間総利用者数 約 5,700万 1,320万以上 497万人 52万人 161万人 133万人 393万人 88万人 6媒体合計フォロワー数 「だれでもおいしく簡単に 作れるレシピ」を毎日配信 するレシピ動画メディア 『デリッシュキッチン』 デリッシュキッチンが プロデュースする健康の ための食事記録・体重管理 アプリ『ヘルシカ』 冷凍宅配弁当サービス『 Meals』 食トレンド分析ツール『デリッシュリサーチ』
5. 5 Copyright © 2015 every, Inc. All rights reserved. エブリーが提供しているプロダクト、ソリューション一覧 エブリーではマルチプロダクトを展開し、あらゆる暮らしの最適化に向き合っています 「インフルエンサーと熱狂を共 創する」SNS・動画のプロ フェッショナルチーム 「熱狂を、仕掛ける。世の中 を、揺さぶる。」 SNS・動画の プロフェッショナルチーム WEB
6. Copyright © 2015 every, Inc. All rights reserved. 6 はじめに TSKaigiお疲れ様でした！ 🙌 いろんなトピックがありました TypeScript7, tsgo, … OXlint, Biome, … Branded Types, …
7. Copyright © 2015 every, Inc. All rights reserved. 7 はじめに 国際化に関するセッションもありました 型で頑張るプロダクト国際化 i18nextにおいてSelector APIを使うお話でした https://2026.tskaigi.org/talks/12
8. Copyright © 2015 every, Inc. All rights reserved. 8 はじめに 今回のテーマ ちょうど導入中だけど、確かに辞書管理は煩雑かも🤔 もう少し型で頑張れば 今後の多言語対応も楽になる...? → 辞書管理にもっと型を導入できないか？の話をします
9. Copyright © 2015 every, Inc. All rights reserved. 9 はじめに 目次 1. 国際化について 2. 導入後に感じた問題点 3. 型でどこまで縛れるか？ 4. まとめ
10. 10 国際化について
11. Copyright © 2015 every, Inc. All rights reserved. 11 国際化について i18nとは？ W3Cによる internationalization = 特定の言語だけに閉じず、後から別の言語・地域向けに適用しやすいようにアプリ ケーションを設計・実装しておくこと https://www.w3.org/International/questions/qa-i18n
12. Copyright © 2015 every, Inc. All rights reserved. 12 国際化について 今回はnext-intlライブラリを利用 next-intl Next.js向けのi18nライブラリ 主な機能 • locale（言語・地域）ごとのmessages（テキスト）を切り替え • Server Components / Client Components から翻訳を利用できる ※react-i18next, next-i18next とは別系統
13. Copyright © 2015 every, Inc. All rights reserved. 13 国際化について 一般的にはJSON辞書で管理
14. Copyright © 2015 every, Inc. All rights reserved. 14 国際化について 一般的にはJSON辞書で管理
15. 15 導入後に感じた問題点
16. Copyright © 2015 every, Inc. All rights reserved. 16 導入後に感じた問題点 当初の運用方針 プロジェクト立ち上げ時に決めたこと 1. next-intlライブラリを用いてJSON管理します 2. 文字列は埋め込まない、必ず t('help’) のように呼び出してください → とりあえず導入だけ決めて CLAUDE.md でルール化 最初は一言語のみ対応のため、実装や動作上でネックになることはなかった
17. Copyright © 2015 every, Inc. All rights reserved. 17 導入後に感じた問題点 改めて今の辞書ファイルを見てみると...
18. Copyright © 2015 every, Inc. All rights reserved. 18 導入後に感じた問題点 何が問題か？ 1. 同じ「ページ」なのに辞書の形が揃っていない 2. localeが増えた時に対応漏れが起きそう 3. 存在しないキーを呼び出しても気づきにくい
19. Copyright © 2015 every, Inc. All rights reserved. 19 導入後に感じた問題点 1. 同じ「ページ」なのに辞書の形が揃っていない Home, RecipePage, Compony はページを 表すが... • pageTitle とtitle がある • description もあれば metadata.description もあればそもそ もない場合も
20. Copyright © 2015 every, Inc. All rights reserved. 20 導入後に感じた問題点 2. localeが増えた時に対応漏れが起きそう • RecipePage.ingredients の欠落 • instructions →instruction のtypo
21. Copyright © 2015 every, Inc. All rights reserved. 21 導入後に感じた問題点 3. 存在しないキーを呼び出しても気づきにくい
22. Copyright © 2015 every, Inc. All rights reserved. 22 導入後に感じた問題点 何が問題か？ このまま開発が進むと余計カオスになるのでは... → 共通化するような同じキーも型で頑張って綺麗に 揃えてみよう！ AIもエラーを検知できて実装しやすいはず！
23. 23 型でどこまで縛れるか？
24. Copyright © 2015 every, Inc. All rights reserved. 24 型でどこまで縛れるか？ 1. next-intl は messages を JavaScript object として扱える • JSONをオブジェクトで表現 • オブジェクトの型でMessageSchema を定義
25. Copyright © 2015 every, Inc. All rights reserved. 25 型でどこまで縛れるか？ 2. AppConfig.Messages で辞書キーを型付けできる → 存在しないキーでIDEエラーが出せる
26. Copyright © 2015 every, Inc. All rights reserved. 26 型でどこまで縛れるか？ 3. satisfies で構造を検査できる ja が en 側の MessageSchema を満たしているかチェック
27. Copyright © 2015 every, Inc. All rights reserved. 27 型でどこまで縛れるか？ 3. satisfies で構造を検査できる → help がないとエラー → 存在しないキーはエラー
28. Copyright © 2015 every, Inc. All rights reserved. 28 型でどこまで縛れるか？ ここまででもいい感じ！ → ページで共通する情報だけでもさらに型で表したい！ ライブラリ標準機能 + satisfies でほぼ達成したが、これは未解決
29. Copyright © 2015 every, Inc. All rights reserved. 29 型でどこまで縛れるか？ +α さらに型を追加してみる
30. Copyright © 2015 every, Inc. All rights reserved. 30 型でどこまで縛れるか？
31. Copyright © 2015 every, Inc. All rights reserved. 31 型でどこまで縛れるか？ +α さらに型を追加してみる → Page を表す辞書で独自の構造を強制できた！
32. 32 まとめ
33. Copyright © 2015 every, Inc. All rights reserved. 33 まとめ JSON辞書ファイル→TypeScriptへ 辞書オブジェクトで構造が見やすく 型強制も追加
34. Copyright © 2015 every, Inc. All rights reserved. 34 まとめ とはいえ、トレードオフ コードの分量やファイル数は増えている
35. Copyright © 2015 every, Inc. All rights reserved. 35 まとめ とはいえ、トレードオフ JSON管理のメリット = 協業に向いている • シンプル・共有しやすい • コードから切り離しやすい • 翻訳管理ツールと相性が良い next-intlも「典型的にはJSON」と言及 今回はエンジニアの管理前提なのでTypeScriptを採用したが、ユー スケースによりそう Typescript instead of json for message dictionaries? · amannn next-intl · Discussion #157 · GitHub
36. Copyright © 2015 every, Inc. All rights reserved. 36 まとめ 最後に JSON辞書データを型で縛ることで構造を伝えやすくしてみた → AIの実装でも型を強制し、新規ページやlocaleでも対応漏れを防止できる → 今後の多言語対応でも安心して合わせられる基盤ができた 型で表せそうな部分は今のうちにやっておくと運用が楽になるかも！
37. 37 採用情報
38. 38 Copyright © 2015 every, Inc. All rights reserved. every - Recruit Info 🔍 エブリー 採用 🔍 エブリー テックブログ 🔍 エブリー オウンドメディア メディア / ブログ 開発部 公式 @every_engineerで技術的な発信を行っています。 エンジニアリングに関する発信やイベント情報などをお 知らせしますので、フォローお願いします！ 『every.thing』では、エブリーではたらく人、サービス・ 事業、開催イベント、働き方まで、社内の出来事をぜん ぶお伝えしています。 『テックブログ』では、エブリーの開発の裏側や技術的 な挑戦、エンジニアの知見を発信しています。 採用HP エブリーでは働く仲間を大募集中です！ 「中の人と話してみたい」「まずはざっくばらんにエブ リーのことを知りたい」「選考に進むか悩んでいる」など など、 まずは面談にて気軽にお話しましょう！！