こんにちは、しゅんです。エンジニアになって28ヶ月が過ぎましたので今月も振り返りをしていきます。

※エンジニアになって27ヶ月目の記事も投稿しています。お時間ございましたらご覧ください。

エンジニアになって28ヶ月が経ちました

プロジェクト内・プロジェクト外・会社外の3部構成で振り返りをしていきます。

プロジェクト内

9月前半はNext.js13・TypeScriptの社内案件にアサインされていて、9月後半は2年くらい運用保守・追加機能開発をしているVue.js2・JavaScriptの案件に携わっていました。

Next.js13の案件はバタバタしているタイミングで入ったので、アサイン後はESLintやHuskyのような基盤周りのアップデートや他のメンバーが参画した時にすぐ実装に取り掛かれるようなドキュメントの整理等、どちらかというと裏方に徹していました。

Next.js13の案件は自分がメインではない久しぶりの案件だったので、Next.js13の案件をメインでハンドリングしている方の実装内容や方針を観察して自分との差分をインプットすることができました。やはり、他の人が方針を決めて進めているコードは参考になります。

Vue.jsの案件に関してはいつも4日（工数でいうと0.2）しか稼働できない制限があったのですが、今月だけ増やして稼働して欲しいという先方要望があったので2週間ほど使って大小含め6つの機能追加実装をしていました。

そういえば1年半くらいはReact・Next.jsのメインで携わってきた案件にフォーカスして月次報告を書いていたので、これを機に2年ほど掛け持ちしているVue.js・JavaScriptの案件はどういう方針で進めているのかまとめようと思います。

概要

toB向けサービスです。2020年にリリースされていて現在はフロント1名（筆者）とサーバー1名の計2名で運用保守をしています。とは言っても先方から実際に使ってみたフィードバックをいただき、追加機能として開発に落とし込むことが主になっています。

フロントdivができてすぐの案件だったらしく、モノレポで進めていてLaravelのコードの中にVue.jsがある感じになっています。TypeScriptでないのもその名残かもしれません。

Laravelのテンプレートファイルを介してVue.jsを触るのでLaravel（サーバー）⇔Blade（テンプレートファイル）⇔Vue.js（フロント）みたいなフローになっています。

蛇足ですが最近だとInertia.jsを使うとテンプレートファイルを介さなくても開発することができるようになりましたね。前回のメインで携わっていた案件で実際にInertia.jsに触れました。LaravelやRailsのようなサーバーフレームワークはそのようになっていくのでしょうか…

課題

• 当時は納期ギリギリ、突貫で作ったらしく、BladeファイルにUIとロジックのコードが溜まってしまっている

• 納品後デザイナーの入れ替わりが激しかったらしく、絶妙に使いまわせないUIが量産されている

• Vue.jsのコンポーネントがフラットに配置されている（ディレクトリ構成が何もない状態）

• Duskを使ったe2eテストが至る所にあってテストトロフィーに則していないことや、サーバー側にテスト実装が依存してしまっている

• 純粋にEOLのVue.js2を使っているのでリプレイスorバージョンアップデートも視野に入れる必要がある（PMに共有済み）

• JavaScriptなので型情報がなく改修時にデグレが発生する可能性がある

役割

先方は割と太客なので今後も関係は続きそうだが、先方予算の都合で開発工数を取ることができず、今後も細々と開発をするのだとしたら上記の負債を全て返済することが不可能だと思いました。

特にリプレイスorバージョンアップデートに関しては貰ってる工数だけで考えてみても絶望的で、せめてTypeScriptを入れようとComposition APIの導入を検討しましたが、自分のエゴで導入し中途半端にキメラを作るより、リプレイスorバージョンアップデートをするための準備期間として、次のエンジニアに託すための実装をすることにしました。

本当ならリプレイスorバージョンアップデートなんかはエンジニアとしてはやりがいのある美味しい部分だと思うのですが、現案件のフロントの開発責任者として堅実に案件進める責任があると思っているからです。

実装

• BladeにあるUIとロジックを剥がしてVue.jsに移行する。フロントとサーバーの境界をはっきりさせて責務を分ける。これをしないとF/EとB/Eにリポジトリ分割できない（APIでやりとりができない）

• PMに確認をとり、使い回せないコンポーネントを汎用コンポーネントに置き換えた（ている）。ある程度の幅・高さを許容し汎用コンポーネントを使って変更に強くする。

• Vue.jsのディレクトリ構成の見直しをする。アトミックデザインでいうところのatomsもない状態だったので適した粒度のコンポーネントを作成する。一旦は目的駆動でファイルを分けている。

• サーバーのテスト実装の負荷分散も兼ねてサーバーで実装しているDuskのe2eテストをフロントのjest-puppeteerにリプレイスする。できればテストトロフィーに即してe2eは減らしていきたい。

• Swaggerを導入しAPI ドキュメントを残す（これはサーバーに任せている）

• jsdocでドキュメント管理をする。自分だけにドメインを溜めない目的もある。

まだまだ取り組んでいることはありますが「100年後の荒野で笑うのは儂である必要はない」はまさしく今思っていることで、今のプロダクトをより品質の高いものに、長く存続するものにできるためなら黒子に徹しようと思っています。

プロジェクト外

key-front

key-frontについてです。もし概要を知りたい方がいましたら別途、紹介記事も投稿しています。お時間ございましたらご覧ください。

7月から継続して週一でkey-frontの開催をできています。今月はReact・Next.jsやテスト周りの話をしていました。まだ取り上げたい話題は沢山あるので、今まで以上に周りを巻き込めるようにしていきたいです。参加人数も増えてきています。

key-frontの議事録を残していますので、お時間ございましたらご覧ください。

Lightning Talk

LTに視聴者側として参加しました。GOのLTに関してはフロントdivのメンバーが参加する予定だったのですが、都合が悪く見れなくなったとのことでしたので代打で参加しました。

こちらの内容に関しては後日key-frontをゲリラ開催してメンバーに共有しています。今回のようにLT参加したらkey-frontでメンバーへの知見の共有する流れは作っていきたいです。自分がインプットしたことをアウトプットする場としても活用できるので当事者とメンバー各々に相乗効果が生まれると思いました。（メモ：後でメンバーにkey-frontの活用事例として共有する）

話をLTの内容に戻します。GOのフロントの技術選定が一年位前に携わった「JQuery→React・TypeScriptのフルリプレイス案件」と全く同じだったり、toC向けの案件だったのもあってパフォーマンス周りで「そういう実装があるのか」など目から鱗な話があって良い機会になりました。

不要なレンダリングを抑えるために「バッファリングする」ところは後で深掘りします。他社でも同じようなことを聞いてみたらパフォーマンス向上の観点でフロント・サーバーでやっているとのことでした。

また、LTのアンケートに回答すると抽選でGOのクーポンがもらえる仕組みになっていてLTのフィードバックをもらうために工夫しているんだなと参考になりました（ちなみに抽選に当たった！）

TypeScriptとアーキテクチャのLTにも参加しましたが長くなりそうなので割愛します。

会社外

業務委託

先月から新しい業務委託先でお世話になっています。具体的にはGASを使ったビジネス側の業務改善に着手しています。

元同僚の弟の会社ということもあり、気づいたら（元・現）同じ会社の人が入り乱れているので参画後すぐに馴染みやすかったです。

具体的な成果というものはまだないので次回あたりにまとめて取り上げたいと思います。

最後に

9末に元同僚エンジニア2名と山梨にキャンプしにいきました。

3回目ということもあり慣れてきました、キャンプ飯もお手のものですね。夜中豪雨になるアクシデントもありましたが、その前に運良く花火大会を見れたり、翌朝綺麗に富士山が見れたのはよかったです。お腹に余裕があればほうとう食べたかったですが今度の機会としておきます。

同じメンバーでサウナにも行くのですが、気分転換になってキャンプに比べれば手軽にいけるので来月も足を運ぼうと思います。「サウナイキタイ」みたいなアプリ作りたいですね。今後サウナハット買います。

今後も継続して月次報告をしていこうと思っています。（主に月の最終週に更新する予定です。）

駆け足になりましたが最後までご覧いただきありがとうございました。