JQueryファイルの書き方おすすめ – (function(){～})(JQuery); – $(function(){～}) の意味

2023.06.07

JQueryでスクリプトを書こうかなー、というとき、
「あれ？どう書きはじめればいいんだっけ？」
といつも迷うので、簡単にまとめます。

今回は外部jsファイルをhtmlで読み込む場合を想定して書きます。記述ファイルが分かれてるほうが編集個所を探しやすくて好きなので。

HTMLでjsファイル読み込み

まず.jsファイルを作って、htmlに作ったjsファイルの読み込み記述を追加します。

<body>
   // ここにHTMLのBody部を記述

   // ↓ body末尾
   <script src="js/hoge.js"></script>
</body>

追加場所はbody部の末尾に追加します。

末尾以外にも書けますが、末尾に追加すると、必ずHTML要素を読み込んだ後にスクリプトを読み込めます。該当するHTML要素が読み込まれていないうちに処理が走ると、操作が失敗する可能性があります。読み込み記述はできるだけ末尾に追加しましょう。

(function($){～})(JQuery)で書き始め

.jsファイルを作ったら、その中にスクリプトを書いていきます。
書き始めは、以下のようなかんじです。

(function($){
   // ここに $ を使用したスクリプトを記述する
})(JQuery);

(function($){})(JQuery)で囲うことで、以下のメリットがあります。

  • 中の変数＆関数と、外の変数＆関数との名前の競合を避けられます。同じ名称があっても別物として扱われます。(function($){~})は即時関数(定義と同時に即実行される関数)を定義しており、外との分離は即時関数によるものです。また、外部からのアクセスによって内部の変数を変えるようなアクセスを限定できます(カプセル化)。
  • 内部で明示的にJQueryを使えます。JQueryオブジェクト(JQuery)を、ローカル変数である‘$’に代入しています。これにより、‘$’をJQueryの‘$’として使用することができます。例えば、即時関数外で、JQueryでない‘$’を定義していた場合は、競合を避けられます。

どちらも競合回避ですね。意図しない動作を避けるため、外部との分離はやっておくのが無難です。

$(function(){～})で読み込み後実行

即時関数で囲ったら、いよいよHTML要素に対する操作処理(=DOM操作)を書いていきます。

DOM操作を書く個所を、以下の記述で囲いましょう。

(function($){
   $(function(){
         // ここに DOMを操作するスクリプトを記述する
   });
})(JQuery);

$(function(){～}で囲うことで、HTMLドキュメントが完全に読み込まれた後に実行されます。読み込まれていない要素の操作は失敗してしまうので、その回避策です。

実は、scriptの読み込み記述を<body>の末尾に書いておけば、上記の記述をしなくても、HTML読み込み後にscriptが実行されます。ですが、

  • 処理を書く場所を明確にできる
  • Scriptの読み込み記述の場所を間違えたときの保険になる

というメリットがあるので、$(function(){～})の中に書く癖をつけることをおすすめします。

以前は、$(function(){～})の代わりに、以下のようにも書かれていました。

$(document).ready(function() {
   // ここに DOMを操作するスクリプトを記述する
}

しかし、jQuery 3.0以降は非推奨になりました。詳しくはJQueryの公式ドキュメントをご覧ください。

変数定義の書き方

HTML要素の操作のために、変数を使うことがあるでしょう。変数の種類について、簡単に書いておきます。
主な変数定義キーワードは「var」「let」「const」の３つです。
それぞれ以下の特徴があります。

  • let
    • ブロック(‘{}’) 内で変数を宣言すると、そのブロック内でアクセス可能
    • 同じ名前の変数を同一ブロック内で再宣言することはできない。
    • 変数の値を再代入可能
  • const
    • ブロック(‘{}’) 内で変数を宣言すると、そのブロック内でアクセス可能
    • 同じ名前の変数を同一ブロック内で再宣言することはできない。
    • 変数の値は再代入できない。プロパティを変更することはできる
  • var
    • 関数内で変数を宣言すると、その関数内でアクセス可能
    • 同じ名前の変数を同一ブロック内で再宣言できる。
    • 変数の値を再代入可能
    • ES6(ECMAScriplt2015)以降は非推奨

例えば以下のように書きます。

let a=1;
const b="hoge";
var c=b;

変数の競合が起きるので、基本的に「var」は使わないほうがいいでしょう。
途中で中身を変更するなら「let」、固定なら「const」が適しています。
関数を変数に代入する場合は基本「const」を使います。

ちなみに、javascriptの変数には「変数の巻き上げ」というややこしい現象があります。「ブロックの途中で宣言された変数はブロックの先頭で宣言されたものとみなす」というものです。ここでは説明しませんが、意図しない動作を引き起こすことになるので、注意が必要です。

関数定義の書き方

関数定義方法には以下の３つの種類があります。できることに差があるので、場合によって使い分けるのがいいでしょう。

１.通常の関数

function hogeFunction(hoge1, hoge2) {
   // 処理を記述する
}

2.無名関数

const hogeFunction = function(hoge1, hoge2) {
   // 処理を記述する    
}

3.アロー関数

const hogeFunction = (hoge1, hoge2) => {
   // 処理を記述する
}

どれを好んで使うかはそれぞれの主義によりますが、私は基本は記述の短い“アロー関数”をおすすめします。ただし、“通常の関数”にできて“アロー関数”にできないことがあるので、その場合は“通常の関数”を使います。このように、それぞれの特徴を理解し、用途によって使い分けるといいです。


“アロー関数”、“無名関数”のように、const変数に代入する場合、メソッド呼び出しより前に定義しないとundefindエラーになってしまいます。そこで、以下のように書くことをおすすめします。

(function($){
   const init = () => {
      // ここに DOMを操作するスクリプトを記述する
   }
   // ここに関数を書く
   $(function(){
      init();
   }
})(JQuery);

$(function(){})を末尾に書けば、関数をすべて読み込んでから処理が始まります。DOM操作は一番上に書いたほうがわかりやすいので、関数を使って定義します。

まとめ

javascriptを書くときは以下のように書き始めるのがおすすめです。

<body>
   // ここにHTMLのBody部を記述

   // ↓ body末尾
   <script src="js/hoge.js"></script>
</body>
(function($){
   const init = () => {
      // ここに DOMを操作するスクリプトを記述する
   }
   // ここに関数を書く
   $(function(){
      init();
   }
})(JQuery);

コメント

Copied title and URL