s_sasaki_0529

# プロジェクト概要 運用中の某マニュアル作成・共有システムサービス(以下本サービス) の開発、保守、運用などを、2018年から現在(2023年) まで継続的に行っています。 本サービスのクライアントには、Webフロントエンドのほか、iOS / Android / Windows などがありますが、私自身はサーバサイド(`Ruby`+ `Ruby on Rails`) 及びフロントエンド(`JavaScript`(`TypeScript`) + `Vue.js`) のみを担当してきました。 参画当初はサーバーサイドを主に担当していましたが、現在ではフロントエンド及び自動テスト全般のリードを担当し、機能開発よりも開発者の生産性やアプリケーションの拡張性を高めるための基盤整備に注力しています。 以降、本サービスでの(私が主に担当した)取り組みを紹介します。(順不同) # Vue 2 から Vue 3 へのマイグレーションの単独実施 中〜大規模アプリケーションである本サービスのフロントエンドは、`Vue.js` の 2 系で開発していましたが、将来的な拡張性や、`TypeScript` との相性、パフォーマンスなどを考慮して、3 系へのマイグレーション作業を単独で実施しました。 実施の詳細プロセスなどは以下開発ブログを参照ください。 [機能開発を止めずに、500コンポーネント規模の Vue 3 移行を完了させた開発プロセス](https://studist.tech/migration-to-vue-3-4b4c4fad0324) # JavaScript から TypeScript へのマイグレーションの単独実施 元々 `JavaScript` のみで開発されていた本サービスを、開発体験や安全性の向上のために、 `TypeScript` に全面移行しました。 詳細プロセスなどは以下開発ブログをご参照ください。(前述の `Vue 3` の話と似ていますが、時系列上はこちらが先) [機能開発を止めずに、6万行の TypeScript 移行を完了させた開発プロセス](https://studist.tech/typescript-migration-90b99b7c8974) # フロントエンドのアーキテクチャのリードと継続的な改善 直近では本サービスのフロントエンドのリードを主に行っています。 前述の `Vue 3` 及び `TypeScript` へのマイグレーションを始め、依存ライブラリの整理、アーキテクチャの定期的な見直し、自動テストの強化などを行っています。 アーキテクチャに関しては、特に開発者の開発体験と生産性を重要視しており、開発メンバーが不安なく、快適に開発業務を行えることを第一としてきました。 本サービスの詳細的なアーキテクチャや品質担保の取り組みについては以下登壇資料を参照ください。 [TeachmeBizを支えるフロントエンドのアーキテクチャと品質担保](https://www.slideshare.net/shingosasaki3/teachmebiz-188542240) 依存ライブラリの整理については、一部ではありましたが、以下開発ブログを参照ください。 [Storybook 6.1 へのアップグレートと、既存ストーリーを全リプレイスした話](https://studist.tech/upgrade-to-storybook-6-42da05471e7d) [webpack 5 にアップグレードしました](https://studist.tech/migration-webpack-from-4-to-5-3df31da8e7a2) # IE11 の漸進的なサポート終了のリード 本サービスは(現状でも) `IE 11` をサポートブラウザに含んでいます。しかし、 `IE` をサポートすることフロントエンジニアはもちろん、サポートエンジニアや QA エンジニアなど、組織内の各所での疲弊を伴うものでした。形式上 `IE` のサポートは続けなければならないが、 `IE` をサポートした開発をこれ以上続けたくない。一見矛盾した思いを実現する施策の考案から実施までを単独で行いました。 詳細プロセスなどは以下ブログをご参照ください。 [IE のサポートを終了せずに IE のサポートを終了した話](https://studist.tech/dropping-support-for-ie11-abbd36882c61) # サーバーサイドとフロントエンドの疎結合化 本サービスはサーバサイドとフロントエンドがモノレポ状態となっており、サーバーサイドとフロントエンドが密結合な状態でした。本番環境はそれでも良いとして、開発環境が密結合になっていると、フロントエンドの開発をしたいだけなのにサーバーサイドを含めアプリケーション全体をローカル環境上に構築しなければならないという課題がありました。 始めこそ大きな問題はありませんでしたが、マイクロサービスの導入が増えるにつれ、環境構築手順が煩雑になったり、不要なサーバーの起動によるリソースの消費や、必要なデータを都度作成する不便さなどが目立つようになってきました。 そのような課題感から、思い切って開発環境上での疎結合化を提案、実現しました。 詳細プロセスなどは以下ブログをご参照ください。 [Rails と密なフロントエンド開発環境を分離するための3つの工夫](https://studist.tech/new-dx-for-frontend-f8acdfcc0d16) # CI/CD のコストを計測しながら段階的に削減 本サービスの `CI/CD` には、 `GitHub Actions` 及び `CircleCI` を使用しています。特に `CircleCI` では実行コストの高いワークフローを動かしており、それが開発者体験の低下及び金銭的コストの増加に繋がっていました。そこで、現状のワークフローを整理、可視化した上で、いくつかのステップを経て大幅な改善を行いました。 詳細プロセスなどは以下ブログをご参照ください。 [CircleCIの消費クレジットとRSpecの実行時間を半減させるために行った9の手順](https://studist.tech/how-to-reduce-circleci-credits-ac81de4857d8)