Microsoft Build 2019レポート 2日目〜「モダンな Web アーキテクチャ JAM スタック」

こんにちは、サイオステクノロジー 技術2部 水倉です。
Microsoft Build 2019 2日目のセッション「Productive front-end development with JavaScript, Visual Studio Code, and Azure」をレポートします。

Visual Studio Code(VS Code)で生産性の高いフロントエンド開発をすることを解説したセッションで大半がデモでした。「JAM スタック」を中心に気になったポイントを簡単にまとめたいと思います。

JAM スタックとは?

2018年頃から聞かれるようになったアプリケーションアーキテクチャ「JAM スタック」の解説がありました。

公式の定義によると「クライアントサイド JavaScript(JS)、再利用可能な API 群、プレビルドされたマークアップをベースにしたモダン Web 開発アーキテクチャ」です。

要するに、静的なマークアップとして配置可能で、サーバサイド API と JS でやり取りするアーキテクチャです。サーバーレス SPA と同じと理解しています。

有名な MEAN スタックは実装技術の頭文字を取ったものですが、JAM スタックは実装技術を限定したものではありません。あくまで下記の 3 つの要素から構成されていればよいものです。

  • JavaScript
    • Angular、Vue.js といったフロントエンドフレームワークでも、jQueryといったライブラリでも、バニラ JS でも何でもよい
  • API
    • バックエンド処理を抽象化した再利用可能な API で、HTTP ベースであること。API は自前実装でも、外部サードパーティの API でも可
  • マークアップ
    • テンプレート化され、デプロイ時に事前ビルドされたマークアップであること

what_is_jamstack
(※) 引用元:https://jamstack.org/

なぜ JAM スタック?

  • より良いパフォーマンス
    • ページ読み込み時のページ組み立てが不要になる。事前構成されたファイルであることで CDN を活用することもできる
  • より高いセキュリティ
    • サーバサイド処理がマイクロサービス API 内に抽象化され、攻撃に対象となる領域が減少する
  • 安価でよりスケールしやすい
    • CDN によって容易にスケールできる
  • より良い開発体験
    • 疎結合で分離された制御がより集中的な開発とデバッグを可能にする

Azure 上での JAM スタックの一例として、下記構成でのデモが披露されました。

jamstack_demo_app
(※) セッション資料より

クライアントサイドを Azure Storage による静的ホスティングとし、サーバサイドは Azure Functions とすることで、フロントエンドもバックエンドもサーバーレス化しています。デモでは、後述の VS Code 拡張機能を活用することで、ローカルで Azure Functions(リバプロ含む)を実行、デバッグする様子が披露されました。

VS Code の拡張機能を積極的に活用して生産性を上げる

生産性向上のための VS Code 拡張機能として下記が紹介されていました。

  • Angular Essentials
    • Chrome 用 Angular デバッガをはじめ、Angular 開発で有用な VS Code 拡張機能をパッケージ化した全部入り。angular_essentials
  • Azure Tools
    • Azure サービスへのアクセスなど、Azure を使った開発を支援する機能満載。azure_tools
    • 本セッションでは、Azure Functions をローカル実行・デバッグするデモが披露されました。
      • Functions のリバースプロキシ機能もローカル実行可能で、従来のローカル開発と同様の開発を可能としてくれます。

Azure DevOps による CI/CD 自動化

キーノートをはじめ、私が聴講した多くのセッションで Azure DevOps が登場していました。従来、CI/CD の仕組みを構築するのはそれなりに手間でしたが、Azure DevOps を触ってみると、本当に楽になったことに驚かされます。積極的な利用をオススメします。

最後に

VS Code のチュートリアルとして下記リソースが紹介されていました。わかりやすいチュートリアル形式ですので、短時間でイメージをつかむのにオススメです。

VS Code は各種言語や、フレームワークを始め、Azure サービスも利用しやすい拡張機能が充実してきていますので、使いこなして生産性を上げていたきたいですね。

STI 水倉

ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

1人がこの投稿は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です