[js]関数をファイルを跨いで呼び出せるという話

作業が楽になる場合がある。

どういうことか
やっていく
活用例
まとめ的な

どういうことか

関数の作成と発火を別々のファイルでやりたい状況は普通にある。

また、基本的にjsは外部ファイルにまとめてるんだけど、一部の数値をphpと絡めたりしてphpファイル内に書きたいこともある。だからって関わる全部をphp側に書いちゃうとなかなかのボリュームでだるいし、セキュリティ的に微妙かもってこともある。

だから、ファイルを跨いで呼び出せたらいいよねっていう話。

phpだと関数とか変数をグローバルにして呼び出すみたいなのは当たり前にあるし。

やっていく

こういうかんじで。

<head>
    <script src="https://code.jquery.com/jquery-3.6.2.min.js" integrity="sha256-2krYZKh//PcchRtd+H+VyyQoZ/e3EcrkxhM8ycwASPA=" crossorigin="anonymous"></script>
    <script src="script.js"></script>
</head>
<body>

<button type="button">click</button>

<script>
    function test(){
        alert('aaaa');
    }
</script>
</body>

$(function(){
    $('button').on('click',function(){
        if(confirm('マジで？')){
            test();
        }
    })
})

慣れてるからjQueryだけどjsでも同じ話。

外部ファイルとはいえ上から読んでいく規則がある中でも、jsは関数の呼び出しが宣言よりも先にあっても大丈夫。

活用例

先日書いた記事が該当。

大部分を別ファイルに逃がせるんで、かなりすっきりする。

別ファイルに書けば、特にこの場合は関数を作ってるので他のページでも使い回すことができる。

お得ですね。

まとめ的な

テクニカルではあるのだけど、こういうことができるようになると何よりも自分が楽になる。

手を抜ける、手間を省けるってことでプラスの面が多いので、お勉強が嫌いな人なら尚の事覚えやすいんじゃないでしょうか。どんどん横着して文字数を減らしてシンプルなコーディングができるといいですね。