Enabled multilingual support for locale using i18next

ch00z00 · ch00z00 · commit a498fa483e3e · 2025-06-16T11:53:53.000+09:00
diff --git a/frontend/index.html b/frontend/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/registered.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Re:Fuel</title>
   </head>
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -16,9 +16,12 @@
   "dependencies": {
     "@tanstack/react-query": "^5.80.6",
     "@tanstack/react-query-devtools": "^5.80.7",
+    "i18next": "^25.2.1",
+    "i18next-browser-languagedetector": "^8.2.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-hook-form": "^7.57.0",
+    "react-i18next": "^15.5.3",
     "react-router-dom": "^7.6.2",
     "styled-components": "^6.1.18",
     "zustand": "^5.0.5"
diff --git a/frontend/public/fonts/Somatic-Rounded.otf b/frontend/public/fonts/Somatic-Rounded.otf
diff --git a/frontend/public/registered.svg b/frontend/public/registered.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-registered" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <circle cx="12" cy="12" r="9" />
+  <path d="M9 16v-8h4a2 2 0 0 1 0 4h-4m3 0l3 4" />
+</svg>
+
+
diff --git a/frontend/public/vite.svg b/frontend/public/vite.svg
diff --git a/frontend/src/assets/react.svg b/frontend/src/assets/react.svg
diff --git a/frontend/src/components/common/molecules/Header.tsx b/frontend/src/components/common/molecules/Header.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import { useTranslation } from 'react-i18next';
 import Button from '../atoms/Button';
 
 const HeaderWrapper = styled.header`
@@ -28,18 +29,50 @@ const Logo = styled.h1`
   color: #1d1d1f;
 `;
 
+const LanguageSwitcher = styled.div`
+  margin-left: 1rem;
+  display: flex;
+  gap: 0.5rem;
+`;
+
 interface HeaderProps {
   onAddNewComplex: () => void;
 }
 
 const Header: React.FC<HeaderProps> = ({ onAddNewComplex }) => {
+  const { t, i18n } = useTranslation();
+
+  const changeLanguage = (lng: string) => {
+    i18n.changeLanguage(lng);
+  };
+
   return (
     <HeaderWrapper>
       <NavContainer>
-        <Logo>Re:Fuel</Logo>
-        <Button variant="primary" size="small" onClick={onAddNewComplex}>
-          新しいコンプレックスを登録
-        </Button>
+        <Logo>{t('headerTitle')}</Logo>
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <Button variant="primary" size="small" onClick={onAddNewComplex}>
+            {t('addNewComplexButton')}
+          </Button>
+          <LanguageSwitcher>
+            <Button
+              size="small"
+              variant="secondary"
+              onClick={() => changeLanguage('ja')}
+              disabled={i18n.resolvedLanguage === 'ja'}
+            >
+              JA
+            </Button>
+            <Button
+              size="small"
+              variant="secondary"
+              onClick={() => changeLanguage('en')}
+              disabled={i18n.resolvedLanguage === 'en'}
+            >
+              EN
+            </Button>
+          </LanguageSwitcher>
+        </div>
       </NavContainer>
     </HeaderWrapper>
   );
diff --git a/frontend/src/components/complexes/organisms/NoComplexesMessage.tsx b/frontend/src/components/complexes/organisms/NoComplexesMessage.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import { useTranslation } from 'react-i18next';
 import Button from '../../common/atoms/Button';
 
 const MessageWrapper = styled.div`
@@ -41,6 +42,7 @@ interface NoComplexesMessageProps {
 const NoComplexesMessage: React.FC<NoComplexesMessageProps> = ({
   onAddNewComplex,
 }) => {
+  const { t } = useTranslation();
   return (
     <MessageWrapper>
       <IconWrapper>
@@ -59,13 +61,11 @@ const NoComplexesMessage: React.FC<NoComplexesMessageProps> = ({
           />
         </svg>
       </IconWrapper>
-      <Title>コンプレックスがまだありません</Title>
-      <Subtitle>
-        最初のコンプレックスを登録して、自己分析を始めましょう。
-      </Subtitle>
+      <Title>{t('noComplexesTitle')}</Title>
+      <Subtitle>{t('noComplexesSubtitle')}</Subtitle>
       <ButtonWrapper>
         <Button variant="primary" onClick={onAddNewComplex}>
-          コンプレックスを登録する
+          {t('registerComplexButton')}
         </Button>
       </ButtonWrapper>
     </MessageWrapper>
diff --git a/frontend/src/i18n.ts b/frontend/src/i18n.ts
@@ -0,0 +1,47 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+// 翻訳JSONファイルのインポート
+import translationEN from './locales/en/translation.json';
+import translationJA from './locales/ja/translation.json';
+
+const resources = {
+  en: {
+    translation: translationEN,
+  },
+  ja: {
+    translation: translationJA,
+  },
+};
+
+i18n
+  .use(LanguageDetector) // ブラウザの言語設定を検出
+  .use(initReactI18next) // react-i18nextの初期化
+  .init({
+    resources,
+    fallbackLng: 'ja', // デフォルトの言語
+    // eslint-disable-next-line no-undef
+    debug: process.env.NODE_ENV === 'development', // 開発モード時のみデバッグ情報を出力
+
+    interpolation: {
+      escapeValue: false, // ReactはXSS対策済みなのでfalse
+    },
+
+    detection: {
+      // 言語検出の順序と方法
+      order: [
+        'querystring',
+        'cookie',
+        'localStorage',
+        'sessionStorage',
+        'navigator',
+        'htmlTag',
+        'path',
+        'subdomain',
+      ],
+      caches: ['localStorage', 'cookie'], // 検出された言語を保存する場所
+    },
+  });
+
+export default i18n;
diff --git a/frontend/src/locales/en/translation.json b/frontend/src/locales/en/translation.json
@@ -0,0 +1,15 @@
+{
+  "headerTitle": "Re:Fuel",
+  "addNewComplexButton": "Register New Complex",
+  "complexesPageTitle": "Your Complexes",
+  "complexesPageSubtitle": "Here you can review your registered complexes and take the first step to turn them into fuel for growth.",
+  "loading": "Now Loading...",
+  "errorPrefix": "Error: ",
+  "noComplexesTitle": "No Complexes Yet",
+  "noComplexesSubtitle": "Register your first complex and start your self-analysis.",
+  "registerComplexButton": "Register Complex",
+  "viewSetGoalsButton": "View/Set Goals",
+  "editButton": "Edit",
+  "deleteButton": "Delete",
+  "deleteConfirmation": "Are you sure you want to delete Complex ID {{id}}?"
+}
diff --git a/frontend/src/locales/ja/translation.json b/frontend/src/locales/ja/translation.json
@@ -0,0 +1,15 @@
+{
+  "headerTitle": "Re:Fuel",
+  "addNewComplexButton": "新しいコンプレックスを登録",
+  "complexesPageTitle": "あなたのコンプレックス",
+  "complexesPageSubtitle": "ここでは、あなたが登録したコンプレックスを確認し、それらを成長の糧に変えるための第一歩を踏み出せます。",
+  "loading": "読み込み中...",
+  "errorPrefix": "エラー: ",
+  "noComplexesTitle": "コンプレックスがまだありません",
+  "noComplexesSubtitle": "最初のコンプレックスを登録して、自己分析を始めましょう。",
+  "registerComplexButton": "コンプレックスを登録する",
+  "viewSetGoalsButton": "目標を見る/設定",
+  "editButton": "編集",
+  "deleteButton": "削除",
+  "deleteConfirmation": "コンプレックスID {{id}} を本当に削除しますか？"
+}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
@@ -5,6 +5,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { GlobalStyles } from './styles/GlobalStyles';
 import { ThemeProvider } from 'styled-components'; // 必要であれば
+import './i18n'; // i18nextの初期化
 
 // React Query Client
 const queryClient = new QueryClient();
diff --git a/frontend/src/pages/ComplexesPage.tsx b/frontend/src/pages/ComplexesPage.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
 import Header from '../components/common/molecules/Header';
 // import Footer from '../components/footer/Footer';
 import ComplexList from '../components/complexes/organisms/ComplexList';
@@ -102,6 +103,7 @@ const deleteComplexAPI = async (id: number): Promise<void> => {
 
 const ComplexesPage: React.FC = () => {
   const queryClient = useQueryClient();
+  const { t } = useTranslation(); // t関数とi18nインスタンスを取得
 
   // TanStack Query を使用してデータをフェッチ
   const {
@@ -120,7 +122,7 @@ const ComplexesPage: React.FC = () => {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['complexes'] }); // キャッシュを無効化して再フェッチ
       // eslint-disable-next-line no-undef
-      alert('コンプレックスを削除しました（ダミー）');
+      alert(t('deleteConfirmation', { id: '' }).replace('{{id}} ', '')); // 実際には削除されたIDを渡す
     },
     onError: (err) => {
       // eslint-disable-next-line no-undef
@@ -132,25 +134,25 @@ const ComplexesPage: React.FC = () => {
     console.log('新しいコンプレックスを登録');
     // TODO: React Routerを使用して登録ページへ遷移
     // eslint-disable-next-line no-undef
-    alert('コンプレックス登録画面へ（未実装）');
+    alert(t('registerComplexButton') + '画面へ（未実装）');
   };
 
   const handleViewGoals = (id: number) => {
     console.log(`目標を見る/設定: Complex ID ${id}`);
     // TODO: React Routerを使用して目標設定ページへ遷移
     // eslint-disable-next-line no-undef
-    alert(`コンプレックスID ${id} の目標設定画面へ（未実装）`);
+    alert(t('viewSetGoalsButton') + ` (ID: ${id}) 画面へ（未実装）`);
   };
 
   const handleEditComplex = (id: number) => {
     console.log(`編集: Complex ID ${id}`);
     // TODO: React Routerを使用して編集ページへ遷移
     // eslint-disable-next-line no-undef
-    alert(`コンプレックスID ${id} の編集画面へ（未実装）`);
+    alert(t('editButton') + ` (ID: ${id}) 画面へ（未実装）`);
   };
 
   const handleDeleteComplex = (id: number) => {
-    if (window.confirm(`コンプレックスID ${id} を本当に削除しますか？`)) {
+    if (window.confirm(t('deleteConfirmation', { id }))) {
       deleteMutation.mutate(id);
     }
   };
@@ -176,15 +178,18 @@ const ComplexesPage: React.FC = () => {
     return (
       <PageWrapper>
         <MainContent>
-          <PageTitle>読み込み中...</PageTitle>
+          <PageTitle>{t('loading')}</PageTitle>
         </MainContent>
       </PageWrapper>
     ); // 初期ローディング
   if (error)
     return (
       <PageWrapper>
         <MainContent>
-          <PageTitle>エラー: {error.message}</PageTitle>
+          <PageTitle>
+            {t('errorPrefix')}
+            {error.message}
+          </PageTitle>
         </MainContent>
       </PageWrapper>
     );
@@ -194,10 +199,8 @@ const ComplexesPage: React.FC = () => {
       <Header onAddNewComplex={handleAddNewComplex} />
       <MainContent>
         <PageTitleWrapper>
-          <PageTitle>あなたのコンプレックス</PageTitle>
-          <PageSubtitle>
-            ここでは、あなたが登録したコンプレックスを確認し、それらを成長の糧に変えるための第一歩を踏み出せます。
-          </PageSubtitle>
+          <PageTitle>{t('complexesPageTitle')}</PageTitle>
+          <PageSubtitle>{t('complexesPageSubtitle')}</PageSubtitle>
         </PageTitleWrapper>
         <ComplexList
           complexes={showDummyData ? complexes : []} // デモ用: TanStack Queryがデータを管理
