JavaScriptでAndroid4.4対応のUI実装のとき思い出す非対応機能

2018年前半、まだクライアントワークで対応することがあるAndroid4.4でサポートされていないJavaScriptやCSSの備忘録です。

スマタブによると、
2018年5月現在でも、Android4.4がまだ%ほど生き残っているんですね…

transformにはベンダープリフィックスが必要

AutoprefixerでCSSを補完してもらう開発に慣れていると忘れがちですが
Android4.4はtransformではなく-webkit-transformと記述しなければ適用できません。

これ、Autoprefixerが使える環境だと、問題ないのですが
JavaScriptでStyleを設定する機会に、必要だったということに気づいたのです。

たとえば、touchmoveで要素をドラッグ移動させたいとき、こんなふうにするとAndroid4.4では反応しないので

myDOM.style.setProperty('transform', 'translate3d(' + x + 'px, ' + y + 'px, 0)');

4.4をサポートする場合は、ベンダープリフィックスを付与してこのように幅をもたせます。

myDOM.style.setProperty('-webkit-transform', 'translate3d(' + x + 'px, ' + y + 'px, 0)');

findが使えない

ほか、配列の中から条件に一致した最初の項目を抽出する際に使用するfindもエラーになります。

たとえばこういう、一つだけ該当する子要素を抽出したいケースでは

var myArray = [
	{id: 0, name: 'A'},
	{id: 1, name: 'B'},
	{id: 2, name: 'C'}
];
var current = 1;
var currentItem = currentと一致するidを持つオブジェクトを指定したい;

findを使うと便利なのですが

var currentItem = myArray.find(function(o){
	return o.id === true;
});

Android4.4ではfindを認識できずエラーになるため、filterで代用します。
filterは条件に該当する要素を配列として取得するので、0番目の要素を取り出してつかいました。

var currentItems = myArray.filter(function(o){
	return o.id === true;
});
var currentItem = currentItems[0];

関連記事