$30 off During Our Annual Pro Sale. View Details »

2022年最新版 GatsbyJS + TypeScript + microCMS でブログを作る。

2022年最新版 GatsbyJS + TypeScript + microCMS でブログを作る。

hanetsuki

May 26, 2022
Tweet

More Decks by hanetsuki

Other Decks in Technology

Transcript

  1. 2022年最新版 GatsbyJS + TypeScript + microCMS でブログを作る。 2022/05/26 by hanetsuki

    in ジャムジャム!!Jamstack_7
  2. hanetsuki • 中野にあるweb開発会社”ちょっと株式会社”所属 • 業界歴5年目のフロントエンドエンジニア • デザインと開発とオタクコンテンツが好き 自己紹介

  3. GatsbyJSって何?
 


  4. GatsbyJSは、 静的サイトジェネレーターでReactをベースに開発されているフレームワークです。 特徴として、Gatsbyではデータを取得する際にはGraphQLを利用します。 GraphQLを使って内部リソースのMarkdownファイルや、CMSなどのさまざまなデータを取得する ことができます。

  5. microCMSを用意する
 


  6. microCMSを用意する 1. 環境を作成します サービスIDは後ほど利用するので控えておきます。

  7. microCMSを用意する 2. APIを作成します テンプレートが用意されているのでそちらを利用します。 今回は、ブログを選択します。 しばらくするとコンテンツが作成されます。

  8. microCMSを用意する 3. APIキーを控えておきます 後で、利用するのでこの画面で控えておきます。

  9. GatsbyJSの環境を作る
 


  10. GatsbyJSの環境を作る 公式のQuick startに従って下記のコマンドを実行します。 参考:https://www.gatsbyjs.com/docs/quick-start/ npm init gatsby

  11. GatsbyJSの環境を作る microCMSのコンテンツを取得する microCMSが公式で提供している gatsby-source-microcms を利用します。 .env npm install gatsby-source-microcms MICROCMS_SERVICE_ID=

    MICROCMS_API_KEY=
  12. GatsbyJSの環境を作る GraphQL Typegen を利用してみる GatsbyJSのv4.14で実験的に投入された GraphQL Typegen を利用してみます。 これにより、動的に src/gatsby-types.d.ts

    が作成され Queries.** でGraqhQLの型定義を取得することができます。
  13. microCMSからコンテンツを取得する
 


  14. コンテンツの一覧を取得してみる /pages/index.tsx にGraphQLを記載します。 • 公開日降順 • 最大3件 microCMSからコンテンツを取得する

  15. コンテンツの一覧を表示してみる 取得した情報を表示してみます。 microCMSからコンテンツを取得する

  16. 表示できました。 microCMSからコンテンツを取得する

  17. 一覧ページを作成する
 


  18. ブログの一覧ページを作成します。 ページのパスは、 /blogs/ をベースとして、 2ページ移行がある場合には、 /blogs/page/{number} のようなパスになるよう考慮していきます。 動的ページの作成記述は全て gatsby-node.ts に集約させます。

    GatsbyJS v4.9 から.tsファイルが利用できるようになりました。 一覧ページを作成する
  19. ブログの一覧ページを作成します。 一覧ページを作成する

  20. ブログの一覧ページを作成します。 ページのパスは、 /blogs/ を基本として、 ページネーションする場合は、 /blogs/page/2 のように値が増えていくよう想定します。 動的ページの作成記述は全て gatsby-node.ts に集約させます。

    一覧ページを作成する
  21. ブログの一覧ページを作成します。 一覧ページを作成する

  22. src/templates/blogs.tsx にGraqhQLを記載します。 $limit や $offset には、gatsby-node.tsで記載したcontextに渡したパラメーターが扱えます。 一覧ページを作成する

  23. src/templates/blogs.tsx 一覧ページを作成する

  24. 詳細ページを作成する
 


  25. ブログの詳細ページを作成します。 gatsby-node.ts にページの詳細ページを作成するための 記述をします。 idはmicroCMSのコンテンツIDを利用します。 詳細ページを作成する

  26. src/templates/blog.tsx にGraqhQLを記載します。 $id には、gatsby-node.tsで記載したcontextに渡したパラメーターが扱えます。 詳細ページを作成する

  27. 下記のようなページが簡単に作れました。 詳細ページを作成する

  28. ご清聴ありがとうございました