i18next を使って国際化対応をしていてユーザーの設定した言語を永続化するのに i18next-browser-languagedetector を使うとめちゃくちゃ簡単だったって話 環境 i18next 23.4.1 react-i18next 13.0.3 react 18.2.0 typescript 5.0.2 i18next-browser-languagedetector の導入 $ npm i i18next-browser-languagedetector i18next-browser-languagedetector の設定 .use でライブラリを読み込ませて、ini…
React で i18next を使った国際化対応したアプリを開発していて、言語切り替えボタンを押しても言語が切り替わらない問題にハマったのでメモ 環境 i18next 23.4.1 react-i18next 13.0.3 react 18.2.0 typescript 5.0.2 setup i18next $ npm install i18next $ npm install react-i18next ユーザーの環境からいい感じに言語設定を取得する i18next-browser-languagedetector というパッケージもあるが今回の例では使用しない i18next conf…
www.i18next.com { "key": "{{what}} is {{how}}" } i18next.t('key', { what: 'i18next', how: 'great' }); // -> "i18next is great" こんなかんじでいける
これはi18n対応のために i18next と react-i18next を使ってみた備忘録となる。 目次 目次 Reactアプリでのi18n対応(国際化/多言語対応)にi18nextを使ってみる react-intlとi18next サンプルアプリの雛形生成 create-react-appでブラウザが勝手に立ち上がらないようにする react-i18nextのセットアップ HOCで使う場合はwithTranslationを使う hookで使う場合はuseTranslationを使う namespacesについて translation というnamespaceの挙動について transl…
スクリーンショット placeof - プレイスオブ の技術構成 Next.js このサービスには多種多様なフォームがあり、Server Actionsは試験的にcontactページで使っています。Intercept Routesも使っています。 PlanetScale/Prisma 水平スケール出来るMySQLであるPlanetScaleに興味を持ち使っています。deploy requestをしてマイグレーションをする方式も違和感なく使えています。PrismaとDrizzleで迷いましたが、開発を始めた段階でPrismaの方が情報量が多く、出来ることもそこまで変わらないと感じ、Prismaに…
やりたいこと 用意したTranslationの一部をboldにしたかった。 useTranslationのtだけじゃ無理だった。 答え <Trans>を利用して、react-i18nextで一部許されているタグで装飾する。 translation.json "hey": "Hey <strong>{{name}}</strong> !" example.tsx const {t} = useTranslation("translation") const name = "Name" <Trans t={t} i18nKey={"hey"} values={{name}} /> translat…
こんにちは。フロントエンド開発課所属のkoki_matsuraです。 今回はPlaywrightのコンポーネントテストについて個人的な意見を書いています。 目次は以下の通りになっています。 はじめに 導入方法 Playwright Component Test Runner のスゴい点 コンポーネントが実際にレンダリングされる 画面のサイズを指定できる タイムゾーンや言語を指定できる コンポーネントの振る舞いを見るテストに対応できる まとめ 参考
このたびの災害により被災された皆様に心よりお見舞い申し上げます。 toolset-hsp3 v1.1.0 プレビュー版から脱するメジャーアップデートになります。 ホスト側VSCodeで既定のインストール先にインストールされているHSP3開発環境をglobで検索して、言語バーから選択可能にします。選択された環境をhsp3rootとして保存して、他の拡張機能やVSCodeのターミナルに情報を提供することが主な機能となります。 使い方 本拡張機能は、「language-hsp3 for VSCode」は事前にインストールされていること、HSP3開発環境が3.51以降のバージョンであり、この説明は、イ…
こんにちは。Amethystのフロントエンドエンジニアをしている淺津です。 この記事は JADE Advent Calendar 2023 の13日目です。 この記事では、Amethystフロントエンドの技術選定や開発インフラ等についてご紹介します。 前提条件 プロダクト チームの規模 ベースの技術 アーキテクチャ 状態管理・API連携 i18n スタイリング その他 開発補助 テスト、Storybook Lint、Format おわりに 前提条件 プロダクト Amethystは、Search Console API を利用した、SEOのための分析 SaaS(BtoB)です。 インハウスのSE…
国際化対応のつらみポイント prettier-plugin-sort-jsonを使う 方法 所感 参考URL sort-package.jsonでソートする 方法 所感 参考URL Node.jsのAPIを使ってJavaScriptでソートする 所感 参考URL まとめ 国際化対応のつらみポイント 自分の関わっているプロダクトでは国際化対応(internalization = i18n対応)を行なっている。 国際化対応はi18nと名前に入っているライブラリで実施することが多い。1 大体どのライブラリでも、翻訳の流れは決まっている。 テキスト定義をJSON形式の翻訳ファイルに記載する レンダリン…
Reactを業務で使うようになって○ヶ月、まだ自分がレビューする機会が無いので、ここでレビューの練習をしてみたいと思います。 前提 Typescriptで書いている buildツールはesbuild お題 実際にプロダクト内で見かけたコードを簡素にしたものです。 import React from 'react'; import { useLangContext } from 'react-i18next'; type nameProps = { name: string; } export default function MyComponent(props: nameProps) { co…
Resilire Tech Blog は zenn に移行しました 私たちのテックブログをご覧いただきありがとうございます! 2024年から掲載先を zenn に移行しました。是非フォローして最新記事をご覧ください。 これからも Resilire Tech Blog をよろしくお願いします。 Resilire Tech Blog は zenn に移行しました サプライチェーンマネジメント SaaS のフロントエンドテックリード採用中です! プロダクトの概要 現在のステータス 設計コンセプトと技術スタック Single Page Application —— Vite + React Monor…
こんにちは。業務委託としてコミューンのグローバルチームでエンジニアをしているhiro08と申します。 グローバルチームでは主に海外展開に向けた開発や施策を行なっています。もし、グローバルチームに興味のある方は日本のSaaSスタートアップが世界で戦うためのプロダクトを開発するということも一読ください。 今回はグローバルチームでの開発の一部として、TypeScript Compiler APIを活用したi18nの不整合をチェックするツールを作成したお話をしようと思います。
目次 導入 言語ファイルの作成 ページのローカライズ 動的なテキストの翻訳 URLの言語別ルーティング サポートされる言語の切り替え まとめ 1. 導入 国際化は、ウェブサイトのユーザーが異なる言語や地域に基づいて適切なコンテンツを表示できるようにする重要な要素です。Next.jsでは、国際化を簡単に実現するための豊富な機能が提供されています。 2. 言語ファイルの作成 国際化には、各言語ごとに対応するテキストを含む言語ファイルが必要です。このセクションでは、言語ファイルの作成方法について説明します。 2.1 JSON形式の言語ファイル 各言語に対応するJSON形式の言語ファイルを作成します。…
2023-06-04 18:00: 誤りのある表現を修正しました s/Static Generation/Static Exports/ *1 結論 Next.js の i18n 機能は Static Exports 未サポートなので自前で頑張れ! Next.js App Router の Static Exports で i18n したい! 今回、以下のような要件を決めて、実現できるかチャレンジしました: Next.js の App Router を用いる 言語は日本語(ja)と英語(en)の 2種類 サブパスで言語を分けるが、デフォルト言語のサブパスは切りたくない 日本語ページのパスが /…