GatsbyJSの始め方

Gatsby？

Gatsbyは、近年人気の高いJavaScriptのライブラリ（実際にはフレームワーク的な存在）であるReactをベースとした静的サイトジェネレーターです。

個人的には、JavaScriptはもちろん、React、GraphQL、APIなど、フロントエンドの実践的な学習にはもってこいだと感じています。

今回は、「Gatsbyの始め方」と題して、実際にGatsbyで制作を始めるための環境構築までを紹介します。

node.jsがインストールされており、npmコマンドが使えるところから進めていきます。

まずは、GatsbyのCLI（コマンドラインインターフェイス）をグローバルにインストールします。

npm install -g gatsby-cli

これにより、Gatsbyのコマンドが使えるようになります。

Gatsbyを使って開発を行うディレクトリを作成するコマンドを任意のパスで実行します。

gatsby new ディレクトリ名 スターターのURL

gatsby newだけで実行すれば、サイト名やディレクトリ名、使用するCMSなどを対話形式で入力するモードになります。

スターターは、ワードプレスでいうテーマのようなもので、Gatsbyの公式からスターターを探してインストールすることもできます。

使用するスターターは、githubのリポジトリのURLを指定しますが、入力しなければ、最低限のプラグインなどが含まれたGatsbyのデフォルトスターターがインストールされます。

gatsby develop

gatsby newで作成された開発ディレクトリに移動して、上記のコマンド実行すると、開発用のサーバーを起動できます。

ポート番号は、デフォルトで8000なので、http://localhost:8000/にアクセスすると現状が確認できます。

また、この状態でファイルに変更が加わるとホットリロードされ、リアルタイムでページに反映します。

以下に、主なコマンドをまとめました。

gatsby develop
gatsby build
gatsby serve
gatsby clean

以降は、開発用サーバーで確認しながら、実際にコンポーネントを作ったり、コンテンツの中身のデータのやり取りを整備したりしながら、制作を進める形になります。

HTMLやCSS、JavaScriptを必死に勉強して、何とか書けるようになったと思えば、「さぁ React！」「さぁ Vue！」と言われ少し億劫になっている方でも、Gatsbyを触りながらReactの勉強をすることができるので、おすすめです。

「順番が違う！」と言う方もいるかもしれませんが、どうせエンジニアは一生勉強しながら死んでいくので一緒です。

ShopifyもReactベースのフレームワークが公開されたりと、ECの世界でもどんどん新しい技術が取り入れられるようになってきました。

KOKONIARUKOTO.の実績には、ホームページやLP、ECサイトなど、Reactをベースにして制作したWEBサイトも数多くありますので、次回からは、もう少し踏み込んだ内容にしたいと思います。