SPAの何が「シングル」なのか？
2021.01.26
2022.08.08
この記事の筆者：三好アキ（ウェブエンジニア）
「売り上げが伸びない」、「ウェブサイトから問い合わせが来ない」など、ウェブでお困りのお客さまの課題解決を、最新の知見を活かして行なっています。海外滞在が長く、日本語の情報が少ないJamstackやヘッドレスCMSなど最新のウェブテクノロジー、ウェブマーケティングに精通。事業について詳しくはこちらをご覧ください。
ウェブ制作の教本『はじめてつくるReactアプリ』など複数冊を執筆。本に関するインタビュー記事はこちら。
ページ生成の変化の歴史
「Jamstackが現れるまでの歴史 ― LAMPからMEAN、そしてJamstackへ」で、静的サイトと動的サイトの違いや、Jamstackに至るテクノロジーの発展の歴史を紹介しました。
くわしく触れなかったのですが、あの記事で出てきたMEANスタックはSPA（Single Page Application）と呼ばれるもので、動的サイトとは異なる方法でページ生成を行なっています。
ここではページ生成の歴史を振り返りつつ、SPAの説明をしていきます。
静的サイト
静的サイトはウェブサイトの原始形態で、世界最初のウェブサイトも静的サイトでした。
世界最初のウェブサイト
http://info.cern.ch/hypertext/WWW/TheProject.html
この静的サイトのページ（HTML）は、サーバーにアップされる前にすでに生成されています。
サーバーにあるのは生成済みのページなので、ユーザーからのリクエストがあった時には、その生成済みのページを送り返すだけで済みます。
これにはページをユーザーに素早く表示できるメリットがある反面、ユーザーに応じてページの内容を変えることはできず、ウェブサイト上で複雑な操作もできないデメリットにつながります。
動的サイト
このような静的サイトのデメリットを解決したのが動的サイトで、ユーザーに応じて表示するページを変えることができるようになりました。
動的サイトでは、ユーザーからのリクエストがあると、そのリクエストに応じてサーバーがページを生成します。
これにより、ログイン機能や投稿機能など今では私たちが普通に使っている機能が実現できるようになりました。
こちらの記事でも触れたように、この動的サイトを可能にしたテクノロジーがLAMPと呼ばれるもので、LAMPで作られた代表的なシステムがWordPressです。
SPA
SPAが現れた背景には、JvaScriptの発展が大きく関係しています。
上でも説明したように、動的サイトではサーバーが大きな役割を担っており、ページの生成もデータの取得もすべてがサーバー側で行われていました。
このような動的サイトにもJavaScriptは使われていましたが、その用途はアニメーションをつけるといったような「おまけ」程度で、決して大きな役割は担っていませんでした。
しかし、2000年代にJavaScriptがプログラミング言語として発展したことで複雑な処理をJavaScriptでも行えるようになります。
「サーバー」に対になる言葉として「クライアント」というものがあり、これは私たちが普段使っているウェブブラウザのことですが、つまり、これまでのサーバー側の処理をクライアント側でも行えるようになったのです。
SPAの「シングルページ」とはどういう意味？
SPAのウェブサイトで渡されるのは1つのHTMLページだけです。
これはすでに生成されてサーバーに置いてあるので、ここだけを見ると静的サイトと同じです。
しかし、このHTMLページには大量のJavaScriptが含まれており、新しいページがユーザーに表示される時にはこのJavaScriptがページを表示します。
つまり、静的サイトのように生成されているページをサーバーから送ったり、または動的サイトのように毎回新しいページをサーバーで生成して送ったりするのではなく、最初に渡された1枚のHTMLページを下地にして、そこに含まれるJavaScritptがページを生成するのです。
ウェブサイト全体で使われるHTMLページの数が1枚だけなので、シングル・ページ・アプリケーション（SPA）と呼ばれるのです。
データ取得の方法
動的サイトでは、サーバーがデータベースと毎回通信を行い、そのデータを元にページを生成していました。
SPAではAPIを使ってサーバーと通信を行います。
RESTのAPI（またはGraphQL）によってJSONデータを取得し、それをクライアント（ブラウザ）側で処理してユーザーに表示しているのです。
SPAのメリット
SPAには動的サイトと比べて以下のようなメリットがあります。
高スピード
新しいページは、サーバーとの通信を行うことなくクライアント側ですべて生成されるため、動的サイトよりもページの表示スピードは上がります。
高いUX/UI
動的サイトではページの変更が一部分だけでも、ページ全体をサーバーで生成する必要があります。
つまり何らかの変更をページに反映させるには、ページ全体をリフレッシュする必要があるのですが、これは当然UXにマイナスとなります。
SPAの場合クライアント側でページ処理を行っているため、よりフレキシブルな操作が可能で、ページ全体をリフレッシュすることなく変更を反映することができます。
これは例えば入力フォームなどで特に役に立ちます。
住所の入力時、郵便番号を入れるだけで自動的に住所の一部を入力してくれるものがありますが、動的サイトの場合、郵便番号から割り出した住所を表示するにはページ全体のリフレッシュが必要になります。
しかしSPAの場合、リフレッシュを行うことなく住所をユーザーに表示できるので、ユーザーはより快適に入力作業を行うことができます。
高メンテナンス & 高スケーラビリティ
これまでサーバーが行なっていた処理をクライアント側で担えるようになったことは、サーバーとクライアントという2つの役割をより明確にしました。
動的サイトがモノリシック（monolithic: 一枚岩）と呼ばれる作りで、サーバーとクライアントがほぼ一体化していたため、一部を変更する場合には全体への影響も考慮する必要がありました。
しかしSPAでは分離構造が採用されているので、それぞれの作業や開発を切り分けて進めていくことができます。
またAPIの受け取り先を増やすだけで、データやコンテンツを表示する場所も増やせるので、オムニチャネル化やモバイルアプリの開発が簡単になります。
SPAでよく一緒に使われるウェブサイトをアプリにするテクノロジー、PWAについては「Webサイトをアプリにする方法 ― 「モバイルファースト」の先にあるもの」をご覧ください。
SPAのデメリット
メリットに続いてデメリットを解説します。
最初のページの表示に時間がかかる
最初のリクエスト時に渡されるページは1枚のHTMLだけですが、ここには大量のJavaScriptコードが含まれているので、最初のページがユーザーに表示されるまでに時間がかかってしまいます。
この解決のために、通常は最初のページ（ランディングページ）だけは静的サイトとして作る方法があり、これは次に説明するSEO対策としての効果もあります。
SEO
最初のリクエスト時に渡されるHTMLは下のように空っぽです。
# index.html
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
ここにコードが書き込まれるのは、ユーザーがクリックをしたりボタンを押したりして、JavaScriptがページを生成した時なのです。
そのためウェブサイトを巡回するGoogleのクローラーが見るのは、この空っぽのHTMLページだけなので、当然SEOの価値はゼロです。
この対策のためにSSR（サーバーサイドレンダリング）という方法が一般的には使われていました。
今ではAjaxリクエストをしてページを生成する能力をクローラーが持っているので、「SPA = SEOに弱い」とは必ずしもいえないものの、静的サイトや動的サイトの方がSEOには強いというのが通説です。
SPAの作り方
これまで私は数冊、Reactを使ったSPAの作り方の本を出版しています。
ビギナーの人でSPAの作り方、動き方を自分の手を使って知りたい方は下記書籍を参考にしてください。
SPAがJamstackにもたらしたもの
「これだけ読めばOK！ Jamstackのすべてがわかります」でも触れたように、Jamstackは静的サイトです。
これはウェブ黎明期のあのシンプルな静的サイトとは異なる「現代版静的サイト」ですが、ここにSPAはどのように関係しているのでしょうか？
SPAの１番の功績は、前述のようなサーバーとクライアントを明確に分離するアーキテクチャーを広く浸透させたことだと私は思います。
このような分離スタイルは、メンテナンス性のみならずスケール性、セキュリティ、パフォーマンスに大きなメリットがあり、このコンセプトはJamstackにおいても活かされています。
Jamstackについてより深くまで知りたい方は、無料ダウンロードできる下記資料を参考にしてください。
monoteinはJamstackサイト制作を専門としています。
ストレスフリーでサクサク動き、高いCV率を実現するJamstackサイトに興味のある方は、コチラより遠慮なくお問い合わせください。
ユーザーからの問い合わせを増やしたい、アイテムの購入率を高めたい等の「ビジネスのゴール」から逆算した効果的なウェブサイトを制作するmonotein。
monoteinについての案内資料の無料ダウンロードはこちら。
「これまでのホームページでは成果が出なかった」、「結果の出るウェブサイトが欲しい」、「JamstackやヘッドレスCMSなどの最新テクノロジーに移行したい」など、ウェブに関してお困りのことがありましたら、お気軽にご相談ください。
無料相談
