はじめに
こんにちは。最近あまり手を動かさなくなってしまったフロントエンドエンジニアのbakupenです。
フロント開発で年明け2ヶ月で2件もしくじったので共有したいと思います。
概要
古いOSバージョン、ブラウザバージョンでアプリが動作しないという障害が起きてしまいました。
2件どちらもtoC（消費者）向けに作ったWebアプリで、
どんな端末・ブラウザを使うかわからないところがミソです。（一応Chromeを推奨したりはしている）
また、サービスのターゲットが高齢者寄りというところが結構重要で、開発時から考慮すべきところでした。
それではそれぞれのしくじりについて紹介していきます。
[しくじりその1] JSのオプショナルチェーンがbabelでコンパイルされなかった
開発環境：Vue2 + vue-cli
babelってなに
まず、JS構文というのはどんどんバージョンアップされていきます。
新しい構文で書くほど、便利に、コードが簡潔に書けるようになったりするので、できれば新しい構文で書きたいと思うものです。
しかし、ブラウザのバージョンによっては新しいJS構文が読めず、画面を表示することができなくなります。
そんなときに活躍するのが、babelというコンパイラです。
babelはとても優秀で、新しい構文で書いたものを古いブラウザでも読めるように変換してくれます。
しくじりの内容
Vue.jsなどフレームワークを使って開発する際は大体最初にbabelを入れるかと思います。
開発構築当初のbabel.config.jsはこんな感じ。
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
};
しかし、これだけだと足りませんでした。
2020年に追加されたオプショナルチェーンが、コンパイルされなかったのです。
そのため、古いブラウザを使っているユーザーには真っ白い画面をお見せすることになってしまいました…。
対応
babel.config.jsをこのように１行追加しました。
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
plugins: ["@babel/plugin-proposal-optional-chaining"], //ここ追加
};
オプショナルチェーン以外にも新しめの構文を使った時は、babelのドキュメントで独自設定が必要かどうか確認するといいと思います。
参考記事：https://blog.mahoroi.com/posts/2018/12/try-babel-proposal-optional-chaining/
[しくじりその2] CSSの単位dvhは新しすぎた
開発環境：React + Vite
dvhってなに
CSSでは要素の高さや幅を指定することができます。
指定する際に主に使われている単位がpxや%だと思いますが、vh vwという単位もあります。
%が「親要素」に対する割合で指定するのに対し、「ビューポイント（端末の画面の大きさ）」に対する割合で指定するものです。
vhは高さ、 vwは幅になります。
この高さを指定するvh、スマホ利用を想定したページでの使い勝手が少し悪いのですが、それを改善するdvhという単位が2022年11月に新しく追加されました。
しくじりの内容
Google Chrome 108から対応とのことで、103などちょっと古いChromeでdvhを使ったページを開こうとすると画面が真っ白になってしまいました。
対応
dvhを使わず、こちらのサイトを参考にJavaScriptを使ってビューポイントの高さを取得しました。
おわりに
今回の2件以外で過去にtoC向けのアプリを開発したことがなかったので、なかなか苦戦したとともに勉強になりました。
どちらもメインターゲットが高齢者なので、高齢者向けのスマートフォンから利用されることを想定する必要がありました。
高齢者向けのスマートフォン、ブラウザのバージョン更新止めてるんじゃないかなと思いました。
（おそらくバージョンアップによるUI変更で混乱しないためかと思われます）
そのためか、「最新のブラウザで利用してくれないユーザー」が普通に存在していました。
セキュリティ大丈夫なのかと思いますが、現場も大変そうですからね…。