Chapter 05

ページの作成と編集

まずは、Gatsbyのプロジェクト構成について理解しておきましょう。

プロジェクト構成

├── .cache
├── LICENSE
├── README.md
├── gatsby-config.js
├── node_modules
├── package.json
├── public
├── src
│   └── pages
├── static
└── yarn.lock

Gatsbyの開発において最小限知っておくべき箇所のみについて説明します。

ディレクトリ / ファイル 説明
.cache 自動で生成されるキャッシュファイルを格納したディレクトリ
gatsby-config.js Gatsbyの設定ファイル。サイトのmetaデータを定義したり、利用するプラグインを設定します。
node_modules npmを用いてインストールしたパッケージ
package.json npmで管理するパッケージ情報を記載したファイル
public 事前にビルドし作成されたHTMLが格納されます。このディレクトリ内のファイルは自動で生成されます。
src ソースコードの置き場所。開発時にここに書いていくことになります。
src/pages ページを構成するソースコードの置き場所。ここに置かれたファイルがサイト上のページとひも付きます。
static 画像やfaviconの置き場所

ページの編集

下記のようにコードを編集してみましょう。
gatsby developを動かしている状態であれば、お使いのエディタにてファイルを保存するだけでページに反映されます。

// src/pages/index.js
import React from "react"

export default function Home() {
  return <div>Hello from Gatsby!</div>
}

hello-world.png

ページの追加

次は、新しいページを追加してみましょう。src/pages/page2.jsに新しいファイルを作成し、下記のコードを書いてみましょう。
localhost:8000/page2にアクセスすると新しいページが確認できます。

// src/pages/page2.js
import React from "react"
import { Link } from "gatsby"

export default function Page2() {
    return (
        <>
            <div>Page2</div>
            <Link to="/">ホームに戻る</Link>
        </>
    )
}

page2.png
リンクをクリックすると最初に作成したページに遷移します。
このように<Link>タグを使うことでGatsbyではページの遷移を手軽に実装でき、以下のように使います。
<Link to="遷移先のパス"/>

また、Gatsbyではsrc/pagesディレクトリにファイルを作成すると、localhost:8000/ファイル名のといったURLで新しいページが作成されます。

※ただし、index.jsのみ例外で、ファイル名ではなくlocalhost:8000/となります。