良いコード悪いコードを読んでフロントエンドの実装を改善してみた！

はじめに この記事では、近年売れている「良いコード悪いコードで学ぶ設計入門（本）」からフロントエンドにおける良い実装とは何か？を考え、特に改善できそうな部分をピックアップして紹介したいと思います。 ぜひ、この記事を読んでコードの書き方を改めるきっかけにしてもらえたらと思います。 関心の分離 第10章「名前設計」（p.206）にて紹介されています。 関心事は別々に分離して管理しようという考え方です。 色々な処理を1つの場所にまとめて書くのではなく、関心単位（機能、ビジネスロジック単位）で切り出して管理することが重要です。 以下でReactにおける関心の分離を考えてみました。 UIとロジックを分離 フロントエンドでの大きな関心事は「UI」と「ロジック」があります。 短いコードであればUIとロジックをまとめて記述してもいいと思いますが、ロジックが長くなる場合はカスタムフック等へ移動させ、責務を分