演習 - Gatsby を使用して静的アプリを作成する

完了

このユニットでは、新しい Gatsby アプリケーションを作成し、そこに 1 つのページを追加します。

Gatsby をインストールする

ターミナルで次のコマンドを実行し、Gatsby をシステムにグローバルにインストールします。

npm install -g gatsby-cli

Gatsby サイトを作成して実行する

すべての Gatsby プロジェクトは、Gatsby CLI によって作成されます。 CLI を使用すると、新しい Gatsby プロジェクトをスキャフォールディングしてホストし、最終的な製品を構築することもできます。最終的な製品は、任意の静的ホストにデプロイできる一連の静的ファイルです。

Gatsby アプリを作成する

次に、ターミナルに次のコマンドを入力して、新しい Gatsby アプリを作成します。

gatsby new myApp

gatsby new によって作成される新しい Gatsby アプリケーションに、コンテンツ ページを追加します。

Gatsby を実行する

Gatsby での開発を始めるには、開発サーバーを起動する前に、プロジェクト ディレクトリに移動する必要があります。

プロジェクト フォルダーに移動し、サーバーを起動するには、次のコマンドを実行します。

cd myApp
gatsby develop

次のような出力がターミナルに表示されます。

You can now view gatsby-starter-default in the browser.
  http://localhost:8000.
View GraphQL, an in-browser IDE, to explore your site's data and schema
  http://localhost:8000/___graphql

ブラウザーを開き、http://localhost:8000 に移動します。

Screenshot of the Gatsby app.

上のように表示されたら、最初の Gatsby アプリは正常に作成されました。 おめでとうございます!

ページ コンポーネントを追加する

次に、ブラウザーで移動できるコンポーネントである "ページ コンポーネント" を作成します。

  1. Visual Studio Code で "myApp" フォルダーを開きます。 pages/ ディレクトリを見つけます。

    Screenshot of the pages folder in VS Code.

  2. ファイルを作成して about.js という名前を付けます。 ファイルの内容を次のようにします。

    import React from 'react';
    import { Link } from 'gatsby';
    
    export default () => (
      <React.Fragment>
        <div>About page</div>
        <Link to="/">Back to home</Link>
      </React.Fragment>
    )
    

上のコードでは、データの表示のみが可能な "プレゼンテーション コンポーネント" が作成されます。 このコンポーネントでは、"About page" というテキストと、アプリケーションのルートを指すリンクがレンダリングされるだけです。

コードを貼り付けて、ファイル about.js に保存すると、開発サーバーによってアプリケーションが自動的に再コンパイルされます。 そして http://localhost:8000/about にアクセスすると、次の内容が表示されます。

Screenshot showing the loaded page component.

最初のページが完成しました。 これで、/pages ディレクトリに配置されたコンポーネントに移動する方法がわかります。