FormData.get()を使う時は対応ブラウザに気をつけよう
こんにちは、tkyです。
最近ReactのSPAやっていて、今日はその開発の中でハマったjavascriptのことを書きます。
- 何があったの
- やろうとしていたことは何か
- 何が原因だったの
- あれ？でも別のiPhoneだと動くんだけど・・・？ 🤔
- iOS11.2と11.3を境に何が起こったのか
- 対応ブラウザとバージョンには気をつけよう
何があったの
APIで mutipart/form-data なPOSTメソッドを叩く時って、要件によりしばしばあると思いますが、
ある日社内の検証端末(iPad)で動作確認していた時、POSTできない不具合が発生しました。
formData.get is not a function
やろうとしていたことは何か
- formdataに特定のパラメータが入っているかどうかPOST前に確認したかった
- 基本Google Chromeの検証ツール上で動作確認していた
※ブラウザの対応要件は chromeとsafariの2種でした。iOS、Android上でも動作すること、がブラウザ要件となります。ieとedgeは要件から切り捨てています 😎
何が原因だったの
実はiOSのsafari (以降、Safari on iOS)でForm.get()が非サポートのため使用できなかった、というものでした。
あれ？でも別のiPhoneだと動くんだけど・・・？ 🤔
そうなのです。特定の端末だとPOSTできるのです。
では状況を整理します。端末が少なかったのでエミュレータでの確認となります。
あるiOSバージョンを境にして切り分けができました。
| iOSバージョン | 結果 |
|---|---|
| 10.2 | NG |
| 11.1 | NG |
| 11.2 | NG |
| 11.3 | OK |
| 11.4 | OK |
| 12.0 | OK |
iOS11.2と11.3を境に何が起こったのか
iOS11.3に搭載されているのはSafari11.1ですが、変更点は以下でした。
Service Workerの対応が一番しっくりきますかね。ServiceWorkerの実装が入ったことでWeb Worker側の基本実装も入り、Web Workerを利用するFormData側にも良い方向で影響があったのだろう。が今の見解ですが、あくまで推測なので違っていたらスミマセン。
対応ブラウザとバージョンには気をつけよう
開発時、ググって実装して動いたーでコミットしてしまう時、ありますよね。 Form.get()だけでなく、ちゃんと各ブラウザの対応状況は確認しておく癖をつけておくのが良いなと思いました。
