自己紹介

はじめまして。フリーランスでエンジニア（主にインフラやDevOps系）をしている「てる」と申します。

1994年生まれ、横浜在住、大阪生まれ育ち。

学生時代にITの基礎やネットワークについて学び、新卒でSIerでインフラ系の部署にいました。

現在はフリーランスエンジニアとして活動しており、某WebサービスのSREを3年程やったり、最近は某インターネット広告企業でプロダクト開発をしています。
（そのうちプロフィール作ります）

AIを使えばブログなんかすぐに作れるという噂を聞いて作ってみました。このブログはほとんどCursorというAIコードエディターで作っています。

Jamstackとは？

What is Jamstack

タイトルにあるJamstackとは、ウェブ開発のアーキテクチャパターンで以下の頭文字をとっているそうです。

• JavaScript: クライアントサイドの動的な機能を提供
• APIs: サーバーサイドの処理やデータベース操作をAPIを通じて行う
• Markup: 事前にビルドされた静的なHTMLファイル

特徴

特にポイントはMarkupの部分だと理解していて、静的サイトジェネレーター(SSG)という仕組みでページを事前にビルドします。

そのため、レスポンスが早いのが特徴でブログや企業のLP（ランディングページ）などに向いていて、逆に更新頻度が高いサービスやリアルタイム性があるサービスには不向きです。

一般的なWebサイトとの比較

一般的なサーバーサイドレンダリング(SSR)：

サーバーサイドレンダリング(SSR)は定食屋のようなもので、お客さん（ユーザー）が料理（ウェブページ）を注文すると、（サーバー）がその場で料理（ウェブページ）を作り(backendからデータを取得しページをレンダリングし)お客さんに提供します。

静的サイトジェネレーター(SSG)の場合：

一方でSSGは弁当屋さんのようなもので、開店前（ビルド時）にお弁当（ウェブページ）を作っておき、お客さんが注文すると、事前に作っておいた（ビルドしておいた）お弁当を提供します。

技術スタック

ちなみにこのブログは以下の技術スタックで構築しています。

• JavaScript: React
• APIs: MicroCMS
• Markup: Gatsby
• ホスティング：Vercel
• ビルド・デプロイ：GitHub Actions

MicroCMS

• 上記のbackendがこれにあたります。
• MicroCMSとはAPIベースの日本製ヘッドレスCMSです。
• ヘッドレスCMSとは入稿したコンテンツをビューを通じて取得するのではなく、RESTful APIなどのAPIで取得することができます。
• さらに、Webhookでコンテンツの更新をトリガーにGitHub Actionsを実行できます。

Gatsby

• 上記のフロントエンドがこれにあたります。
• Reactベースの静的サイトジェネレーター(SSG)です。
• microCMS用のプラグインがある。
  • https://www.gatsbyjs.com/plugins/gatsby-source-microcms/
  • https://www.npmjs.com/package/gatsby-source-microcms

Vercel

• 上記のFrontendをホスティングしているプラットフォームです
• Next.jsを開発しているVercel社が提供しているフロントエンド向けのホスティングサービスです。

GitHub Actions

• Git HubにあるCI/CDのやつです。

まとめ

• 個人ブログを公開しました！
• Jamstackな構成で簡単にブログなどのWebサイトを作れる！
• JamstackのポイントはMarkupでSSGでビルド時に静的ファイルを生成しておくのでレスポンスが早い！