読者です 読者をやめる 読者になる 読者になる

javascript 即時関数の書き方

今回はjavascriptの即時関数を紹介します。


私は最初に即時関数を見たときはその記述方法に驚きました。
しかし、その機能はいたってシンプルで「定義後、即実行」する関数だというだけです。
だんだん見慣れてもきますので、もし即時関数を難しく感じても最初だけなので安心してください。


さっそくですが、実際のコードはこのような感じになります。

即時関数の書き方

(function(){
  //処理...
})();


通常の関数ではロードされた後に呼び出しをされないと実行されませんが、上記のように記載することで「定義後、即実行」という挙動になります。


通常の関数と比較してメリットとよく言われるのが「スコープが閉じている、いわゆるスコープを汚さない」ということです。スコープが閉じていることにより、「他の場所で定義した変数」と同じ名前の変数を定義し使用しても、「他の場所で定義した変数」に影響を与えることはありません。


これは、複数の外部ファイルの読み込みなどで複雑に入り組んでしまい「このアプリでどのような変数を使用しているのか把握できない」ような状況で有用かと思います。


また、即時関数には他にも書き方がありそれぞれ次のように書きます。

引数を指定する場合

引数を指定する場合ではこのように書きます。

(function(val1, val2){
  //処理...
})(1, 2);

関数名を付与する場合

即時関数には、関数名を付与することも出来ます。

(function sokuji_func(){
  //処理...
})();

以上、即時関数の記載方法でした。

追加実験

即時関数には関数名を付与できることを利用して関数定義した場所以外から呼び出せるのか次のコードを書いて試してみました。
結果として、下記のようなエラーが起きてしまい期待していた挙動にはなりませんでした。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
window.onload = function(){
  var sokuji = (function(arg){
    var $p = document.getElementById("p_sokuji");
    $p.style.color = arg;
  })("red");

  var $b = document.getElementById("b_sokuji");
  $b.onclick = function(){
	  sokuji("blue");
  }
}
</script>
</head>
<body>
<p id="p_sokuji">Hello Sokuji Function</p>
<button id="b_sokuji">テスト</button>
</body>
</html>

このようなエラーです。
f:id:somegoro:20170522003943p:plain

ううむ、即時関数を呼び出すにはどのようにしたら良いのでしょうか。
引数なしだったらいけそうな気もします。再度、色々なアプローチで実験してみようと思います。

javascript(jQuery)読み込みの仕組みを解説!

今回は javascript / jQuery の読み込まれる仕組みを解説します。


window.onload / ready / $(function(){}) など 色々なイベント処理があります。みなさんはフロントエンドの基本であるこれらをきちんと理解しているでしょうか。これらの理解があるかどうかで今後の開発の質が大きく変わってくることかと思います。


例えば、ある要素に対して押下イベントを登録するにしてもDOMツリーが構築されてから登録処理を実施しないとイベント登録はされません。なぜなら登録先の要素が無いために登録処理が空振りに終わってしまうからです。


ではDOMツリーが構築されるタイミングはいつなのか、適切なタイミングで登録するにはどうしたらいいのか。このあたりの理解があやふやな方は是非読んでいってください。


よく使う$(function(){...とは何なのか

jQueryを使うときには、次の式を書きますね。

$(function(){
  //処理...
});

これは次の式の略です。

jQuery(document).ready(function() {
  //処理...
});

この式は他にもこのような記載方法があります。機能はどれも同じです。

$(document).ready(function(){
  //処理...
});

jQuery(function(){
  //処理...
});

これらの式はHTMLがDOMツリーを構築完了した直後に呼ばれる式です。ですので要素に対してのイベント登録は上記の式の中に書けば登録することが出来ます。しかし、CSSレンダリングや画像の読み込みなどはまだ行われていないので、要素や画像の高さを取得することは出来ません。

全体の順番

全体としての順番は次の通りです。


1.Webページの読み込み開始
  基本的には上から順番にWebページが読み込まれていきます。

 ↓

2.HTMLを読み込んでDOMツリーの構築
  ここでDOMツリーの構築が完了すると次の式たちが実行されます。

$(document).ready(function(){
  //処理...
});
$(function(){
  //処理...
});

 ↓

3.CSS、画像、サブフレーム(iframeとか)の読み込み
  ここで各種コンテンツの読み込みが完了すると次の式が実行されます。

window.onload = function(){
  //処理...
}

こうやって書いても良いです。

$(window).load(function(){
  //処理...
});

  ここだとCSSレンダリング後なので、要素のheight,widthが取得できます。
  もちろん画像のheight,widthも取得できます。


ちなみにTips

window.onloadは一度しか呼ばれません。二つ以上書くと最後に書いたもののみ実行されます。

window.onload = function() {
  //処理1...
}

window.onload = function() {
  //処理2...
}

これは、上記のように window.onloadに代入されるので最後に書いたものに上書きされるためです。


すべてのコンテンツの読み込みが完了した時点で処理を複数実施したい場合は次のように書きます。

$(window).on('load', function() {
  //処理1...
});

$(window).on('load', function() {
  //処理2...
});


これをjQueryなしでやるには次のように書きます。

function onload_function1(){
  //処理1...
}

function onload_function2(){
  //処理2...
}

window.addEventListener('load', onload_function1);
window.addEventListener('load', onload_function2);


window.onloadと違い次の式は何回でも記載することが出来るので安心して使いましょう。

$(function(){
  //処理...
});


この式をjQueryを使用せずにjavascriptのみで呼び出すのは次のように書きます。

document.addEventListener( "DOMContentLoaded", completed );

この書き方の対応ブラウザは次通りです。

Chrome Firefox InternetExplorer Safari
1.0~ 1.0~ 9.0~ 3.1~


また、途中で記載した次の式は、jQueryの関数.loadを使用した呼び出し方です。

$(window).load(function() {

これはwindow以外の要素でも使用することが出来ます。指定した要素の読み込み完了した時点で発火するイベントの登録ということですね。

<img src="test.gif" alt="test" id="test">
$( "#test" ).load(function() {
  //処理...
});

これをjavascriptのみで実行するには次のように書きます。

window.addEventListener("load", completed );

いかがでしたでしょうか。
以上、今回は javascript / jQuery の読み込まれる仕組みを解説でした。