━目次━
ready？onload？DOMの構築とは？<script>タグはどこに書くべき？
そんな人向けにまとめました。
readyについて
jQueryを用いてready処理を実現する場合、以下のような書き方があります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//１．最もポピュラー。私もこれ推し。 $(function() { //実行処理 }); //２．たまにみる。省略してない形。長い。 jQuery(document).ready(function() { //実行処理 }); //３．動くっちゃ動くけどオススメしない。 $().ready(function() { //実行処理 }); |
色々な書き方ができるので初心者の方は混乱するかもしれませんが、どれも同じことです。
「じゃあどれで書いたら良いんだ？」って人は１．の書き方にしとけば間違いないです。
onloadについて
onload処理はJavaScriptで記述することも、jQueryで記述することも可能です。
|
1 2 3 4 5 6 7 8 9 |
//１．jQueryを使用する方法。 $(window).on('load', function() { //実行処理 }); //２．JavaScriptだけで記述する方法。 window.onload = function() { //実行処理 } |
既にjQueryなどで他のイベントの定義などをしている場合は、統一してjQueryの書き方で書いておけば良いかなと思います。
readyとonloadの違い
readyとonloadはどちらも『囲った範囲の処理の実行タイミングを制御する』という意味では同じです。
ではreadyとonloadで何が違うのかと言うと、『どのタイミングで実行されるか』です。
結論から言うと以下のような順番で実行されます。
HTMLファイルが普通に上から読み込まれていく
(readyとonloadで囲った範囲はスキップされる)
DOMの構築が完了
readyで囲った範囲が実行される
画像など画面の要素全ての読み込みが完了
onloadで囲った範囲が実行される
つまりreadyが先に実行され、その後にonloadが実行されることになります。
DOMとは何か
上で出てきたDOMとは「Document Object Model」のことで、この仕組みのおかげでJavaScriptなどからHTMLの各要素にアクセスができます。
では「DOM構築の完了」とは何を意味するかと言うと
「テキストボックスとかボタンとか画面に表示するHTML要素の読込が全部終わったよー」
っていうことです。
実例
では何故このDOM構築の完了を意識しないといけないかを説明します。
ダメな例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <script> //画面表示時、テキストボックスに初期値を設定 var a = "初期値"; //① $("#text1").val(a); //② </script> <input type="text" id="text1" value=""> //③ </body> |
特に何も記述していない場合、HTMLファイルは上から読み込まれていくので、①→②→③の順で実行されます。
しかし、②の実行時にはまだ③のテキストボックスは構築されていないのでidを指定しても「そんなのねぇよ」ってなりますね。
良い例１
ここで先程のreadyを使います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <script> $(function() { //画面表示時、テキストボックスに初期値を設定 var a = "初期値"; //② $("#text1").val(a); //③ }); </script> <input type="text" id="text1" value=""> //① </body> |
readyで囲った部分はDOM構築の完了を待つので実行順が上記①→②→③に変わります。
よってテキストボックスに正しく「初期値」と設定されます。
良い例２
readyを使わずとも、上から実行されることを逆手に取れば以下のようにすることも可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <input type="text" id="text1" value=""> //① <script> //画面表示時、テキストボックスに初期値を設定 var a = "初期値"; //② $("#text1").val(a); //③ </script> </body> |
<script>タグを</body>タグの直前に書けば、必然的にDOM構築が完了してから各スクリプトが実行されるので正常に動作します。
考察
onloadでも正常に動く？
上記の処理は勿論
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <script> $(window).on('load', function() { //画面表示時、テキストボックスに初期値を設定 var a = "初期値"; //② $("#text1").val(a); //③ }); </script> <input type="text" id="text1" value=""> //① </body> |
のようにonloadの書き方をしても正常に動きます。
たまにこんなソースを見ますが、「別にreadyで良くね？」って思います。
onloadにすると画面の全要素を読み込み終えて初めてスクリプトが動き出すので、場合によっては画面表示まで無駄に時間がかかります。
なので画像のサイズ取得など「DOM操作以外の特別な処理が必要な場合」を除き、onloadは使うべきではないと思います。
<script>タグはどこに書くべき？
上記で、<script>タグの書く場所によって、readyの記述が必要かどうかが変わる。と述べました。
考える人 結局どっちで書くべきなんじゃ？
じゃけぇ これは好みによるかな。ただどちらにするにも、プロジェクトでルールを統一する必要はあるね。
私的には
|
1 2 3 4 5 6 7 8 |
<body> <script> $(function() { }); </script> <input type="text" id="text1" value=""> </body> |
のように書くほうがスクリプトが長くなってきたときに見やすいし、後から見たときも分かりやすいので好きです。
これまで経験したプロジェクトもこのパターンが多かったです。
さいごに
jQueryとか使うと書き方が何パターンもあったりして、けっこうクセもでるので自分のやり方以外を知っておくのも大事ですね。
じゃけぇ 「それはないやろー(笑)」って書き方でもJavaと違って警告出してくれないから困ったもんだ…
それでは！また！！
人気の記事だけ集めたので是非覗いていってください＾＾
厳選！目的別にオススメ記事を紹介-あなたの欲しい情報がここに-
