そうだ、教祖になろう。創世記 第2章1節 アーキテクチャを考える
私のお墓の前で泣かないでください。
アーキテクチャというのはシステムの構造です。
なんの要素がどういう役割を担うか。
処理が早くて安くて楽に作れて変えやすいシステムを作れるのが
良いアーキテクチャです。
今回のアーキテクチャを考えてみましょう。
Webシステムはクライアントとサーバで構成されます。
サーバはアプリケーションとデータベースを一元的に管理するコンピュータです。
クライアントはサーバにアクセスするためのPCやスマートフォンで複数あってよく、
インターネットを通じて世界中どこからでもサーバにアクセスできます。
仏教のお墓や位牌どこからでも極楽浄土の故人に祈りが通じるのに似ていますね。
クライアントにはサーバから返却されるWeb画面を表示します。
Web画面は見た目を定義するHTMLファイルと、
ブラウザ上での処理を定義するJavaScriptファイルから構成されます。
今回表示するのは文章と小さい画像だけなのでかなりコンパクトになります。
文章と画像は大量の候補からランダムに選びたいので
サーバのデータベースに持っておいて
クライアントからの要求を受けてサーバが選んだ結果を返すようにします。
クライアントは文章と画像をスライドショー形式で表示します。
ブラウザのページ遷移と同期せず、文章と画像の部分のみを挿し替えます。
シーケンス図で表してみました。
上から下に時間の流れ、それぞれの要素を縦の線、互いのやり取りを矢印で表します。
ブラウザがページ遷移するのはサーバからHTMLとJavaScriptを返却されたときだけで、
そのあとはJavaScriptがサーバと通信してブラウザの表示を更新していきます。
ページ遷移と一部のみの表示更新の違いが分かりづらいかもしれません。
Googleで検索した結果の2ページ目に行くときにリンクをクリックしますね。
あれがブラウザのページ遷移。
一方、TwitterやFacebookだと下にスクロールするだけで新しい記事が読み込まれていきます。
あれがブラウザの一部のみの表示更新です。
クライアント（お墓）サイド
ブラウザのページ遷移と同期せずにサーバと通信したり表示の一部を書き換えるWeb画面をSPA（Single Page Application）といいます。
Twitterなんかがその典型ですね。
このSPAの構造をいちから作るのは結構大変なのでフレームワークを利用します。
フレームワークとはあらかじめ規定された基本的な構造です。
開発者はフレームワークをベースに必要な処理だけを作っていけばいいわけです。
今回は私が前に少し触ったことのあるVue.jsというJavaScriptフレームワークを使いましょう。
サーバ（極楽）サイド
次はサーバです。
クライアントはサイト訪問者のPCまたやスマートフォンで動作しますが、
サーバはアプリケーションを動かすためのコンピュータを自前で用意しなければなりません。
以前は自宅に大きなサーバを設置してWebサイトを開く猛者もいたようですが、
今はクラウドが主流です。
クラウドはクラウド業者が持っているコンピュータを貸してもらう仕組みです。
時間課金や年間契約で支払い、コンピュータの性能で金額が変わります。
今回のWebサイトの場合、どのぐらいの人がサイト訪問者が来るか予想がつきません。
いや、はじめはほとんど来ないと言っていいでしょう。
ですので、常に一定のサーバ費用を掛けるのは割りに合いません。
そういった場合に適しているのがサーバレスアーキテクチャです。
サーバレスアーキテクチャでは必要に応じてコンピュータ資源を確保し、
使い終わったら解放します。
そのため、1秒で終わる処理なら1秒分の費用しか発生しません。
また、開発者がコンピュータを管理する必要がないため、
セキュリティパッチやライセンス管理などの面倒な作業がありません。
今回のプロジェクトに最適のソリューションというわけです。
いくつかのクラウド事業者がサーバレスアーキテクチャを提供していますが、
今回は現在最大手で私が少しかじったことのあるAmazon Web Serviceを利用しましょう。
