無駄と文化

実用的ブログ

ラジオボタンのコーディングは

ラジオボタンのコーディングは、

<div>
  <input type="radio" name="foo" value="hoge">
  <input type="radio" name="foo" value="fuga">
  <input type="radio" name="foo" value="piyo">
</div>

ではなく

<div>
  <input type="hidden" name="foo" value="">
  <input type="radio" name="foo" value="hoge">
  <input type="radio" name="foo" value="fuga">
  <input type="radio" name="foo" value="piyo">
</div>

と書こう。

送信先の画面で

<?php
echo $_GET["foo"];

みたいに値を参照できるので便利です。
(Undefined index の Notice が出ない)

スマートで便利な Polyfill 配信サービス Polyfill.io

どうも IE11 でも動くプログラムを書いている三井です。

先日 Github で流行りのライブラリをザッピングしていたら面白いサービスにたどり着きました。
Polyfill.io というサイトで、その名の通り JavaScript の Polyfill を気軽に読み込めるサービス のようです。

せっかくなのでメモついでに紹介します。

※ Polyfill とは、モダンブラウザにしか実装されていない新しい機能を古いブラウザでも動作するように独自に実装したコードのことです


Polyfill.io とは

f:id:todays_mitsui:20190901121016p:plain

このようなサイトです。

たくさんの Polyfill が一覧になっています。
2019年9月時点で237種類あるみたいです。


これらの Polyfill のうち自分が使いたいものにチェックを入れると、選んだ Polyfill を読み込むための URL が画面上部に表示されます。

f:id:todays_mitsui:20190901121630p:plain

使い方はこれだけ!

IE をはじめとする古いブラウザに対応させようとすると「あれも、これも、」とたくさんの Polyfill を読まなければいけなかったりするので、こうやって一覧になっているだけで探す手間が省けてべんりですよね。


Polyfill.io は 必要なコード だけを読み込む

さきほど取得した URL をブラウザで叩いて試しに中を見てみましょう。

f:id:todays_mitsui:20190901122926p:plain
Chrome 76 で視聴

あれ空っぽ。

一方その頃、 Internet Explorer 11 では...、

f:id:todays_mitsui:20190901123403p:plain
ファイルがダウンロードされ、

f:id:todays_mitsui:20190901123428p:plain
開いてみるとコードが!


というわけでこの Polyfill.io はリクエスト元のユーザーエージェントを判別して Polyfill が必要なブラウザに必要なコードだけ返すようになっているんですね。なんという親切さ。
なので Polyfill.io のコードを埋め込んだサイトを モダンブラウザで閲覧した場合 にも 余計なコードの読み込みで表示が遅くなる心配はありません


まとめ

この Polyfill.io 、使い方はシンプルで便利な上にブラウザ判別の機能までついてもう最高じゃないですか?
これを使わない手✋はない!


私からは以上です。