このサイトは React を使用したフレームワークの Gatsby で作成しています。非常に高速なウェブサイトを簡単に構築でき、記事はマークダウンで管理するのでデータベースが必要ありません。

gatsby + github + netlify の構成でウェブサイトを公開すると、ウェブサイト公開についての価値観がちょっと変わります。こんなことができてしまうなんて・・・と。

Gatsby のテーマ

Gatsby は様々な Plugin で機能を拡張はできますが、wordpress レベルのお手軽さはまだありません。オリジナルな機能を追加したければそれなりに React でコードを書くことになります。

Gatsby のテーマ機能はデザインや機能を詰め込み、ウェブサイトという単位でまとめられる Plugin 機能です。Gatsby での開発は元々、スターターというある程度作り込まれたテンプレ―トを git clone して始めるのが一般的でしたが、テーマの登場でより手軽にサイト構築が可能になっています。

テーマは plugin として独立しているため、自身のプロジェクトのソースコードと混ざりにくく、theme のアップデートの恩恵を受けやすくなります。一方で、theme が作り込まれすぎていると最初から良いサイトはできますが、オリジナルに修正するのが大変になります。shadowing という機能はあるものの、現状ではテーマをフォークして自分用に改造する方がおそらく簡単です。

Gatsby Theme Jam Contest

Gatsby theme は experimental な機能として実装が進められていましたが晴れて正式に Gatsby に組み込まれることになりました。それを記念して Gatsby theme のコンテストが開催。前々から自分のサイト用に theme を作っていたので、これを気にやりたかった機能を色々実装してコンテストに参加しました。

デモ用サイトの画像は unDrawというサイトのものを使わせてもらいました。MIT で商用利用可能な画像がたくさん用意されています。

コンテストの参加賞はマグカップか T シャツを選択できました。コンテスト参加のモチベーションはマグカップで、特別にデザインされたマグカップを何とか手に入れるためにここ１週間は気合いれて theme を改良しました。

他の人の theme もみるだけで勉強になるのでコンテストの開催に感謝しかありません。こういう

a11y との戦い

Gatsby は簡単に高速なウェブサイトが構築できるため theme に求められる要件も高いです。具体的には lighthouse で 4 項目 100 点、悪くても 90 後半くらいにはなります。このサイトだと画像の最適化が甘くて Performance を 100 にはできていません。最初は Accessibility の値が Performance より悪く、これを 100 にするのに時間がかかりました。

計測サイト：web.dev

html のタグ構成は、甘えだすと div だらけになります。これはスクリーンリーダーでの観覧時に悪影響があるため、構造に意味をもたせる必要があります。header には header タグ、あるいは header 属性をつけることです。

<header></header>
<main></main>
<footer></footer>

div の場合は role 属性を使います。

<div role="main"></div>

role 属性をつけることでタグの意味を伝えることができます。また、a タグではリンク先用のラベルが必要になります。特に画像を囲っているときで、例えば aria-label で意味を伝える必要があります。

<a aria-label="記事タイトルなど">
  ...
</a>

a11y には色のコントラストやキーボード操作など様々な検証要素があります。これを人力でチェックするのは厳しすぎるため eslint や chrome 拡張の aXe を使います。

{
  "extends": ["react-app", "plugin:jsx-a11y/recommended"],
  "plugins": ["jsx-a11y"]
}

全ての警告がなくなれば点数は 100 になります。少なくとも優先度 high は影響が大きいので優先的に修正。

シリーズの実装

新しい機能として”シリーズ”という記事の一覧ページを作れる機能を追加しました。タグだけでは記事のまとまりを作るのは難しいのと、データベースがないので記事同士の関連性をどう作るかが課題でした。

シリーズの実装の参考にしたのは Docusaurus です。ドキュメントサイトに特化したフレームワークで、上手く使えたらとても便利そうです。ここで unDraw の存在も知りました。

JavaScript でなにか作る時、設定や項目の値など何でも js ファイルや API にしがちでしたが、もっとローカルに json を配置する構成を考慮すべきなのではと今回で思いました。json なら JavaScript 使わない状況でも作りやすいので。

楽しい期間でした

時間の縛りもなく、自分用に作成しているとダラダラとコード書きがち。今回のようにコンテンストとして期間が決められると集中できてよかったです、また良い経験になりました。もちろん、完璧に作り上げるのは無理でしたが、最低限、人に見てもらえるくらいには頑張れたと思います。また、他の人の作品をみるとモチベーションになりました。

Gatsby を触り始めてから高速なウェブサイトがどのようなレベルなのかを体感でき、今回のコンテストでは lighthouse の点数も突き詰める必要があったので、普段意識の薄かった a11y に対して向き合う良い機会となりました。これからもこういう機会があれば積極的に参加しようと思います。

月並みな感想にはなりますがとても楽しかったです。