ストーリー(特級呪物ができるまで)
1. 設計フェーズ：共通処理の効率化を目指して
私たちの開発チームのAさんとBさんが集まって、新たに制作する予定のXXXWebサイトについて話し合いました。
Aさんが提案してくれました。「XXXWebサイトでは、無限スクロールを多用する予定ですよね。しかし、設計を深く考えずにただ実装に取り組んでしまうと、同じようなコードを何度も書く羽目になり、結果的には冗長で非効率な（WETな）コードが出来上がりそうです。なにか、共通部分をうまく抽出して効率的に扱う方法はありませんか？」
Bさんがその提案に対して、「Vue.jsのmixinが使えるんじゃないかと思います。これはCSSの「mixin, include」に似た機能で、異なるコンポーネントで共通のコードを整理し、一つのファイルにまとめることができるんです。」と返答しました。
Aさんはこのアイデアに明らかに興味を引かれたようでした。「それなら、オブジェクト指向でいうところの継承のような形で、コードを使い回せるというわけですね？」
Bさんの肯定的な返答を受けて、Aさんは満足げにうなずき、「それなら、是非mixinを試してみましょう！」と提案しました。
2. 実装フェーズ：mixinでの共通処理の実現
実装の途中、Bさんは一つの問題に直面しました。あるページでは、無限スクロールの前にあらかじめ10件のデータを取得するという要件がありました。そこでBさんは、この要件に対応できるようにmixinの共通処理を修正しました。
そしてAさんにコードレビューを依頼し、Bさんは「mixinファイルを変更したんですが、動作には問題なさそうです。プルリクエストを作成しますね。」と報告しました。
Aさんも問題が無いと確認し、「mixinファイルの修正、問題なさそうですね。プルリクエストを承認します。」と応答しました。
その後も開発進行中に、AさんとBさんは同じような事態に数回遭遇しましたが、その都度mixinファイルを修正して解決しました。
3. リリースフェーズ：スムーズなリリース
そしてついに、私たちはXXXWebサイトを問題なくリリースすることができました。
4. メンテナンスフェーズ：mixinを活用した修正作業（3ヶ月後）
3ヶ月後、新たにチームに加わったCさんが、XXXWebサイトのYYYページの修正を担当することになりました。CさんはAさんとBさんにヒアリングしたところ無限スクロールのmixinファイルを修正することでページの修正が簡単にできると話していたことを思い出しました。
そこでCさんは、mixinファイルを修正し、YYYページを更新し、デプロイを実行しました。
5. 修正後のデプロイ：予期せぬ問題
しかし、全てが順調というわけではありませんでした。YYYページは問題なく動作したものの、他のZZZページがエラーページを表示してしまうという、予期せぬ問題が発生しました。さまざまな無限スクロールに対応したmixinファイルは複雑に入り組み簡単な修正でもどこに影響を及ぼすかわからないキメラコードになっていました。
原因
言うまでもなく様々なページの無限スクロール機能に対応すべくmixinファイルを修正したことが原因です。
リリースフェーズでは開発者がAさん、Bさんが完全にmixinファイルの内容を理解して作業を行ったためスムーズにリリースできましたが、少し時間を空けるとどのように作成したかを忘れているため、Aさん、Bさんが修正を行ったとしても問題なくデプロイすることは難しくなります。
対策(と言うか戒め)
共通処理を書いているファイルを作成する時は最小限の処理に抑える
様々なケースに対応できる共通処理を目指すのではなく、全てのケースで必要なものだけ記述するようにします。
共通処理に機能追加を行ってはならない
共通処理に機能追加をすると言うことはキメラコードにすると言うことです。機能追加を行うくらいならWETになってもいいので新たに別で共通処理を記述する方がメンテナンスしやすいです。
ちなみに
- 上記のストーリーは業務で実際に発生した問題をもとに作成しています。
- Vue.jsのmixinはアンチパターンらしいです。