巨大なコンポーネントを作らないために - hacomono TECH BLOG

こんにちは、フィーチャー部でエンジニアをしている あおさん です。 最近、フロントエンドの実装を行う機会が増えてきました。新しい画面を作るのは楽しいのですが、一つ大きな悩みがありました。それは、実装が進むにつれて1つのコンポーネントファイルがどんどん肥大化していくことです。 気づけば500行、600行……。script / template / styleタグが肥大化し、「さっき直したコードはどこだっけ？」とスクロールを繰り返す時間は、お世辞にも効率的とは言えませんでした。 そんな時、テックリードのみゅーとんさんに設計の相談をしたところ、コンポーネント設計についてのアドバイスをいただきました。その教えをもとに自分なりに試行錯誤してみると、「これって、パズルを組み立てる感覚に近いかも！」という発見があったので、その内容を共有したいと思います。 3行まとめ 1つのファイルに詰め込もうとすると、