Jamstack入門: これから始めるモダンなWebサイト制作・Web開発ガイド
こんにちは。UPLIFT/合同会社 知的・自転車代表のしかたこうきです。
弊社は、動画制作と軽めのWeb開発の会社です。このnoteでは、弊社がWeb領域で注力しているJamstackについて説明しています。
この記事では、これからJamstackを初めてみるWeb制作者や、Jamstackを自社サイトに導入してみたい企業担当者向けの記事です。
少し技術寄りになってしまいますが、ワンステップずつ丁寧に解説してますので、ぜひお読みになって、ご自身でもトライしてみてください！
はじめに：Jamstackに入門しよう
この記事は、Jamstack入門を目的としたものです。
Jamstackとは何か、どのようなコンポーネントで構成されるか、そしてJamstackを使用することで得られるメリットを紹介します。
Jamstackを学びたい初心者やWeb開発者は、本記事を参考に、ぜひJamstackにトライしてみてください！
そもそも、Jamstackとは？
Jamstackは、ジャム(Jam)とスタック(stack)を組み合わせた造語です。
Jamstackは、複数のテクノロジーを組み合わせてサイトやアプリケーションを構築するためのスタック（構成）の名称です。Jamstackでは、静的サイト生成やサーバーレス関数を用いた動的サイトやシステムとして利用することができます。
Jamstackを使用することで、Web開発がよりセキュアで信頼性の高いものになり、また、パフォーマンスやスケーラビリティが向上します。また、SSR（サーバーサイドレンダリング）を行わない場合は、動的なサーバーを用意する必要がないため、コストを削減することができます。
詳しくはこちらをご覧ください
Jamstack開発環境を構築するにはどうすればいい？
Jamstack開発を始めるにあたり、次のようなツールが必要です。
Git: バージョン管理システム: Jamstackでは、Gitを用いたワークフローがデファクトスタンダードです。Gitでソースコードを管理し、GitHubやBitbucket、GitLabなどのリモートリポジトリで管理するのが一般的です。
静的サイトジェネレーター: MarkdownやLiquidなどを使用して、HTMLやCSSを生成するツール。GatsbyやGridsome、Next.jsやNuxt.jsなどが利用されます。
クラウドサーバーやサーバーレス関数プラットフォーム: サイトやアプリケーションを公開するには、それらをホスティングするためのプラットフォームが必要です。AWSやFirebase、Netlify、Vercelなどがあります。
Jamstack開発環境のセットアップ
以下は、Git、静的サイトジェネレーター、クラウドプロバイダーをインストールしてセットアップする手順です。
Gitのインストール
Gitをローカル環境に準備します。WindowsであればGitの公式サイトサイトからダウンロード。Macであれば、既にインストール済みです。
インストーラーを実行し、Gitをインストールする。
コマンドプロンプトやターミナルで、git --versionと入力して、Gitのバージョンが表示されることを確認する。
静的サイトジェネレーターの準備
静的サイトジェネレーターを選択します。GatsbyやGridsome、Next.jsやNuxt.js、EleventyやAstroなど、好みのものを選んでください。
クラウドサーバー、またはサーバーレス関数プラットフォームのアカウントを作成
クラウドサーバーやサーバーレス関数プラットフォームのサイトから、アカウントを作成
アカウント作成後、必要なAPIキーやアクセスキーを取得する。
はじめてのJamstackウェブサイトを構築する
まずは、ローカルでディレクトリを切り、npmなどを使用して、選定した静的サイトジェネレーターやフロントエンドフレームワークを使ってアプリをインストールします。
詳しくは、それぞれの静的サイトジェネレーターやアプリのドキュメントに従ってください。
Gitを使用してサイトをデプロイする
Jamstack構成のサイトやアプリの場合、本番公開はFTPなどを使わず、Gitを用いるのがデファクトスタンダードです。
以下に、プロジェクトにGitを設定するやり方と、デプロイについての手順を示します。
ローカルにあるプロジェクトをGitリポジトリとして初期化します。ターミナルやコマンドプロンプトで、git initと入力します。
変更されたファイルをステージングします。git add .と入力する。
ファイルの変更をコミットする。git commit -m "Initial commit"と入力します。
GitHubなどの、リモートリポジトリを作成します。
ローカルリポジトリとリモートリポジトリを関連付けます。git remote add origin <リモートリポジトリのURL>と入力します。
ローカルリポジトリのコンテンツをリモートリポジトリにプッシュする。git push origin mainと入力します。これで、ローカルリポジトリの内容が、リモートリポジトリに反映されます。
クラウドサーバーや、NetlifyやVercelといったサーバーレス環境とリモートリポジトリを紐づけます。この作業は、それぞれの管理画面から行います。一度紐付けが終わると、以降の公開作業（デプロイ）は、リモートリポジトリにgit push origin mainをしたタイミングで自動的に公開されます。（main以外のブランチに設定することも可能です）
Jamstackウェブサイトにサーバーレス機能を追加する
サーバーレス関数を使用することで、Jamstackウェブサイトに、動的なサーバーサイド処理を行う機能を追加することができます。
一般的な用途としては、データベースとの連携やAPIとの連携、そして、サイトのコンテンツを生成するためのデータフェッチなどがあります。
以下に、サーバーレス関数を作成し、Jamstackウェブサイトに統合する手順を示します。
サーバーレス関数を作成する
クラウドプロバイダーやサーバーレス関数プラットフォームで、サーバーレス関数を作成する。
サーバーレス関数を作成するにあたり、ランタイムを選択する。Node.jsやPythonなどがあります。
静的サイトジェネレーターのドキュメントを参照して、サーバーレス関数を呼び出す方法を学ぶ。
静的サイトジェネレーターを使用して、サーバーレス関数を呼び出すコードを書く。
サイトを再生成して、サーバーレス関数が正常に動作することを確認する。
Jamstackサイトのパフォーマンスを最適化する
Jamstackでは、静的サイト生成やサーバーレス関数を使用することで、高いパフォーマンスを実現することができます。そのためには、以下のような最適化のポイントを把握することが重要です。
ページスピードを向上させる: 静的サイト生成では、HTMLやCSS、JavaScriptなどのコンテンツを事前に生成します。このため、サイトのページスピードは向上し、Google LighthouseやPage Insightなどのスコアで高得点を取ることが期待できます。また、静的サイトのコンテンツは、CDN(Content Delivery Network)を使用して配信されるため、ユーザーからのリクエストを距離に応じて近い場所から返すことができ、高速な表示・レスポンスが可能です。
GatsbyやGridsomeでは、Reactを使用してコンポーネントを分割してロードすることで、コンテンツを段階的に表示することができます。これは、ユーザーに対して、高速なページのロード・表示を体験させることにつながります。
HTMLやCSS、JavaScriptを圧縮して提供することが可能です。結果的に、ページを軽量化することができ、表示の高速性につながります。
ファイルを圧縮する: 画像やフォントなどのファイルも圧縮することできます。画像やフォントは、HTMLやCSS、JavaScriptのソースファイルよりもさらに容量が大きくなりがちなため、圧縮することで飛躍的に高速性を上げることが可能になります。
セキュリティの向上: 静的サイトは、サーバー側での処理が不要になります。動的サイトの場合、セキュリティの脅威が静的サイトよりも高いため、よりセキュアなサイトを実現できます。
動的サイトでは、サーバー側でスクリプトやSQLが実行されるため、SQLインジェクションやクロスサイトスクリプティング(XSS)などの脅威に晒される可能性がある。
静的サイトでは、これらの脅威から守ることができる。
Jamstackを採用して開発のスピードを向上させよう
Jamstackでは、静的サイト生成やサーバーレス関数を使用することで、開発のスピードを向上させることができます。
開発のステージングを容易にする: 静的サイトをローカルで開発することができるため、ステージングを容易にすることができます。
サーバーのセットアップやデプロイを必要最小限まで簡素化できます。このため、開発の環境を整えるのにかかる初期設定の時間が短縮されます。
ローカルでの開発では、コンテンツをリアルタイムでプレビューすることができます。ブラウザのホットリロードもできますので、ストレスのないスピーディーな開発が可能です。
テストを容易にする: 静的サイトは、HTMLやCSS、JavaScriptのみで構成されるため、テストを容易にすることができます。
静的サイトは、そのままでも動作するため、動的なランタイムやWebサーバー、データベースを使用せずにテストすることができます。
フロントエンドのテストでは、JestやCypressなどのテストフレームワークを使用することができます。
デプロイを容易にする: 静的サイトは、HTMLやCSS、JavaScriptのみで構成されるため、デプロイがとても容易です。FTPを使わず、GitとCI/CDを使ったデプロイが一般的なため、セキュリティ的にも安心です。
今後のJamstackトレンドはどうなっていく？
Jamstackは、近年、その使用が増えており、今後もトレンドとして注目されています。今後のJamstackのトレンドとして、以下のようなものが挙げられます。
コンテンツマネジメントシステム(CMS)との連携
これは既に半ば標準化されているようなものですが、Jamstackでは、静的サイト生成時に、CMSからデータを取得することができます。
これにより、CMSを使用してコンテンツを管理することができ、さらに、CMSを使用することで、サイトのコンテンツを好きな時にソースコードをかけない人でも更新することが可能になります。
ヘッドレスCMSの使用
Jamstackでは、CMSのAPIを活用することで、コンテンツを取得してサイトを生成することができます。これには、従来のCMSを利用するとオーバースペックです。
ヘッドレスCMSは、コンテンツの表示機能を削減したCMSであり、ヘッドレスCMSを使用することで、サイトのコンテンツ表示をJamstackに、コンテンツの管理をヘッドレスCMSに切り分けることができます。
サーバーレス関数の使用
Jamstackでは、サーバーレス関数を使用することで、サイトにサーバーサイド処理を追加することができます。これにより、データベースとの連携やAPIとの連携、そして、サイトのコンテンツを生成するためのデータフェッチなどができるようになります。
Jamstackというと、静的サイト生成のイメージが強く、動的な表現ができない想像をされる方もいらっしゃいますが、サーバーレス関数を利用するとそれらのデメリットを解決することが可能です。
GraphQLの活用
Jamstackでは、外部からのデータ取得にAPIを用います。APIはREST APIとGraphQLに二分されます。
GraphQLの普及率はまだそこまで高くありませんが、これを使用することで、REST APIと比較し、データを効率よく取得することができます。
例えば、必要なプロパティだけ取得したり、リレーション先のデータもまとめて取得するなど、REST APIには必ずしも用意されていないような機能も実現可能です。
ステータスクエリ言語(SQL)の活用
場合によっては、Jamstackでも動的なシステムと同じように、SQLを使ってデータベースを操作したいこともあるでしょう。
この場合は、サーバーレス関数と、ORM等のライブラリを用いて、データベースと接続し、操作することが可能です。これにより、データを効率よく取得することができ、より多彩な機能を持つシステムやサイトを構築することができます。
Jamstackを使用する際に把握しておきたいポイント
Jamstackを使用する際には、以下のようなポイントを把握することが重要です。
静的サイト生成ツールの選定
Jamstackでは、静的サイト生成ツールを使用することで、HTMLやCSS、JavaScriptを生成することができる。このときに、GatsbyやGridsomeなどの適切なツールを選定することが重要である。
クラウドプロバイダーの選定
Jamstackでは、クラウドプロバイダーを使用することで、サイトをホスティングすることができる。このときに、AWSやGCP、NetlifyやVercelなどの適切なプロバイダーを選定することが重要です。
サーバーレス関数を使用する場合のランタイムの選定
Jamstackでは、サーバーレス関数を使用することで、サイトにサーバーサイド処理を追加することができます。このときに、Node.jsやPythonなどの適切なランタイムを選定することが重要です。自分が得意な言語を選ぶのも大切ですが、処理したい内容に応じたランタイムを選ぶのも重要です。
パフォーマンスを最適化するためのポイントの把握
Jamstackでパフォーマンスを最適化することには、以下のようなポイントを把握することが重要です。
ページスピードを向上させる: 静的サイト生成では、HTMLやCSS、JavaScriptなどのコンテンツを事前に生成するため、サイトのページスピードは向上します。また、静的サイトのコンテンツは、CDNを使用して配信されるため、ユーザーからのリクエストを距離に応じて近い場所から返すことができ、結果的に高速な表示が可能となります。
GatsbyやGridsomeでは、Reactを使用してコンポーネントを分割してロードすることで、コンテンツを段階的に表示することができます。ユーザーは体感的に、高速なページのレンダリングを体験することが可能です。
ページを軽量化する: HTMLやCSS、JavaScriptを圧縮することで、ページを軽量化することができる。これらは、デプロイ（サイト公開）時に、自動的に処理することができます。
ファイルを圧縮する: 画像などのバイナリファイルも圧縮させることが可能です。HTMLやCSS、JavaScriptなどのソースコードと違い、バイナリファイルはサイズも大きくなりがちなので、圧縮の効果はさらに高まります。
まとめ：Jamstackのメリットを最大限に活かし、今後のWeb制作・開発をスマートに行おう！
Jamstackは、近年注目されているWeb開発のアーキテクチャです。静的サイト生成やサーバーレス関数を使用することで、セキュリティやパフォーマンスが向上し、開発のスピードが向上することができます。また、CMSやGraphQLを使用することで、コンテンツの管理やデータの取得をよりスムーズにすることができます。
Jamstackを使用する際には、静的サイト生成ツールやクラウドプロバイダー、サーバーレス関数のランタイムを選定することが重要です。また、パフォーマンスを最適化するためにも、HTMLやCSS、JavaScriptの圧縮や画像やフォントの最適化などが必要です。
今後もJamstackは、Web開発のトレンドとして注目されるでしょう。これからも、Jamstackを使用して、より良いWebサイトを作成していきましょう。
頂いたサポートはクリエイター活動の主に機材費・出張費に充てます！ より良い作品アウトプットのためにご協力よろしくお願いします！