【Android】古いAndroid OSでJSがうまく動かない

久々にAndroid開発をしていたら、ハマったのでメモ。

事象1. 関数が無いと言われる
1. 原因
2. 解決方法: デフォルト引数を自分で設定
事象2. サポートされていない変数宣言といわれる
1. 原因
2. 解決方法
最後に

事象1. 関数が無いと言われる

WebViewを使っているアプリでOSごとに動作確認をしていると、ボタンをクリックしても反応しない。。。

Android Studioのlogcatを確認してみたところ、次のようなエラーが。

I/Chromium "Uncaught ReferenceError XXXX is not defined"

1	I/Chromium "Uncaught ReferenceError XXXX is not defined"

いや、自分的にはXXXの関数は定義してるだけど。。。
そもそも別のOSだったら動くのになんで一部のOSだけ動かない？？

原因

調べて見たところ、現在は殆どのブラウザ(スマホも含め)でES6というJSの仕様？が利用可能だが、古いバージョンのものだと対応していないことがあるようです。

こっちのサイトではどのブラウザES6にが対応しているのかわかる、らしいですので見ておくと良いかもしれません。
https://kangax.github.io/compat-table/es6/

らしいと書いたのは、私は正直見てもよくわからなかったからです笑

どのChromeが対応しているのかの見方がわからないので、知っているかたいたらコメントで教えてほしいです。

解決方法: デフォルト引数を自分で設定

私は関数の引数にデフォルト引数を付けていましたが、デフォルト引数はES5では使えない。
そのため、関数の定義が失敗して、そんな関数は無いと言われていたわけですね。

なので、少しダサいですが、デフォルト引数は自分で設定することに。
※もっといい書き方あったら教えて下さい

// 修正前
function XXXXX($x = "default") {
    use($x);
}

// 修正後
function XXXXX(x) {
    var _x = x;
    if (_x == null) {
        _x = "default";
    }
    use(_x);
}

// 修正前

function XXXXX($x = "default") {

use($x);

}

// 修正後

function XXXXX(x) {

var _x = x;

if (_x == null) {

_x = "default";

}

use(_x);

}

これで動作を確認してみたところ無事エラーが解消されて動きました！

事象2. サポートされていない変数宣言といわれる

もう一つ、letで宣言していた箇所でもエラーが出ました。

Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode”

1	Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode”

原因

こちらもES6からしか使えないようです、、、
constも同様です。

解決方法

letで宣言していた箇所をvarに変更で動作します。
意図しない動作になってしまう場合には、呼び方などを工夫して対応しましょう。

最後に

Javascriptの書き方を低いバージョンに合わせるように修正しましたが、Web側でJavaScriptをトランスパイラできるbabelとかを入れていたらこんなことは起きないんだろうなぁと思いました。

React、ReactNativeとかで新しく作ったやつはライブラリがよしなにしてくれているから恩恵をちゃんと考えたことなかったけど、babelってすげーなぁ。。。

手動で導入するのちょっと面倒だし、それだったらもはやいい感じにそういうことやってくれるフレームワークに以降とかでももはやいいかもしれないですね。

もしbabelをレガシーなソースに追加するような作業があったらまた記事書こうと思います。

今日は以上です。