こんにちは、サイオステクノロジー技術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 でも可
マークアップ
- テンプレート化され、デプロイ時に事前ビルドされたマークアップであること

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

なぜ JAM スタック？

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

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

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

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

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

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

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