2021年12月後半の作業状況

12 月後半〜年末年始の状況

12 月後半も前半に引き続き、本業がなかなか激務でした。加えて各種打ち合わせや、副業周りや合唱関係の打ち上げなど、時間的余裕がない期間となりました。

ということで、12 月後半だけだと話題が少ないため、今回は年末年始まで含めて記事を書こうと思います。

本筋とは関係ないですが、今年は開発だけでなく、インプットの時間も確保しようと考えています。その足がかりとして、年始から「30 日でできる！OS 自作入門」に取り組み始めました。余裕がある限りは、この本を読み終わった後も継続的に学習していければなと思います。

開発状況

コンポーネント作成

先月時点では脱 Firebase という話をしていましたが、データ構造の変更に伴い、画面デザインにも多少手を入れる必要があります。それならばと、改めてフロントエンド周りを編集することにしました。

実は昨年の秋頃からデザインシステムを作成し始めており、コンポーネントを整理する準備は整っています。

↑ こちらは Figma で作成しており、こちらで公開しています。興味のある方はご覧ください。

initium ; auditorium を急拵えで作った 2020 年頃、Atomic Designを採用して開発していたのですが、Atoms/Molecules/Organisms を適当に分類してしまった結果、コンポーネント構造がかなり複雑化しているという現状もあります。

（このことから、デザインシステムがない時点で Atomic Design を意識して開発しようとしても、付け焼き刃で終わると反省しました。現にスマホアプリの方では、Atomic Design を採用せず、大雑把な Component に区分けする程度に留めています）

上の画像を見ると何となくイメージできると思いますが、デザインシステムとは、色使いやテキストなどの原則を組んだ上で、各コンポーネントを形式立ててデザインし、またプロダクトの成長とともにアップデートされていくものです（デザインシステムに明確な定義はありませんが、ここではそういうものとして取り扱います）。

将来的に Web デザイナーが参画し、デザイン面であれこれ指摘が入るようになったとして、明確な議論ができるようにこういったものを作成することは大事だと思います。そして何より初回リリースから今回で 2 回目の大規模なリファクタリング作業となってしまっていることから、今後 3 年は大規模なリファクタリングをしなくて良いくらいのクオリティにしたいということも考えています。

また、tailwindcss から Chakra UI への移行、storybook を用いたコンポーネント開発を採用することとしました。

tailwindcss の描画速度の速さは魅力的なのですが、文字列でクラス指定する性質上、型判定の恩恵が受けにくい難点があります。Chakra UI は css-in-js ゆえに遅いですが、それでも FCP（First Contentful Paint）が 10 ポイント下がる程度なので、許容範囲だと割り切ることにしました。

そんなわけで、古いコードの tailwindcss と新しいコードの Chakra UI が混在しているのですが、そもそも Firebase と MongoDB が混在しているので、Next.js を起動して確認するにもなかなか骨が折れます。そういった経緯もあり、storybook を導入しました。

storybook も 2020 年時点で導入こそしていたものの、Atomic Design の形骸化とともにこちらも形骸化しました。もしかすると Chakra UI への移行完了とともにまた形骸化するかもしれませんが、とりあえずはコンポーネントの作成を優先して考えます。

storybook は、各コンポーネントごとに Web ページに表示することができ、これを元に各要素が実際にどのように表示・動作するのかを確認することができます。

例えばボタン一つとっても、マウスオーバ、active（選択状態）、disabled（押下無効）など、様々な状態があります。disabled の時はマウスオーバした時にデフォルトのマウスカーソルのままにするとか、active の時にはボタン背景をちょっと暗くして選択可能なことを示すようにするとか、Web ならではの動きがあります。

機能開発をしながらコンポーネントも作って…とやっていると、ふとした時にコンポーネントの状態管理が疎かになってしまうことがありますが、storybook は機能開発とコンポーネント開発を（気分的に）分離できるので、そういったことも比較的少なくなるかな…と感じています。

1 月の予定

しばらくはコンポーネント開発を進めていきます。現在のデザインシステムでは、TOP ページと管理画面がまだ記述できていないため、そちらに手をつけるかもしれません。

TOP ページのデザインは悩み中です。とりあえず現状のまま行くかもしれませんが、レクチャー動画リリースに伴ってわかりにくくなった販売方法を図式化して出したり、スマホアプリのようにコンテンツがまず全面に出るようになると良いなとぼんやり考えています。

1 月も本業が忙しくなる予定ですが、身体に気をつけながらやっていこうと思います。