ID:70601さん

[組織] 全体 6人 フロントエンド チーム 5人 [役割] 開発メンバー ■プロジェクト内容 toC向け オンライン配達アプリのwebアプリケーション (リプレース 開発 / 改修) ■担当箇所 ● クレジットカードトークンを用いた決済画面 ● カード CRUD画面 ● トップ画面 レイアウト ● サイドバー ● Markdown, next.js を用いたプラポリ表示 / 管理画面 ● その他 運用 / 保守 ■実績 新規開発するにあたって以下のような疑問点があった。 ● Reactの知識不足 ● バックエンドが外部 ■工夫した点 - Reactの知見があまりなかったため、業務外での自主学習、勉強会の参加、自主的に教材を購入し学習し、短期間で知識を蓄えた。

[組織] 全体 10人 フロントエンド チーム 5人 [役割] 開発メンバー ■プロジェクト内容 某大手自転車メーカーの toC向けサービス(新規機能開発) ■担当箇所 ● 外部連携データ管理画面 ● ダッシュボード画面 ● データ管理テーブル実装 ● テーブルCRUD機能 ● その他 運用 / 保守 ■実績 新規開発するにあたって以下のような疑問点があった。 ● バックエンドの実装が追いついていない ● 他サービスとの連携が多く仕様が煩雑 ■工夫した点 - プロジェクトにおいて、モック環境の構築に関して、mswを活用し、さらに自前でFakerを導入して、モック環境内でのAPI通信を実現しました。この取り組みにより、開発プロセスにおけるリアルなAPIデータの利用を待たずに、効率的な開発とテストを行えるようにしました。

[組織] 全体 34人 フロントエンド チーム 10人 [役割] チームリーダー ■プロジェクト内容 オンライン医療サービスのtoC、 toB向けサービス(新規開発)。4つ(内1つwebview)のwebアプリケーションの新規開発をのフロントチームリーダーを担当。要件定義、基本設計などの上流から、工数見積もり、フロントエンドメンバーのタスク分け、フロントエンドの業務全てを担当。PM不在案件だったため、顧客折衝も行い顧客からのリアルな意見を実装に落とし込みました。 ■担当箇所 ● ログイン画面 ● スケジュール画面 ● 患者カルテ画面 ● ダッシュボード画面 ● ビデオ通話画面 ● Subscriptionを活用したChat画面 ● 患者一覧画面 ● その他実装箇所多数 ■実績 新規開発するにあたって以下のような疑問点があった。 ● 開発規模に対して短い開発期間 ● PMが不在: ● デザインがラフワイヤーしかない: ● コードの書き方がバラバラで可読性が悪い: ● フロントエンジニアが不足: ● 同時並行で4つのWEBアプリケーションを作成: ● 開発環境が複数存在しデプロイの管理が煩雑: ● AWSサービスを初めて操作 上記の課題がある中で、提案ベースでの要件定義と基本設計を実施し、ビジネスの方向性を明確化。プロジェクトの明確な方向性を確保するため、リーダーシップを発揮した。デザインのラフがワイヤーベースでしか存在しなかったため、デザインチームと緊密に連携し、モックベースの提案を積極的実施。また、メンバーには統一されたコーディングガイドラインを共有し、コード品質の向上を販促。チームのリソースを最適に配置し、必要なタスクにフォーカスし、プライオリティを設定し、リソースを適切に割り当て。開発環境とデプロイプロセスを最適化し、管理の効率化を試みた。AWSの学習とトレーニングを通じて、必要なスキルを獲得。 ■工夫した点 - 開発工数を少しでも下げるよう、ボトムアップ設計でコンポーネントを作成し。各画面で流用できるものは徹底的に洗い出した。 - 相手のリテラシーを考慮して、極力わかりやすい形で提案することを心がけた。仕様が複雑な箇所はmockを作成、Figmaを用いて図を作成し説明を行なった。お客様からは説明が非常にわかりやすいとありがたいお言葉を頂戴した。 - AWSを用いたサービスの開発を新規で担当するのは初めてであったため、過去の社内案件や、調査を徹底。

[組織] 全体 2人 フロントエンド チーム 1人 [役割] チームリーダー ■プロジェクト内容 社内向け開発研修アプリケーションの作成。WebSocketを用いたリアルタイムチャットアプリ実装のフロントエンドの業務全てを担当。バックエンドでは指導をいただきながら簡単なAPIを実装。 ■担当箇所 ● ログイン画面 ● チャット画面 ● ルーム CRUD画面 ● アカウントCRUD画面 ■実績 新規開発するにあたって以下のような疑問点があった。 ● プロジェクトの方向性が未確定である ● 社内でのReact研修アプリが存在しない 社内プロジェクトにおいて、通常管理者画面の開発が多い傾向があり、今回は比較的高度な難易度を持つチャット画面を教材として選択しました。しかしながら、デザインなどのガイドラインは存在せず、そのためにチャットアプリを搭載している他のサービスのUI/UXを参考にし、Tailwind CSSを用いて実装しました。設計においては、bulletproof-reactを参考にし、コンポーネントが状態を管理しない設計を採用し、親コンポーネントが状態管理を行う方針を徹底しました。 ■工夫した点 - 他のサービスやシステムを利用してみて、どういったUIUX設計がされているのかを観察し、システムに落とし込んだ。 - 比較的新しくReactのベストプラクティスとされているbulletproof-reactを採用。 - axiosを用いたAPIの毛湯方を行う際に、RepositoryFactoryパターンを採用し、処理の共通化と可読性、メンテナンス性を考慮した。

[組織] 全体 11人 フロントエンド チーム 4人 [役割] チームリーダー ■プロジェクト内容 新規自社プロジェクトMaaS 配車/シェアサイクル 共通基盤、フロント動態管理画面の実装。要件定義、基本設計などの上流から、WEBアプリケーションの画面設計、アーキテクチャ、ライブラリ選定。フロントメンバーのタスク分け、フロントエンドの業務全てを担当 ■担当箇所 ● 画面テンプレート作成 ● サイドバー ● ログイン画面 ● 車両一覧テーブル画面 / CRUD ■実績 新規開発プロジェクトにおいて、以下の疑問点が発生しました ● 製品のコンセプトが不明瞭であった ● 社内プロジェクトとして初めての取り組みであった ● Next.js 13に関する参考記事が限られていた このような状況から、製品の模索が漠然としており、それに伴う要件定義が難航しました。また、当社内でのシェアサイクルや動態管理に関する経験が乏しいため、主要な企業のUI/UXに関する研究や、同様のビジネスを展開している企業のサービスを分析しました。さらに、他社のサービスを実際に利用して調査を行い、洞察を得る努力を行いました。 ■工夫した点 - デザイン案がないため、社内のデザイングループと密に連携をとり、コードで実現可能かの会議を何度も重ねた - 開発メンバーが殆ど新卒メンバーで構成されていたため、開発者別でコンポーネントの粒度やアーキテクチャの矛盾が生じないようbulletproof-reactを採用

[組織] 全体 13人 フロントエンド チーム 4人 [役割] フロントエンド チームリーダー ■プロジェクト内容 観光関連のtoC、 toB向けサービス(新規開発)。要件定義、基本設計などの上流から、工数見積もり、フロントエンドメンバーのタスク分け、フロントエンドの業務全てを担当 ■実績 新規開発プロジェクトにおいて、以下の疑問点が発生しました ● 要件が確定していない ● リソースが制約されている ● 十分な見積もりが行えていない これらの課題に対処するため、要件定義の段階から積極的なヒアリングを行い、管理サイトにどのような機能を組み込むべきかを明確にし、その後の設計および実装に反映させました。要件が定まらないことから、余暇時間を活用してUI/UXの向上に取り組みました。また、効率的な実装を目指し、Mantineという注目のライブラリを導入しました。さらに、コードの品質を向上させるために、ESlint、Prettier、Huskyを使用してコードフォーマットの自動化を実現し、レビューのプロセスを改善しました。 チーム開発の効率性向上とメンテナンス容易性の向上を図るために、Jestを用いて単体テストおよび結合テストを実施しました。また、Atomic Designの原則を導入し、プロジェクトの設計をより堅牢にし、破綻を防ぐ努力をしました。 ■工夫した点 - axiosを用いたAPI結合を行う際に、OpenAPIからclientコードを自動生成するOrvalを採用mockのデータ生成にはfakerを採用し、よりリアルデータに近い形でテストを実施

[組織] 全体 2人 アーキテクト1人 開発者1人 [役割] 開発者 ■プロジェクト内容 ROS2を用いたロボット制御 RaspbberyPiを活用したWi-Fiのハンドオーバーを定量的な品質測定、評価を実施 ■実績 新規開発プロジェクトにおいて、以下の疑問点が発生しました ● ROS2の知見を有した人材がいない ● 各処理プロセスでのオーバーヘッド 以下の資料作成 ・システム構成図 ・シーケンス図 オーバーヘッドの問題に対しては、10ms単位での測定を希望されていたため、NTPサーバーを利用し各端末での時間を一致させ、内部処理の負荷がかからないよう調節いたしました。 ■工夫した点 - Pythonの知見がなかったため、自主的な自己学習を実施いたしました。また、Ros2 , RaspberryPiを活用した業務が初めてであったため、基礎的な部分で工数を使わないよう、自身でIoTデバイスを購入し自宅で事前学習をいたしました。その結果、業務が円滑に進み、継続的な案件確保に貢献いたしました。

■プロジェクト内容 不動産業界のtoC、 toB向けサービス(新規開発)。UI/UX刷新、新規機能実装に基づき、javascript から TypeScriptへのリプレースを担当。その他ライブラリの選定、レビュー、実装を担当。 ■実績 既存開発プロジェクトにおいて、以下の疑問点が発生しました ● コードの品質 ● 要件が確定していない ● 大幅な仕様変更 これらの課題に対処するため、コードの品質向上に焦点を当てました。まず、ts-migrateを用いてTypeScriptへのリプレース作業を通じて、静的型チェックの導入によりコードの信頼性を向上させました。同時に、要件が確定していない課題に対処するために、柔軟性のあるコーディングアプローチを採用し、変更に対する適応性を高めました。 ■工夫した点 - ts-migrateを導入し、ディレクトリ別にリプレースを実施