コンポーネントを小さく・きれいに設計しよう。Vue Composition APIを活用したコンポーネント分割術 - ICS MEDIAVue.jsを使った開発でよく悩まされるのがコンポーネントの肥大化です。複雑なアプリケーションになると、1つのコンポーネントが<script>ブロックだけで数百行…なんてこともめずらしくないでしょう。従来、Vue 2までの標準的な書き方では、UIとしてのコンポーネントの細分化はできてもロジックの分割や整理には限界がありました。しかし、Vue 3のComposition APIを活用すると、はるかに柔軟な整理・分割が可能です。 「Composition APIは難しそうだからまだ使っていない」という方、あるいは「導入はしているけどイマイチメリットがわからない」という方は、この機会にぜひComposition APIを活用したコンポーネントの整理術を試してみてはいかがでしょうか？ なぜ、Vueのコンポーネントは肥大化するのか？ 簡単な例を見てみましょう。下のサンプルはミニマムなアナログ時計のコ
