GatsbyのおかげでReactが好きになった。

2020/04/13

Gatsbyでサイトを制作する前に、そもそもGatsbyで何が出来るのか何が得意なのか忘れがちなので再確認に。

記事のポイント

Gatsbyとは
静的サイトジェネレーターとは
サーバーレスアーキテクチャとは

1. Gatsbyとは

GatsbyはReactで作られた静的サイトジェネレーターです。

静的サイトジェネレーターについては下で説明するとして、なぜ僕がGatsbyが大好きなのかを踏まえながらGatsbyの紹介をしていきます。

Gatsbyが特に優れてる点は以下の4点です。

環境構築の簡単さ
自動でSPA化してくれる手軽さ
サイト描画が最速
セキュリティのことを考えずにフロントに集中出来る。

環境構築の簡単さ

とにかくGatsbyの環境構築は簡単でGatsbyの公式ページにあるサンプルをクローンするだけで開発が開始出来ます。ReactではWebpackやBabelの設定などJS初心者は環境構築で挫折する人も多いと思います。

しかし、Gatsbyはサンプルをクローンした後に、ほしい機能はnpmパッケージとして公開されているプラグインを入れるだけで使用出来ます。

自動でSPA化してくれる手軽さ

SPA(Single Page Application)とは単一のページ内で要素の切り替えを行うWebアプリケーションの構造を指します。

SPAはページ遷移時に変更される要素のみをデータとして取得し、ページ内の変化としてブラウザにを描画するため、クライアントにはページ遷移が高速で行われてるように見えます。

ただ、最初のロード時に通常のサイトより多くの要素を読み込む必要があるため、ロードが遅くなる場合があります。しかし、Gatsbyで生成したサイトは簡単にLighthouseで様々な項目で100点を取れるポレンシャルがある上に自動でSPA化してくれる手軽さが最高です。

サイト描画が最速

先ほども言いましたがGatsbyで生成されたサイトは描画が本当に早くローカルのファイルを開いてる感覚に近いサイトも多く見かけます。SPAの導入コストも全くないと言って嘘にならないほど勝手にSPAにしてくれるGatsbyを使わない手はありません。

セキュリティのことを考えずにフロントに集中出来る。

WordPressでブログを作る際はDBとの連携やパスワードなどバックエンドに関するセキュリティを気にしなければいけない場面が出てくると思います。しかし、Gatsbyでブログを作る際はGraphQLをしようしてREST APIライクな方法でデータを取得できるため、セキュリティを気にせずフロントエンドの実装に力を入れることが出来ます。

また、S3などのホスティングサービスのみでサイトを公開出来るため、サイトの運用コストも低く抑えることが出来ます。

2.静的サイトジェネレーターとは

静的サイトジェネレーターとは、JSONやMarkdownなど比較的軽量なファイルで書かれたデータとテンプレートを使い、静的なサイトを生成してくれるフレームワークです。

例えば、ブログの記事ページの場合テキストや写真が変わるだけで記事ごとにページのレイアウトが変わることはありません。そのため、記事ページテンプレートを一つ作成しておき、そこにJSONやMarkdownからデータを入れ込むことで静的ページを生成しています。

これを記事公開時に毎回行うことでHTML,CSS,JavaScriptだけのペライチのページが生成されることでDBとのやり取りの必要がなくなり、Webサーバだけでの管理が実現します。

コスト面だけでなく、DBとの通信が減るためサイトの描画も早くなる利点もあります。

3.サーバーレスアーキテクチャとは

初めての記事で書き疲れたのでサーバーレスアーキテクチャについては次回の記事で説明します。