GatsbyJSを紹介したい!!

2020年9月14日

爆益.comです!
今回は最近になって見かけるようになったGatsby.jsとはなんなのか?について説明していきたいと思います!

私も去年から注目しており、個人的にとても期待している技術です!
その良さを知ってもらいたいので知らない人向けに簡単に紹介していきます!

Gatsby.jsとは?

ギャツビーは、React用の非常に高速でモダンなサイトジェネレーターです。
所謂「静的サイトジェネレーター」の一種です。

かなりかみ砕いて言うと「サイトを構築するもの」です笑

公式HPは以下のURLからアクセスできます。
https://www.gatsbyjs.com/

簡単に言うと静的なサイト、すなわちHTML/CSSとjavaScriptからなるサイトを作成するためのものです。

staticGenというサイトで静的ジェネレーターの一覧を見ることができますが、スターの数等を比較するとGatsby.jsがかなり注目されていることが分かります。

多くの人はWordPressを用いてサイトを作成していると思います。「WordPressとの違いは何なのか?」と思う人も多いでしょう。WordPressとの違いは以下の通りです。

・データベースが不要!
・読み込みがとにかく高速。
・サイトが静的
・必要な個所だけ更新する

「読み込みがとにかく高速」という部分がGatsby.jsを使う一番の理由でしょう。
以下にGatsby.jsを使ったサイトへのリンクを貼っているので、ぜひ訪れてみてください。

びっくりするほど読み込みが速いです。

<URL>
https://leanylabs.com/

別のタブを選択しても一秒以内に読み込みが完了してしまいます。
阿部寛のHP並みの速さですね笑

読み込みが一秒遅いと20%のユーザーが離脱するというデータもあります。
読み込みが速いことに越したことはありません。WordPressを使っているとどうしても重くなってしまうのでこの利点はかなり魅力的ですよね。

読み込みが速いことによるユーザー体験の向上、及びSEOで優位に立てることがWordPressと比較した時のGatsby.jsの利点だと思います。

他の静的サイトとの比較

Gatsby.jsを他の静的サイトジェネレーターと比較するとどうなの?と思う方もいるでしょう。
公式が他の静的ジェネレーターとの比較結果を書いています。

覗いてみるとほぼすべての項目で他の静的サイトジェネレーターに勝利していることが読み取れます。
「Gatsby.jsは他のどのジェネレーターより優秀だ!!」という意図が読み取れますね笑

それだけ自信があるということなのでしょう!
今後も期待できそうです。

今後の展望

Gatsby.jsは近年急速に開発が進んでいる印象です。
最近ではGatsby Cloudというものが新しく登場しました。

Gatsby cloudの画像

簡単に言うとGatsbyJSを使ったサイトのローンチを簡単にするためのサービスのようです。

このサービスはまだ使ったことはありませんが、なかなか面白そうです。
使ったらまた記事にしてみようと思います。

活発に開発が進んでいることからも、今後の伸びにも期待できそうです。
興味のある方は少しかじっておくといいかもしれません♪