管理画⾯付き API が簡単に作れる microCMS との 向き合い⽅まとめ 株式会社 NoSchool CTO / meijin

概要 microCMS を実務に導⼊して 1 年ほどが経ち、Nuxt.js および Next.js 製のサイトの記事系コン テンツページへの導⼊実績を積んだ 型定義、デプロイ、サムネ画像の扱いなどの知⾒が溜まってきたので、まとめてみました

⾃⼰紹介 TypeScript と Testing と DDD が好き 最近はゼルダ無双をプレイ中 オンライン家庭教師マナリンクを開発

マナリンク https://manalink.jp/ ⼩〜⾼校⽣向けオンライン家庭教師サービス カナダ在住、塾講師、某坂道アイドルの作曲家など個性豊かな 先⽣が在籍

microCMS とは 管理画⾯が予め提供されていて、⼊稿する と JSON Web API が⽣える SaaS。 ビジネス職が⼊稿 → エンジニアは SPA のフロントを実装するだけで OK。便利！ ※添付画像は私が個⼈で利⽤しているアカ ウントのスクショです

microCMS をバックエンド にした例 https://manalink.jp/passed- stories/f_lhea4vq ユーザー(⽣徒さん)へのインタビュー インタビュワー(ビジネス職)が⼊稿 フロントエンド(Nuxt.js)で好きにデザ インできる！

microCMS を扱う上で溜まった知⾒

microCMS で返ってく る記事データの型を定義 する フロントエンドが SPA×TypeScript な時 に便利 TypeScript でレスポンスの型を定義 画像が{ url: string }型になる縛りといっ た罠を回避できる

microCMS にリクエストする ときのクエリの型を定義する microCMS はデータの検索や取得フィールドの指 定も可能だが、専⽤のクエリを覚えなければならな い クエリの型を TS で定義することで学習コストを削 減

下書き状態の記事でも⾒ れるようにする 公開前の記事の表⽰チェックや社内レ ビューに有効 記事ごとに発⾏される draftKey を使 うと下書き記事を API で取得できる Nuxt.js では query 経由で draftKey を取得、Next.js(ISR)ではPreview modeを使う

管理画⾯での変更が反映されな い！そんなときは... Vercel など⼀部の環境からアクセスする際、たま にキャッシュが消えないらしく記事の更新が反映さ れないことがある microCMS は前段に CDN(CloudFront?)を使⽤ しているため、CDN を逆⽤して、Cache- Control: no-store を設定して無理やり解決 Incremental Static Regeneration 等の SSG 利 ⽤時は有⼒かも

imgix を活⽤しよう microCMS にアップロードした画像は imgix を通 してアクセス可能になります imgix とは、クエリパラメータで画像を臨機応変に 最適化して取得できる CDN 例）w で幅、fm で画像種別、q で画質

imgix 画像専⽤の Vue Component URL, width, height などを props で 渡すと、前述のクエリパラメータを組 み合わせた上で , タグ等を使って Webp 対応 してくれる Component を作った vue-imgix というライブラリもあるの でこっちもアリかも

まとめ microCMS を使うと、管理画⾯を内製するコストを削減できる Nuxt や Next 等のモダンフロントエンド(SPA)と相性がいい imgix が実質無料で付いてくるので、活⽤してパフォーマンス向上しよう

No content

ご清聴ありがとうございました 採⽤に少しでも興味を持った⽅はお気軽に DM ください！ Twitter: @Meijin_garden