otaly

プロジェクト概要

大手スポーツクラブスイミングスクール向けのWebアプリケーションの新規開発。
スタッフ用管理アプリケーション、生徒用アプリケーションを開発。
複数企業に展開し、ユーザーは10万人以上。

期間

2019年12月〜2022年10月

プロジェクトメンバー

PM：1名
PL：1名
バックエンドエンジニア：5名
フロントエンドエンジニア：2名

サブリーダー(フロントエンド側リーダー)を担当。

担当工程

• フロントエンド開発（Angular）
  • アーキテクチャの提案
  • 設計
  • CI構築
  • VRT(画面リグレッションテスト)導入
  • コーディング/デバッグ
  • Storybook実装
• REST API開発（Node.js）
  • コーディング/デバッグ
• テスト
  • UT/IT
  • E2Eテスト(Cypress)導入および実装
• 本番環境の構築（デプロイ）
• 運用

工夫したこと

• 拡張、変更しやすさ、テスタビリティを考慮したフロントエンド側アーキテクチャの提案。特に状態管理ライブラリの選定については導入当初手探りだったため、後々使用するライブラリを変更したとしても影響箇所が最小限になるようにした。

• フロントエンド側のコンポーネント分割ルールとしてContainer/Presentationパターンを採用。Atomic Designと比較検討し、再利用性を維持しつつある程度柔軟にコンポーネント化できるルールとした。

• reg-suit、storycapを使ったVRTを導入。Storybookに登録されたコンポーネントのスクリーンショットを保存し、コミット間の差分を検知する。CIで行い、レビュー時に不要な差分が出ていないことを確認できるようにした。

• Service Workerを使用し、画像や更新頻度の少ないデータをキャッシュすることでページ表示速度を向上した。

課題とそれに対する取り組み

• Twitterのようなタイムライン形式で無限スクロールを採用したUIだったため、ローディングすればするほど要素が増え、パフォーマンスが悪化していた。
  • 仮想スクロールを採用し画面内の要素のみレンダリングされるようにすることで解決。改善前はスマホで200件程度アイテムをロードした状態だと画面遷移に10秒以上かかっていたが、改善後は1秒以下に短縮。
• バックエンド側の開発環境構築方法がVirtualBox上に手動で構築する方法だったため、構築作業に数時間かかっていた。
  • Docker Composeを使って1コマンドでDB含む全ての環境が構築されるようにした。構築にかかる作業時間を10分程度に短縮。
• リリース時の基本動作確認作業に3人がかりで30~40分かかっており、多いときでリリースが月に2回ほどあるため、大きな工数がかかっていた。
  • E2Eテストによる自動化を提案・導入。使用ツールはドキュメントの充実度・ネット上の情報の多さなどを考慮してCypressを選択。大幅にリリースにかかる時間を削減。
• バックエンド側のUT実行時に、DB上のデータが変更されていると失敗することがあった。
  • UT実行の度にDBをリフレッシュするよう改修。

アピールポイント

開発者体験と開発効率の向上を常に意識している。
プロジェクト全体を見て、開発効率を落としているものは何か、開発者体験を妨げているものは何かを常に考えて、その解決方法を常に模索している。
具体的には、KPTなどのスプリント振り返りのタイミングで、現状の課題の共有と改善提案を行った。メンバーの中では最もNode.jsの知見があったのもあり、フロントエンド担当という枠にとらわれず、バックエンドなど周辺領域の課題の発見と改善にも取り組んだ。
開発者体験向上の例としては、バックエンド側にもESLintとPrettierを導入することでレビュー時のコーディングスタイルに関する指摘点を削減したり、フロントエンドへのVRT導入によるレビュー負荷削減などがある。
普段から様々な技術記事などを読んで新しい技術へのアンテナを張り、使えそうな技術等があればチームへ共有するよう心掛けている。

また、プロジェクト全体の改善方針の考案、主導を行った。
複数企業への展開に伴ってリリース方法やスケジューリングに問題が生じてきており、チームにとって大きな負荷となっていた。そのため、開発効率改善の面から開発ツール・フロー、情報整理に関する事項、そしてリリースの面ではリリース方法やスケジューリングに関しての事項など大小あわせて19個の改善案をPLに提案し、クライアントへの交渉を打診。クライアントも巻き込みつつ優先順位を決め、チームとして順次改善施策を実施した。

プロジェクトの新規参入者へのキャッチアップや、後輩社員への指導にも注力。学習コストを考えたライブラリ選定や、フロントエンド側のコンポーネント分けのルール、アーキテクチャに関するドキュメントなどを整えて、新規参入者の立ち上がりが早くなるよう意識した。

UI面では、ユーザビリティを意識した提案を行った。
実装する中で、デザイン段階ではわからない些細な使いづらさや違和感に気づき、外部デザイナーに対し改善提案を行った。常にユーザー目線での使用感を意識している。
デザインについては自主的に勉強もしており、デザイナーの意図を汲んだ実装ができるよう心掛けている。

プロジェクト概要

AIによる契約書の自動審査Webアプリケーションの新規開発。
AI部分以外のWebアプリケーションを開発。

期間

2019年7月〜2019年11月

担当

5人チームの中で、バックエンドからフロントエンドまで幅広く担当。

担当工程

• REST API開発（Django REST Framework）
  • コーディング/デバッグ
  • シーケンス図作成
  • インターフェース仕様書作成
• Webアプリケーション開発（Flask）
  • コーディング/デバッグ
• フロントエンド開発（jQuery）
  • コーディング/デバッグ
• テスト
• ログ方針資料作成
• 検証環境構築（Apache）

実績・取り組み

• メンバー間でパッケージバージョンが統一されておらず、環境差異により動作しないなどの問題が発生していたため、Python仮想環境を使うことでメンバーの開発環境を統一。環境による差異を無くし、開発効率を改善。
• JWT認証を使ったログイン機能の実装。JWTとは何かというレベルから調査、検証を行い、バックエンド側の認証機能、フロントエンド側のログイン機構の両方を実装した。
• ログ収集方針の策定、ログ収集機能の実装。どのような情報をログとして残すか・残さないかというログ収集方針から策定を行った。また、ログローテーションの実装も行い、ログファイルの容量が膨らまないよう圧縮してから保存する仕組みとした。