【WEB制作】場合によってfunction型関数は使わない方がいいみたい

投稿日:2023/06/29　最終更新日:2023/06/29

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

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

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

Table of Contents

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でのブラウザチェックはしっかり行いましょう。