Webアプリのリプレイスにあたって、採用・開発の整備

リプレース開発 - Tech Lead

要約

1人目のエンジニアから開発基盤と組織を構築し、1年半に及ぶ開発プロジェクトを推進しました。 現在はテックリードとして、開発を中心に全てのレビューとインフラ・バックエンドのリードをしています。 開発当初は基盤構築・テストフェーズは大量のバグ解決・リリースフェーズはAndroid審査を行う上で、Expoのバージョン対応に向き合う。運用フェーズは問い合わせ対応に対応し、全てのスタックとフェーズに向き合い解決に尽力しました。 現在は少しプロダクトが安定してきているので、さらなる安定化や改善を目指す上での仕様調査/システム要件作成が主となっています。

プロダクト

社内のオペレーションアプリケーションとToCのモバイルアプリ

概要

• 【開発体制構築と調整】
• ・6人を採用し、2大プロジェクトチームの開発体制構築
• ・採用資料の作成
• ・開発体制の構築（マネージメントレスな業務委託を採用し、役割ベースで開発。定義した役割で採用・評価し、それ以外の開発を自身が巻き取る(短期・中期的に有効だと考えている）


• 【基盤構築】
• ・Webアプリ構築(NextJS, Graphql, Nestjs, gRPC, Prisma)
• ・モバイルアプリ構築(React Native, Expo)
• ・Webアプリ/モバイルのリリース環境の構築(CI, Workload Identity)
• ・認証基盤構築(Firebase Authentication(Email/Google認証/SMS認証/アクセストークン検証/リフレッシュトークン))
• ・IaC基盤(Terraform Cloud, checkov)の構築。Terraform moduleを利用したdev,stg,prod環境の構築
• ・共通コンポーネント基盤の作成（Github Package, React）。複数のフロント環境を想定とした、共通コンポーネントの作成
• ・エラーの検知基盤作成(Sentry)
• ・アプリ環境のインフラ指標を閲覧出来るダッシュボード環境の構築(Cloud Monitoring)
• ・パフォーマンス監視環境の作成(Cloud Monitroing Alert)
• ・ローカルで全てが完結するローカル開発環境の構築（Firebase Emulatorをフル活用）
• ・アプリ環境に対して、WAFの導入(Cloud Armor)
• ・VPNの構築(Tailscale). VPN経由でCloudsqlのアクセスを行う
• ・安全なデータ保全を目指し、PRマージ後に自動的にデータ反映を行う環境を構築（GCS, CloudRun Function)
• ・BI環境の構築（Metabase）
• ・dev,stg,prod環境で必要なキー管理の構築(Vaultwarden, GKE Autopilot)。VPNのみアクセス出来ることで、セキュリティを向上している
• ・Gitops導入に向けたArgocdの構築(helm, Terraform, Argocd Image Updater). 継続的デリバリーをするものはArgocd、その他はTerraformとする
• ・BFF経由でAPIを呼び出す外形監視の構築（ArgoCD, kustomize, cronjob, Graphql) CDはGitOpsを利用
• ・Android審査(expo52, 内部・クローズテスト・製品版)
• ・マイクロサービス間のトランザクションを実装（Sagaパターン）
• ・GraphQLでのファイルアップロードの開発/署名付きURLの発行
• ・Twilio・Hubspotとの外部APIデータ連携


• 【開発保守】
• ・GKE Clusterのバックアップ構築(Backup for GKE)
• ・StorybookのWeb化（ログインを必須とするためFirebase Auhtenticationを挟み、Firebase Hostingを利用. GCSはS3と異なってOrigin元IPを制御できない)
• ・アプリの強制アップデートの実装（Firebase Remote Config)
• ・モバイル開発環境の効率化（モバイルのプレビュー環境・EAS updateの構築)
• ・MQの構築(NestJS, BullMQ, k8s, ArgoCD)
• ・VPNの構築(Wireguard)
• ・プロダクトの運用手順書作成
• ・Worker環境構築(PubSub/GKE/KEDA/ArgoCD)
• ・Android16KB対応

課題

• 1. 1人の状態からメンバーを集めること
• 2. 複雑なドメイン知識を必要とするシステムの構築
• 3. 型無し、テスト無しのJavascriptで構築されていること
• 4. グローバルなプロダクト展開なので、タイムゾーンやi18nにしてもより設計を考慮する必要がある
• 5. 初期リリース時はエンジニア側で物事を決めると基本的にブレーキがかかりすぎる

対策

• 1. 業務委託, 正社員を採用し、スケール可能な開発体制を少しづつ構築
• 2. テーブル定義の設計などを通して、フロントをモックで開発を行いながら地道な要件詰めから開始(モックはCloudrunを利用したPR毎に生成できるプレビュー環境を用意）
• 3. 型有り、テスト有りでTypescriptでフルリプレース
• 4. 予め、複数のタイムゾーンや言語などグローバルな設計で考えて構築。
• 5. POの意思決定を介在させることとアクセル役を行う。

実績

• [LINK] 採用資料を作成。

  疎結合なシステムを目指し、全ての実装に携わる。

• [LINK] アーキテクト資料を作成

  BEはDBスキーマに忠実に従い、BFFでFEから要求される必要なものをスキーマベースで取得する仕組みを構築

• [LINK] DBアクセス計画資料を作成

習得したスキル

• ・開発者間のコミュニケーション（難しい問題には理解をできる限り揃えた上で3人以上で話すことがベスト）
• ・BEの疎結合化を目的としたResolver・data-loaderを活用したBFFの構築方法
• ・最新のReact Nativeの開発手法(Expo router, Eas build, Eas Update)
• ・ArgoCDを用いたGitOps
• ・CIの細かい作り込み(CloudBuildは利用せず、複数環境のデプロイを全てCIで行った)
• ・アプリ運用

SaaSシステムの開発保守

看板開発 - FEリード - 業務委託

要約

副業として従事。STGのインフラ環境の構築、FEをリードしました。主に複雑なUIの開発・i18nの導入など開発リードを行いました。

プロダクト

B to B アプリケーション, 管理画面

概要

• 【基盤構築】
• ・NextJSでフルスクラッチ


• 【開発保守】
• ・STG環境の構築(k8s, cloudrun, terraform)
• ・Cloudrunを利用したプレビュー環境の構築
• ・Railsの開発保守(CRUD, Sidekiq)
• ・LPの構築(SSR)
• ・Figmaを用いたリデザイン
• ・外部サービスとの結合をした処理（Twillo, Stripe）
• ・フロント画面の開発

課題

• 1. Railsが難しくて分からない。

対策

• 1. Chatgptと相談しながら、キャッチアップして支障がない程度に改善

習得したスキル

• ・Railsを読み書きが出来るようになり、BEの開発保守を担当することが出来た
• ・非同期処理を多用している(sidekiq)サービスの事もあり、非同期JOBの理解が進んだ
• ・GCPのWorkload identityの理解が進み、安全性の高いシステムを構築することが出来た
• ・複雑なUI（React DnDやReact Chart, Infinite Load）の構築経験が出来た

転職理由

慕っていたマネージャーの退職が決まったため

Webアプリのリプレイス・保守

スクラム開発 - フルスタックエンジニア - 業務委託

要約

開発メンバーとして従事し、Webアプリケーションの保守/リプレイスに加えて、CI環境含むE2E環境の構築、共通UIコンポーネントライブラリ(Github Package)の開発など凝った機能に携わりました。

プロダクト

B to C アプリケーション（人材サービス）

概要

• 【基盤構築】
• ・NuxtからNextリプレイス
• ・BFFのリファクタリング(オニオンアーキテクチャ)
• ・コンポーネント, Storybookの構築(Atomic Design)
• ・共通UIコンポーネントライブラリの構築(Github package)
• ・E2E環境の構築(CI, Playwright)


• 【開発保守】
• ・UIコンポーネントの開発
• ・gRPCサーバの保守
• ・ローカル環境で完結する開発環境の構築
• ・運用保守(CDK, ECS)

課題

• 1. フロントは2つのサービスで構築されているので、コードが重複している
• 2. ライブラリ保守が難航している
• 3. stateの肥大化
• 4. CSSの複雑化
• 5. 構造の複雑化(オニオンアーキテクチャ, grpc/jsとgrpc/webの混合)
• 6. E2E周りが保守されていない
• 7. ローカル開発環境で簡易に開発できない

対策

• 1. Github Packageを活用して、コンポーネントは共通コンポーネントから利用する
• 2. ライブラリはNext標準、あるいはなるべく使わない方針
• 3. SWRを利用することで、大幅にstateを削除
• 4. CSSが複雑だと想定されるものは、mui/materialを利用
• 5. grpc/jsに統一、オニオンアーキテクチャを外す
• 6. E2EのCI環境作成, Playwrightを利用することで、大幅な簡略化
• 7. Seed環境、Docker環境の構築による開発環境の充実化

習得したスキル

• ・CSSの理解度が向上し、より汎用性のあるコンポーネントを書くことが出来るようになった
• ・gRPCに触れたことがなかったが、業務に支障がない程度に理解出来るようになった
• ・ライブラリのメンテナンス力が向上し、プロダクトの保守性の向上により貢献出来るようになった
• ・Nextの理解度が向上し、骨子を作成することが出来るようになった
• ・共通ライブラリを作成する上でのスキルを身につけることができた
• ・OIDC周りの認証を実装する上での理解を身につけることができた
• ・インフラ開発を通して、CDKをより理解出来るようになった

転職理由

価値を感じにくい細かなコードの設計に大きく時間を割く実態があり、別の組織で挑戦したかったため

IoT事業におけるWeb/モバイルアプリの新規開発・保守

1人 - フルスタックエンジニア - 業務委託

要約

1人で全て担当し、0から会社として主力のWebサービスを作り上げることが出来た

プロダクト

B to C アプリケーション（スマートロック機能を用いたサービス）

概要

• 【基盤構築】
• ・フロントの開発(Vue2, Typescript, Express)
• ・サーバサイドの開発(Express, Typescript)
• ・決済周りの開発（Stripe, Line Pay）
• ・バッチ処理の開発（Lambda）
• ・インフラ環境の構築(ElasticBeansTalk)
• ・ビルド環境の構築(Jenkins)


• 【開発保守】
• ・IoT管理画面のios/Android保守(React Native)
• ・IoT管理画面のWeb画面保守(Ruby Sinatra)

習得したスキル

• ・Vue/Typescriptのスキルが向上し、効率的にWEB開発をすることが出来るようになった
• ・モバイル開発における基本的な保守を学ぶことができた
• ・認証やあらゆるWEBの機能の実装を通して、WEB開発を網羅することができた

転職理由

1人で大体の開発は行ったが、安定性のあるチーム開発をよりやりたかったため

IoTプラットフォームの保守・Webアプリの新規開発

看板開発 - フルスタックエンジニア - PL - 正社員

要約

0からオペレーション用WEB開発、及びNoSqlを用いたスケールアウトに貢献した

プロダクト

IoTプラットフォーム & 社内オペレーション効率化Webサービス

概要

• 【基盤構築】
• ・フロントエンドの開発（Vue2）
• ・サーバサイドの開発(Express)
• ・インフラ環境の構築(Terraform, ECS)
• ・E2E環境の開発(CI)
• ・ローカル環境の構築
• ・BI環境の構築(Redash)
• ・ETLの構築（Python)


• 【開発保守】
• ・主にデバイスから上がるデータ処理等のサーバサイドの開発(Express)
• ・スケールアウト（Mysql -> Dynamodb)

課題

• 1. オペレーション業務がスプレッドシートでなされている
• 2. 接続デバイスの増加により、レスポンスタイムの増大
• 3. オペレーション作業の増大

対策

• 1. 既存のデータはETLでMysqlに流し込み、WEBアプリを構築し効率化に貢献した
• 2. ログ系のテーブルは全てDynamodbに移行
• 3. BI環境を構築し、実績報告や作業ステータスの可視化を実現した

習得したスキル

• ・Dockerのスキルが向上し、マイクロサービスを構築することが出来るようになった
• ・Terraformを習得し、新規インフラ全てをコード化した。
• ・データ処理を通して、テーブル設計・複雑なSQLを書くことが出来るようになった
• ・Vueには触れたことがなかったが、0からシステムを構築することが出来るようになった
• ・イベント検知や、データ処理などIoTシステムの基本的な構築方法を身に着けることが出来るようになった

転職理由

働きながら建築の専門学校に行くために、融通が効く働き方に変える必要があったため

分散DBを用いたWebアプリの開発

スクラム開発 - フルスタックエンジニア - 正社員

要約

0からWEB開発を行った

プロダクト

分散DBを用いたWebサービス(PoC)

概要

• 【基盤構築】
• ・フロントエンドの開発（HTML, CSS）
• ・サーバサイドの開発（Express）
• ・インフラの開発（Azure)
• ・パフォーマンス測定(Jmeter)

習得したスキル

• ・0からシステムを作り、WEBの基礎を学ぶことが出来た

転職理由

会社が資金ショートしたため

DWHの保守

ウォータフォール開発 - DBエンジニア - 正社員

要約

ペターデータを持つDBを保守した

プロダクト

分析データベースの保守

概要

• 【開発保守】
• ・DWHの保守(SQL, Terraform, Shellscript）

習得したスキル

• ・エクセルでのテストを学び、丁寧な開発を学ぶ事が出来た

転職理由

コードを書かない仕組みが構築されていて、将来に危機感を感じたため

趣味だった建築を学ぶため

Raspberry piに一時期はまったため