React ×GatsbyJSでGitHubPagesに爆速デプロイ!

mirameet

はじめに

次のgatsby-starterを利用して爆速ポートフォリオ作りを行いたいと思います。

そもそもGatsbyとは

React用の静的サイトジェネレーターとなります。
これがまた素晴らしいものでGitHubPageなどで手軽に高速なサイトを構築することができます。

Gatsbyは公式サイトの日本語ドキュメントも充実しており、チュートリアルを行うことでどんなことができるのか一通り理解することができると思います。
Gatsby.jsドキュメント

特にReactをやりたい!場合は、Reactでカスタマイズを行えば、比較的なんでもできます。
構築自体は簡単なので、いろいろチャレンジしてみてください!


どんな時にGatsbyを使うのか

Reactでアプリケーションを作る時に主に利用されるのが次の3パターンかと思います。
結局のところなんでもそれとなく作れてしまうところでもあります。
好み的な要素は大きいかと...

  • CRA(Create React App)
  • Next.js
  • Gatsby

簡単な違いをさらっとだけご紹介します。

CRA(Create React App)

Reactを初めましての方は、まずはこちらから触ってみるのではないでしょうか。
主な用途としては、クライアントサイドでゴリゴリレンダリングするSPAとしてサイトが構築されます。
なんでもそつなく対応できます。
パフォーマンスがいいわけではないため、入門として始めるには良いと思います。

用途

  • 雑に言えば、なんでもOK

Next.js

サーバーサイドレンダリング(SSR)でサーバー側でHTMLを生成してあげる強者です。
結構クセがあり、CRAでは上手く行ってたのに、Next.jsでは動かない…という悲しいお話も聞きます。
データ更新などが多い場合、クライアント側に負荷をかけることは少ないので、ユーザー的にはCRAよかいいのかなと。
SSRにする際に気にされることとしてはSEOを意識してSSRを取り入れることが多い印象があります。

用途

  • SEOを意識するサイト
  • ECサイト
  • BtoC向けサイト

Gatsby

ビルド時にHTMLを生成し、クライアントが読み込むものはHTMLファイルとなります。(生成済み)
そのため、ユーザーは読み込み時間を意識することなく、爆速でページが表示されることとなります。
※API通信がなければ…
読み込みが多いサイトなどはあまり向かないかもしれません。

用途

  • コーポレートサイト
  • ブログ
  • ポートフォリオ

開催レポート

【ミートアップ開催レポート】mirameet vol.18!React ×GatsbyJSでGitHubPagesに爆速デプロイ!|miracleave株式会社|note
こんにちは!最近ゲームへの課金が止まらない青柳です! mira meet 第18回のテーマは、 「React ×GatsbyJSでGitHubPagesに爆速デプロイ!」でした!参加していただいた方、ありがとうございました! 当日の様子 オンライン開催ですが、現場は茅場町オフィスからZoomにてお届けいたしま...

限定記事

閲覧にはパスワードが必要です。

コメント