SEO担当者向け PWA・SPA・Service Worker 超入門。もう「JavaScript苦手」なんて言ってられない

SEO担当者はいつも、JavaScriptに不信感を抱いてきた。

この不信感は、彼らの経験から来ている部分もある。検索エンジンは昔からJavaScriptが苦手だったからだ ―― JavaScriptに大きく依存しているコンテンツを発見し、クロールして、正確にインデックス化するが貧弱だった。

だが実際には、SEO担当者らの態度は、知識や経験に基づくというよりも、「とにかくJavaScriptを警戒する」という習慣から来ている側面もある。このことは、何年もから妥当性を失っている古いSEOのテクニックに依存したり、「テクニカルSEOに習熟するのに最新のウェブ開発手法を理解する必要はない」と考えたりする態度として表れている。そうした態度のせいで発生している状況がこれだ：

マーケティングとしてのSEOにおける技術的な知識の格差が常に広がり続け、多くのSEO担当者にとって新しい問題の解決をますます困難にしている。

※マイク・キング氏が「テクニカルSEOの復権」（日本語記事はこちら）で述べている言葉

実際のところ、多くのSEO担当者が、次のような先進的な技術に拒否感をもっている：

• PWA（プログレッシブ・ウェブ・アプリ）
• 最新のJavaScriptフレームワーク（React、Angular、Vue.jsなど）

これらの技術は「ウェブの未来」だと考えられるようになってきているものだ。にもかかわらず、それを取り入れようとしないのは言うまでもなく、探求することすら拒むようなSEO担当者は、時代に取り残されるリスクを抱えている。

この記事では、PWAを新たな視点から取り上げようと思う。SEOとユーザビリティの両方にもたらす影響を探るだけでなく、あなたがおそらく耳にしたことのない最新のフレームワークやビルドツールを取り上げ、ウェブ技術の最前線に立つために取り入れる必要がある手法を紹介したい。

• PWA、SPA、Service Workerとは？
• SPAを可能にするApp Shellアーキテクチャ（中編で解説）
• Service Workerがもつ圧倒的な力（後編で解説）
• まとめ

1. PWA、SPA、Service Workerとは？

「PWA」は、ネイティブアプリと同じようなユーザー体験を提供するウェブサイトだといえる。たとえば、次のようなことを実現できる：

• プッシュ通知などの機能によって、企業はオーディエンスとの再エンゲージメントが簡単になる。

• ユーザーはアプリストアで面倒な作業をすることなく、お気に入りのサイトをホーム画面に追加するだけで、アプリをインストールしたかのように使えるようになる。

• オフライン環境や低品質のネットワークでも動作し、iOSやAndroidのネイティブアプリと同じように、非常に優れたフルスクリーンのユーザー体験を提供してくれる。

何よりも素晴らしいのは、上述のような特徴をもちながら、オープンでアクセスしやすいというウェブの基本的な性質は変わらず、それどころか、場合によっては強化されている点だ。

その名が示すとおりPWAはプログレッシブ（アプリの機能を「段階的」に拡充できる）である。かつ、レスポンシブであるため、使っているブラウザやデバイスの種類に関係なく、すべてのユーザーが利用できるように設計されている。また、自動で最新の状態に保たれ、これから説明するとおり、通常のウェブサイトのように検索したりリンクを張ったりしてもらえる。

さらに素晴らしいことに、PWAは採用するかしないかという二者択一の話ではない。既存のウェブサイトにPWAの機能を一部だけ取り入れ（シンプルなService Worker経由で）、PWAのメリットをすぐに享受することも可能なのだ。

PWAを使えば、スマートフォンでネットワーク接続ができない場所に行ってもスムーズに使い続けられるようにもできる（ウェブベースであっても）

とはいえ、PWAはまだ登場から日が浅い。そのため、サイトに実装するには、当然ながらそれなりの手間が必要になる。それでもPWAは、ウェブにとってこの10年で最大の進歩の1つであることは間違いない。PWAは急速に普及しつつあり、企業はPWAがさまざまな現実のビジネス目標を達成できることに気づきつつある。

PWAの機能と要件についてはGoogle Developersで詳しく解説されているが、PWAを可能にしている重要な技術は次の2つだ。

• App Shell（アプリケーション・シェル）アーキテクチャ

  これは、「ロジック」（プログラムの処理）と実際の「コンテンツ」を分離するもので、SPAを開発する手段として使われている。

  アプリが機能するために必要な最小限のHTML、CSS、JavaScriptで構成された、キャッシュ可能なユーザーインターフェイス（UI）の骨格だと考えればいい。

  主にReact（リアクト）、Angular（アンギュラー）、Vue.js（ビュー・ジェイエス）などのJavaScriptフレームワークを使用して構築されるアーキテクチャであることが多い。

• Service Worker（サービス・ワーカー）

  これは、ブラウザがページとは別にバックグラウンドで実行する特別なスクリプトだ。インターネットとブラウザの間に入って中継動作するもので、ページからのネットワークリクエストを途中で受け取り、プログラムに従って処理する。

  ネットワークの技術用語でいう「プロキシ」のように機能するものだ。

この2つの技術は互いに排他的ではない。SPAモデルは、Service WorkerやPWAよりずっと前から存在している（2010年のAngularJSの登場によって成熟した）。後述するが、SPAとして構築されていないPWAを作成することも十分に可能だ。

ただし、この記事で取り上げるのは、最新のPWAを開発するための「標準的な」アプローチだ。この2つの技術を採用する企業が急速に増えるなか、こうした流れに続くことにしたSEOチームにもたらされる影響（と機会）について説明したい。

まずSPAを可能にするApp Shellアーキテクチャを取り上げ、SPAモデルのレンダリングにもたらされる影響を探っていこう。