[React] Windows 10上でGatsbyJSを利用して開発用サーバでデフォルトの静的サイトを立ち上げる

# 目次

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


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

[Reactの最強フレームワークGatsby.jsの良さを伝えたい！！ - Qiita](https://qiita.com/hppRC/items/00739eaf9ae7fc95c1ca)

この記事では以下のGatsbyJSのデフォルトのページを立ち上げるところまでやります。
![aaaaa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226452/96bd2c88-480d-f022-75c1-5557579d45f0.png)


# GatsbyJSとは
公式→[GatsbyJS](https://www.gatsbyjs.org)

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

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

---

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

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

[「Gatsby JS」を導入してみた - masalibの日記](https://masalib.hatenablog.com/entry/2019/02/22/002338)

セキュリティ面や通信速度面などの様々なメリットが挙げられていますが、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](https://www.gatsbyjs.org/docs/gatsby-on-windows/))
実際私はいきなり`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! windows-build-tools@5.2.2 postinstall: `node ./dist/index.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the windows-build-tools@5.2.2 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/`にアクセス。

![aaaaa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226452/cac0c95d-86ab-a607-983b-185b081170aa.png)

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

# 終わりに

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