mikana0918

＃プロジェクト概要 スタートアップ企業にて、PoCが終わった段階からの製品版プロダクトの開発。 主にフロントエンドのリードや外注管理を行った。 ＃チーム情報 【概要】開発環境の平準化：パッケージマネジャ、エディタ設定、Linter/Formatterの整備、Makefileによるプロジェクトコマンドの管理etc 【打ち手・使用した技術】 - プロジェクトに必要なバックエンド、フロントエンドの開発環境を全て平準化した - PythonはBlackやisortなどの設定ファイルの設定も行った - フロントエンドはゼロからPrettier/Stylelint/Eslintの設定を行い、vscodeの設定ファイルなども作成 - CI/CDへの組み込みも行った 【概要】Sentryの導入 【どのような機能の開発・実装か】アプリケーションのエラー管理・監視ができていなかった 【打ち手・使用した技術】自分から提案をしてSentryを導入した。全てのアプリケーションに導入した。 【概要】Playwrightの導入および基盤e2eコード・パイプライン整備 【どのような機能の開発・実装か】E2Eテスト基盤の作成をした。テストコードも自前で全て書いた。 【打ち手・使用した技術】 - プライベートクラウド版の提供の際に、スモークテストを自動化したいという要望があった - 通常のweb版でもデグレチェックにQA専任の人材がいないため、極力自動化する必要があった - 使用経験のあったPlaywrightを提案し、導入した - CI/CDはstaging環境にコードがプッシュされた時に、AWSで複数環境のCodebuildのジョブを走らせて、各種環境をenvで注入して、自社コードおよびプライベートクラウド版環境全てでもチェックが走るような大掛かりなピタゴラスイッチを作った 【概要】IAMユーザー作成の自動化を行った 【どのような機能の開発・実装か】IAMユーザーの作成をAWS CDKレポジトリに名前を配列に入れるだけで終わるようにした 【打ち手・使用した技術】 - CTO/VPoEの時間がないせいでAWSアカウントが渡せなかった - ポリシー管理、どの人に何の権限を渡せばいいのかわからなくなっていた - IAM周りがIaCできてなかったので全てコードに落とした - GithubActionsを使ってCDK diffしたコメントを自動で吐かせて、あとは勝手に名前を入れたらslackにアカウント情報を自動で通知するパイプラインやラムダ関数などもIaCで作った 【概要】フロントエンドの新規開発のプロジェクト作成 【どのような機能の開発・実装か】コンポーネント設計、Storybook作成、ディレクトリ構成などの基盤を全て作成した 【打ち手・使用した技術】 - インターン生や知見のない人だけで作られたコードを全て捨てないと生産性が上がらないことを話をして、効率のいいコンポーネント構成をスクラッチで起こして、1ヶ月でbeta版のリリースにこぎつけた - コンポーネントに対する権限認可モジュールの作成を行った - バックエンドでカバーできていなかったのでVue.js2系のScoped slotを作成して、権限コンポーネントを作成し、適切な権限の場合のみ遷移・表示がされるロジックを書いた。 【概要】PrivateCloud版リリースのためのクロスアカウントCI/CDパイプラインの構築（AWS・github） 【どのような機能の開発・実装か】web版と別途外部の営業会社に委託しているプライベートクラウド版のリリースを自動化したくなった。具体的には委託業者のAWSへクロスアカウントパイプラインを作成して、自分たちのECRレジストリに登録されたDocker imageを配布する方法をとった。フロントエンドはサーバーレスを使っていたなど条件が違うこともあったので、AWS Codepipeline/Codebuildなどで全て書き直した。 【打ち手・使用した技術】 - 要件だけもらったが、どうすればいいかわからなかったのでVPoEと一緒にAWSに聞きにいった - AWS CDKを使って全てコード化した - Dockerビルド・タグ付、pushをするCIスクリプトを書いた(Github Actions) - AWS Codepipelineの発火をlatestのタグがついていて、かつ最新のバージョンにインクリメントされた場合にのみ、private cloudのクロスアカウントパイプラインが発火するように設定した - 1ヶ月くらいかけて1人で作り切った 【概要】マイクロフロントエンド化 【どのような機能の開発・実装か】Vue2エコシステムが負債化している認識があった。採用でもVue2をやりたいという人がいないような気がしていたところだった。Reactに少しずつ移りたかったが、技術スタックのせいで気軽に移動ができなかった。 【打ち手・使用した技術】 - 漸進的にアップデートするためにマイクロフロントエンドアーキテクチャの調査をした - IcestarkというAlibabaエコシステムを使ってVue2 + Vue3 + ReactのアプリケーションのPoCを作成した - 認証はAuth0を使っていたので、認証状態の管理ロジックなども改めて書き直した - コードが少なかったので2ヶ月くらいでReact/Vue3に移し始められるようになった 【発揮したバリュー】設計・開発をスケールのできる基盤にしてほしいとのことで、当初ご相談いただきました。フロントエンドのコンポーネント設計から、StoryBook構築、E2Eテストの導入を行いました。オフショア開発のマネジメント業務も発生したため、英語を使った対応を行いました。Python・FastAPIについては、業務では初めての経験でしたが、キャッチアップ。AWS CDKについてもインフラのコード化については座学程度の知識がなかったものの、ここでも休日を学習に当てるなどしてキャッチアップ。迅速かつ堅牢なフロントエンド基盤およびDevOps基盤の作成に貢献しました。製品版リリースまで時間がない中で、高いベロシティを出して、プロダクトのデリバリーを無事成功させました。