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

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をインストール方法は、以下の記事で解説しておりますので参考にしてください。

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

Yarnのインストール

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

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

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

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

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

>>Yarnの公式サイト

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

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

bash $ yarn -v

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

Gatsby CLIのインストール

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

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

bash $ yarn global add gatsby-cli

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

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

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

bash $ gatsby -v

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

bash Gatsby CLI version: （数字）

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

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

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

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

bash $ cd desktop

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

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

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

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

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

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

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

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

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

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

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

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

bash $ cd sample-site

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

bash $ gatsby develop

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

bash 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」を押してください。パソコンをスリープさせるときなんかは、開発サーバーを終了させておいた方がいいと思います。

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

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

bash $ cd ..

次は以下のコマンドを実行して、もう一つサイトを作ってみましょう。

bash $ gatsby new gatsby-default-site

今回はスターターを指定していません。プロジェクトフォルダの名前は「gatsby-default-site」としました。スターターを指定しない場合、「gatsby-starter-default」というスターターが自動で適用されます。

サイトの構築が終わったら、また以下のコマンドでプロジェクトフォルダに移動します。

bash $ cd gatsby-default-site

そして、開発サーバーを起動させます。

bash $ gatsby develop

ブラウザで「http://localhost:8000/」にアクセスします。今度はWebサイトっぽいものが表示されたと思います。

「最終的にどのようなサイトを作るか」によってスターターを使い分けることができます。

まとめ

GatsbyJSの開発環境をmacOSで構築する手順を、もう一度以下にまとめます。

「Git」の設定
「Node.js」のインストール
「Yarn」のインストール
「Gatsby CLI」のインストール

これで、GatsbyJSでサイトを作ることができるようになります。

スターターを使ってGatsbyJSのサイトを立ち上げたら、コードを編集してサイトを作り上げていくことになります。今回、この記事ではコードの編集はしませんでした。

GatsbyJSで書いていくコードは、通常のHTMLとは違ってReactの記法になります。その辺りまで考えると、内容がやや込み入ってくるかと思います。

そこで、GatsbyJSで本格的なサイトを作る上でおすすめの本をご紹介します。以下がおすすめの本です。

Webサイト高速化のための静的サイトジェネレーター活用入門　GatsbyJSで実現する高速＆実用的なサイト構築／エビスコム>>Amazonで見る >>楽天で見る

こちらの本では、HTMLとCSSのみで作られたサイトをGatsbyJSのサイトに変換していきます。そして、完全無料でGatsbyJSのブログサイトを作り上げることができます。

GatsbyJSの開発環境を構築できたら、次はぜひ本格的なGatsbyJSのサイトを作ることにチャレンジしてみてはいかがでしょうか。

以上で記事は終わりです。