目次

• 初めに
• GatsbyJSとは
• 前提条件
• Gatsby CLIのインストール
• GatsbyJS Quick Start
• 終わりに

初めに

応用情報の試験が終わった約一か月前からReactの勉強を始めて、最近ではcreate-react-appでひな型を生成してそこから色々書いていました。
ですが最近この記事を読んでGatsbyJSというReactのフレームワークの存在を知って、興味がわいたのでWindows 10上でGatsbyJSを触ってみることにしました。

Reactの最強フレームワークGatsby.jsの良さを伝えたい！！ - Qiita

この記事では以下のGatsbyJSのデフォルトのページを立ち上げるところまでやります。

GatsbyJSとは

公式→GatsbyJS

私もこの記事を書いてる段階でアーキテクチャ等の理解が追い付いていないので、冒頭で紹介した記事を引用します。

Gatsby.jsはReactで作られた静的サイトジェネレーターです。内部的にGraphQLを用いてデータを取得し、markdownからHTMLを生成、などの処理を簡単に行うことができます。

静的サイトジェネレーターが何かと言うと、何かしらの言語で書かれたソースから、静的なHTML/CCC & JavaScriptを生成するツールのことを言います。

私はこちらの方のブログも参考にさせて頂いてます。

「Gatsby JS」を導入してみた - masalibの日記

セキュリティ面や通信速度面などの様々なメリットが挙げられていますが、Web技術絶賛勉強中の私はこのGatsbyJSを勉強するとHTTP2とかGraphQLとか最近流行りだけど一体なんのこっちゃって感じの技術も一緒に勉強できる点が大変魅力に感じました。

人によってはGatsbyJS以外にもGatsby.jsだったり単にGatsbyだったり呼ばれていますが、本記事では引用部分以外は公式に沿ってGatsbyJSで統一します。

次節で実際にGatsbyJSを触っていきます。

前提条件

以下私が触った時の前提条件になります。
- Windows 10
- node v12.13.1
- npm 6.12.1
- Gatsby CLI version 2.8.15

※以降ではnpmは既にWindows 10上にインストールしてある前提で書いてしまいました。余裕があれば後々追記します。

Gatsby CLIのインストール

公式によるとWindows上でGatsbyJSのCLIをインストールする前にwindows-build-toolsが必要らしい？(Gatsby on Windows | GatsbyJS)
実際私はいきなりnpm install -g gatsby-cliを叩いたら上手くいきませんでした。

公式にはこのwindows-build-toolsがコマンドラインで上手くインストールできなかった場合のケアも記載されていますが結論として私は問題なかったので飛ばします。

ということで私はコマンドプロンプトを開いてwindows-build-toolsをインストールを試みました。

> npm install windows-build-tools -g

すると怒られました。

Starting installation...
Please restart this script from an administrative PowerShell!
The build tools cannot be installed without administrative rights.
To fix, right-click on PowerShell and run "as Administrator".
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `node ./dist/index.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\<username>\AppData\Roaming\npm-cache\_logs\2019-12-03T23_19_04_021Z-debug.log

要約すると2-3行目に「管理者権限のPowerShellでやり直せ！」って書いてますね。
公式にもちゃんと管理者権限のPowerShellでやれって書いてました。完全に見落としてました。

> npm install windows-build-tools -g

次にGatsby CLIのインストールに移ります。

> npm install -g gatsby-cli

一応バージョン確認。

> gatsby --version
Gatsby CLI version: 2.8.15

GatsbyJS Quick Start

Gatsby CLIがインストールできたので公式のQuick Startに従って、GatsbyJSで作った静的サイトのデフォルトページを表示してみたいと思います。

Quick Start | GatsbyJS
https://www.gatsbyjs.org/docs/quick-start/

まずは静的サイトのひな型を作成します。

> gatsby new gatsby-site

次にディレクトリを移動して開発サーバの立ち上げ。

> cd gatsby-site
> gatsby develop

開発サーバの立ち上げに成功すると途中で以下のようなメッセージが表示されます。

You can now view gatsby-starter-default in the browser.
⠀
  http://localhost:8000/

言われたとおりにhttp://localhost:8000/にアクセス。

冒頭と同じ画面が表示されました。

終わりに

React以外の技術もたくさん学べそうなのでGatsbyJSをこれから触っていこうと思います。