アルパカログ

先日 easy-notion-blog バージョン0.4.0をリリースしました。

この記事ではアップデート内容を紹介します。

Release v0.4.0 · otoyo/easy-notion-blog

What’s Changed Support code caption by @otoyo in #22 Fix language pass by @otoyo in #23 [Breaking change]Large scale refactor by @otoyo in #25 Full Changelog: v0.3.0...v0.4.0

https://github.com

アップデート内容は下記の2つです。

• コードブロックのキャプションをサポート
• 大規模リファクタ

コードブロックのキャプションは特に説明する必要はないかと思います。

後者は大規模とある通り、差分はかなり大きなものとなっています。

ここではなぜそれだけの大改修を行なったのか、それによって何が良くなったのかを説明します。

バージョン0.4 以前から easy-notion-blog を使っている方はご存知かと思いますが、easy-notion-blog のコードは繰り返しが多く煩雑なものとなっていました。

例えば記事のタグを描画する下記のコードは、行数がそれなりにあるにもかかわらず、記事一覧ページ、個別記事ページ、タグ毎の記事一覧ページ、過去の記事一覧ページの4ファイルに登場していました。

<div className={blogStyles.tagContainer}>
  {post.Tags &&
    post.Tags.length > 0 &&
    post.Tags.map(tag => (
      <Link
        href="/blog/tag/[tag]"
        as={getTagLink(tag)}
        key={tag}
        passHref
        >
          <a className={blogStyles.tag}>🔖&nbsp;&nbsp;{tag}</a>
      </Link>
    ))}
</div>

今回のリファクタによって、上記のような繰り返し出現するコードを全てコンポーネント化しました。

結果、下記のように1行で表現されるようになりました。

<PostTags post={post} />

もともと300行あった個別記事ページ pages/blog/[slug].tsx の描画部分は、徹底したコンポーネント化によって30行になりました。

興味のある方は見比べてみてください。

• https://github.com/otoyo/easy-notion-blog/blob/v0.3.0/src/pages/blog/[slug].tsx
• https://github.com/otoyo/easy-notion-blog/blob/v0.4.0/src/pages/blog/[slug].tsx

コンポーネント化は繰り返しを削除するためだけではありません。

ブログの各パーツをコンポーネントに切り出し、モジュール化された CSS と対応させることで、スタイルしたいパーツがすぐに見つけられるようになりました。

例えば、Notion ブロックのうちコードブロック (code) のスタイルを変更したいと思ったら Code コンポーネントが定義されている notion-block.tsx に対応する styles/notion-block.module.css の .code セレクタをすぐに見つけることができます。

さらに、ページのレイアウトも合わせて整理しました。

下記の wiki ページを見ていただくと、スタイルするときにどの CSS クラスを変更すれば良いかがすぐに見つかるでしょう。

• https://github.com/otoyo/easy-notion-blog/wiki/Page-layout

コンポーネント化するとユニットテストが導入できるようになります。

元々のコンポーネント化されていない煩雑なコードでテストを導入するのは無理がありました。

言うなればコンポーネント化はテスト導入の前準備だったのです。

次バージョンではテストと静的コード解析を導入予定です。

テストを導入することで、変更時にバグが混入してしまった場合にすぐに気づけるようになります。

以上です。この記事では easy-notion-blog バージョン0.4.0 アップデート内容を紹介しました。