ことばを学ぶ　LEARN GATSBY  週間 #1日目

###「いのちを守る STAY HOME 週間」が始まりました. 


 これを機に、何か `アウトプット` したいと思い、今回、初めての投稿で、この記事を書くことにしました.

`React` を知ったのはおよそ1か月前.
 学びながら、ブログサイトも作りたいなぁと一石二鳥を狙っていたところ、`Gatsby` という `Reactフレームワーク` を知りました. 
最初はすごい難しかったのですが、仕組みが分かるととても使いやすいです. (小並感)

[静的サイトジェネレーターの一覧サイト](https://www.staticgen.com/) ではトータルのフォロワー数が一番多く、海外では結構人気らしいです. なぜか日本ではまだまだな感じです. 
どうやら日本語の資料が少ないようです. (Twitterで検索してみました)

[Gatsby公式サイト](https://www.gatsbyjs.org/)のチュートリアル(英語)、[日本語訳](https://github.com/gatsbyjs/gatsby-ja/tree/master/docs) 一応あります！

ですが、個人的に何をやっているのかわかりにくかったので、自分の理解のためにも、自分なりのチュートリアルを作り、順次、公開していくことにしました. もしよかったら、スキマ時間に挑戦してもらえると大変うれしく思います.

これを作るにあたり、参考にしている動画があります. 英語でも全然オッケーという方は[こちら](https://youtu.be/8t0vNu2fCCM)からどうぞ !

※  誤字・脱字、それ意味違うよ ! 、これどういうこと ?  などあればコメントお待ちしております.


**この機会に、日本で、`Gatsby Enthusiast` が増えれば良いなぁと思っております !**

##Gatsbyのセットアップ
> Node のバージョンは10以降が必要となります.　[バージョンの詳細はこちら](https://www.gatsbyjs.org/docs/upgrading-node-js/)　
[node公式サイトはこちら](https://nodejs.org/en/)

`gatsby-cli` をインストールします.

```
npm install -g gatsby-cli   もしくは　yarn global add gatsby-cli　
```
gitHub上の `gatsby-starter-hello-world`テンプレートを利用して `my-blog` という名前で新しいサイトを構築します.

```
gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-hello-world
```
`my-blog` ディレクトリに移動します.

```
cd my-blog
```
`gatsby develop` コマンドを実行します.  これで開発用サーバーを立ち上げ、ブラウザで確認することができます.

```
gatsby develop
```
すると、このような表示が出ると思います.

```
success open and validate gatsby-configs - 0.013s
success load plugins - 0.056s
success onPreInit - 0.004s
success initialize cache - 0.008s
success copy gatsby files - 0.088s
success onPreBootstrap - 0.014s
success createSchemaCustomization - 0.004s
success source and transform nodes - 0.017s
success building schema - 0.126s
success createPages - 0.003s
success createPagesStatefully - 0.055s
success onPreExtractQueries - 0.002s
success update schema - 0.024s   
success extract queries from components - 0.070s
success write out requires - 0.010s
success write out redirect data - 0.002s
success onPostBootstrap - 0.002s
⠀
info bootstrap finished - 3.722 s
⠀
success run queries - 0.037s - 2/2 53.45/s
⠀
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 - 3.341s
```
ここで重要なのは、`>` 印をつけた行です.  最初の `>` である

``` 
 http://localhost:8000/
```
これが **開発用サーバー** です.

そして、二番目の `>` である

```
http://localhost:8000/___graphql
```
これは、Gatsbyが採用している `GraphQL` というAPIのためのクエリ言語を参照する場所です.　また後に、使い方、書き方を説明したいと思います.


#####開発用サーバーにアクセスすると、画面左隅に、プログラミングでおなじみの文字が表れています！

## ページの編集、追加

さて、`my-blog` 内に`src` フォルダ (source) 、その中に `pages` フォルダがあると思います. 
`pages` フォルダにあるファイルは、**そのファイル名をパスとして**、ブラウザでのページとしてみることができます. (どっかで聞いたことあるような文章)

>`index.js` は `/` というパス、つまり開発用サーバーを立ち上げたときの最初のページを示し、例えば `about.js` は `/about` というパスでみることができます.


早速、 `index.js` を開いてみましょう.

```index.js
import React from "react"

export default () => <div>Hello world! </div>
```
`div`タグの中身を `Welcome to Gatsby !` に書き換えて、保存してみましょう. すると、すぐにブラウザに変更が反映されます. これがいわゆる `hot reloading `というものです.　

さて、`index.js` を見やすいように書き換えてみます. すこし表示する中身も変えてみました.
(やっていることは上の `index.js` と同じです.)

```index.js
import React from 'react'

const Home = () => {
    return (
        <div>
            <h1>This is Home  </h1>
            <h2>Some contents coming soon ...</h2>
        </div>
    )
}

export default Home
```
保存するとすぐに変更が反映されます.(反映されない場合はリロードしてください)

次に、新しいページを追加してみましょう. 試しに `src/pages` 内に `about` ページを追加します.

```about.js
import React from 'react'

const About = () => {
    return (
        <div>
            <h1>This is About Page </h1>
            <p>About Page coming soon ...</p>
        </div>
    )
}

export default About 
```
これで `about` ページが作られました。

では、`index` ページから `about` ページへリンクで移動したいと思います。
`index.js` 内に `a` タグを使ってリンクを作ってみましょう.

```index.js
import React from 'react'

const Home = () => {
    return (
        <div> 
            <h1>This is Home </h1>
+            <a href='/about'>Go to About</a>
            <h2>Some contents coming soon ...</h2>
        </div>
    )
}

export default Home 
```

実際にリンクを押して移動してみましょう。
移動はできましたが、全体のページがロードされてしまっています。

**`Gatsby` では `Link` を使ってリンクします。**
`index.js` にて、 `a` タグを `Link` で書き換えてみましょう

```index.js
import React from 'react'
+import { Link } from 'gatsby'

const Home = () => {
    return (
        <div> 
            <h1>This is Home </h1>
+            <Link to='/about'>Go to About</Link>
            <h2>Some contents coming soon ...</h2>
        </div>
    )
}

export default Home 
```
これで高速にページを切り替えることができました！　


#まとめ

- `gatsby develop` で開発用サーバーを立ち上げることができる
- `pages` ディレクトリ内のファイルへは、そのファイル名をパスとしてアクセスできる
- `Link` を使って高速なページ移動ができる

#次回やること
　`Layout` とコンポーネントについて、学びたいと思います !

ここまでご覧いただき、ありがとうございました :)