• PE-BANKと契約して26歳で年収800万になった大阪のフリーランスですが全てを語ります





ready?onload?DOMの構築とは?<script>タグはどこに書くべき?

そんな人向けにまとめました。

readyについて

jQueryを用いてready処理を実現する場合、以下のような書き方があります。


色々な書き方ができるので初心者の方は混乱するかもしれませんが、どれも同じことです。

「じゃあどれで書いたら良いんだ?」って人は1.の書き方にしとけば間違いないです。

onloadについて

onload処理はJavaScriptで記述することも、jQueryで記述することも可能です。


既に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構築の完了を意識しないといけないかを説明します。

ダメな例

特に何も記述していない場合、HTMLファイルは上から読み込まれていくので、①→②→③の順で実行されます。

しかし、の実行時にはまだのテキストボックスは構築されていないのでidを指定しても「そんなのねぇよ」ってなりますね。

良い例1

ここで先程のreadyを使います。


readyで囲った部分はDOM構築の完了を待つので実行順が上記①→②→③に変わります。

よってテキストボックスに正しく「初期値」と設定されます。

良い例2

readyを使わずとも、上から実行されることを逆手に取れば以下のようにすることも可能です。


<script>タグを</body>タグの直前に書けば、必然的にDOM構築が完了してから各スクリプトが実行されるので正常に動作します。

考察

onloadでも正常に動く?

上記の処理は勿論


のようにonloadの書き方をしても正常に動きます。


たまにこんなソースを見ますが、「別にreadyで良くね?」って思います。

onloadにすると画面の全要素を読み込み終えて初めてスクリプトが動き出すので、場合によっては画面表示まで無駄に時間がかかります。

なので画像のサイズ取得など「DOM操作以外の特別な処理が必要な場合」を除き、onloadは使うべきではないと思います。

<script>タグはどこに書くべき?

上記で、<script>タグの書く場所によって、readyの記述が必要かどうかが変わる。と述べました。

考える人考える人

結局どっちで書くべきなんじゃ?

じゃけぇじゃけぇ

これは好みによるかな。ただどちらにするにも、プロジェクトでルールを統一する必要はあるね。

私的には


のように書くほうがスクリプトが長くなってきたときに見やすいし、後から見たときも分かりやすいので好きです。

これまで経験したプロジェクトもこのパターンが多かったです。

さいごに

jQueryとか使うと書き方が何パターンもあったりして、けっこうクセもでるので自分のやり方以外を知っておくのも大事ですね。

じゃけぇじゃけぇ

「それはないやろー(笑)」って書き方でもJavaと違って警告出してくれないから困ったもんだ…

それでは!また!!

最後まで読んで頂きありがとうございます!
人気の記事だけ集めたので是非覗いていってください^^
 厳選!目的別にオススメ記事を紹介-あなたの欲しい情報がここに-