こんにちは! HANDAI JKの杉森です!明けましておめでとうございます!今年もHANDAI JKをよろしくお願いします!予告通り、ブログの定期更新の一発目になります! 今日の内容はサーバレスSPAについてです!

SPAって?

SPAと聞いてもピンとこないと思います。スパがどう関係あるのかと思う人もいるかもしれませんが、ここでは関係ないです笑

f:id:handaijk:20200109012744p:plain — 一切関係ないですし、泳いじゃダメですよ!

SPAとは、シングルページアプリケーション(Single Page Application)の略です。ページ遷移をなくし、単一のページでコンテンツの切り替えを行なっていくWebアプリケーションの構造を指します。SPAを利用しているページで有名なものにGoogleのGoogle マップやfacebookが挙げられます。

f:id:handaijk:20200109013149j:plain — 一般的なWebアプリケーション

f:id:handaijk:20200109013114j:plain — SPAの構造と仕組みの例

SPAのメリット・デメリット

メリットはこういったことが挙げられます。

ページ遷移によるストレスがない
高度な表現ができる
ネイティブアプリの代用ができる

最近でこそほとんどなくなったと思いますが、ページ遷移が遅くてイライラしたことはないですか? SPAではページ遷移がないので、そういったストレスがなくなります。また、ブラウザの挙動に縛られなくなり、様々なUIが実装できるようになります。こういったことから、ネイティブアプリの代用がWebアプリケーションで実現できます! ブラウザでそれができるというのはすごいメリットですね!

ですが、当然デメリットも存在し、こういったことが挙げられます。

初期ローディングにかかる時間が長い
古いブラウザでは動作しないこともある
実装コストが大幅に増える
開発者が少ない

ページ遷移がなくなる分、初期ローディングが長くなる傾向があります。このため、古いブラウザでは処理ができない場合があるというような問題があります。また、ブラウザで任せていた処理を実装しなければならないため、実装コストがかかります。そういったことから開発者が少ないようです。しかし、Vue.jsやReactの登場により、以前より実装は容易になっています!

サーバレスだと何がいいのか

ここ数年、あちこちでクラウドというワードを聞くと思います。SPAは、クラウドと相性がいいと言えます!主にこういった点が挙げられます。

スケーリングが容易 (ロードバランシングによる一貫性の拡張が必要ない)
コストが主にリクエスト数次第
サーバ要らず

主にコスト面でその恩恵を受けます。サーバが必要となる一般的なWebアプリケーションはサーバを動かし続ける必要があるため、その分コストがどうしてもかかります。(ピーク時とそうでないときである程度スケールの調整はできるので、コストは抑えられる) しかし、サーバレス SPAの場合、リクエスト数によって変わるので、ある程度の規模であれば安く済ませられます。また、サーバレスのため、ApatchやNginxといったWebサーバ、アプリケーションサーバの面倒を見なくていいのも大きなメリットとなります!