先日 easy-notion-blog をバージョン0.5にアップデートしました。
この記事ではバージョンアップ内容を簡単に説明します。
Next.js は React ベースの JavaScript/TypeScript の Webアプリケーションフレームワークで easy-notion-blog も使用しています。
今回のバージョンアップで Next.js をバージョン11から12にアップデートしました。
アップデート内容のうち、easy-notion-blog にも関わりが大きいのはビルドの高速化でしょうか。
ローカルでは3倍、本番環境では5倍速くなりました。
その他 Next.js 12 のアップデート内容の詳細は下記をご覧ください。
この記事を書いているうちに Next.js 12.1 が発表されていました。とても楽しみです。
記事に含まれる画像表示を img タグから next/image コンポーネントに変更しました。
img タグは画像のサイズを指定しない場合、画像を本来の大きさで表示します。
これは一見便利に思えますが、ページ内の画像が遅れてロードされたときにページがズレる Cumulative Layout Shift (CLS) という問題を引き起こします（皆さんも経験があるでしょう）。
一方、 next/image では画像を表示するコンテナの領域を確保することで CLS を防いでいます。
言い換えると、 next/image では画像を表示する領域をサイズとして指定しなければなりません。
本来の大きさで画像を表示できないのは少し不便ですが next/image の恩恵は他にもあります。
next/image では、ページ内の画像を可視領域に入ってからロードします。画像のように大きいデータをオンデマンドでロードすることによって、ページの表示が速くなることが期待できます。
さらに、デフォルトのローダーでは最適化した画像を Next.js から直接配信します。
速度面はもちろん、副作用として、Notion API から取得できるような時限付きの画像でも安定して表示できるようになりました。
その他 next/image について詳しくは下記をご覧ください。
また、CLS を含め Next.js （というより Vercel）が重視する Core Web Vitals と呼ばれる Web のユーザーエクスペリエンスに関する3つの指標について興味がある方は下記をご覧ください。
Lint を追加しました。Lint はコードスタイルをチェックしてくれるツールの総称です。
コードは書くよりも読まれる回数の方が圧倒的に多いので、コードの可読性を高く保っておくことは非常に重要です。
今回は Linter として ESLint を導入しています。
ESLint の設定ファイルは .eslintrc.json です。
バージョン0.4 リリース後に宣言した通り、テストを導入しました。
テストフレームワークとして Jest を使っています。
追加したテストはそれほど多くありません。
easy-notion-blog のコアとなる Notion Client 部分に関する簡単なロジックテストと、各ページの表示に関わるスナップショットテストです。
スナップショットテストとは、変更前と変更後で HTML の DOM 構成が変わっていないことを担保するテストです。
何かの変更の際に意図せず DOM 構成が変わっていたら、不具合に気付くことができます。
README にも追加しましたが、意図的に HTML 構成を変更した場合は差分をよく確認してスナップショットをアップデートしてください。
GitHub Actions は CI と呼ばれる自動化ツールの一種で、今回、前述した Lint とテストが Pull Request 作成時に自動で実行されるようにしました。
main ブランチに向けて Pull Request を作成したときに実行されます。
また、あわせて今回デフォルトブランチを master から main に変更しています。
もしフォークしたリポジトリで GitHub Actions を実行したい場合は、デフォルトブランチを main に変更した上で PR を作成してみてください。
main ブランチの背景は下記をご覧ください。
easy-notion-blog も少しずつ使っていただけるようになったのでこの機会に main ブランチに変更しています。
少し前に Notion で Mermaid 記法がサポートされました。
Mermaid 記法とは、フローチャートなどの図を書くための表記法で、最近 GitHub でもサポートが発表されました。
私自身はこれまで Mermaid 記法を使ったことがなくよく知らなかったのですが、 Notion API では従来の Code ブロック扱いで取得できることがわかったので easy-notion-blog でもサポートしました。
easy-notion-blog の Mermaid 記法はバージョン 0.5 ではなく最新版で使用できます。
ぜひご利用ください。
以上です。この記事では easy-notion-blog バージョン0.5 のアップデート内容を紹介しました。
コメントを送る
コメントはブログオーナーのみ閲覧できます