公開：2021年06月16日（更新：2022年06月18日）

GatsbyJSの開発環境を構築する手順

Gatsby

GatsbyJSの開発環境を構築する手順を解説します。
GatsbyJSでWebサイトを作れる状態を目指します。

手順は以下です。

「Node.js」のインストール
「Yarn」のインストール
「Gatsby CLI」のインストール
サンプルサイトを作ってみる

また、この記事はmacOS向けとなります。
これから解説する方法では、Windowsの場合は上手くいかないかと思います。

申し訳ありませんが、あらかじめご了承ください。

Node.jsのインストール

Node.jsは、公式サイトからパッケージをダウンロードして、直接インストールすることもできます。
でも、Node.jsには色々なバージョンがあって、そのバージョンを使い分ける場合があります。

そこで、「Node.jsのバージョン管理ツール」というものが用意されています。

まず「Node.jsのバージョン管理ツール」をインストールし、それを使ってNode.jsをインストールする、という流れで進めましょう。

僕がおすすめするNode.jsのバージョン管理ツールは「nvm」というものです。

nvmを使ってNode.jsをインストール方法は、以下の記事で解説しておりますので参考にしてください。

【Mac向け】nvmでNode.jsをインストールする方法

記事を読む

これで、Node.jsも用意できました。

Yarnのインストール

GatsbyJSでは、「プラグイン」を使います。
プラグインを使って画像を表示したり、SEO対策したりします。

GatsbyJSでプラグインを追加するために必要なのが、「Yarn」です。
では、Yarnをインストールしていきます。
ターミナルを起動しておいてください。

ターミナルに以下のコマンドを入力して実行してください。

$ curl -o- -L https://yarnpkg.com/install.sh | bash

これだけで、Yarnがインストールされます。
このコマンドは、Yarnの公式サイトに載せられています。

>>Yarnの公式サイト

このページの「Alternatives」と書かれたところの黒い三角印をクリックすると、上記のコマンドが出てきます。
興味のある方は見てみてください。

Yarnをインストールしたら、一度ターミナルを閉じてもう一度起動してください。
そして、以下のコマンドを入力して実行してください。

$ yarn -v

数字が表示されたら、Yarnが正常にインストールされています。

Gatsby CLIのインストール

GatsbyJSでサイトを作るには、「Gatsby CLI」をインストールする必要があります。
「CLI」は「コマンドラインインターフェース」の略です。
Gatsby CLIはYarnを使ってインストールできます。

ターミナルに以下のコマンドを入力して実行してください。

$ yarn global add gatsby-cli

これで、Gatsby CLIがインストールされます。

Gatsby CLIは新しいものがどんどんリリースされています。
上記のコマンドは定期的に実行することで、新しいGatsby CLIが上書きでインストールされます。

Gatsby CLIが本当にインストールされたか、確認します。
以下のコマンドを入力して実行してください。

$ gatsby -v

以下のように表示されたら、Gatsby CLIが正しくインストールされています。

Gatsby CLI version: （数字）

これで、GatsbyJSでサイトを作る準備が整いました。

サンプルサイトを作ってみる

では、簡単なサイトをGatsbyJSで作ってみましょう。
ターミナルを起動させておいてください。

作成場所をわかりやすくするため、「デスクトップ」フォルダに移動しましょう。
以下のコマンドを入力して実行してください。

$ cd desktop

これで「デスクトップ」フォルダに移動できました。

Webサイトを作る際、ゼロから作るのはやはり面倒だと思います。

GatsbyJSでは、サイトを作るときに便利な「スターター」というものが用意されています。
「スターター」には色々あって、プラグインや画像があらかじめ準備されたものだったり、ある程度サイトの形が決まったものとかがあります。

ここでは、最もシンプルでまっさらなスターターである「gatsby-starter-hello-world」を使ってサンプルサイトを作ります。

形としては、以下のようなコマンドを入力していきます。これは例なので、入力しないでください。

$ gatsby new (フォルダの名前) (スターターのurl)

GatsbyJSでサイトを作ると、一つのフォルダが出来上がります。
プロジェクトフォルダといいます。

プロジェクトフォルダの名前をここで決めるわけです。
そのプロジェクトフォルダの中に色々なファイルが自動で作られます。

では、実際に以下のコマンドを入力して実行してください。

$ gatsby new sample-site https://github.com/gatsbyjs/gatsby-starter-hello-world

今回はプロジェクトフォルダの名前を「sample-site」としました。
スターターは「gatsby-starter-hello-world」を使うためのurlを指定しています。

サイトの構築が終わったら、以下のコマンドを入力して実行してください。
プロジェクトフォルダの中に移動します。

$ cd sample-site

次に、Gatsbyの開発サーバーを起動します。
開発サーバーを起動することで、テスト環境でサイトの表示を確認できます。
以下のコマンドを入力して実行してください。

$ gatsby develop

文字がたくさん表示されて、開発サーバーが起動します。
最後の部分が以下のように表示されたら、正常に開発サーバーが起動しています。

You can now view gatsby-starter-hello-world in the browser.

  http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and
 schema
⠀
  http://localhost:8000/___graphql

Note that the development build is not optimized.
To create a production build, use gatsby build

success Building development bundle - 11.077s

では、Google Chromeなどのブラウザで「http://localhost:8000/」にアクセスしてみてください。

左上に「Hello world!」とだけ書かれたページが開いたと思います。
ちょっとシンプル過ぎますが、これがGatsbyJSで作られたサイトです。

開発サーバーを終了させるときは、「control + C」を押してください。
パソコンをスリープさせるときなんかは、開発サーバーを終了させておいた方がいいと思います。

「このサイトじゃちょっとシンプル過ぎる...」
と思われる方は、別のスターターも試してみましょう。
一度、開発サーバーを終了させてください。

以下のコマンドを入力して実行してください。
「デスクトップ」に移動します。