♪Move over, don't do it over, Cause it's over, Generation next (c) Spice Girls

特定のブラウザにはES2015以降をそのまま配信する方法

せっかくES2015でJavaScriptを書きあげたとしても、結局、ES5にトランスパイルしたものしか使ってないのはなんだかもったいない。 例えば、kangaxを見ると、Firefox 45、Chrome 49、Edge 13ではすでに8割方、ES2015に対応している。

元のES2015のファイルも残っているわけだし、だったらそれらのブラウザにはES2015をはじめとした次世代のES.nextをそのまま適用させる方法はないものか、と考えてみた。

手っ取り早いのはサーバーサイドで一括して差し替える方法。 というわけで.htaccessを使うことに。

以下のサンプルでは、ES2015(以降)で作ったJSファイルをscript.esnext.js、トランスパイルしたファイルをscript.jsとしていて、ブラウザのUserAgentで判別してファイルを差し替えている。


# UAをみて適用させるJavaScriptファイルを変更(htaccess編)
# Copyright (c) 2016 Kazz
# http://asamuzak.jp
# Dual licensed under MIT or GPL
# http://asamuzak.jp/license
<FilesMatch "\.js$">
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} Firefox\/([0-9]+)
RewriteCond %1 >44
RewriteRule ^(.+)\.js$ $1.esnext.js [L]
RewriteCond %{HTTP_USER_AGENT} Edge\/([0-9]+)
RewriteCond %1 >12
RewriteRule ^(.+)\.js$ $1.esnext.js [L]
RewriteCond %{HTTP_USER_AGENT} Chrome\/([0-9]+)
RewriteCond %1 >48
RewriteRule ^(.+)\.js$ $1.esnext.js [L]
# Add condition after Safari 10 is launched
# RewriteCond %{HTTP_USER_AGENT} AppleWebKit\/([0-9]+)
</FilesMatch>

.htaccessを使ったテストケース

同じ記述が繰り返されていてどうかという気はするが、.htaccessはよくわからないので(言い訳)

ツイッターで100の人(@esperecyan)さんから、1行で判別する方法を教えていただきました。 残念ながらApacheのバージョンが古いうちのサーバーでは使えないのですが、Apache2.4以降だったらいけると思います。 ありがとうございます。


RewriteCond expr "%{HTTP_USER_AGENT} =~ m#Firefox/([0-9]+)|Edge/([0-9]+)|Chrome/([0-9]+)(?!.+Edge)# && ($1 -gt 44 || $2 -gt 12 || $3 -gt 48)"

なお、Chromeに限らずOperaやVivaldi、先ごろ発表されたBraveなどのBlinkベースのブラウザでは、調べた限りではChromeのバージョンをUAに含めているのでそれらもフォローできているはず。

また、Geckoベースのブラウザでも、Cyberfox、iceweasel、Pale Moon、Waterfoxといった主だったところはFirefoxのバージョンが含まれている。

とはいえ、そもそも、UserAgent文字列での判別はほとんど信用ならないわけだけど…orz

"♪Move over, don't do it over, Cause it's over, Generation next (c) Spice Girls"へのTwitter上でのコメントやRT

7件のツイートがあります。

ツイート 1

ツイート 2

ツイート 3

ツイート 4

ツイート 5

ツイート 6

ツイート 7