Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
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
MLflowダイエット大作戦
lycorptech_jp
PRO
1
140
OCI Oracle Database Services新機能アップデート(2025/09-2025/11)
oracle4engineer
PRO
1
210
[デモです] NotebookLM で作ったスライドの例
kongmingstrap
0
160
評価駆動開発で不確実性を制御する - MLflow 3が支えるエージェント開発
databricksjapan
1
210
AlmaLinux + KVM + Cockpit で始めるお手軽仮想化基盤 ~ 開発環境などでの利用を想定して ~
koedoyoshida
0
100
MLflowで始めるプロンプト管理、評価、最適化
databricksjapan
1
260
IAMユーザーゼロの運用は果たして可能なのか
yama3133
1
480
多様なデジタルアイデンティティを攻撃からどうやって守るのか / 20251212
ayokura
0
490
新 Security HubがついにGA!仕組みや料金を深堀り #AWSreInvent #regrowth / AWS Security Hub Advanced GA
masahirokawahara
1
2.2k
AI時代の新規LLMプロダクト開発: Findy Insightsを3ヶ月で立ち上げた舞台裏と振り返り
dakuon
0
200
Jakarta Agentic AI Specification - Status and Future
reza_rahman
0
110
SREには開発組織全体で向き合う
koh_naga
0
370
Featured
See All Featured
Practical Orchestrator
shlominoach
190
11k
For a Future-Friendly Web
brad_frost
180
10k
Visualization
eitanlees
150
16k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
286
14k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Designing for humans not robots
tammielis
254
26k
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に渡したパラメーターが扱えます。 詳細ページを作成する
下記のようなページが簡単に作れました。 詳細ページを作成する
ご清聴ありがとうございました