GatsbyJS v2 はじめの一歩 (1) 開発環境の立ち上げの続編です。

> ディレクトリの構成ディレクトリの構成

前章ではgatsby developで開発環境を立ち上げました。
まずはディレクトリ構成を確認していきましょう。重要なファイル・ディレクトリのみ説明します。

- package.json
- gatsby-node.js
- gatsby-config.js
- src/
    - pages/
    - components/
- public/

> package.jsonpackage.json

Node.jsお馴染みのpackage.jsonです。プロジェクトが使用するnpmパッケージの依存関係や、各種コマンドを登録しておけるnpm scriptsなどに使用します。

> gatsby-config.jsgatsby-config.js

サイトのメタデータ（タイトルなど）やGatsbyJSで使用するプラグインの設定などを記述するファイルです。後ほど詳しく解説します。

> gatsby-node.jsgatsby-node.js

GatsbyJSのライフサイクルに処理を加えたい場合や、挙動を変えたい場合にしようするファイルです。動的にページを生成したい場合などもこのファイルに変更を加えます。このファイルに関しても後ほど詳しく解説します。

> src/pagessrc/pages

URLに対応するReactコンポーネントを定義するディレクトリです。
基本的にこのディレクトリが入り口になっていくので重要です。

• yourdomain.com/はsrc/pages/index.js
• yourdomain.com/aboutはsrc/pages/about.js
• yourdomain.com/profile/snsはsrc/pages/profile/sns.js

とURLの構成とディレクトリ構成が1体1に対応します。

gatsby-ssr.jsとgatsby-browser.jsに関しては入門のうちは触らないと思うので省略します。

> public/public/

公開ディレクトリです。GatsbyJSに関係なく公開したいファイル（faviconやlogoの画像ファイル）を置く場所です。

> はじめの変更はじめの変更

ディレクトリ構成を抑えたところでよくわからないと思うので、開発環境を立ち上げた状態でファイルをいじってみましょう。

まずは http://localhost:8000 をブラウザで開いてそのページに対応する src/pages/index.js を開いてみましょう。
開いた状態で <p>Hi People</p> を消してみましょう。そうするとリロードなしで変更が反映されたと思います。GatsbyJSはファイルの変更であればリロードなしで変更の反映をやってくれます。ファイルの追加やリネームを行う場合はブラウザ側での手動リロードが必要になります。

import React from 'react'
import { Link } from 'gatsby'

import Layout from '../components/layout'

const IndexPage = () => (
  <Layout>
    <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <Link to="/page-2/">Go to page 2</Link>
  </Layout>
)

export default IndexPage

> 新しいページの追加新しいページの追加

変更が反映されるところまで確認したら、次は新しいページを追加してみましょう。
src/pages ディレクトリ以下には index.js と page-2.js があるので以下のような page-3.js を追加してみましょう。

import React from 'react'
import { Link } from 'gatsby'

import Layout from '../components/layout'

const IndexPage = () => (
  <Layout>
    <h1>My First Component</h1>
    <Link to="/">Back to Home</Link>
  </Layout>
)

export default IndexPage

追加後にブラウザで http://localhost:8000/page-3 を開いてみると新しいコンポーネントが反映されていると思います。

> リンクを貼るリンクを貼る

/page-3 のページを追加しましたが、今はトップページからリンクが貼られていないのでアクセスできません。そこでリンクを貼っていきましょう。

GatsbyJSではリンクを作るためのLinkコンポーネントが提供されています。import { Link } from 'gatsby'で読み出します。

参考: GatsbyJS v1ではgatsby-linkのパケッケージから提供されていました。過去の情報を探すときに注意

それではsrc/pages/index.jsを編集してリンクを追加しましょう。

 import React from 'react'
 import { Link } from 'gatsby'

 import Layout from '../components/layout'

 const IndexPage = () => (
   <Layout>
     <h1>Hi people</h1>
     <p>Welcome to your new Gatsby site.</p>
     <p>Now go build something great.</p>
     <Link to="/page-2/">Go to page 2</Link>
+    <Link to="/page-3/">Go to page 3</Link>
   </Layout>
 )

export default IndexPage

もう一度、http://localhost:8000 を開くと、「Go to page 3」というリンクが増えていると思います。

以上のようにGatsbyJSではディレクトリ構造とURL構造が連動しているので、ルーティング用のファイルなどは存在せずシンプルにプロジェクトを進めることができます。
ディレクトリ構造とURL構造が連動するのは、最近のフロントエンドの流れでNext.js(React)やNuxt.js(Vue)でも同様な仕組みが存在しています。

次の章ではstyled-componentsを使ってReactコンポーネントにスタイルを当てる説明をします。