Jamstack（microCMS × Next.js × Netlify）構成で自社ブログをオープン

2023.03.08

今回、自社ブログの立ち上げをJamstack構成で行ったのでJamstackとは何か簡単にご紹介します。

Jamstackとは？

Jamstackは、JavaScript、API、およびマークアップ（Markup）の頭文字を取ったもので、静的サイトジェネレーター、CDN、およびAPIを使用してウェブサイトを構築する方法を指します。

従来のウェブ開発では、動的なウェブページを作成するためにサーバーサイドのスクリプトを使用することが一般的でした。しかし、Jamstackでは事前にレンダリングされた静的ファイルを使用し、APIを使用して必要なデータを取得することで、ウェブサイトの動的な部分を生成します。これにより、ウェブサイトのパフォーマンスが向上し、セキュリティが強化され、開発速度が向上するという利点があります。

採用ツール・サービス

使用しているツール・サービスを下記に列挙します。

Next.js（フロントエンド）
microCMS（バックエンド）
Netlify（ホスティングサービス）

Next.js

ReactをベースにしたJavaScriptのフレームワーク。

プラグインや記事も充実しており環境構築が簡単です。

microCMS

国産のヘッドレスCMSサービス。

公式ブログも充実しており、UIも直感的で分かりやすい。

Netlify

静的サイトホスティングサービス。

Githubとのリポジトリ連携等、運用面で非常に楽。

Jamstackのメリット

パフォーマンスの向上
Jamstackは、サーバーで事前にレンダリングされたコンテンツを提供するため、非常に高速なWebサイトを構築できます。また、必要に応じてキャッシュを利用することもできます。これにより、Webサイトの読み込み速度が向上し、ユーザーエクスペリエンスが向上します。
セキュリティの向上
Jamstackは、静的ファイルを使用するため、サーバーサイドの脆弱性を排除することができます。また、APIリクエストに対して必要な認証機能を実装することもできます。これにより、Webサイトのセキュリティが向上し、悪意のある攻撃から保護されます。
スケーラビリティの向上
Jamstackは、クラウドプラットフォームを使用してWebサイトをホストするため、必要に応じて簡単にスケールアップできます。また、コンテンツの更新が必要な場合は、その部分のみを再構築することができます。
開発の効率化
Jamstackは、ビルドツールを使用してWebサイトを自動化するため、開発の効率が向上します。また、コードの再利用性も高くなります。
SEOの向上
Jamstackは、検索エンジンに適した構造を持っているため、SEOにも非常に優れています。また、サイトのコンテンツが静的に生成されるため、クローラーにとっても分かりやすくなります。

Jamstackのデメリット

動的コンテンツの扱いが制限される
Jamstackは、静的ファイルを使用するため、動的なコンテンツを扱う際には制限があります。動的なコンテンツを含むWebサイトの場合、サーバーサイドレンダリングを行う必要があります。
サーバーレスアプローチによるコスト増加
Jamstackは、サーバーレスアプローチを採用するため、クラウドプラットフォーム上でアプリケーションを実行します。しかし、必要なAPIリクエストやデータベースクエリなどにより、コストが増加することがあります。
コンテンツ更新に必要な時間が増加する
Jamstackは、静的ファイルを使用するため、コンテンツを更新する場合には、ビルドプロセスを再度実行する必要があります。また、サイト全体を再構築する必要があるため、コンテンツの更新に必要な手間が増加することがあります。
フロントエンド開発スキルが必要
Jamstackは、フロントエンド開発スキルが必要となるため、バックエンド開発スキルだけでなく、JavaScriptやマークアップ言語の知識が必要となります。これにより、開発チームに必要なスキルセットが増加することがあります。

technology