GooglebotとJavaScript
JavaScriptを使用したWebシステムの作成において、念頭に置いておくのはSEO対策を行うかどうかである。サーチエンジンで拾ってもらう必要性のないシステムを構築するなら本記事は不要であり、好きなように作るのが最善だろう。今回はGooglebotに対して、いかにシステムが吐き出した情報を理解させるかという部分について記事にしていきたい。
Googlebotの理解するJavaScript
まずは公式サイトの情報を参照する
Google 検索でのレンダリングについて
まず前提としてChrome41相当の能力を持つと書かれている。JavaScriptに関してはES6をサポートせず、ES5に準ずる形で記述する必要がある。QiitaではJavaScriptというとES6に関する記事が沢山ヒットするものの、それらの機能はトランスコンパイルを前提にしなければ使用できない。
機能として使用できないもの
IndexedDB
WebSQL
Service Worker
WebGL
その他の制限
LocalStrageとSessionStrageはページをまたがることは出来ない。ただしページ内でのやりとりは可能なの。
Cookieはページをまたがることは出来ないので、基本的にはサーバから送り出すだけとなる。
動作確認の方法
作ったシステムがGoogleBotで認識できるかどうかは、Googleが提供している「Search Console」の「Fetch as Google」を使用すれば良い。ただ、開発中に何度も利用するのは手間がかかる。そこで登場するのがInternetExplorer11だ。
ご存じの通りIE11は、開発元のMicrosoftから見捨てられた存在だ。セキュリティの更新こそされるものの、新機能などは一切増える予定は無い。見事に進化が止まったブラウザなのだ。そしてIE11はGoogleBotが対象としているES5のJavaScriptまでしか動作しない。つまり動作検証にはうってつけなのだ。IE11で動いた物がGoogleBotで動かない可能性は低い。
ES5はきっつい
いかにSEO対策のためとはいえ、今更IE11をターゲットにしたES5の開発はつらい。しかしDOMの部分はどうにもならないが、CSSの定数定義やJavaScriptのES6で拡張された文法に関してはなんとかなる。そうトランスコンパイルだ。
SCSS(SASS)やTypeScriptのススメ
トランスコンパイルによって新しい機能を古い環境へ対応させる手段はいくつも出ている。その中でも開発で有用だとお勧めしたいのがSCSSとTypeScriptだ。
SCSSに関してはスタイルシートの定数定義や構造化をすることが出来る。VSCodeに「Easy SASS」というプラグインを入れておけば、.scssを保存した瞬間に.cssが作成される。
TypeScriptはJavaScriptの最新の文法を古い環境用にコンパイルしてくれるだけで無く、柔軟で高機能な型推論や入力補完を提供してくれる。これを使ったが最後、もはや素のJavaScriptには戻れないほど便利なのだ。コンパイルも早く、ウオッチビルドを有効にしておけば、保存した瞬間にコンパイルが始まる。そしてコンパイルの時間は、人間がブラウザの更新ボタンを押すより早い。
化石環境にうんざりしている開発者
色々なしがらみで古い環境に対応しているときの気持ちは「うんざり」というのが正直なところだと思う。しかし開発環境次第で、その「うんざり」を軽減したり、取り払ったり出来るのだ。後は便利なものをすんなり導入できる場所にいるかどうかが、次のポイントかもしれない。