mimonjo

nextlight.io にて、Releasesページが公開されました 🎉

このページ公開前後で結構いろいろなことをやったので、その業務報告をしようかなと。

パッケージ構造の変更

まず、パッケージ構造を変えていました。

nextlight.io は2つのパッケージからできています。

• UIを構成する要素だけを作るコンポーネントライブラリのパッケージ
• Webページそのものを作るパッケージ

そして、今まではこれらをバラバラに管理していました。

それではちょっとした不具合を直すのも面倒くさいということで、モノレポ構成に変更しました。

モノレポ構成とは、複数のパッケージを束ねるパッケージを作って、すべてをその中で扱うことをさします。

pnpm workspace としてすべてを管理するようにしたので、コンポーネントライブラリを手元でbuildして、アプリケーションですぐに使えるようになりました。（本当に結構な大進歩）

コンポーネントライブラリとWebページそのものを同じ場所で扱うことにしたので、今までより気軽に新しいページを作ることがきっとできるはず。

ちなみにこのブログも nextlight.io と同じコンポーネントライブラリを利用しています。

1つサイトを作っただけあってかなり手に馴染んでていい感じです。

CSSフレームワークの変更

今まで nextlight.io は styled-components というフレームワークを使っていました。

どういうわけか Next.js と styled-components を使ったコンポーネントライブラリはモノレポ環境下で相性が悪いようで、どうにも直せないバグを生んでしまいました。

そろそろ潮時か、と思って styled-components から Panda CSS へ乗り換えました。

絶妙なパンダのイラストがチャーミングです。

コンパイル完了時にもパンダの絵文字が出てくれます。

Panda CSSの良かった点はこんな感じ

• Design Tokenのサポート
• StaticなCSSを書き出せるので、コンポーネントライブラリ利用側にフレームワーク導入を必須としない
• 表現力にCSSゆずりの限界があるが、それ故JavaScriptに頼ったスタイルの実装を減らせる
• セレクタを自由にかける（これはTailwind CSSより好き！）

辛く苦しい長い置き換え作業でしたが、何とかやり切りました。

ちなみに置き換え前後でほんの少しだけパフォーマンスが悪化したみたいです。

↓ styled-components 版の PageSpeed Insights の結果

↓ Panda CSS 版の PageSpeed Insights の結果

このあたりは改善の余地がありそう。

まだあんまり詳しくないので、改善を続けていきたいなと思います。

カラーパレットの再定義

カラーパレットが一新されました

この辺もまだ勉強中なんですが...

Figmaを使ってコントラスト比を調べるpluginを使いながら作ってみました。

まだまだ調整を続けているので、急に見た目が変わることもしばしばあると思いますが、いろいろ試しているんだなと思っててください。

データベースの構築

このブログでも使っている Prismic を nextlight.io でも利用しました。

そもそもこのブログでPrismicを採用したのも、 nextlight.io での利用を見込んでいたためです。

Prismicには

• ドキュメント数の制限がゆるい
• Custom Typeの作成数の制限がゆるい
• リレーションシップを組める
• リレーションシップをたどった絞り込みがギリできそう

などの特徴があります。

コンピレーションアルバムや、収録楽曲、コンポーザーさんの情報などそれぞれの情報は複雑に絡み合っています。

例えば、「特定のコンポーザーさんの曲が入っているコンピレーションアルバムを絞り込む」みたいなことを今後やりたいので、リレーションシップをたどった絞り込みができるかどうかはかなり意識していました。（リレーションシップの扱いがうまいCMSはあんまりない）

とにかく、コンピレーションアルバムを中心にデータベースを持つことができたので、このデータをうまいこと使って、楽しいサイトにできたら良いなと思っています。

さいごに

nextlight.io の開発はみつきだけがコーディングを行っているということもあり、自分の試したいことを独断で好きなだけ試せる場になっています。

なので、本業で使う予定のある技術だったり、使う予定はないけど興味深い仕組みをどんどん使っていくつもりです。

技術的にちょっと面白いところを目指しながら、大前提としてNEXTLIGHTというレーベルのためのWebサイトを作っていることだけは忘れないようにしないと...

クリエイターの皆さまの魅力と、提供いただいている素晴らしい楽曲たちを、より多くのファンの皆さまにお届けできるよう、NEXTLIGHTのWebサイトを引き続き改善していきます！