Jamstack:静的なWebサイト革命がWeb開発を後押し

Jamstackは、Web開発プロセスとWebページのダウンロード時間の両方を高速化することを目的とした、ますます人気のあるWeb開発哲学です。多くの組織で標準になりつつあるDevOpsの動きと継続的インテグレーション/継続的デリバリー(CI / CD)技術を利用して、Jamstackは、インタラクティブなWebページを構築し、ロード時のコード実行をWebサーバーからシフトするための長年の技術を覆します。ブラウザ内のJavaScriptと、アプリケーションプログラミングインターフェイス(API)を介してアクセスされる外部サービスに向けて。

Jamstackとは何ですか?Jamstack、定義済み

:Jamstackは、その名前にイニシャルを提供する3つの柱に基づいて、ウェブアプリケーションモデルではJavaScript、APIを、そしてマークアップ。 JamstackサイトのWebページは、標準のマークアップ言語で構成されているため、アプリサーバーやNode.jsなどのサーバー側テクノロジーに依存することなく、どこでも構築およびテストできます。インタラクティブ機能はすべて、ブラウザで実行される標準のJavaScriptコードによって提供されます。このコードは、HTTPSを介して再利用可能なAPIを呼び出し、外部データやWebページ自体に組み込むことができないその他の機能にアクセスします。

Jamstackの哲学が革新的である理由を理解するために、LAMPスタックについて考えてみましょう。これは、ほとんどの開発者が過去15年間のほとんどのWeb開発について考えてきた方法を例示しています。 LAMPは、Linux(ほとんどのWebサーバーに電力を供給するOS)、Apache(これらのLinuxマシンで実行されるサーバーソフトウェア)、MySQL(Webアプリケーションに必要な情報が格納されているデータベース)、およびPHP / Perl / Python(サーバー側のコードはで書かれています)。ブラウザでLAMPベースのWebサイトを指定すると、Webサーバーはサーバー側のコードを実行してWebページをオンザフライで生成し、必要に応じてMySQLデータベースからデータを取得します。

LAMPアーキテクチャでは、動的でインタラクティブなWebサイトを作成できますが、強力なWebサーバーも必要です。サイトが取得するトラフィックが多いほど、サーバー側で必要な計算能力が高くなります。フル機能のサーバーを使用している場合でも、動的Webページの構築とロードには長い時間がかかる可能性があります。携帯電話でウェブを閲覧することに注意が向けられていない人々の世界では、その遅延はますます受け入れられなくなっています。

Jamstackは、「静的Web」運動の一環として誕生しました。これは、Webサイトの動作方法に関するこの従来のモデルに対する反応として、2010年代半ばに発生しました。Jamstackを理解するには、静的Webサイトの背後にある今日のテクノロジーを理解する必要があり ます。

静的サイト、静的サイトジェネレーター、およびJamstack

完全な初心者にWebの仕組みを説明する必要がある場合は、次のようになります。Webサーバーのファイルシステムのどこかに、HTTPアドレスでアクセスできるHTMLファイルがあり、Webブラウザがダウンロードして解釈してWebページを作成します。 。しかし、 これは静的サイトの説明です。WebブラウザがHTMLファイルを探しているときに、HTMLファイルがすでに存在していることを前提としています。すでに見てきたように、過去10年間のWebの多くは動的サイトによって支配されてきました。動的サイトは、代わりにWeb要求に応答して、フォームまたはでWebサーバーに渡されるパラメーターに基づいてHTMLファイルをオンザフライで生成します。 URL自体。

Webのごく初期の頃、Webページが常に静的であったとき、多くのWeb開発者はHTMLコードを手作業で作成していました。 Webページがより複雑になるにつれて、MacromediaのDreamweaverのようなツールが登場し、プログラムでそれらの静的HTMLページを生成できるようになりました。 2010年代半ばに静的ウェブの動きが始まったとき、Gatsby、Hugo、Jeckyllなどのいわゆる静的サイトジェネレーターの新しい波が出現し始めました。 DreamweaverのようなWYSIWYGツールとは異なり、静的サイトジェネレーターはコマンドライン駆動型であり、CI / CDプロセスと統合するように設計されています。 HTMLファイルはツールによって生成され、多くの場合Markdownで記述されたコンテンツに基づいており、GitHubなどのバージョン管理リポジトリに自動的にアップロードされます。これらのファイルは本番用としてマークされているため、ライブWebサイトの静的ページは自動的に更新されます。

覚えておくべき重要なことは、このコンテキストでの静的は、これらがインタラクティブではない単純なWeb1.0ページであることを意味しないということです。これらのページには、ブラウザーで実行され、データベース、サーバー側機能、またはホストされたサーバーレス関数へのAPI呼び出しを行う高度なJavaScriptを含めることができます。ただし、その実行はWebサーバー自体では行われないため、静的サイトには、データベースを備えた産業用Webホストは必要ありません。多くの静的サイトはコンテンツ配信ネットワーク( CDN)に展開されており、コンテンツは世界中の複数のサーバーにミラーリングされて、どこのユーザーにも迅速に配信されます。

SnipcartのマーケティングリーダーであるMathieuDionneは、この静的サイトの新しい世界の初期の頃をブログ投稿で説明し、2015年頃に「Netlifyの創設者は...回避するために「Jamstack」という用語を思いついたところです。 「静的ウェブ」の否定的な意味合いです。」つまり、このセクション全体でJamstackプロセスについて説明してきました。しかし今、私たちはNetlifyとエコシステムにおけるそれらの役割について簡単に議論する必要があります。

Netlifyとは何ですか?

Netlifyは、クラウドコンピューティングおよびWebホスティング会社です。Netlifyの共同創設者であるMathiasBiilmannはJamstackという用語を作り出し、NetlifyのサービスはJamstackの哲学に基づいてサイトを構築したい顧客に合わせて調整されています。

Netlifyは、静的サイトを抑制していた特定の問題、つまりキャッシュの無効化を解決したと主張していますデータベース駆動型の動的Webサイトは、多くのサーバーリソースを消費する可能性がありますが、立ち寄る訪問者にWebサイトの最新バージョンを提供することは間違いありません。 Jamstack WebサイトはCDNの複数の分散サーバーでホストされることが多いため、更新はそれほど簡単ではありません。各CDNサーバーが、キャッシュされたバージョンのサイトが無効になったことを確認するには、数分から数時間かかる場合があります。 NetfliyのCDNは、この問題を回避するためにHTMLファイルの即時キャッシュ無効化を提供します。

しかし、JamstackスペースのホスティングプロバイダーはNetlifyだけではなく、この用語に対する商標や独自の管理権もありません。利用可能なJamstackホスティングおよびデプロイメントソリューションは多数あり、AWS、Google Firebase、Microsoft Azureなど、ほとんどの大手クラウドプロバイダーがこのアクションに参加しています。

Jamstack CMS

あなたが日常的にウェブサイトを扱わなければならない人なら、あなたはウェブサイトを構築してホストすることはほんの始まりに過ぎないことを知っています。また、新しいコンテンツを作成してサイトに追加する方法も必要です。これを行うのは通常プログラマーではないため、ユーザーフレンドリーなツール、つまりコンテンツ管理システム( CMS)が必要になります。 WordPressなどの従来のCMSは、Webサイトのコンテンツを入力し、そのコンテンツが保存されているデータベースを管理し、ブラウザーの要求に応じてそのコンテンツを表示する動的なWebページを構築できるバックエンドUIを提供します。

JamstackサイトのCMSは動作が異なり、一般にヘッドレスと呼ばれます。ヘッドレスCMSは、コンテンツとデータベースまたはそれを保存するその他の手段を入力および管理するためのUIを提供しますが、それ自体はブラウザーが解析するためのHTMLコードを生成しません。代わりに、Webサイトの静的HTMLページはJavaScriptを使用してCMSのAPIを呼び出し、CMSはJavaScriptがWebページに変換できる形式でコンテンツを返します。

このシステムは、コンテンツをプレゼンテーションから完全に分離します。これはもちろん、プログラミングの長年の理想です。CMSにはアクセス可能なAPIがあるため、複数のWebページから簡単にアクセスできます。たとえば、ウェブサイトのモバイル、デスクトップ、スマートウォッチのバージョンを別々に構築した場合、これらのバージョンはすべて、CMSに保存されている同じコンテンツにアクセスできます。

ご想像のとおり、Netlifyには、NetlifyCMSと呼ばれる独自のオファリングがありますが、他にも多数のオファリングがあります。開発者のNebojsaRadakovicが、ブログ投稿でそれらを分析します。そのリストには多くの新進気鋭の人がいて、1つの非常によく知られている名前もあります。従来のCMSの例としてWordPressを使用しましたが、WordPressをヘッドレスCMSとして実行して、Jamstackサイトに電力を供給することもできます。

Jamstackカンファレンス

Netlifyは、Jamstackコミュニティの作成にも取り組み、Jamstack会議を後援しています。同社は2019年にニューヨーク、ロンドン、サンフランシスコでイベントを開催し、2020年5月にバーチャルイベントを開催しました。この記事の執筆時点では、2020年10月6〜7日に予定されているサンフランシスコイベントに登録できます。コロナウイルスのパンデミックはまだ空中で秋の会議計画を立てています。 

更新が必要な場合は、Twitterで会議をフォローできます。Jamstack ConfYouTubeチャンネルで過去の講演をチェックすることもできます。

[また:6つの最高のJavaScript IDE | 10の最高のJavaScriptエディター]

Jamstackチュートリアル

もっと深く行きたいですか?Jamstackサイトの構築を実際に体験できるJamstackチュートリアルをご覧ください。

  • 開発者のDavidNealは、Jamstackサイトの構築に関する優れた入門チュートリアルを持っています。最初は非常に単純で、その後ますます複雑になります。 
  • LogRocketブログで、ソフトウェアエンジニアのOgundipe Samuelが、Jamstackの原則に基づいてeコマースサイトを構築する方法を段階的に詳しく説明しています。 
  • Netlifyは、基本からより高度なトピックまで、多くの分野をカバーする3時間以上のビデオチュートリアルを提供しています。 

ここで概説されている基本的な概念をマスターすると、プロとしての生活の中でJamstack開発に取り掛かる準備が整います。幸せな学習!