やまさきやまさき
2017/08/18

JavaScriptの基本を見直そう – jQueryのredy関数とは何か分析してみた

この記事は約5分で読めます。

JavaScriptの基本を見直そう – jQueryのredy関数とは何か分析してみた

基礎

jQueryに頼りっぱなしのそこのあなた(私です)。Javascriptの基本的なことも知らないままWEB制作してませんか?

もちろんこのご時世、普通にWEBサイトを制作するだけならjQueryに頼っておけば何とかなります。というか頼らない方がどうかしてますよね。

 

私も、jsファイルの書き方なんてとりあえず$(function(){});で囲ってればいいんだ。くらいの認識でJavaScriptを触り始めてそのまま生きてきました。jQueryがなきゃやってけません。

 

しかし。そろそろjQueryの正体が知りたくなってきました。$(function(){});って何?

 

ということで、今回はredy関数をjQueryを使用せずに書く方法を調べ、その中身を分析することでJavaScriptの基本を勉強してみようと思います。

jQuryを用いたredy関数

まずはredy関数のおさらいです。ready関数については「HTML文書の読み込みが終わった時に実行される関数」というように説明されていることが多いですね。

画像とかがまだ読み込みが終わってなくても、文書構造自体が読み込めた時点でイベントが発火します。

jQueryを用いると次のような感じで書けるやつです。

$(document).ready(function() {
 alert('Hello!');
});
//または
$(function(){
 alert('Hello!');
});

これをjQueryを使用せずに書くと、

document.addEventListener("DOMContentLoaded", function(){
 alert('Hello!');
});

となるようです。なんか長ったらしいですね。

どういうこと?

さて、何が起こっているのか?

これを理解するにはまずはDOMというものを理解しないといけないようです。

DOMのまとめ

Window オブジェクトや Document オブジェクト、DOMなど

上記の2つを読めば大体わかると思います。

DOMについて大体イメージが掴めたと仮定して話を進めますが、先程のjQueryを使用せずに書いたready関数をもう一度見てみましょう。

document.addEventListener("DOMContentLoaded", function(){...});

これはつまり、DOMのdocumentオブジェクトのDOMContentLoadedイベント対してイベントリスナを追加するよ、ってことになります。

document.addEventListener('イベント名', 呼び出す関数);

と記述することで、documentの’イベント名’が発生したときに、呼び出す関数を追加することができます。

今、指定しているのは’DOMContentLoaded’というイベントですので、「documentオブジェクトが読み込まれた」時にイベントリスナを追加しています。

jQueryでとりあえず$(function(){});で囲んでいた処理は、このイベントが発生したときに呼び出されていたんですね。

もう少し考察(clickイベントを例に)

クリックされたときに何かしらの処理を加えたい時、jQueryではclick()関数などを使用しますよね。

実はこれもready関数と同様に、addEventListenerでクリックイベントに対してイベントリスナを追加しているというのが正体です。

 

ではなぜclick関数はready関数の中に含めて記述するのかというと、

$('対象の要素').click();

というはdocumentオブジェクトの中からclickイベントの対象とする要素(エレメント)を見つけて、そのエレメント自体に対してイベントリスナを追加するものです。

つまり、ready関数の外にclick関数を記述するとdocumentが読み込まれてない時点でその要素を探してしまうので、エレメントがnullになってしまいます。

もしready関数の外からでもclickイベントにイベントリスナを追加したい場合、jQueryでは次のように記述することもできます。

$(document).on('click', function(){...});

この記述にすると、documentオブジェクト自体を対象にしています。中身が読み込まれていなくてもdocumentというオブジェクト自体は存在しているので、ready関数の外でもdocumentオブジェクト自体へのクリックイベントリスナは無事に追加できるのです。

 

 

また、Ajaxなどで後から読み込んだ要素にclick()関数が動作しないのも似たような理由からになります。

ready関数にちゃんと記述していたとしても、documentオブジェクトが読み込まれた時点ではまだAjaxコンテンツは存在しません。なので、イベントリスナが正常に追加できないのです。

Ajaxコンテンツに対しても、$(document).on(…)ならば有効になります。

理由は、もうお分かりかと思いますので割愛しますね。

おわりに

いかがだたったでしょうか。

JavaScriptというものが少し理解できた気がします。まだまだ熟知しているわけではないので、解釈の仕方が間違っているかもしれません。

もしおかしなことを言っているなと気づいた方はどうぞお問合せフォームより一喝くださいませ。

JavaScriptの基本を見直そう – jQueryのredy関数とは何か分析してみた
やまさき フロントエンジニア

新人縄跳び野郎です!

この記事の関連記事

一覧へ戻る

私たちについて

私たち『Camarade(カマラード)』はクリエイター目線で
総合的な情報を発信するWebメディアとして
PhotoShopやillustratorの活用方法や、WordPressなどのCMSの
カスタマイズ方法など幅広い情報をお届けしていきます。
同時にSOHOやフリーランスのパートナーを募集しております。