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

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

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

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

https://proglearn.com/2020/06/27/%E3%80%902020%E5%B9%B46%E6%9C%88%E3%80%91line%E3%81%A7%E3%83%9F%E3%83%8B%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E4%BD%9C%E3%82%8B%EF%BC%81-liff%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E7%88%86%E9%80%9Fhell/

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

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

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

何故ならば、

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の敵でもあった、オブジェクトのプロパティ存在判定ができるので、かなり使っていました。

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