ビルディングブロックを知ろう!

前のセクションでは、必要なソフトウェアをインストールし、"hello world "スターターを使用して最初のGatsbyサイトを作成することで、ローカル開発環境を準備しました。では、そのスターターで生成されたコードをさらに深く掘り下げてみましょう。

Gatsbyスターターを使う

前のセクションでは以下のコマンドを使用して“hello world” スターターをベースに新しいサイトを制作しました。
gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
新規にギャツビーサイトを作成する場合、既存の任意のギャツビースターターをベースに、以下のコマンド構造を使用してサイトを作成することができます。
gatsby new [SITE_DIRECTORY_NAME] [URL_OF_STARTER_GITHUB_REPO]
最後のURLを省略すると、Gatsbyは自動的にデフォルトのスターターに基づいてサイトを生成します。このチュートリアルのこのセクションでは、チュートリアルパート0で作成した "Hello World "サイトを使用してください。スターターの変更については、ドキュメントを参照してください。

コードを開く

コードエディタで「Hello World」サイト用に生成されたコードを開き、「hello-world」ディレクトリに含まれるさまざまなディレクトリとファイルを見てみましょう。
こんな感じになります。
Note:

ここに表示されているエディタはVisual Studio Codeです。別のエディタを使っている場合は、少し違って見えます。

前のセクションで gatsby develop を実行した後に開発サーバーを停止してしまった場合は、今すぐ再起動してください - hello-world サイトに変更を加える時が来ました!

Gatsbyに親しむ

コードエディタで/srcディレクトリを開きます。中には一つのディレクトリがあります。 /ページです。 src/pages/index.jsのファイルを開きます。このファイルのコードは、1つのdivとテキストを含むコンポーネントを作成します。

Hello Worldのホームページをカスタムしよう!

  1. Hello World!」のテキストを「Hello Gatsby!」に変更して保存します。ウィンドウを横に並べると、ファイルを保存した後、コードやコンテンツの変更がほぼ瞬時にブラウザに反映されていることがわかります。
Note:

Gatsbyは開発プロセスを高速化するためにホットリロードを使用します。基本的には、Gatsby開発サーバーを実行しているとき、Gatsbyサイトのファイルはバックグラウンドで「監視」されています - ファイルを保存すると、変更内容がすぐにブラウザに反映されます。ページを更新したり、開発サーバーを再起動したりする必要はありません。

  1. これで、変更した内容をもう少し見やすくすることができます。src/pages/index.js のコードを以下のコードに置き換えて、もう一度保存してみてください。テキストの色が紫色になり、フォントサイズが大きくなります。
src/pages/index.js

import React from "react"

export default function Home() {
  return <div style={{ color: `purple`, fontSize: `72px` }}>Hello Gatsby!</div>
}
チュートリアルのパート2では、ギャツビーのスタイリングについて詳しく説明します。
  1. フォントサイズのスタイリングを削除し、"Hello Gatsby!"のテキストをレベル1のヘッダーに変更し、ヘッダーの下にパラグラフを追加します。
src/pages/index.js

import React from "react"
export default function Home() {
  return (
    <div style={{ color: `purple` }}>
      <h1>Hello Gatsby!</h1>
      <p>What a world.</p>
    </div>
  );
}
  1. 画像を追加します。(Unsplashのランダム画像)
src/pages/index.js

import React from "react"

export default function Home() {
  return (
    <div style={{ color: `purple` }}>
      <h1>Hello Gatsby!</h1>
      <p>What a world.</p>
      <img src="https://source.unsplash.com/random/400x200" alt="" />
    </div>
  )
}

待って。。。HTMLがJSの中に入ってる?

ReactやJSXに慣れている方は、このセクションを読み飛ばしても構いません。Reactフレームワークを使ったことがない人は、JavaScriptの関数の中でHTMLが何をしているのか疑問に思うかもしれません。あるいは、なぜ最初の行で react をインポートしているのに、どこにも使っていないように見えるのでしょうか。
このハイブリッドな「HTML-in-JS」は、実際にはJSXと呼ばれるReact用のJavaScriptの構文拡張です。React の経験がなくても、このチュートリアルに沿って進むことができますが、興味がある方は、ここで簡単な入門編をご紹介します。


src/pages/index.jsファイルの元の内容を考えてみましょう。
src/pages/index.js

import React from "react"

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

純粋なJavaScriptでは、もっとこんな感じです。
src/pages/index.js

import React from "react"
export default function Home() {
  return React.createElement("div", null, "Hello world!")
}

これで、'react'のインポートの使い方にスポットが当たるようになりました しかし、待ってください。あなたは純粋なHTMLやJavaScriptではなく、JSXを書いています。ブラウザはどうやってそれを読み取るのでしょうか?簡単に言うと、ギャツビーサイトには、あなたのソースコードをブラウザが解釈できるものに変換するためのツールがすでにセットアップされているわけではありません。

コンポーネントを利用した構成

先ほど編集していたホームページは、ページコンポーネントを定義して作成したものです。コンポーネント」とは何でしょうか?

広く定義すると、コンポーネントはサイトの構成要素であり、UI(ユーザーインターフェース)の一部を記述する自己完結型のコードです。

GatsbyはReact上に構築されています。コンポーネントの使用と定義について話すとき、私たちが実際に話しているのはReactコンポーネントのことです。

コンポーネントを使ってビルドを始めたときに(すでに開発者であれば)、大きな精神的な変化の一つは、CSS、HTML、JavaScriptが密接に結合され、同じファイル内に存在していることが多いということです。

一見単純な変化に見えますが、これはウェブサイトの構築についての考え方に大きな影響を与えます。

カスタムボタンの作成を例に考えてみましょう。以前は、カスタム スタイルを持つ CSS クラス (おそらく .primary-button) を作成し、それらのスタイルを適用したいときはいつでもそれを使用していました。例えば、以下のようになります。

example

<button class="primary-button">Click me</button>
コンポーネントの世界では、代わりにボタンスタイルを持つ PrimaryButton コンポーネントを作成し、それをサイト全体で使用します。
example

<PrimaryButton>Click me</PrimaryButton>
コンポーネントは、あなたのサイトの基本的なビルディングブロックになります。ブラウザが提供するビルディングブロック、例えば <button /> などに制限されることなく、プロジェクトのニーズをエレガントに満たす新しいビルディングブロックを簡単に作成することができます。

ページコンポーネントを使う

src/pages/*.jsで定義されているReactコンポーネントは自動的にページになります。これを実際に見てみましょう。 Hello World」のスターターに付属していたsrc/pages/index.jsファイルはすでに持っています。アバウトページを作ってみましょう。
  1. src/pages/about.jsに新規ファイルを作成し、以下のコードをコピーして保存します。
src/pages/about.js

import React from "react"

export default function About() {
  return (
    <div style={{ color: `teal` }}>
      <h1>About Gatsby</h1>
      <p>Such wow. Very React.</p>
    </div>
  )
}
  1. http://localhost:8000/about/に移動します。
src/pages/about.jsファイルにReactコンポーネントを入れるだけで、/aboutにアクセスできるページができました。

サブコンポーネントを使って見よう!

ホームページもアバウトページもかなり大きくなってしまい、色々と書き換えていたとしましょう。
サブコンポーネントを使ってUIを再利用可能な部分に分割することができます。 両方のページに<h1>ヘッダーがあります - ヘッダーを記述するコンポーネントを作成します。
  1. src/componentsに新しいディレクトリを作成し、そのディレクトリ内にheader.jsというファイルを作成します。
  2. 新しい src/components/header.jsファイルに以下のコードを追加します。
src/components/header.js

import React from "react"

export default function Header() {
  return <h1>This is a header.</h1>
}
  1. about.jsファイルを修正して、Headerコンポーネントをインポートします。h1のマークアップを<Header />に置き換えます。
src/pages/about.js

import React from "react"
import Header from "../components/header"

export default function About() {
  return (
    <div style={{ color: `teal` }}>
      <Header />
      <p>Such wow. Very React.</p>
    </div>
  )
}
ブラウザでは "About Gatsby" のヘッダーテキストは "This is a header" に置き換えられるはずです。しかし、"About "ページに "This is a header "とは書かれたくないでしょう。あなたは「ギャツビーについて」と言いたいのです。
  1. src/components/header.jsに戻って、以下の変更を行います。
src/pages/header.js

import React from "react"
export default function Header(props) {
  return <h1>{props.headerText}</h1>
}
  1. src/pages/about.jsに戻って、以下の変更を行います。
src/pages/about.js

import React from "react"
import Header from "../components/header"
export default function About() {
  return (
    <div style={{ color: `teal` }}>
      <Header headerText="About Gatsby" />
      <p>Such wow. Very React.</p>
    </div>
  )
}
これで「アバウト・ギャツビー」のヘッダーテキストが再び表示されるはずです。

propsって何?

先ほど、React コンポーネントを UI を記述する再利用可能なコードの一部と定義しました。これらの再利用可能な部分を動的にするためには、異なるデータを提供できる必要があります。これを行うには、「props」と呼ばれる入力を使用します。propsはReactコンポーネントに供給される(適切な)プロパティです。

about.jsでは、インポートしたHeaderサブコンポーネントに "About Gatsby "という値を持つheaderTextプロップを渡しています。
src/pages/about.js

<Header headerText="About Gatsby" />
header.jsでは、headerコンポーネントはheaderTextプロップを受け取ることを期待しています(期待するように書いてあるので)。そのため、以下のようにアクセスすることができます。
src/pages/header.js

<h1>{props.headerText}</h1>
Note:

JSXでは、JavaScriptの式を{}でラップすることで、任意の式を埋め込むことができます。このように、"props "オブジェクトからheaderTextプロパティ(または "prop!

もしあなたが <Header /> コンポーネントに別のプロップを渡していたとしたら、次のようになります。 header.jsでは、headerコンポーネントはheaderTextプロップを受け取ることを期待しています(期待するように書いてあるので)。そのため、以下のようにアクセスすることができます。
src/pages/about.js

<Header headerText="About Gatsby" arbitraryPhrase="is arbitrary" />
arbitraryPhrase プロップにもアクセスできたはずです。{props.arbitraryPhrase} .
  1. これによりコンポーネントが再利用可能になることを強調するために、aboutページに追加の<Header />コンポーネントを追加し、以下のコードをsrc/pages/about.jsファイルに追加して保存します。
src/pages/about.js

import React from "react"
import Header from "../components/header"

export default function About() {
  return (
    <div style={{ color: `teal` }}>
      <Header headerText="About Gatsby" />
      <Header headerText="It's pretty cool\" />
      <p>Such wow. Very React.</p>
    </div>
  )
}
プロップを使用して異なるデータを渡すことによって、コードを書き換えることなく、2つ目のヘッダーを作成します。

レイアウトコンポーネント

レイアウトコンポーネントは、複数のページで共有したいサイトのセクションのためのものです。
例えば、ギャツビーサイトでは、一般的にヘッダーとフッターを共有するレイアウトコンポーネントがあります。
レイアウトに追加する他の一般的なものには、サイドバーやナビゲーションメニューがあります。

第3部では、レイアウトの構成要素を探っていきます。

ページ間のリンク

ページ間をリンクしたくなることも多いでしょう - ギャツビーサイトのルーティングを見てみましょう。

<Link />コンポーネント

  1. インデックスページコンポーネント(src/pages/index.js)を開き、Gatsbyから<Link />コンポーネントをインポートし、ヘッダの上に<Link />コンポーネントを追加し、パス名に"/contact/"の値を持つtoプロパティを与えます。
src/pages/index.js

import React from "react"
import { Link } from "gatsby"
import Header from "../components/header"

export default function Home() {
  return (
    <div style={{ color: `purple` }}>
      <Link to="/contact/">Contact</Link>
      <Header headerText="Hello Gatsby!" />
      <p>What a world.</p>
      <img src="https://source.unsplash.com/random/400x200" alt="" />
    </div>
  )
}
ホームページの新しい「お問い合わせ」リンクをクリックすると・・・ ギャツビー開発の404ページ。なぜですか?まだ存在しないページに リンクしようとしているからです
  1. さて、src/pages/contact.jsに新しい「お問い合わせ」ページ用のページコンポーネントを作成し、ホームページにリンクさせる必要があります。
src/pages/contact.js

import React from "react"
import { Link } from "gatsby"
import Header from "../components/header"

export default function Contact() {
  return (
    <div style={{ color: `teal` }}>
      <Link to="/">Home</Link>
      <Header headerText="Contact" />
      <p>Send us a message!</p>
    </div>
  )
}
ファイルを保存すると、連絡先のページが表示され、ホームページへのリンクをたどることができるはずです。

Gatsby <Link />コンポーネントは、サイト内のページ間をリンクするためのものです。Gatsbyサイトで処理されないページへの外部リンクには、通常のHTML <a>タグを使用してください。

Gatsbyで作ったサイトの公開

Gatsbyは最新のサイトジェネレーターであり、サーバーをセットアップしたり、複雑なデータベースをデプロイしたりする必要はありません。その代わりに、Gatsbyビルドコマンドは静的なHTMLとJavaScriptファイルのディレクトリを生成し、静的サイトホスティングサービスにデプロイすることができます。

初めてのギャツビーサイトの展開にSurgeを使ってみてください。Surgeは数ある「静的サイトホスト」の中でも、ギャツビーサイトの展開を可能にしてくれるホストです。
Note:

Gatsby Cloudは、Gatsbyを開発したチームによって開発されたもう一つのデプロイメントオプションです。次のセクションでは、Gatsby Cloudへのデプロイ方法を説明します。

Surge をインストールして設定していない場合は、新しいターミナルウィンドウを開き、コマンドラインツールをインストールしてください。
npm install --global surge

# で、無料アカウントを作ります。
surge login
次に、サイトのルートにあるターミナルで以下のコマンドを実行してサイトを構築します
(ヒント: このコマンドをサイトのルートで実行していることを確認してください。この場合、hello-world フォルダの中にあります。)
gatsby build
ビルドには15~30秒ほどかかるはずです。ビルドが完了したら、gatsbyビルドコマンドがデプロイの準備をしたファイルを見てみるのも面白いでしょう。 以下のターミナルコマンドをサイトのルートに入力して、生成されたファイルのリストを見てみましょう。
ls public
そして、生成されたファイルを surge.sh に公開して、最後にサイトをデプロイします。新しく作成したサージアカウントの場合は、サイトを公開する前にサージでメールを確認する必要があります(最初に受信箱をチェックしてメールを確認してください)。
surge public/
Note:

そして、生成されたファイルをsurge.shに公開して、最後にサイトをデプロイします。新しく作成したサージアカウントの場合は、サイトを公開する前にサージでメールを確認する必要があります(最初に受信箱をチェックしてメールを確認してください)。

これが終了すると、ターミナルに次のようなものが表示されるはずです。 一番下の行に記載されているWebアドレス(今回はlowly-pain.surge.sh)を開くと、新しく公開されたサイトが表示されます!これで、あなたのサイトが完成しました。お疲れ様でした。
以降、本家サイトではGatsbyCloudの利用方法が記載されておりますが、私には関係ないのでパスします。 ご覧になりたい方はこちらからどうぞ!

チュートリアルを進める >>