ID:61100さん

## プロジェクト概要 大規模案件において、チームリーダーとして24名のフロントエンドエンジニアを統括し、新規0→1立ち上げに携わりました。主な役割としては、技術選定、要件定義、基本設計、詳細設計、実装、単体テスト、結合テスト、総合テストを担当しました。使用技術としては、React.js、TypeScript、TailwindCSS、Recoil、Axios、Grpc、Jest、Firebase、Docker、Github Actions、Dependabotなどを活用し、開発環境の構築や品質管理、セキュリティ向上に貢献しました。また、デザイナーやエンジニア、クライアントとのコミュニケーションを円滑にし、プロジェクトの進行に貢献しました。 ## 取り組んだ課題 主な課題としては、大規模案件における開発の進行管理や、クライアントの要望に柔軟に対応することが挙げられます。そのため、チームリーダーとして、エンジニアやデザイナーとのコミュニケーションを密にし、プロジェクトの進捗状況を常に確認しながら、必要な修正や機能追加などの対応を行いました。また、新しい技術を積極的に導入することで、開発効率の向上や品質管理、セキュリティの向上に貢献しました。 ## 成果 プロジェクトの成功に貢献し、クライアントからの高い評価を得ることができました。具体的な成果としては、モノレポ環境のNxを使用したフロントエンド開発やDesign System、Chromatic(VRTツール)などの最新技術を活用した開発経験、テスト自動化ツールであるJestを使用した効率的なテストコードの作成や問題解決、パッケージ管理の脆弱性の検知のためのツールであるDependabotを活用したプロジェクトのセキュリティ向上、SwaggerなどのAPI通信に関する知識や経験を活かした開発などが挙げられます。 また、デザイナーやエンジニア、クライアントとの円滑なコミュニケーションにより、プロジェクトの進行に貢献しました。さらに、社外ミーティングにエンジニア代表として参加し、社外のエンジニアとのコミュニケーションも取ることができました。全体的に、チームメンバーとの協力と円滑なコミュニケーションにより、プロジェクトの成功に貢献しました。 使用技術や担当業務に関しては、フロントエンドに特化した技術やプロセスに詳しく、新規プロジェクトの立ち上げからリリースまでの一連の流れを担当しました。また、クライアントやデザイナー、エンジニアとのコミュニケーションや問題解決にも取り組んでおり、プロジェクトの全体像を把握していたことが大きな強みとなりました。

## プロジェクト概要 【目的、背景】 HRtechの開発。大手有名HRtechをリニューアルするためのフロントエンド開発に携わりました。 【規模感、チーム構成、担当した役割】 チーム構成は、運営メンバー4名、エンジニア3名、デザイナー2名、QA2名の計10名でした。私はエンジニアの1人として、フロントエンドの新規機能実装や不具合修正を担当しました。 【使用技術や開発環境等】 フロントエンドにはJavaScript、TypeScript、React、Redux、GraphQL、Apollo Client、styled-componentsを使用し、開発環境にはESlint、Prettier、Jest、Atomic Design、Chromatic、Github Actions、Github Packages、CI/CDを導入していました。 ## 取り組んだ課題 【どんな課題だったのか】 リニューアルのために新機能の実装や不具合修正を行いました。特に、リリース期間の短縮に努めるために、とある新機能のリリース目標で2人月かかるところを、1人月で完遂することを目標に臨みました。 【技術的なアプローチや工夫した点】 新機能のリリース目標を短縮するために、開発工数を削減することを目指しました。そのために、Reduxでの開発に取り組み、Atomic Designを導入することで開発の効率化を図りました。 【取り組みの成果】 目標としていた新機能のリリース期間の短縮に成功し、リリースをスムーズに進めることができました。また、Reduxの導入により、開発工数の削減やコードの再利用性の向上に貢献し、プロジェクトの成功に貢献しました。

## プロジェクト概要 【目的、背景】 会社内の開発チームでnpmパッケージの開発スキルを向上させるために、自身がlerna + yarn workspaces + Monorepo + TypeScriptを使ったnpmパッケージの開発を手がけました。 【規模感、チーム構成、担当した役割】 自身がエンジニアとして、開発の全フェーズを設計から実装、テストまで行い、運用・保守にも携わりました。また、運営メンバーには、自身を含め1名で構成されています。 【使用技術や開発環境等】 lerna + yarn workspaces + Monorepo + TypeScriptを使用したnpmパッケージの開発を行いました。また、セマンティックバージョン管理の自動化、ChromaticによるVRTの導入など、パッケージ開発に必要なスキルを習得しました。 ## 取り組んだ課題 【どんな課題だったのか】 自社開発チームにおいて、npmパッケージ開発に対するスキル不足が課題となっており、その解決を目的としました。 【技術的なアプローチや工夫した点】 npmパッケージ開発にあたり、以下のような工夫を行いました。 ・publish時に不要なファイルの排除 ・インストール時間の削減 ・CI時間の短縮 ・どの依存モジュールが容量を取っているかの定期的な確認 【取り組みの成果】 パッケージ化に成功し、社内での利用が始まりました。また、新しく入ってくるメンバーがすぐにボーディングができるようにドキュメントを細かくプロジェクトごとに分け、理解が進みやすいよう心掛けました。 自分の実績 【担当業務】 自身がフロントエンドエンジニアとして、以下の業務を担当しました。 ・新規0→1立ち上げ ・設計 ・実装 ・テスト ・運用・保守 ・セマンティックバージョン管理の自動化 ・ChromaticによるVRTの導入 【習得スキル】 npmパッケージの開発スキル、monorepoでのプロジェクト管理など、npmパッケージ開発に必要な知識

## プロジェクト概要 【目的、背景】 このプロジェクトの目的は、お客様向けのLineミニアプリにおけるキャンペーン管理機能の提供です。具体的には、管理画面からキャンペーンの設定や集計が可能なシステムを開発することが求められました。 【規模感、チーム構成、担当した役割】 このプロジェクトのチーム構成は、運営メンバー1名、エンジニア4名、デザイナー1名の6名体制でした。私はフロントエンドを担当し、0から1の立ち上げから設計・実装・保守運用まで行いました。また、バックエンドAPIの開発や単体テストも一部担当しました。 使【用技術や開発環境等】 フロントエンドでは、Vue.jsを採用し、Storybookでコンポーネント管理を行いました。バックエンドでは、Go/GinとGraphQLを用いてアーキテクチャはDDD/Clean architectureで実装し、単体テストも行いました。GitHub Actionsを使ってGoプロジェクトのCI/CD及びカバレッジ計測を行い、インフラはTerraformでドメイン作成、ロードバランサー作成、IP制限などを行いました。 ## 取り組んだ課題 【どんな課題だったのか】 このプロジェクトの課題は、管理画面でのキャンペーン管理機能をフロントエンドから設計・実装することでした。また、部署内にGraphQLのプロダクトが無かったことや、バックエンドもGo/GraphQLで揃えるため、新しい技術に取り組む必要がありました。 【技術的なアプローチや工夫した点】 フロントエンドでは、Atomic Designを用いたComponent開発や、CI/CDの自動化、テストツール(jest)を用いたテスト作成などの工夫をしました。バックエンドでは、Go/GinとGraphQLを用いてアーキテクチャはDDD/Clean architectureで実装し、単体テストも行いました。インフラでは、Terraformを用いてコードのインフラ化を行いました。 【取り組みの成果】 フロントエンドでは、Storybookを用いたコンポーネント開発やJestを使ったユニットテストを自身で担当し、フロントモックサーバーの実装にも取り組みました。また、GraphQLを初めて触ることになったため、自分自身で学習し、手を上げて新しい技術に取り組む姿勢を見せました。バックエンドについても、Go/Ginとgqlgenを使い、DDD/Clean Architectureで開発し、ユニットテストを実施しました。 プロジェクトの途中で、組織の事情によりプロジェクトが中断されたため、実際のリリースは行われていません。しかし、自分自身が新しい技術やアーキテクチャーに取り組むことで多くの知見を得ることができ、チーム全体が技術力向上につながる結果となったと考えています。

## プロジェクト概要 【目的、背景】 DX促進部署において、LineのミニアプリのLIFF機能を用いて、スタンプキャンペーンアプリを実装することが目的でした。スタンプキャンペーンは、顧客にとって参加しやすく、促進部署にとっては顧客の情報を収集しやすいため、広く行われています。 【規模感、チーム構成、担当した役割】 チーム構成は、運営メンバー1名、エンジニア4名、デザイナー1名の6名でした。フロントエンドと一部バックエンドAPIを担当し、フロントエンド部分は1人で担当しました。 【使用技術や開発環境等】 フロントエンド: Nuxt.js, Atomic Design, Jest バックエンド: Go/Gin, DDD/クリーンアーキテクチャー, Unitテスト その他: Google Analytics ## 取り組んだ課題 【どんな課題だったのか】 今回のプロジェクトにおける課題は、スタンプキャンペーンアプリの開発でした。具体的には、以下のような課題がありました。 ・フロントエンド、バックエンド両方での0→1の立ち上げ ・技術選定 ・スタンプカードのデザイン、スタンプの管理方法の決定 ・複数の販促からの流入経路を取得するため、Google Analyticsの導入 【技術的なアプローチや工夫した点】 技術的なアプローチとして、以下のような点に注力しました。 フロントエンド部分では、Atomic Designを用いてコンポーネントを設計し、Jestを用いた単体テストを実施しました。また、CI/CDの導入によって、自動的にlint・Jestテスト・デプロイが行われるようにし、保守運用を容易にしました。 バックエンドAPIは、Go/Ginを用いてDDD/クリーンアーキテクチャーで実装し、Unitテストも行いました。 Google Analyticsの導入により、スタンプキャンペーンアプリの流入経路を正確に把握し、販促において有効な施策を打つことができました。また、フロントエンドから一部バックエンドAPIまで1人で担当し、自己完結型の開発を行いました。新しい技術やツールの導入も積極的に行い、開発効率や品質の向上に努めました。 このプロジェクトを通じて、フロントエンドの一人での担当や、新しい技術の導入、自己完結型の開発に取り組むことができました。また、Google Analyticsの導入による計測や、テストツールを用いたテスト作成といった、よりプロダクトの品質向上につながる取り組みを行いました。

## プロジェクト概要 このプロジェクトは、ベトナムの保育施設向けに子どもの健康管理および業務管理ICTサービスのバックエンドを担当したものでした。プロダクトはグローバルに展開することが予定されており、スケーラブルな設計を意識して開発が行われました。また、オフショアのベトナムのエンジニアと英語でコミュニケーションをとり、現地のベトナムのチームから保育施設の課題を英語でヒアリングし、その課題を解決するように努めました。自身は、バックエンドのAPI開発を担当しました。 ## 取り組んだ課題 このプロジェクトで取り組んだ課題は、以下のとおりです。 ・グローバルに展開されるプロダクトであるため、スケーラブルな設計が求められる ・ベトナムのオフショアエンジニアと英語でコミュニケーションをとり、現地のチームから保育施設の課題をヒアリングする ・Nest.jsを使ってバックエンドのAPI開発を行う ## 技術的なアプローチや工夫した点 このプロジェクトでの技術的なアプローチや工夫した点は、以下のとおりです。 ・DDD/クリーンアーキテクチャーを用いて、スケーラブルに対応できるように設計した ・ベトナムのオフショアエンジニアと英語でコミュニケーションをとり、現地のチームから保育施設の課題をヒアリングし、その課題を解決するように努めた ## 取り組みの成果 このプロジェクトでの取り組みの成果は、以下のとおりです。 グローバルに展開するプロダクトのバックエンドを担当し、スケーラブルな設計ができるよう意識した ベトナムのオフショアエンジニアと英語でコミュニケーションをとり、開発に関する理解度を合わせることに力を注ぎました。また、現地のチームから保育施設の課題についてヒアリングし、その課題を解決するために努めました。ヒアリングの際には、英語でのコミュニケーション能力が求められたため、英語力の向上にも取り組みました。 バックエンドのAPI開発においては、Nest.jsを使用しました。開発者が引き継ぎをしやすく、拡張性が高く、保守性が高いという理由から、Nest.jsを採用しました。自身が一人でAPIを開発することになりましたが、一日2時間程度の稼働で1ヶ月で一人で8個以上のAPIを作ることができました。 このプロジェクトでは、グローバルに展開予定のプロダクトであったため、スケーラブルに対応できるように設計しました。DDD/クリーンアーキテクチャーを用いて設計し、保守性を高めるよう意識しました。

## プロジェクト概要 【目的、背景】 社内プロダクトのAuth0での認証基板統一を行うことで、セキュリティ性の向上と開発効率の改善を図ることを目的としていた。 【規模感、チーム構成、担当した役割】 テスター(エンジニア)9名とQA2名の計11名で構成されたチームにおいて、全4プロダクトのQAを担当した。 ## 取り組んだ課題 【どんな課題だったのか】 複数のプロダクトが開発されており、それぞれの機能やAPIの認証基板統一に向けたQAが必要であった。テストケースの設計やテスト結果の管理に加え、開発メンバーとの調整が必要であった。 【技術的なアプローチや工夫した点】 テストケースは最低でも100以上作成することで、各プロダクトの機能やAPIに対するQAを実施することができた。また、テストケースの重要度や区分を明確に設定することで、テスターが期待値が実測値とあっているかを確認することができた。さらに、不具合管理票を用意することで、問題点を明確にし、改善のための対策を講じることができた。 【取り組みの成果】 各プロダクトの認証基板の統一が実現され、セキュリティ性の向上と開発効率の改善につながった。QAにより不具合の早期発見や、改善点の洗い出しを行うことができ、品質の向上に貢献した。

インフルエンサーマッチングプラットフォーム開発 ## プロジェクト概要 　インフルエンサーマッチングプラットフォームの開発を担当しました。障害対応や、CircleCIの整備、InstagramAPIのインサイト情報を元にフロントエンドで実装、テストコードの実装とMock化などの業務を担当しました。 ## 取り組んだ課題 　参画したタイミングで障害が発生していたため、素早くキャッチアップを行い、問題を運営と共有しながら対処することが必要でした。また、CircleCIの整備を担当し、30以上のエラーを解決して正常に運用できるようにしました。その過程でテストコードを書き、仕様の理解を進めると同時に外部APIのテストをMOCK化するなどの経験を積みました。 ## 取り組みの成果 　障害発生時には、素早くキャッチアップを行い、問題を運営と共有しながら対処することができました。また、CircleCIの整備を担当し、30以上のエラーを解決して正常に運用できるようにしました。テストコードの実装とMock化により、外部APIのテストをより効率的に行うことができました。 ## 使用技術や開発環境等 　言語: JavaScript 　フレームワーク: React.js, Node.js 　開発環境: VSCode 　CI/CD: CircleCI ## チーム構成 　運営メンバー：7名 　エンジニア：3名 　デザイナー：1名 　案件全体人数：11名

## プロジェクト概要 InstagramAPIを使った分析ツールの新規開発の立ち上げのSPA開発のフロントエンドをNest.jsとNext.jsを用いて担当しました。プロジェクトチームは7.5名で、運営メンバー3名、エンジニア3.5名、デザイナー1名でした。 ## 取り組んだ課題 このプロジェクトの課題は、バックエンド2人でフロントが1.5人という少ないリソースでの開発でした。そのため、主にフロントを担当しました。また、フロントのコードレビューを行い、styled-components使い方のレビューやAtomic Designを用いたコンポーネント設計のレビューなども担当しました。さらに、デザイナーとDesign System設計を一緒に行い、デザイナーとエンジニア間でにコンテキストの一致を図るよう努めました。 ## 技術的なアプローチや工夫した点 立ち上げから参画し、ディレクトリ構成やフロントの設計を他のエンジニアと一緒に行いました。InstagramAPIから取れたデータを元にグラフAPIを使って分析結果を可視化することを担当しました。Atomic Designを使ってコンポーネント設計を行い、TypeScriptを導入しstrict trueで開発を行いました。また、一部Node(Nest.js)でのAPI開発も担当しました。 ## 取り組みの成果 ディレクトリ構成やフロントの設計業務を行い、InstagramAPIから取れたデータを元にグラフAPIを使って分析結果を可視化することができました。また、Atomic Designを使ったコンポーネント設計やTypeScriptを導入したことで、コードの品質向上を実現しました。デザイナーとDesign System設計を一緒に行い、デザイナーとエンジニア間でにコンテキストの一致を図ることができ、円滑な開発を進めることができました。

## プロジェクト概要 ・目的、背景 インフルエンサーによるtoC向けプレスリリース配信サービスのシステム開発 ・規模感、チーム構成、担当した役割 チーム構成：運営メンバー4名、エンジニア4名、デザイナー1名。自身はフロントエンド・バックエンド開発を担当。 案件全体人数：7名。 ・使用技術や開発環境等 使用技術：API、Ruby on Rails、JavaScript、React、Redux、HTML/CSS、Jenkins、DDD 開発環境：GitHub、Backlog、Notion、Slack、AWS ## 取り組んだ課題 ・どんな課題だったのか バックエンドがRailsに依存していたため、API化する必要があった。また、リリース後に出戻り修正が多々あったため、リリースプロセスを改善する必要があった。 ・技術的なアプローチや工夫した点 参画当初からAPI化に取り組み、開発した機能を全てAPI化した。リリースプロセスについては、リリースブランチ管理書を作成し、リリース内容と運営メンバーの確認状況を記載して出戻りを防ぐようルール化した。DB移行にあたり、プロダクトの全アクター毎のテストケースを一人で書きテストを運営メンバーと実施し、バグ改善に取り組んだ。アーキテクチャーにはDDDを採用し、実装時には単一方向での実装を意識した。また、レビュー時には変数の付け方など第三者がみた時にイメージできるように注視しながら実装を行った。 ・取り組みの成果 バックエンドのAPI化により、システムの拡張性が高まった。リリースプロセスの改善により、出戻りが大幅に減少した。DB移行にあたりテストケースの作成により、バグ改善に取り組むことができた。アーキテクチャーの採用により、開発作業が効率化された。Jenkinsを用いたデプロイ作業により、開発チームの負荷を軽減することができた。