Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
nuxt-i18nを使ったWebサイトの多言語化 / i18n-of-web-site-usi...
Search
odanado
PRO
October 19, 2018
Programming
1
6.8k
nuxt-i18nを使ったWebサイトの多言語化 / i18n-of-web-site-using-nuxt-i18n
odanado
PRO
October 19, 2018
Tweet
Share
More Decks by odanado
See All by odanado
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
3
4.4k
@nestjs/bull の活用について
odanado
PRO
0
1.5k
クラウド KMS の活用 / TOKYO BLOCKCHAIN TECH MEETUP 2022
odanado
PRO
0
1.2k
Vue.observable で状態管理 / vue-observable-state-management
odanado
PRO
4
2k
nuxtjs-axios-error-handling
odanado
PRO
0
350
ブロックチェーンアプリのトランザクションに対するデータ分析 / PyCon-JP-2019
odanado
PRO
0
420
スマートコントラクトに対する既知の攻撃とその対策 / bc.tokyo-21
odanado
PRO
0
240
最近のweb3.js事情 / bc.tokyo-19
odanado
PRO
2
500
YAPC::Tokyo 2019に スタッフ参加してみて / kichijojipm-18
odanado
PRO
1
2.3k
Other Decks in Programming
See All in Programming
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
470
実践!App Intents対応
yuukiw00w
1
350
エンジニアのための”最低限いい感じ”デザイン入門
shunshobon
0
130
大規模FlutterプロジェクトのCI実行時間を約8割削減した話
teamlab
PRO
0
490
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
120
令和最新版手のひらコンピュータ
koba789
14
8k
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
260
The State of Fluid (2025)
s2b
0
200
ソフトウェアテスト徹底指南書の紹介
goyoki
1
110
マイコンでもRustのtestがしたい その2/KernelVM Tokyo 18
tnishinaga
2
2.3k
Honoアップデート 2025年夏
yusukebe
1
840
TROCCO×dbtで実現する人にもAIにもやさしいデータ基盤
nealle
0
330
Featured
See All Featured
Writing Fast Ruby
sferik
628
62k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Bash Introduction
62gerente
614
210k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
890
4 Signs Your Business is Dying
shpigford
184
22k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
How GitHub (no longer) Works
holman
315
140k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
570
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
Facilitating Awesome Meetings
lara
55
6.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
183
54k
Transcript
nuxt-i18nを使った Webサイトの多⾔語化 株式会社モバイルファクトリー エンジニア @odan3240 2018.10.18 NuxtMeetUp#5
⾃⼰紹介 • Twitter @odan3240 • 所属 モバイルファクトリー • Uniqys Networkのサイト開発
• https://uniqys.net • 今⽇話すこと • この時に使⽤した nuxt-i18nの話
None
⾃⼰紹介 • Twitter @odan3240 • 所属 モバイルファクトリー • Uniqys Networkのサイト開発
• https://uniqys.net • 今⽇のこの時に使⽤した nuxt-i18nの話
• i18nとは • Vue I18n • nuxt-i18nの機能 • ハマった点
i18nとは
i18nとは • internationalization (国際化) の略 • ソフトウェアを様々な⾔語や地域に 対応させること • ⾔語,
時差, 名詞の複数形, etc
Vue I18n
Vue I18n • http://kazupon.github.io/vue-i18n/
Vue I18n
Vue I18n
Vue I18n • 多⾔語化の例 • 各⾔語の情報をmessagesに⼊れておけば ⾔語によって⾃動的に切り替わる
nuxtでもi18nしたい!
nuxt-community/nuxt-i18n
Nuxt i18n [検索] vue-i18nをnuxtで使う話 (not nuxt-i18n)
nuxt-i18nの⽇本語の 情報がない!
公式ドキュメントに p-rを投げるか??
ってつもりで 発表する予定だった
Nuxt i18n [検索] ⼀昨⽇にnuxt-i18nについて qiitaを書いた⼈いた
nuxt-i18nの機能
nuxt-i18nの機能 • vue-i18nのtranslationの機能のみ • ルーティング⾃動⽣成 • 便利関数 • SEO対策
ルーティング⾃動⽣成
nuxt-i18nの機能 ルーティング⾃動⽣成 設定ファイル
nuxt-i18nの機能 ルーティング⾃動⽣成 ディレクトリ構造
nuxt-i18nの機能 ルーティング⾃動⽣成 ⾃動⽣成されるルーティング
便利関数
nuxt-i18nの機能 便利関数 よしなにpathを⽣成する
nuxt-i18nの機能 便利関数 ⾔語切替ボタンの実装で使⽤
SEO対策
nuxt-i18nの機能 SEO対策 • hreflang、og:locale、 og:locale:alternate を⾃動⽣成 • 検索エンジンにWebページが どの⾔語に対応しているか教える
ハマった点
SEO対策を有効にすると headタグの中⾝が消える
ハマった点 SEO対策 • SEO対策を有効にすると headタグの中⾝が消える • script, styleタグが削除される • レイアウトが⼤幅に崩れる
• やばい
ハマった点 SEO対策 • issueがある • https://github.com/nuxt-community/nuxt-i18n/issues/ 100 • 原因不明! Help!
• ⼿元で再現する時としない時がある
ルーティング⾃動⽣成の 戦略の少なさ
ハマった点 ルーティング⽣成戦略 • prefix_except_default • / => 200 • /en
=> 404 • /ja => 200 • prefix • / => 404 • /en => 200 • /ja => 200 デフォルト⾔語はen これら全てに アクセス出来てほしい
ハマった点 ルーティング⽣成戦略 新しい戦略を追加するPull Requestを投げたらマージされた
ハマった点 ルーティング⽣成戦略 • prefix_and_default • / => 200 • /en
=> 200 • /ja => 200
まとめ
まとめ • Webサイトをnuxtで制作した • 多⾔語化のためにnuxt-i18nを使⽤した • nuxtではnuxt-i18nを使⽤すると良い • しかしほぼtranslation機能のみ
None