ID:68851さん

プロジェクト概要 既存のUWPアプリケーションをChromiumベースのWebアプリケーションへ段階的に移行するモダナイゼーションプロジェクトに参画しました。 React / Next.js / TypeScriptを用いたWebクライアントを担当し、ファイルサービスをはじめとした既存機能のWeb化や、PINコード認証などの機能開発を行いました。 画面実装だけでなく、担当機能における既存UWPの仕様調査、Chromium・UWP・サーバーとの連携仕様の検討、API設計、設計ドキュメント作成、実装、テスト、不具合調査まで一連の開発を担当しました。 役割・体制 自身のポジションと役割 フロントエンドエンジニアとして、主に以下を担当しました。 * React / Next.js / TypeScriptを用いたWebクライアントの設計・開発・テスト * 既存UWPアプリケーションの仕様調査 * Chromium・UWP・サーバーとの連携仕様の検討・調整 * API仕様の検討・定義 * シーケンス図などを用いた設計ドキュメントの作成 * ブラウザ上での状態管理・データ永続化に関する設計・実装 * 不具合や問い合わせに対する原因調査・切り分け * 各技術領域の担当エンジニアとの仕様調整 チーム規模と構成 フロントエンド、Chromium、UWP、サーバー、デザインなど、複数の技術領域を担当するメンバーと連携して開発を行いました。 担当機能が複数の領域にまたがる場合には、それぞれの担当エンジニアと仕様や役割分担について認識を合わせながら設計・実装を進めました。 背景・課題 既存UWPアプリケーションをChromiumベースのWebアプリケーションへ段階的に移行するプロジェクトにおいて、ファイルサービスをはじめとした既存機能のWeb化や、PINコード認証などの機能開発を担当しました。 プロジェクト全体の基本的なアーキテクチャやWeb化の方針は参画時点ですでに決定されていましたが、個々の機能を実装する際には、既存UWPでの動作やサーバーとの通信、Chromiumとの連携などを確認し、Webクライアントとしてどのように実現するかを機能単位で検討する必要がありました。 特に、ブラウザ単体では完結できない処理や既存システムとの連携が必要な機能については、Chromium・UWP・サーバーなど各領域の担当者と仕様を確認しながら、Web側の実装方針やAPI、処理の流れを具体化して開発を進めました。 また、実装を進める中で新たな制約や仕様上の問題が判明することもあり、その場合は関係する担当者と相談しながら、必要に応じて仕様や実現方法を見直しました。 実際の取り組み 担当機能の仕様調査・設計 機能開発にあたっては、既存UWPの動作や関連システムとの連携方法を調査し、Webクライアントで実現するための方針を整理しました。 フロントエンドだけでは判断できない部分については、Chromium・UWP・サーバーなど各領域の担当者と相談し、役割分担や連携方法を確認しながら仕様を具体化しました。 必要に応じてAPI仕様や処理の流れをシーケンス図などのドキュメントとして整理し、チーム内で認識を合わせながら開発を進めました。 事前の調査だけでは判明しない問題については、実装を進める中で原因や制約を整理し、関係者と相談したうえで仕様や実現方法を見直しました。 Webクライアント開発 React / Next.js / TypeScriptを用いて、以下をはじめとする機能の開発を担当しました。 * ファイルサービス機能のWeb化 * 端末管理機能（登録・解除） * 利用時間帯制限 * アプリ固有動作設定 * サービス設定 * ショートカット作成 * PINコードログイン また、Web化に伴って必要となった複数タブ間の状態共有ではBroadcastChannel APIやlocalStorageを利用し、ブラウザ上で保持する必要があるデータについてはIndexedDBを利用するなど、ブラウザの特性を考慮した実装を行いました。 不具合調査・問い合わせ対応 不具合や問い合わせが発生した際には、フロントエンドのコードだけを確認するのではなく、ブラウザの通信ログや関連する処理を確認し、Webクライアント・Chromium・UWP・サーバーのどの領域に原因があるのかを切り分けました。 自身の担当領域だけでは解決できない場合には、各領域の担当エンジニアに調査結果を共有して連携し、原因特定や仕様確認、修正につなげました。 成果・価値 既存UWPアプリケーションの各機能を段階的にWeb化し、Chromium・ネイティブアプリ・サーバーと連携するWebクライアントの機能開発に貢献しました。 Web化した機能について、カスタマー部門から「顧客へ提案しやすくなった」というフィードバックを得るなど、プロダクトの提供価値向上にもつながりました。 また、複数の技術領域にまたがる機能開発や不具合調査を通じて、フロントエンドの実装だけで完結せず、関連システムの仕様を調査し、各領域のエンジニアと連携しながら問題を解決する経験を積みました。 使用技術 * TypeScript * React * Next.js * Redux * IndexedDB * BroadcastChannel API * localStorage * Git * Chromium * UWP

国税システムの次世代開発プロジェクトに参画し、詳細設計・開発・テストを担当。画面設計書や内部インターフェース設計書、オンライン処理設計書、DBアクセス処理設計書、バッチ処理設計書などの詳細設計書を作成し、HTML・CSS・Vue.jsを用いた画面モックを作成。Vue.jsを用いた新規画面を5画面（検索・一覧画面4画面と帳票一覧画面）実装し、合計10000ステップを超える規模を担当。ブラウザチームのサブリーダーとして後輩の作業フォローや成果物レビューも実施した。

年金関連システムの更改案件において結合テスト・総合テスト・運用保守を担当。SQLのタイムアウトエラー事象の調査から顧客報告資料の作成まで故障対応を実施し、結合テスト・総合テスト仕様書の作成とテスト実施、本番マシン作業、大規模システムのパッチ適用テスト（500本を超えるJUnit走行）を行った。顧客と直接コミュニケーションを取り、システム説明や不具合事象の報告を行った。