microCMS

JavaScriptとの連携

最終更新日:2023年11月13日



JavaScriptを用いてmicroCMSを扱う方法をご紹介します。

前提として、JavaScriptを用いる場合、基本的にはウェブアプリケーションフレームワークと組み合わせて利用することを推奨します。
理由としては、ルーティングやキャッシュの仕組みなどが組み込まれているため、開発者が考慮すべき観点を減らすことができるためです。

JavaScriptのフレームワークを利用したチューリアルについては、以下をご参照ください。

Next.jsとの連携
https://document.microcms.io/tutorial/next/next-top
Nuxt 3との連携
https://document.microcms.io/tutorial/nuxt3/nuxt3-top
Gatsbyとの連携
https://document.microcms.io/tutorial/gatsby/gatsby-top
Astroとの連携
https://document.microcms.io/tutorial/astro/astro-top

フレームワークを利用しない方法

シンプルな要件の組み込みの場合は、フレームワークを使用せずに利用することも可能です。

フレームワークを利用せず、JavaScriptでmicroCMSを利用する場合、ブラウザ(クライアント)から利用する方式を選択されることが多いです。

一方で、サーバーでJavaScriptを実行できるNode.jsを利用する方法もあります。

こちらのドキュメントでは、それぞれの方法を順番に紹介しています。

Getting Started(ブラウザ)
https://document.microcms.io/tutorial/javascript/javascript-getting-started
Getting Started(サーバー)
https://document.microcms.io/tutorial/javascript/nodejs-getting-started

SDK

microCMSのJavaScript SDKはnpmで配布されています。

microcms-js-sdk
https://www.npmjs.com/package/microcms-js-sdk

また、ソースコードはGitHubにてオープンソースとして管理されています。どなたでもIssueやPull Requestの作成が可能です。

GitHub - microcmsio/microcms-js-sdk: microCMS JavaScript SDK.
https://github.com/microcmsio/microcms-js-sdk