このサイトは Gatsby.jsで構築されています

2020.1.6

未知との遭遇

サイトをリニューアルしてブログを開設しました。

サイトの構築には Gatsby.jsを使いました。 Gatsby.js は React.jsのサイト を見ていて偶然、見つけました。

Gatsby.jsの紹介

前からサイトにブログを設置したかったので、これは良いものを見つけたと小躍りしました。 開発は Gatsby.js 公式サイト を見れば、だいたい進められる感じです。

しかし開発初期は Wordpressと比べて圧倒的に情報量が少なく、

  • 流行ってないのか
  • 使えないのか
  • 使われてるけど分からないだけなのか

全く分からない状況でした。 開発初期は楽しくて、途中から困難な状況になることは未知の技術を扱うとき往々にしてあるものです。 私が開発を始めるときに 1番知りたかったのは、

「このサイトは Gatsby.jsで構築されています」

という他サイトの表明でした。

なので書きました。

GatsbyJS

予想と違っていたこと

作る前に予想していたことと、実際に作ってみたら違ったことが多々ありました。

以下にそれらを述べます。

🌟 軽くなるはず

React.jsが軽いので、PHP実装の Wordpressより軽くなるはずと思いました。

実際に触ってみると、Wordpressよりは軽く、手書き htmlよりは遅い、でした。

1回目の 完全表示 は、Wordpressと同等かそれ以上に遅いです。

Gatsby.jsでは画像が表示されるとき、最初ぼんやりと表示されて、徐々に明瞭に表示されます。

1回目の ぼんやり表示 は早いので、私の体感的には Wordpressより早く感じました。

2回目以降の表示は、Service Workerによる Offline Cache が有効になり、かなり高速です。

結論: ❌軽くなる → ⭕️速く感じる

GatsbyJSとは?

🌟 画像の遅延読み込みが簡単に実現できるはず

最初ぼんやり表示されて、徐々に明瞭に表示される、画像の遅延読み込み。 Gatsby.jsを使えば全部の画像について、簡単に遅延読み込みが実現できると思い込んでいたのですが、実際はそうではありませんでした。 結論から言うと、

  • マークダウンで書かれた記事はそう
  • 固定ページやテンプレート ページの画像表示は面倒

です。でも出来なくはないです。GraphiQLを参照してコードが長くなります。

最初ここで慌てました。 Gatsby.jsは絵が出ないんじゃないかと。 GraphiQLで画像を参照する必要があると気づいてからは順調に進みました。

固定ページやテンプレート ページは更新頻度が低いので、慣れてしまえば大丈夫です。

webサイトをつくろう

🌟 Lighthouseで良い点が取れるはず

これは実際に結果を見てもらったほうが早いですね。

以前の html手書きのサイト

html手書きのサイト

意外と Performanceの値が高かったです。これが 100点になるのか。(期待)

Accessibilityの値が低いですね。これが 100点(以下略)

PWAは対応していませんでした。

現在の Gatsby.jsで構築されたサイト

Gatsby.jsで構築されたサイト

Performanceの値が -6点になってしまいました。えーっ!(´・ω・`)

Accessibilityが 100点になりました。わーい!\(^o^)/

SEOの点数は 1点だけ増えました。|・ω・`)ノ

PWA対応になりました。(๑• ̀д•́ )✧ドヤッ

Performanceが下がったのは Base64による画像のテキスト化が主な原因です。

画像数を減らせば、または画質を下げれば、点数はもっと上がると思うのですが、それはデザイン要求的に違うので仕方ありません。

デザインテーマ

Gatsby.jsでブログ開設のススメ

それでも現在の Gatsby.jsで構築されたサイトを僕は気に入っています。

以下にその理由を述べます。

🌟 ブログ化

マークダウン形式でテキストを書いてフォルダに入れるだけで記事を載せることが出来ます。 また記事を書くだけで新着に表示されるようになりました。

今まで htmlを手書きしていたので本当に更新が楽になりました。

🌟 PWA対応

このサイト kotoriyama.com をスマホで「ホーム画面に追加」すると、見た目がアプリのようになり快適にブラウズすることが出来るようになります。 ぜひ一度試してみてください。

🌟 デフォルトかっこいい

Gatsby.js はデフォルトかっこいいです。僕は当初デフォルト設定のまま利用するつもりでした。

開発初期の画面

開発初期の画面

そうして触っているうちに自分の使える JavaScript言語なので徐々に分かってきて、手を入れていくうちに今のサイトが出来ました。

To Be Continued…

今回は Gatsby.jsの導入について記事にしました。

この記事がこれから Gatsby.jsを始める方のお役に立てば幸いです。

また何か Gatsby.jsで書ける内容が出来たら記事にしますね。

もと

プログラマー

コトリヤマのプログラマーの、もとです。開発ブログを書いています。お茶でもいれて、ねこでも呼んで、ぬくぬく読んでね。