ブログをシングルページアプリケーション（SPA）にするメリット・デメリット

2017年1月下旬頃から、当ブログをシングルページアプリケーション（SPA）としてリニューアル・公開開始しました。

公開してからある程度時間が経ち、SPAにした成果が見え始めてきているので、ここで一つ、実際のところSPAにしてどのように変化したかを振り返ってみます。

シングルページアプリケーション（SPA）とは

SPA（Single-page application）は、単一ページアプリケーションとも呼ばれ、最初にページを読み込んで以降は画面遷移を全てAjax（非同期通信）で再現し、JavaScriptで従来のページ移動をエミュレートしているWebサイト・Webアプリケーションのことです。

通常のWebページでは、リンクをクリックして画面遷移をすると、ページを丸ごと読み直します。しかし、SPAでは画面遷移ごとにページを読み込み直すことをせず、Ajaxでデータをサーバーから取得し、ブラウザ上で必要な変更のみを適用します。なので、効率的でかつユーザビリティの高いWebアプリケーションを作成することが可能ですが、比較的高度なJavaScriptの技術を要します。

ブログSPA化のメリット

ユニークで独創的になる

ブログをSPA化するメリットとして、まず第一に、ブログ自体がとてもユニークで独創的な印象になります。

例えば、当ブログのトップページの検索ボックスに文字を入力すると、ブログの一覧がアニメーションされて変更され、URLもそれに伴って変更されます。また、ブログ内のリンクをクリックしたり、戻るボタンや進むボタンによってブログ内を画面遷移をすると、アニメーションとともにスムーズに遷移したりします。

こういった従来のWebページとは違う動きをするWebページは、SPAがあまりメジャーではない今現在、ユーザーに特別な印象を与えることになるでしょう。

実際、ブログをSPA化してから、ブログのデザインについて、見てくださった方が声をかけてくださるということが増えました。大きな飛躍です。

ページビュー数（PV）が増える

実際に数値として、SPA化してからPV（閲覧されたページの合計数）が増えました。日によりばらつきがありますが、数割程度増加しています。

詳しくいうと、全体のユーザー数自体に変化はないのですが、「ページ/セッション（1セッション中に表示された平均ページ数）」が増え、「平均セッション時間（1セッションの平均時間）」が増え、「直帰率（1ページだけを閲覧した訪問数の割合）」が減少しました。

つまり、1ユーザーが、1度の訪問で、これまでより多くの記事を読んでから帰るようになってくれました。

これはSPA以前に、UIの変更がいくらか影響を与えている可能性もあります。しかし、通常のWebページよりもSPAの方が様々なUIを実現できるので、UIの構築方法や工夫次第でPV数を増やせる可能性があるということは、紛れも無い事実だと思います。

画面遷移なしにサクサク移動できるのは、ユーザーの利便性や購読意欲を知らず知らずのうちに上げているのでしょう。

なお、ここでいうPVは、厳密には仮想PVのことです。SPAでは、厳密には画面遷移（HTTPリクエスト）をしないので、SPA内のURLの変更及びコンテンツの変更を1PVとして換算しています。

サーバー負荷が減る

従来のWebページでは、ブラウザで画面を移動するたびにWebサーバー側で画面を構築し、ブラウザに返していました。そのとき、ヘッダーなどに共通のパーツがあったとしても、一からデータを読み込み、レンダリングし直す必要がありました。

しかし、SPAの場合は、更新が必要な画面パーツのみを更新することができますので、Webサーバーとのデータ通信が最小限で済み、Webサーバーの負荷が減少します。（もちろん、そのようにJavaScriptを記述する必要があります）

また、SPAの場合、JavaScriptの記述次第で、1回リクエストしたAjax（非同期通信）や画面描画をキャッシュしておく仕組みを作ることができます。つまり、1回のアクセスで、同じ画面を何回も表示しようとした場合、新たにAjaxでサーバーに問い合わせることなく、キャッシュから同じ画面を表示できます。

こんな風に、工夫次第で、従来のWebページにあった様々な問題点を解決することができます。

ブログSPA化のデメリット

高度な技術力を要する

デメリットとして挙げられるのが、やはり「高度な技術力を要する」という点でしょう。

Web系のプログラマーやフロントエンドエンジニアであれば、SPAを作成したり、何か問題が発生した場合に対応できるでしょうが、一般のHTML書けます！レベルの人たちには敷居が高すぎるでしょう。なので、個人ブログ程度の用途では、まだまだ普及しないのではないかなと思います。

Web業界の技術は、移り変わりが早いです。未だに多くのライブラリが、生まれては淘汰され、生まれては淘汰されを繰り返しています。

今後のWebの動向を見据えながら、Web技術（HTML/JS/CSS）の仕様変更等に強いSPAを作る技術力と保守力が必要になります。

SEO対策に注意が必要

ブログであれば、Googleなどの検索エンジンに拾ってもらいやすくなるよう、SEO対策をしなければなりません。

完璧にSEO対策をするには、SPAにおいてもサーバーサイドレンダリングをする必要があります。つまり、URLごとに、サーバーサイドでもレンダリングできる仕組みを用意しておく必要があり、JavaScriptとサーバーサイドで2重の仕組みを持つ必要があります。

ここでは詳しくは述べませんが、つまり、SPAとSEO対策の相性が悪いということです。これも、SPAがブログ用途に導入しにくい1要因になるかと思います。

JavaScriptの制約

また、少し技術的な話になりますが、ブラウザのJavaScriptのElementオブジェクトにはinnerHTMLというプロパティがあります。

特定の要素の中身のHTMLを取得/設定できるプロパティなのですが、このプロパティ、HTMLを設定する際、<script>タグを解釈できず、<script>タグの内部のJavaScriptが実行されません。

多くのブログの記事では<script>タグを用いて、外部サイトのカードなどを表示していますが、SPAでは、それすら実装するのは容易ではありません。document.createElement('script')する必要があり、これまたきちんと実装しようとすると高度な技術を要します。

こういったJavaScriptという言語自体の制約とも戦う必要があります。これが、結構大変なんです。

まとめ

まとめると、ブログをSPA化することによるメリットは以下のとおりです。

ユニークで独創的になる
ページビュー数（PV）が増える
サーバー負荷が減る

逆に、デメリットは以下のとおりです。

総じて、むずかしい！！！

はっきりいって、Web系エンジニアでもない限り、個人ブログにSPAはおすすめできません。逆を言えば、技術力に自信があって、SPAのメリットを享受したい人は、SPAにするのもいいかもしれません。

私自身は、ブログをSPA化してとても満足できています。