mottox2 blog

GatsbyJS v2 はじめの一歩 (2) 実際にページを作る

bloggatsby

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

ディレクトリの構成

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

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

package.json

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

gatsby-config.js

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

gatsby-node.js

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

src/pages

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

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

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

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

public/

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

はじめの変更

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

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

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>
  </Layout>
)

export default IndexPage

新しいページの追加

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

src/pages/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を編集してリンクを追加しましょう。

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コンポーネントにスタイルを当てる説明をします。

dev

ウェブ技術で縦書きを含む画像を生成したい

ここ最近、Web技術を利用した画像生成に興味があります。本記事では、日本語における表現の一種である縦書きに焦点を当て、Web技術を使った縦書きを含む画像生成方法についての調査をまとめました。 > 現

blog

Netlify Formsで問い合わせフォームを作ったら簡単だった

追記(2022/12/29): 問い合わせに対応する窓口をTwitterに統一したいので、フォームページは削除しました。 当ブログは静的サイトホスティングサービスのNetlifyでホスティングされ

netlify
dev

翻訳でHacktoberfestに参加しました

毎年10月に開催されるHacktoberfestに参加しました。このイベントはOSSへの貢献を行い、期間中に規定数(4つ)の貢献を行った人に特典がプレゼントされるものになっています。 自分はドキュメ

Copyright © 2023 @mottox2 All Rights Reserved.