$30 off During Our Annual Pro Sale. View Details »
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
61
ソフトウェア開発ナニモワカラナイ
hanetsuki
0
190
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
2.1k
Next.jsの今年一年を振り返る
hanetsuki
1
1.4k
大規模メディアにおけるNext.js とVercelのレンダリングとキャッ シュ戦略について
hanetsuki
4
3.4k
Next.jsチョットデキル!サイトの規模やページ特性に合わせた開発テクニック
hanetsuki
3
2.4k
Jamstackで事前に欲しいパーツ群を洗い出す
hanetsuki
1
410
Next.jsで静的サイトを作成時 よく使っているライブラリまとめ
hanetsuki
5
18k
Next.jsで整える。デザインとロジックの分離
hanetsuki
5
4.6k
Other Decks in Technology
See All in Technology
【pmconf2025】PdMの「責任感」がチームを弱くする?「分業型」から全員がユーザー価値に本気で向き合う「共創型開発チーム」への変遷
toshimasa012345
0
200
「Managed Instances」と「durable functions」で広がるAWS Lambdaのユースケース
lamaglama39
0
160
HIG学習用スライド
yuukiw00w
0
110
Uncertainty in the LLM era - Science, more than scale
gaelvaroquaux
0
700
事業部のプロジェクト進行と開発チームの改善の “時間軸" のすり合わせ
konifar
9
3.2k
意外とあった SQL Server 関連アップデート + Database Savings Plans
stknohg
PRO
0
240
「え?!それ今ではHTMLだけでできるの!?」驚きの進化を遂げたモダンHTML
riyaamemiya
10
4.6k
Kiro Autonomous AgentとKiro Powers の紹介 / kiro-autonomous-agent-and-powers
tomoki10
0
160
直接メモリアクセス
koba789
0
250
Oracle Database@AWS:サービス概要のご紹介
oracle4engineer
PRO
0
150
バグハンター視点によるサプライチェーンの脆弱性
scgajge12
2
630
オープンデータの内製化から分かったGISデータを巡る行政の課題
naokim84
2
1.4k
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Why You Should Never Use an ORM
jnunemaker
PRO
60
9.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
61k
How GitHub (no longer) Works
holman
316
140k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
47
7.8k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
1
88
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
The World Runs on Bad Software
bkeepers
PRO
72
12k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
120
20k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
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に渡したパラメーターが扱えます。 詳細ページを作成する
下記のようなページが簡単に作れました。 詳細ページを作成する
ご清聴ありがとうございました