Gatsbyってなに？大きく「G」って書いたカラフルなやつしかわからんかったから調べてみるわ。【環境構築まで】

これまで聞いたけ触れたことなかったGatsbyについて触れてみました。

【こんな人にオススメ！】
・Gatsbyについて知りたい人
・これからGatsbyを使ってみようとしている人

Gatsbyってなに？

React向けの静的サイトジェネレーターです。
テンプレートを使って開発するのが一般できで、Gatsby.jsがHTML、CSS、JavaScriptを静的なファイルを生成してくれます。

【静的サイトジェネレーター】
SSG = Static Site GeneratorでHTML、CSS、JavaScriptによる静的なサイトを生成するツールのこと

静的サイトジェネレーターはそのほかにもたくさんあります。

Filterで「JavaScript」で絞り込むとGitHubのスター順にJavaScript制のジェネレーターが表示されます。

Next.js、Gatsby、NuxtがTOP3、4〜7位にDocusaurus、Hexo、GitBook、Astroが並びます。
私は初めて聞いたものばかりでしたが、GitBookはドキュメントなどで使えそう…とフワッと思いました。

とりあえずGatsbyを始めてみる

gatsbyコマンド叩けるようになるためにインストールします。

sudo npm install -g gatsby-cli

インストールが終了したのでhelpコマンドを叩いて利用できるか試してみます。

gatsby --help

インストールはできてそうです。

次に公式のDOcsを参考にプロジェクトを作成します。

gatsby init

会話形式で設定していきます。

// サイトの名前を決めます
What would you like to call your site?

// 生成するディレクトリー名を決めます
What would you like to name the folder where your site will be created?

// typeScriptかJavaScriptかを選択する
Will you be using JavaScript or TypeScript?
  JavaScript
❯ TypeScript

// CMSを利用するかを選択
Will you be using a CMS?
❯ No (or I'll add it later)
  Contentful
  DatoCMS
  Netlify CMS
  Sanity
  Shopify
  WordPress

// スタイルのシステムを選択　（Emotion選択したかった…）
? Would you like to install a styling system?
❯ No (or I'll add it later)
  Emotion
  PostCSS
  Sass
  styled-components
  Theme UI
  vanilla-extract

// プラグインどうするか（複数選択、エンターで選択）
 Would you like to install additional features with other plugins?
(Multiple choice) Use arrow keys to move, spacebar to select, and confirm with an enter on "Done"
 ◯ Add the Google gtag script for e.g. Google Analytics
 ◉ Add responsive images
 ◉ Add an automatic sitemap
 ◉ Generate a manifest file
 ◯ Add Markdown and MDX support
 ◯ Add Markdown support (without MDX)
❯ Done

initの後にエラーが出たのでnpm audit fix --forceとか実行して調整します。
npm run developで環境を立ち上げます。
どうやらできたようです。

ファイル構成

Reactベースで開発されているのでファイル構成はだいたい同じだと感じました。

生成した後のpackage.jsonの記述です。

{
  "name": "gatsby",
  "version": "1.0.0",
  "private": true,
  "description": "gatsby",
  "keywords": [
    "gatsby"
  ],
  "scripts": {
    "develop": "gatsby develop",
    "start": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "typecheck": "tsc --noEmit"
  },
  "dependencies": {
    "gatsby": "^5.3.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/node": "^18.11.10",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.9",
    "typescript": "^4.9.3"
  }
}

ルートディレクトリにsrcフォルダがありその中のpagesに表示されているTOPページのコードがあります。
変更はリアルタイムに反映されますので画面のリロードは必要はありません。

新しいページを作ってみる

新しいページを作れば勝手にルーティングしてくれます。
profile.tsxを作成して表示してみたいと思います。

pagesの下にprofile.tsxを作成します。

import * as React from 'react';
import type { HeadFC, PageProps } from 'gatsby';

const Profile: React.FC<PageProps> = () => {
  return <div>My Profile</div>;
};

export default Profile;

export const Head: HeadFC = () => <title>My Profile</title>;

現時点でPropsなどは渡していませんが、雛形かと思うのでとりあえずこれでページへアクセスしてみます。

http://localhost:8000/profile/にアクセスすると下記のように表示されました。

簡単なサイトならすぐに作れます！

まとめ

インストールのところで少し手間取りましたが、開発環境を構築するのがめちゃくちゃ簡単です。
表示に関してもさまざまなテンプレートが用意されているので、ちょっと見えるものが作りたい！だけなら非常に便利だというのが所感です。

デプロイしたい！ってことであればGatsbyが用意してくれているクラウドがあるのでそちらを利用するのが良いと思います！