WEBサイト制作においてJavaScriptは現在使わないことがないほどになっています。

アニメーションの作成、Reactを用いたUI作成、Node.jsを用いたバックエンド環境の構築など、もはやJavaScriptがあれば何でも作れちゃいます。

そんな中で関数宣言には注意すべき点がありますので、ここに書き記しておきたいと思います。

JavaScriptの関数宣言

JavaScriptの関数宣言は大きく2種類あります。

「関数宣言型(function文)」と「アロー関数型」です。

// 関数宣言
function 関数名(仮引数1, 仮引数2) {
　・・・
}

// アロー関数
const 関数名 = (仮引数1, 仮引数2) => {
　・・・
} 

Reactでもクラスコンポーネントから関数コンポーネントへ主流が変わったこともあり、よく目にしますよね。

ちなみにここでは、WEBサイトやLPの制作ではバニラJSで書いたコードをそのまま使用する場面を想定して下さい。

ブラウザによっては「関数宣言型が使用できない」ことがある

関数宣言型の関数でアニメーションを作ってSafariで開いた時のことでした。

下記のようなコードが表示される場合があります。

ReferenceError: Can't find variable: 〇〇

「参照エラー： 変数が見つかりません」と表示されませんか？

「いや、変数はちゃんと書いてあるはずなんだけど、、」と思うはずです。

これには原因があります。

原因はなにか？

本来は関数宣言型は、コード全体or関数のスコープで書く必要があり、ifなどのブロック内に書くのは御法度になっていました。

ES2015以降ではstrictモードを用いることでfunction文のブロックスコープが保証されるようになりましたが、ブラウザによっては対応が追いついていないorあえて区別している場合があります。

つまり、if内にて関数宣言型の関数を作動させる書き方はエラーを起こす可能性が可能性が高いという事になります。

では、どうすればいいでしょうか？

なるべくアロー関数で書くと安全なことが多そう

この場合、関数宣言型の関数をアロー関数型に変えてみて下さい。

おそらくちゃんと動くはずです。

これに関しては参考資料に載せた内容を読んでいただいた方が理解できるかと思いますので説明は省きますが、ブロックスコープの取りうる範囲が関数宣言型とアロー関数型では違うため、このようなエラーが表示されるとのことです。

ただ、このような場合にてChromeでは問題なく動作していたため、Chronium製のブラウザであればどちらでも問題ないようですが、一昔前のIEや今回のようなSafariではエラーが出てしまうことがありますので、安全なWEBサイト設計には今後も各種ブラウザチェックは必要になります。

まとめ

少し面倒くさいですが、Chrome・Safari・FireFoxでのブラウザチェックはしっかり行いましょう。

参考資料

https://teratail.com/questions/339636

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/block

関連記事:

WebページでJavaScriptが動かない場合の解決法 JavaScript/TypeScriptで今日の日付を取得したいのになんかズレてるときの解決法 自宅のWi-FiでVPNに接続できない場合の解決法 brewコマンドを毎回設定せずに使用できるようにする方法