♪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はよくわからないので(言い訳)
ツイッターで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
♪Move over, don't do it over, Cause it's over, Generation next (c) Spice Girls ~ 特定のブラウザにはES2015以降をそのまま配信する方法 https://t.co/DBkqLuGJmU
ツイート 2
追記しました~ https://t.co/DBkqLuGJmU https://t.co/8yR2SuU3O9
ツイート 3
教えていただいた正規表現で再修正しました https://t.co/DBkqLuGJmU ついでにこちらも直しておきましたw https://t.co/1jHxp0yV7V https://t.co/oF54yPsEuS
ツイート 4
ES.next対応ブラウザとその他を振り分けるようにしたことで、.esnext.jsの中ではレガシーブラウザ向けのポリフィルとかを一切合切削除できた これでかなりすっきりしたものになった♪ https://t.co/DBkqLuGJmU
ツイート 5
ただし、 元ファイル --- .esnext.js(ES.next) | --- .js(ES5にトランスパイル) と3つのファイルを維持管理する必要がでるけど https://t.co/DBkqLuGJmU
ツイート 6
うちのサイトでは一部のブラウザには直接ES2015を適用しているけど ♪Move over, don't do it over, Cause it's over, Generation next (c) Spice Girls https://t.co/DBkqLuGJmU
ツイート 7
こんな感じでいかがですか? つ https://t.co/DBkqLuGJmU https://t.co/nuvtF9zLcR