Slide 1
Slide 1 text
2022年最新版
GatsbyJS + TypeScript + microCMS
でブログを作る。
2022/05/26 by hanetsuki
in ジャムジャム！！Jamstack_7
Slide 2
Slide 2 text
hanetsuki
● 中野にあるweb開発会社”ちょっと株式会社”所属
● 業界歴5年目のフロントエンドエンジニア
● デザインと開発とオタクコンテンツが好き
自己紹介
Slide 3
Slide 3 text
GatsbyJSって何？
Slide 4
Slide 4 text
GatsbyJSは、
静的サイトジェネレーターでReactをベースに開発されているフレームワークです。
特徴として、Gatsbyではデータを取得する際にはGraphQLを利用します。
GraphQLを使って内部リソースのMarkdownファイルや、CMSなどのさまざまなデータを取得する
ことができます。
Slide 5
Slide 5 text
microCMSを用意する
Slide 6
Slide 6 text
microCMSを用意する
1. 環境を作成します
サービスIDは後ほど利用するので控えておきます。
Slide 7
Slide 7 text
microCMSを用意する
2. APIを作成します
テンプレートが用意されているのでそちらを利用します。
今回は、ブログを選択します。
しばらくするとコンテンツが作成されます。
Slide 8
Slide 8 text
microCMSを用意する
3. APIキーを控えておきます
後で、利用するのでこの画面で控えておきます。
Slide 9
Slide 9 text
GatsbyJSの環境を作る
Slide 10
Slide 10 text
GatsbyJSの環境を作る
公式のQuick startに従って下記のコマンドを実行します。
参考：https://www.gatsbyjs.com/docs/quick-start/
npm init gatsby
Slide 11
Slide 11 text
GatsbyJSの環境を作る
microCMSのコンテンツを取得する
microCMSが公式で提供している
gatsby-source-microcms を利用します。
.env
npm install gatsby-source-microcms
MICROCMS_SERVICE_ID=
MICROCMS_API_KEY=
Slide 12
Slide 12 text
GatsbyJSの環境を作る
GraphQL Typegen を利用してみる
GatsbyJSのv4.14で実験的に投入された GraphQL Typegen を利用してみます。
これにより、動的に src/gatsby-types.d.ts が作成され Queries.** でGraqhQLの型定義を取得することができます。
Slide 13
Slide 13 text
microCMSからコンテンツを取得する
Slide 14
Slide 14 text
コンテンツの一覧を取得してみる
/pages/index.tsx にGraphQLを記載します。
● 公開日降順
● 最大3件
microCMSからコンテンツを取得する
Slide 15
Slide 15 text
コンテンツの一覧を表示してみる
取得した情報を表示してみます。
microCMSからコンテンツを取得する
Slide 16
Slide 16 text
表示できました。
microCMSからコンテンツを取得する
Slide 17
Slide 17 text
一覧ページを作成する
Slide 18
Slide 18 text
ブログの一覧ページを作成します。
ページのパスは、 /blogs/ をベースとして、
2ページ移行がある場合には、 /blogs/page/{number} のようなパスになるよう考慮していきます。
動的ページの作成記述は全て gatsby-node.ts に集約させます。
GatsbyJS v4.9 から.tsファイルが利用できるようになりました。
一覧ページを作成する
Slide 19
Slide 19 text
ブログの一覧ページを作成します。
一覧ページを作成する
Slide 20
Slide 20 text
ブログの一覧ページを作成します。
ページのパスは、 /blogs/ を基本として、
ページネーションする場合は、 /blogs/page/2
のように値が増えていくよう想定します。
動的ページの作成記述は全て
gatsby-node.ts に集約させます。
一覧ページを作成する
Slide 21
Slide 21 text
ブログの一覧ページを作成します。
一覧ページを作成する
Slide 22
Slide 22 text
src/templates/blogs.tsx
にGraqhQLを記載します。
$limit や $offset には、gatsby-node.tsで記載したcontextに渡したパラメーターが扱えます。
一覧ページを作成する
Slide 23
Slide 23 text
src/templates/blogs.tsx
一覧ページを作成する
Slide 24
Slide 24 text
詳細ページを作成する
Slide 25
Slide 25 text
ブログの詳細ページを作成します。
gatsby-node.ts にページの詳細ページを作成するための
記述をします。
idはmicroCMSのコンテンツIDを利用します。
詳細ページを作成する
Slide 26
Slide 26 text
src/templates/blog.tsx にGraqhQLを記載します。
$id には、gatsby-node.tsで記載したcontextに渡したパラメーターが扱えます。
詳細ページを作成する
Slide 27
Slide 27 text
下記のようなページが簡単に作れました。
詳細ページを作成する
Slide 28
Slide 28 text
ご清聴ありがとうございました