[Advent Calendar 2021][Day16]カレンダー表示機能を作る

はじめに

Advent Calendar 2021のDay16。 今回は、カレンダー表示機能を作っていきます。 ２日遅れで更新。。

表示するコンポーネントに分割する

表示はかなり適当に実装してきたので、整理しようと思います。 以下のようにコンポーネントを分割しようと思います。

• Navbar
  • ログイン状態の表示
  • ログイン・ログアウトボタン
  • ユーザ削除
• Modal
  • カレンダー追加、参加機能で重複しているので汎用的に使えるようにする
• Fab
  • カレンダー追加ボタン

ページのレイアウト

Nuxtにレイアウトの機能があるので、それを使ってDefaultLayoutを作ります。

<template>    <Navbar />    <div class="md:container md:mx-auto">        <slot />    </div></template>

ページ

• トップページ
  • カレンダー一覧を表示する
• カレンダー詳細ページ
  • 24日分の記事タイトル・リンクを表示する
    • tailwindのGridで実装する
  • 各日付がまだ参加されていなければ参加できるようにする

その他

• 全体的に不具合の修正など。
• templateの直下に複数のルートエレメントを配置できるようになったはずですが、たまにそれをやると挙動がおかしくなったりして、かなり調査しました。結論としては、templateの下には、Nuxt2のときと同じく１エレメントが無難だと思っています。
• 出来ていないこと
  • ロールによる出しわけ。登録・編集系の機能を匿名ユーザに見せないなど。
  • 編集・削除操作がない。

まとめ

今回は、カレンダー表示機能を作りました。 次回は、ユニットテストを行っていきます。