JavaScript

【JavaScript】スマホ機種によってアプリが動かない…?JSの文法が原因かもしれません【実際に陥りました】

みなさん、こんにちは。どんぶラッコです。

私が請け負った案件に、LINEでLIFFアプリを作成するというものがありました。

LIFFとは、Web View を使って、LINE内アプリのようなものが作れるやつですね!

概ね良好に動作していたのですが、一つ問題が。

一部の人のスマホでアプリケーションが動作しない、と報告があがってきたのです。

これ、ものすごく困りました。

何故ならば、

  • Webブラウザ上での検証 (PC)
  • 実機での検証 (iPhone, Android端末)

の両方を済ませた上で納品したからです。

どんぶラッコ
どんぶラッコ
「実機のテストをしていない」「全ての人で同じ現象が起こる」とかなら理解できるのですが…。つらたんでした

jQueryが悪さをしているのか? CDNで読み込んでいるライブラリが一部の地域で対応していないのか??

色々試してみたのですが、全く解決の糸口が見つかりません。

1週間以上途方に暮れる時期が続きました。

JavaScriptの文法が原因だった!

これ、何が原因だったかというと、僕がプログラム内で使っていたJavaScriptの文法が Samsung携帯のデフォルトブラウザ ( Samsung Internet )に対応していないことが原因でした。

具体的にはオプショナルチェーンで引っかかっていました。

オプショナルチェーン自体はクソ便利なやつです。

通常、存在しないプロパティを読み取ろうとすると、JavaScriptはエラーを返して処理を中断してしまいます。

const obj = {
  hoge: 'hogeです'
}

console.log( obj.hoge ) // hogeです
console.log( obj.fuga ) // 存在しないのでエラーが出力
console.log( '終わりです' ) // obj.fuga でエラーになっているので実行

しかし、はてなマークを挟む ( ?. ) と…

const obj = {
  hoge: 'hogeです'
}

console.log( obj.hoge ) // hogeです
console.log( obj?.fuga ) // undefined
console.log( '終わりです' ) // 終わりです
// ... 以降の JavaScirptも表示される

エラーにならずにプログラムが進んでいくのです!ありがてえ…

これ、JavaScriptの敵でもあった、オブジェクトのプロパティ存在判定ができるので、かなり使っていました。

しかしながら、この文法、対応ブラウザをよくみてみると…

なんと、スマホ業界大手 サムスンの デフォルトブラウザ ( Samsung Internet ) では非対応なのです。

そもそもChromeブラウザも v80以降、 Node.jsも v14以降でないと対応していないなど、最新版じゃないと動かない機能です。

もっというと、この文法はまだテスト段階であることが明言されています。

Babelを使おう!

今回の敗因は、まだ普及していない文法を用いていたにも関わらず、Babelを使って ES2015 以前の文法に変換していなかったことでした。

Nuxt.jsやReact等のWebフレームワークを使っている皆様ならばWebpackにバンドルする際にbabelも一緒に走っているので問題ありませんが、生JSをゴリゴリ書いて公開する場合は、babelを噛ませてから公開するのが吉です!

いい勉強になりました。

ABOUT ME
どんぶラッコ
ECコンサルタント、システムエンジニアを経て、quintet株式会社CTOに就任。普段はNuxt.jsやLaravelを使用しています。

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn
RELATED POST

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です