Wajob - 在日外国人向け求職プラットフォームグローバル人材と日本の企業をつなぐ架け橋

公開日：2025年9月 | 著者：技術チーム



Vue.js 3 Django TypeScript E2E Testing
✨ プロジェクト概要
Wajobは、日本で働く外国人のために設計された求職支援プラットフォームです。本プラットフォームはデュアルエントリー設計を採用し、求職者と企業の両方に完全な求職・採用ソリューションを提供します。夢の仕事を探している求職者でも、グローバル人材を求めている企業でも、Wajobはプロフェッショナルで効率的なサービスを提供します。

📸 システムインターフェース
🏠 ホームページ - デュアルエントリー設計
Wajob ホームページ
明確なデュアルエントリー設計：求職者は仕事を検索でき、企業は求人を投稿できます

ホームページはモダンなデザインスタイルを採用しており、ユーザーは一目でプラットフォームのコア機能を確認できます。紫のグラデーション背景と明確なカードレイアウトにより、ユーザーは自分に適したエントリーを素早く選択できます。

求人検索エリア
強力な求人検索機能、キーワード、スキル、企業検索をサポート

🌐 多言語対応
言語切替機能
英語と日本語の二か国語切替をサポート、様々なユーザーのニーズに対応

プラットフォームは完全な国際化サポートを提供し、ユーザーは英語と日本語の間で自由に切り替えることができます。言語設定は自動的にローカルストレージに保存され、シームレスなユーザーエクスペリエンスを提供します。

📝 ユーザー登録とログイン
登録ページ
シンプルな登録プロセス、求職者と企業の2種類のアカウントタイプをサポート

ログインページ
安全なログインシステム、JWT Token認証を採用

🔑 求職者機能 - 求人検索
求人検索ページ
求職者ログイン後の求人検索ページ、複数条件フィルタリングと高度な検索をサポート

🏢 企業機能 - 管理ダッシュボード
企業ダッシュボード
企業管理ダッシュボード、採用データと最新の応募をリアルタイムで表示

✅ テスト検証 - ログインフロー
ログインページ - 空白状態
E2Eテストにおけるログインページの初期状態

ログインページ - 入力状態
E2Eテストによるフォーム検証とエラー処理の検証

🚫 フレンドリーなエラー処理
404ページ
美しい404エラーページ、ホームページへの迅速な戻りオプションを提供

🧪 E2Eテストレポート
Playwrightを使用して完全なE2Eテストフレームワークを構築し、システムの各主要機能が厳格に検証されることを保証しています。以下は、テストでカバーされている主要モジュールです：

✅ ホームページ機能テスト
ホームページの読み込み、デュアルエントリーカードの表示、言語切替、ナビゲーション機能など5つのテストケースをカバーし、すべて合格。

✅ 認証フローテスト
求職者と企業の登録、ログイン、ログアウトフロー、エラー処理、ユーザーメニュー機能をカバーする計7つのテストケース。

✅ ナビゲーションとルーティングテスト
ルートガード、権限制御、404ページ処理、ユーザータイプ分離など7つのテストケースを検証。

✅ UI/UXレスポンシブテスト
デスクトップ、タブレット、モバイルデバイスのレスポンシブデザイン、ページタイトル、ビジュアル要素、アクセシビリティなど13のテストケース。

📊 テスト統計データ
総テストケース：32件

合格率：100% (32/32)

テストカバレッジ範囲：

ホームページ機能：5件のテスト ✅
認証フロー：7件のテスト ✅
ナビゲーションルーティング：7件のテスト ✅
UI/UX：13件のテスト ✅
テストレポート：npx playwright show-reportコマンドで詳細なHTMLレポートを閲覧でき、すべてのテストステップのスクリーンショットと実行ログが含まれます。

🎯 コア機能の特徴
🔐 安全なユーザー認証
JWTトークンデュアルトークンメカニズム（アクセストークン+リフレッシュトークン）を採用し、ユーザーデータの安全性を確保。求職者と企業の2種類のユーザータイプをサポートし、それぞれ専用の機能と権限を持ちます。

🎨 モダンなUI/UX
Element Plusコンポーネントライブラリをベースに、一貫したビジュアルエクスペリエンスを提供。レスポンシブデザインがデスクトップ、タブレット、モバイルデバイスを完璧にサポートし、どのデバイスでもスムーズに使用できることを保証。

🌍 多言語国際化
英語と日本語を完全にサポートし、すべてのページ、フォーム、エラーメッセージ、ヒントテキストを含みます。言語設定は自動的に保存され、国際ユーザーに母国語のようなエクスペリエンスを提供。

🛡️ 完全な権限制御
Vue Routerのルートガードに基づき、きめ細かいページアクセス制御を実現。未ログインユーザーは自動的にログインページにリダイレクトされ、異なるユーザータイプはそれぞれ専用の機能エリアにアクセスします。

💼 求職者機能モジュール
求人検索とフィルタリング、詳細な求人情報表示、オンライン履歴書の作成と管理、応募進捗追跡、個人プロフィール管理など、包括的な求職サポート。

🏢 企業機能モジュール
求人投稿と管理、応募者の履歴書閲覧、応募ステータス管理、企業情報表示、採用プロセス追跡など、完全な採用管理ツール。

🏗️ 技術アーキテクチャ
フロントエンド技術スタック
フレームワーク：Vue.js 3 - Composition APIを採用し、より良いコード組織と型推論を提供
言語：TypeScript - 完全な型定義により、コード品質と開発効率を向上
UIフレームワーク：Element Plus - エンタープライズグレードのUIコンポーネントライブラリ
状態管理：Pinia - Vue 3公式推奨の状態管理ソリューション
ルーティング：Vue Router - ルートガードと権限制御をサポート
国際化：Vue I18n - 多言語サポート
ビルドツール：Vite - 高速な開発サーバーとビルドツール
バックエンド技術スタック
フレームワーク：Django 4.2 + Django REST Framework
データベース：SQLite（開発環境）/ PostgreSQL（本番環境）
認証：JWT (Simple JWT) - トークンベースの認証メカニズム
APIドキュメント：Swagger / OpenAPI - 自動生成されるAPIドキュメント
テストと品質保証
E2Eテスト：Playwright - 32のテストケース、100%の合格率
テストカバレッジ：ホームページ機能、認証フロー、ナビゲーションルーティング、UI/UXレスポンシブデザイン
自動化テスト：複数ブラウザテストとテストレポート生成をサポート
📊 プロジェクト成果
32/32
E2Eテスト合格率
100%
テストカバレッジ成功率
2
サポート言語
🎉 重要なマイルストーン
2025年9月：すべてのE2Eテストの修正を完了し、100%の合格率を達成。ログインテスト、ルートリダイレクト、要素セレクタなどの重要な問題を修正し、システムの安定性を大幅に向上。

2025年8月：コア機能の開発を完了し、ユーザー認証、求人管理、応募システム、国際化サポートなどを含む。完全なPlaywrightテストフレームワークを構築し、32の包括的なテストケースを作成。

🚀 システムの特徴

1. デュアルエントリー分離設計
   求職者と企業は完全に独立した機能エントリーと操作フローを持ちます。システムはユーザータイプの自動識別とルート制御により、各ユーザーが対応する機能モジュールのみにアクセスできるようにし、プロフェッショナルな使用体験を提供します。

2. 完全な権限管理
   JWTトークンベースの認証メカニズムと、フロントエンドのルートガードおよびバックエンドの権限チェックを組み合わせ、多層のセキュリティ保護を実現。未承認のアクセスは自動的にインターセプトされ、適切なページにリダイレクトされます。

3. 優れたユーザーエクスペリエンス
   ホームページの読み込み、フォーム検証、エラー処理からページ遷移まで、すべてのステップが細心の注意を払って設計されています。明確な視覚的フィードバックとフレンドリーなエラーメッセージを提供し、ユーザーは常にシステムの状態を把握できます。

4. レスポンシブデザイン
   さまざまなデバイスと画面サイズを完璧にサポート。デスクトップコンピューター、タブレット、スマートフォンのどれを使用していても、スムーズな操作体験を得ることができます。すべてのUI要素はレスポンシブに最適化されています。

5. 高品質なコード
   TypeScriptを使用した型安全な開発を採用し、Vue 3 Composition APIのベストプラクティスに従います。完全なE2Eテストカバレッジにより、コード品質とシステムの安定性を保証します。

🔮 今後の計画
📱 モバイルアプリ
ネイティブiOSおよびAndroidアプリを開発し、より良いモバイルエクスペリエンスを提供。

🤖 AIインテリジェントマッチング
機械学習アルゴリズムを導入し、求人と求職者のインテリジェントマッチング推薦を実現。

💬 リアルタイム通信
インスタントチャット機能を追加し、求職者と企業が直接コミュニケーションできるようにします。

📊 データ分析
企業向けに採用データ分析と統計レポート機能を提供。

💡 技術ハイライト
モジュラーアーキテクチャ：フロントエンドとバックエンドが完全に分離され、フロントエンドはコンポーネントベースの開発を採用し、バックエンドはDjango Appsモジュラー設計を採用し、保守と拡張が容易。

API設計：RESTful API設計規範、統一されたレスポンス形式、完全なエラー処理メカニズム。すべてのAPIエンドポイントは十分にテストされています。

状態管理：Piniaを使用してグローバル状態管理を行い、ユーザー認証状態、言語設定などを含みます。状態の変化はlocalStorageに自動的に同期されます。

ルート設計：明確なルート構造、ネストされたルート、動的ルート、ルートメタ情報をサポート。すべての保護ルートは権限検証を経ています。

テスト戦略：E2Eテストを使用して主要なユーザーフローをカバーし、ユーザーの視点からシステム機能を検証することを保証。テストレポートは自動的に生成され、スクリーンショットと詳細なログが含まれます。

🎓 まとめ
Wajobは、機能が完全で技術が先進的な求職プラットフォームです。在日外国人に便利な求職ツールを提供するだけでなく、企業に効率的な採用管理システムも提供します。プロジェクトはモダンな技術スタックを採用し、コード品質とユーザーエクスペリエンスを重視しており、フルスタック開発の優れた実践例です。

完全なE2Eテストカバレッジと継続的なコード最適化により、システムの安定性と信頼性を保証しています。多言語サポートとレスポンシブデザインにより、プラットフォームはより広範なユーザー層にサービスを提供できます。

このプロジェクトに興味がある方、または技術的な詳細についてもっと知りたい方は、GitHubリポジトリをご覧いただくか、技術チームまでお問い合わせください！