日本における留学生向け採用サイトの開発について
August 21, 2025 開発ノート 留学生 日本での生活 就職活動 アルバイト探し
Konnichiwork開発日誌：多言語対応と認証機能の格闘
はじめに
本日も、外国人留学生向けの求人情報サイト「Konnichiwork」の開発を進めました。特に、サイトの多言語対応とユーザー認証機能の強化に注力し、多くの課題を乗り越えました。
本日の主な実装機能
1. 多言語対応 (Internationalization - i18n) の再構築
Next.jsのApp Routerにおける多言語対応のベストプラクティスを追求し、既存のnext-i18nextからi18next、react-i18next、next-i18n-routerへの移行を行いました。
- 多言語ルーティング (
/\[locale]/構造): URLに言語コードを含む形式で、各言語のページにアクセスできるようになりました。ルートURL (/) からはデフォルト言語（英語）へ自動リダイレクトされます。 - UI文字列の翻訳: ヘッダー、フォーム、ページタイトルなど、サイトのUIに表示されるすべての文字列が、選択された言語に切り替わるようになりました。
- Google Cloud Translation APIによるコンテンツのリアルタイム翻訳: データベースに保存されている求人情報の内容（職種名、会社名、仕事内容など）が、ユーザーが選択した言語にリアルタイムで翻訳されて表示されるようになりました。これにより、データベースの言語に関わらず、ユーザーは自分の言語で求人情報を閲覧できます。
- 言語切り替え機能: ヘッダーに言語選択ボタンが設置され、クリック一つでサイトの表示言語を切り替えられるようになりました。
2. ユーザー認証とセッション管理
ユーザーが安全にサイトを利用できるよう、認証機能とセッション管理を強化しました。
Userモデルの追加: データベースにユーザー情報を保存するためのUserモデルを定義しました。- ユーザー登録API (
/api/register): 新規ユーザーがメールアドレスとパスワードで登録できるAPIを実装しました。パスワードはbcryptjsで安全にハッシュ化されます。 - ログインAPI (
/api/login): 登録済みユーザーがログインできるAPIを実装しました。ログイン成功時には、セキュアなHTTP-onlyクッキーでセッションを管理します。 - クッキーベースのセッション管理: getSession、setSession、clearSessionといったユーティリティ関数を実装し、セッションの状態を効率的に管理できるようになりました。
- 求人投稿ページの保護: ログインしていないユーザーが求人投稿ページ (/post-job) にアクセスしようとすると、自動的にログインページにリダイレクトされるようになりました。
3. お気に入り機能 (Favorite Jobs Feature)
ユーザーが気になる求人を保存できるお気に入り機能を追加しました。
- データベースリレーションの追加: UserとJobモデルの間に多対多のリレーションシップを構築し、ユーザーがお気に入りの求人を複数持てるようにしました。
- お気に入り追加/削除API (
/api/favorites/add,/api/favorites/remove): 求人をお気に入りに追加したり、お気に入りから削除したりするためのAPIを実装しました。 - お気に入り取得API (
/api/favorites/get): ログイン中のユーザーのお気に入り求人リストを取得するAPIを実装しました。 - 求人カードへの★アイコン表示: 各求人カードに★アイコンが表示され、クリックでお気に入り登録/解除ができるようになりました。
- マイページでの表示: ログイン後、「マイページ」にアクセスすると、お気に入り登録した求人一覧が表示されるようになりました。
本日の開発で得られた教訓と課題
- Next.js App Routerとi18nの複雑さ: next-i18nextからApp Router推奨のi18next/react-i18nextへの移行は、予想以上に多くの変更とデバッグを要しました。特に、サーバーコンポーネントとクライアントコンポーネント間での翻訳コンテキストの受け渡しや、params、headers()といったNext.jsの特殊なAPIの厳密な挙動が大きな課題となりました。
params.localeとheaders().get('cookie')の挙動: これらのAPIが非同期コンポーネント内でどのように振る舞うかについて、Next.jsの厳密なルールに何度も直面しました。最終的には、awaitの適切な使用や、引数の渡し方を調整することで解決できました。- ハイドレーションエラーの特定と解決: ブラウザ拡張機能によるHTMLの改変や、JSX内の微細な空白文字が原因で発生するハイドレーションエラーは、非常に特定が困難で、解決に時間を要しました。
replaceツールの限界と手動修正の重要性: 自動修正ツールであるreplaceが、複雑なコードブロックや特定のコンテキストでの変更に失敗することがありました。このような場合、手動での正確な修正が不可欠であることを再認識しました。- 環境変数とAPIキーの管理: Google Cloud Translation APIの統合では、APIキーの安全な管理と、gcloud CLIを通じた認証設定の重要性を再確認しました。
まとめ
本日の開発で、Konnichiworkは多言語対応、ユーザー認証、お気に入り機能といった主要な機能を網羅し、非常に堅牢な基盤を築くことができました。多くの困難なデバッグを乗り越え、最終的にすべての機能が期待通りに動作する状態に到達できたことは大きな成果です。
これで、Konnichiworkはユーザーにとってより魅力的で、機能的なサービスへと進化しました。