Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
2022年最新版 GatsbyJS + TypeScript + microCMS でブログを作る。
Search
hanetsuki
May 26, 2022
Technology
1
12k
2022年最新版 GatsbyJS + TypeScript + microCMS でブログを作る。
hanetsuki
May 26, 2022
Tweet
Share
More Decks by hanetsuki
See All by hanetsuki
AIを用いて実践してきた開発方法について
hanetsuki
1
48
ソフトウェア開発ナニモワカラナイ
hanetsuki
0
170
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
2k
Next.jsの今年一年を振り返る
hanetsuki
1
1.4k
大規模メディアにおけるNext.js とVercelのレンダリングとキャッ シュ戦略について
hanetsuki
4
3.2k
Next.jsチョットデキル!サイトの規模やページ特性に合わせた開発テクニック
hanetsuki
3
2.3k
Jamstackで事前に欲しいパーツ群を洗い出す
hanetsuki
1
400
Next.jsで静的サイトを作成時 よく使っているライブラリまとめ
hanetsuki
5
18k
Next.jsで整える。デザインとロジックの分離
hanetsuki
5
4.5k
Other Decks in Technology
See All in Technology
事業価値と Engineering
recruitengineers
PRO
8
5.3k
「守る」から「進化させる」セキュリティへ ~AWS re:Inforce 2025参加報告~ / AWS re:Inforce 2025 Participation Report
yuj1osm
1
180
Grafana MCPサーバーによるAIエージェント経由でのGrafanaダッシュボード動的生成
hamadakoji
1
980
ライブサービスゲームQAのパフォーマンス検証による品質改善の取り組み
gree_tech
PRO
0
420
Nstockの一人目エンジニアが 3年間かけて向き合ってきた セキュリティのこととこれから〜あれから半年〜
yo41sawada
0
160
Snowflakeの生成AI機能を活用したデータ分析アプリの作成 〜Cortex AnalystとCortex Searchの活用とStreamlitアプリでの利用〜
nayuts
0
140
Bye-Bye Query Spaghetti: Write Queries You'll Actually Understand Using Pipelined SQL Syntax
tobiaslampertlotum
0
120
ソフトウェア エンジニアとしての 姿勢と心構え
recruitengineers
PRO
26
12k
7月のガバクラ利用料が高かったので調べてみた
techniczna
3
810
「魔法少女まどか☆マギカ Magia Exedra」での負荷試験の実践と学び
gree_tech
PRO
0
430
スプリントレトロスペクティブはチーム観察の宝庫? 〜チームの衝突レベルに合わせたアプローチ仮説!〜
electricsatie
1
140
実践データベース設計 ①データベース設計概論
recruitengineers
PRO
4
2k
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
55
13k
For a Future-Friendly Web
brad_frost
179
9.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
185
54k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
4 Signs Your Business is Dying
shpigford
184
22k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Building Applications with DynamoDB
mza
96
6.6k
Navigating Team Friction
lara
189
15k
BBQ
matthewcrist
89
9.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6.1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Transcript
2022年最新版 GatsbyJS + TypeScript + microCMS でブログを作る。 2022/05/26 by hanetsuki
in ジャムジャム!!Jamstack_7
hanetsuki • 中野にあるweb開発会社”ちょっと株式会社”所属 • 業界歴5年目のフロントエンドエンジニア • デザインと開発とオタクコンテンツが好き 自己紹介
GatsbyJSって何?
GatsbyJSは、 静的サイトジェネレーターでReactをベースに開発されているフレームワークです。 特徴として、Gatsbyではデータを取得する際にはGraphQLを利用します。 GraphQLを使って内部リソースのMarkdownファイルや、CMSなどのさまざまなデータを取得する ことができます。
microCMSを用意する
microCMSを用意する 1. 環境を作成します サービスIDは後ほど利用するので控えておきます。
microCMSを用意する 2. APIを作成します テンプレートが用意されているのでそちらを利用します。 今回は、ブログを選択します。 しばらくするとコンテンツが作成されます。
microCMSを用意する 3. APIキーを控えておきます 後で、利用するのでこの画面で控えておきます。
GatsbyJSの環境を作る
GatsbyJSの環境を作る 公式のQuick startに従って下記のコマンドを実行します。 参考:https://www.gatsbyjs.com/docs/quick-start/ npm init gatsby
GatsbyJSの環境を作る microCMSのコンテンツを取得する microCMSが公式で提供している gatsby-source-microcms を利用します。 .env npm install gatsby-source-microcms MICROCMS_SERVICE_ID=
MICROCMS_API_KEY=
GatsbyJSの環境を作る GraphQL Typegen を利用してみる GatsbyJSのv4.14で実験的に投入された GraphQL Typegen を利用してみます。 これにより、動的に src/gatsby-types.d.ts
が作成され Queries.** でGraqhQLの型定義を取得することができます。
microCMSからコンテンツを取得する
コンテンツの一覧を取得してみる /pages/index.tsx にGraphQLを記載します。 • 公開日降順 • 最大3件 microCMSからコンテンツを取得する
コンテンツの一覧を表示してみる 取得した情報を表示してみます。 microCMSからコンテンツを取得する
表示できました。 microCMSからコンテンツを取得する
一覧ページを作成する
ブログの一覧ページを作成します。 ページのパスは、 /blogs/ をベースとして、 2ページ移行がある場合には、 /blogs/page/{number} のようなパスになるよう考慮していきます。 動的ページの作成記述は全て gatsby-node.ts に集約させます。
GatsbyJS v4.9 から.tsファイルが利用できるようになりました。 一覧ページを作成する
ブログの一覧ページを作成します。 一覧ページを作成する
ブログの一覧ページを作成します。 ページのパスは、 /blogs/ を基本として、 ページネーションする場合は、 /blogs/page/2 のように値が増えていくよう想定します。 動的ページの作成記述は全て gatsby-node.ts に集約させます。
一覧ページを作成する
ブログの一覧ページを作成します。 一覧ページを作成する
src/templates/blogs.tsx にGraqhQLを記載します。 $limit や $offset には、gatsby-node.tsで記載したcontextに渡したパラメーターが扱えます。 一覧ページを作成する
src/templates/blogs.tsx 一覧ページを作成する
詳細ページを作成する
ブログの詳細ページを作成します。 gatsby-node.ts にページの詳細ページを作成するための 記述をします。 idはmicroCMSのコンテンツIDを利用します。 詳細ページを作成する
src/templates/blog.tsx にGraqhQLを記載します。 $id には、gatsby-node.tsで記載したcontextに渡したパラメーターが扱えます。 詳細ページを作成する
下記のようなページが簡単に作れました。 詳細ページを作成する
ご清聴ありがとうございました