背景やフォントの色変える作成UIを作成するTODOタスクを違うコンポーネントに分けるいろいろ解説するここからは応用編ですここまでのハンズオンでTODOをDBに保存して、取得して、更新して、削除するという簡単なアプリを、フロントエンド(Vue3)/サーバサイド(Express)/DB(PostgreSQL)を一から構築して開発することができました。この本の目的である「簡単なTODOアプリを開発して小さな成功体験を得る」はある程度満たしたのではないでしょうか?もうお腹いっぱいと言う方はここで終了で問題ないと思います。筆者である私がまだ物足りないので、ここからは「UI/UXを向上させていく」を目標に先ほど作ったアプリのフロントエンドを中心に応用編をしていこうと思います。筆者思考でのUI/UXですので、「それは違うだろ...」や「もっとこうした方がいいのでは?」といった点が多々あると思われます。tailwindcssの導入まずCSSフレームワークとしてtailwindcssを使うので、インストールしていきます。init追加したファイルに下記の内容をコピペしていきます。},};src/main.tsに下記を追記します。addcreateApp(App).use(store).use(router).mount('#app');ローカルでアプリを立ち上げます。serveフォントなどが反映されていると思います。最終的にこんな感じに仕上げていきます。背景やフォントの色変えるここはお好みなんですが、背景やフォントの色を変えていきたいと思います。個人的にダークモードチックにするのが好きなので、背景を黒っぽくしてフォントを白くしていきます。tailwind.config.jsを少し書き換えます。},...App.vueのstyleタグ内に下記の内容に書き換えます。いう書き方はtailwindの文法で、その後ろに指定したclassにあたるstyleを適応してくれます。言うのもtailwindの文法で、bgがBackGround(背景)、grayは色、800は色の濃さを表しています。詳しくはここらへんを参考にしてください。この感じの色合いになります。作成UIを作成するこういった作成UIを作成していきます。Todo.vueのtemplateタグ内を下記の内容に書き換えます。</div></template>TODOタスクを違うコンポーネントに分ける取得したTODOタスクの見た目を作成UIに合わせるのと同時にコンポーネントを分けて実装します。TODOタスク用のTodoItem.vueを作成し、下記内容をコピペします。},});</script>作成したTodoItem.vueをTodo.vueで読み込みます。},});</script>このような見た目になります。解説するここまでざーっと手順を書いてきましたが主にVueについての要所をまとめて解説していきます。コンポーネントを分割する一つのVueファイルにまとめてコンポーネントを書いていってもいいのですが、ある程度の大きさで分割した方がひとつひとつのVueファイルが小さくなって見やすくなると思います。これには好き嫌いがあると思います。分割する粒度も好きな粒度で分割してください。ほんとに細かく分けるなら、アトミックデザインなどを参考にするといいかもしれません。親コンポーネントから子コンポーネントに情報を渡す。(Props)今回の例ではTodo.vueからTodoItem.vueに対して、TODOタスクの情報を渡しています。Todo.vue内27-33行目あたりで、子コンポーネントにあたるTodoItem.vueに取得したTODOタスクを1件づつ渡しています。></todo-item>...その情報をTodoItem.vueでPropsを使って受け取ります。},...これで親から子に情報を渡すことができます。子コンポーネントから親コンポーネントにイベントを渡す(Emit)子コンポーネントで発生したイベントを親コンポーネントに渡したいときにEmitを使います。今回ではTODOタスクの更新と削除のイベントを子から親に渡しています。TodoItem.vueの24-35行目あたりが該当の箇所になってます。</div>...Todo.vueでは$emit()の第1引数と同じ名前のv-bind(@hoge)で待ち受けます。></todo-item>...これで子コンポーネントで発生したイベントを親コンポーネントに渡して、該当する処理を実行することができます。