Gatsby starterであるgatsby-starter-defaultをベースに中身を把握していきました。

こんにちは、Yuuichiです。

今回Gatsbyに関する2回目の投稿となります。

Gatsbyには初期プロジェクト作成に便利なスターター(ベースファイルが準備されているもの)がいくつも存在していました。

興味がある方は、以下にStartの一覧がありますので、ご参照ください。

Gatsbyjs starters : https://www.gatsbyjs.com/starters/

様々なstarterが作成されているのですが、なるべく最小の構成から始めたいなと思って、gatsby-starter-defaultを利用して自己紹介ページのようなものを学習しながら作成していこうと思います。

今回ですが、まずstarterの中身をざっくり把握するだけにしようと思います。

初期プロジェクトの準備

ここからは、実際に手を動かしながら作業した点を記載していこうと思います。

以下コマンドでstarterを使ってベースプロジェクトを作成。

# second_sessonフォルダは、ご自身の好きなフォルダ名をご指定ください。
$ gatsby new second_lesson https://github.com/gatsbyjs/gatsby-starter-default
...作成されるまでしばらく待ちます。

念のため作成されたフォルダへ移動して、起動してみましょう。

$ cd second_lesson
$ cat package.json

package.jsonの中身
  "scripts": {
   "build": "gatsby build",
   "develop": "gatsby develop",   ← 開発でgatsby起動するコマンド
   "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
   "start": "npm run develop",
   "serve": "gatsby serve",
   "clean": "gatsby clean",
   "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
 },

package.jsonを見るとdevelopコマンドで起動できるようなので、起動してみましょう。

$ npm run develop
...省略
You can now view gatsby-starter-default in the browser.
⠀
 http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
 http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build
⠀
success Building development bundle - 6.863s

8000番ポートで確認ができるので、http://localhost:8000/で確認します。

このようなページが表示されるかと思います。good!!

gatsby-starter-defaultをみていきましょう

いきなり自己紹介ページ作成していく前に、starterの中身をみていこうかと思います。

まずpackage.jsonでnpmライブラリに何があるのか確認しました。

"dependencies": {
   "gatsby": "^2.26.1",
   "gatsby-image": "^2.5.0",
   "gatsby-plugin-manifest": "^2.6.1",
   "gatsby-plugin-offline": "^3.4.0",
   "gatsby-plugin-react-helmet": "^3.4.0",
   "gatsby-plugin-sharp": "^2.8.0",
   "gatsby-source-filesystem": "^2.5.0",
   "gatsby-transformer-sharp": "^2.6.0",
   "prop-types": "^15.7.2",
   "react": "^16.12.0",
   "react-dom": "^16.12.0",
   "react-helmet": "^6.1.0"
},
"devDependencies": {
   "prettier": "2.2.1"
},

自分も使ったことがないライブラリが入ってました。

gatsbyの本体・react関連は今回説明から省きまして、gatsby-〇〇について把握のためメモしました。

gatsby-image

GatsbyのGraphQLクエリとシームレスに連携するように特別に設計されたReactコンポーネント。 Gatsbyのネイティブ画像処理機能と高度な画像読み込み技術を組み合わせて、サイトの画像読み込みを簡単かつ完全に最適化します。 gatsby-imageは、gatsby-plugin-sharpを使用して画像変換を強化します。

gatsby-plugin-manifest

このプラグインによって有効にされるWebアプリのマニフェスト（PWA仕様の一部）を使用すると、ユーザーはほとんどのモバイルブラウザーのホーム画面にサイトを追加できます。

gatsby-plugin-offline

Gatsbyのサイトをオフラインで動作させ、ネットワーク接続の不良に対する耐性を高めるためのドロップインサポートを追加します。 Workbox Buildを使用して、サイトのService Workerを作成し、ServiceWorkerをクライアントにロードします。

gatsby-plugin-react-helmet

ReactHelmetで追加されたサーバーレンダリングデータのドロップインサポートを提供します。

gatsby-plugin-sharp

Sharp画像処理ライブラリ上に構築されたいくつかの画像処理関数を公開します。 これは、他のGatsbyプラグインで一般的に使用される低レベルのヘルパープラグインです。 通常、これを直接使用するべきではありませんが、非常にカスタムな画像処理を行う場合に役立つことがあります。

gatsby-source-filesystem

ローカルファイルシステムからGatsbyアプリケーションにデータをソースするためのプラグイン。プラグインはファイルからファイルノードを作成します。

色々なソースファイルをGraphQLでまとめてに管理するようなイメージでしょうか。

gatsby-transformer-sharp

Sharp画像処理ライブラリでサポートされている画像タイプからImageSharpノードを作成し、サイズ変更、トリミング、レスポンシブ画像の作成など、さまざまな方法で画像を処理するためのGraphQLタイプのフィールドを提供します。

色々出てきてちょっと消化不良ですが、この辺りは実際に触ったりしながらどういったものか少しずつ理解していこうと思います。

コード整形は最初からPrettierが入っているみたいですねぇ。

gatsby-config.jsの設定をみていきます

初期のパッケージに関して、なんとなく理解ができたので、次はプラグイン関連を少し覗いていこうかと思います。

gatsby-config.js(プラグインだけを抜粋しています)

plugins: [
   `gatsby-plugin-react-helmet`,
   {
     resolve: `gatsby-source-filesystem`,
     options: {
       name: `images`,
       path: `${__dirname}/src/images`,
     },
   },
   `gatsby-transformer-sharp`,
   `gatsby-plugin-sharp`,
   {
     resolve: `gatsby-plugin-manifest`,
     options: {
       name: `gatsby-starter-default`,
       short_name: `starter`,
       start_url: `/`,
       background_color: `#663399`,
       theme_color: `#663399`,
       display: `minimal-ui`,
       icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
     },
   },
   // this (optional) plugin enables Progressive Web App + Offline functionality
   // To learn more, visit: https://gatsby.dev/offline
   // `gatsby-plugin-offline`,
]

それぞれ利用するプラグイン名を設定していますが、先ほど個人的にいまいち理解できなかったgatsby-source-filesystemの設定がありました。

gatsby-source-filesystem

どうもプロジェクトのディレクトリ名/src/imagesをimagesという名前をつけている様子です。

graphqlでどんなファイルがあるかみてみようと思います。

ビルドすると以下のurlからgraphqlを実行できるのでアクセスします。

http://localhost:8000/___graphql

allFileのfilterでsourceInstanceNameがimagesを指定して実行するとnodeにはsrc/images配下に配置している画像ファイル名を見ることができました。

gatsby-source-filesystemは、複数のインスタンスを定義できるようなので必要な場合は、pages配下やjsonデータなどをページで表示したい場合は、dataフォルダを作成してdataをgatsby-source-filesystemで設定するようなイメージだと思います。

gatsby-plugin-manifest

    {
     resolve: `gatsby-plugin-manifest`,
     options: {
       name: `gatsby-starter-default`,
       short_name: `starter`,
       start_url: `/`,
       background_color: `#663399`,
       theme_color: `#663399`,
       display: `minimal-ui`,
       icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
     },
   }

モバイルのホーム画面に追加されるアイコンの設定のようですので、

iconにしたいファイルのパスや背景の画像・名前などを設定しているようです。実際に端末で追加してはいないので、また今後どう追加されるかみてみたいと思います。

ここからはcomponents配下・pages配下のファイルを見ていこうかと思います。

components配下について

まず作成されたファイル構成を理解しようと思います。

starterを利用するとheader・画像・複数のページのベースレイアウトとするlayout.jsなど基盤となるファイルが作成されていました。

$ tree
.
├── header.js
├── image.js
├── layout.css
├── layout.js
└── seo.js

まず各種ページで共通で利用するlayout.jsからみていきましょう。

import React from "react"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"

import Header from "./header"
import "./layout.css"

const Layout = ({ children }) => {
 const data = useStaticQuery(graphql`
   query SiteTitleQuery {
     site {
       siteMetadata {
         title
       }
     }
   }
 `)

 return (
   <>
     <Header siteTitle={data.site.siteMetadata?.title || `Title`} />
     <div
       style={{
         margin: `0 auto`,
         maxWidth: 960,
         padding: `0 1.0875rem 1.45rem`,
       }}
     >
       <main>{children}</main>
       <footer style={{
         marginTop: `2rem`
       }}>
         © {new Date().getFullYear()}, Built with
         {` `}
         <a href="https://www.gatsbyjs.com">Gatsby</a>
       </footer>
     </div>
   </>
 )
}

Layout.propTypes = {
 children: PropTypes.node.isRequired,
}

export default Layout

ヘッダーがあり、ページ単位で表示するメインのchildrenがあり、フッターが設定されています。

気になった点だけ、以下に記載しています。

ここではlayout.cssというファイルが読まれているので、どのページでも共通で利用するスタイルに関しては、layout.cssを編集していけばいいのかなと思います。

seo.jsはヘッダーのメタ情報(title・descriptionなど)を設定しているので、実際に本番にリリースしてSEOを強化したい場合は、ここを編集するようです。

次にpagesの方をみていこうと思います。

pages配下について

rootはindex.jsですが、見慣れないusing-typescript.tsxというファイルが存在しています。

$ tree
...
├── 404.js
├── index.js
├── page-2.js
└── using-typescript.tsx ←今回は普通にjsでいこうと思います（削除)

using-typescript.tsxはタイプスクリプトで書く場合のサンプルのようでしたので、今回はJavaScriptで作成しようと思いますので、削除しました。

404.jsは存在しないパスにアクセスした際に表示されるので、必要です。

試しに/fugaという存在しないパスにアクセスすると以下のようなページが表示されます。

page-2.jsは、他ページ用に用意されているので一旦残しておきつつ。

まずは、index.jsをみていきます。

index.js

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

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"

const IndexPage = () => (
 <Layout>
   <SEO title="Home" />
   <h1>Hi people</h1>
   <p>Welcome to your new Gatsby site.</p>
   <p>Now go build something great.</p>
   <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
     <Image />
   </div>
   <Link to="/page-2/">Go to page 2</Link> <br />
   <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
 </Layout>
)

export default IndexPage

先ほどのcomponentsや他のpage-2などのリンクを作成して、ルートアクセス時のページに表示するものを記述しています。

ということですので、pages/index.jsとcomponents/配下に必要となるコンポーネントを作成してpagesで読み込ませて作成していく形を次回自己紹介ページなどで触りながらやっていこうかと思います。

まとめ

今回は、まずstarterでベースプロジェクトを作成して、中身の設定やgatsby専用のライブラリの把握、雛形のファイル構成を知るところから初めてみました。

次回は、実際にcomponentsにファイルを追加したり、pages配下のファイルを編集したりして、自己紹介 or 簡単な自分用のページを作成して学習しようかと思います。

最後まで読んでいただいた方ありがとうございました!

また、次回の投稿でお会いしましょう！