環境構築、ルーティングで挫折しない。ReactはじめるならGatsby.jsがおすすめ

ハウツー
コロのicon
コロ

Gatsby.jsとは

Reactベースの静的サイトジェネレーター
SSG(Static Site Generator)
Webサイトの公開・構築に良く使われるWordPressなどのCMSは、記事の「閲覧時」に動的にサイト内容が生成されるが、静的サイトジェネレータは閲覧時ではなく「ビルド時」にHTMLやCSSなどがあらかじめ生成されていることが特徴。
Reactで書いて、静的なファイルをビルドで生成します。
静的ファイルなので、サイト表示がとにかく早いことが特徴のひとつです。

React初級者にGatsby.jsをすすめる理由

1. ローカル環境構築が、コマンド一つでできる

2. ルーティングに関する記述をしなくていい

pagesフォルダ内のファイル階層がそのままサイトの階層になる。
ルーティング?コントローラー?なにそれ状態でも問題ない。

3. サーバーの知識がなくてもサイトが公開できる、お財布にも優しい

Gatsbyは静的なHTML・CSSファイルを生成するので、Github Pages、Vercel, netlifyなどに簡単に置ける。
静的ホスティングは無料で利用できることが多いのでサーバーを借りたり、ドメインを用意しなくてもポートフォリオサイトなどが公開できる。

難しい作業はプラグインがやってくれる

webpackやgulp不要でコンパイルできたり、自作せずにいろいろな機能が追加できる。
gatsby-imageは画像の遅延読み込み、デバイスにあったサイズの表示、WebP対応などの画像最適化を完全自動で行ってくれる優れもの。
プラグイン一覧

公式Tutorial、Qiita、Zennなどドキュメントが充実している

公式チュートリアル: https://www.gatsbyjs.com/docs/tutorial/

はやい - The fastest frontend for the modern web

公式に " 一番早いフロントエンド" とあるくらいなので、とにかくはやい。
An image from Notion

作れるサイト&Showcase

React
gatsby.js
コロのicon
コロ
飼い猫と食べ物のことを考えてたら1日が終わってます。Reactでいろいろ作りたい