意外と知らないJavaScriptの常識【JavaScript入門】
2017/12/04
近年、jQueryのようなフレームワーク・ライブラリの登場で気軽に扱えるようになったJavaScriptですが、意外と基礎的な部分を知らないって人も多いかと思うので取り上げてみました。
JavaScriptはHTMLに組み込まれて実行されるケースがほとんどです。その為、JavaScriptだけに精通するのではなくHTMLの知識も必要になります。
初心者がよく陥りがちな事例でサンプルのプログラムをコピペしているのに動かないというものがあります。
全角スペースが混じっていたり、サンプルに自体に間違いがあったり原因は色々ですが、実行のタイミングというのも原因の一つです。
プログラムの実行のタイミングについて
JavaScriptは基本的に逐次実行（逐次処理）されます。
逐次実行とはコードの上側から順に実行されることを言います。
単純なサンプルをまずはご覧ください。
<body> <script type="text/javascript"> var a = 5; var b = 2; </script> <script type="text/javascript"> alert(a + b); </script> </body>
変数a , bの値を足してalertで表示するだけのプログラムです。
このサンプルで分かるように、JavaScriptが逐次実行されるだけではなくHTMLも逐次実行されていることが分かります。1つめのscript要素の処理結果を2つめのscript要素で出力することに成功しています。変数や関数は複数のscript要素内で使いまわすことが可能です
HTML要素の取得・設定が出来ない理由
JavaScriptを勉強した人なら誰もが陥る事例。
HTML要素の取得・設定が何故か出来ない！
ありますよね。以下のようなコードを書いた場合発生します。
<body>
<script type="text/javascript">
var text = document.getElementById("text");
text.firstChild.nodeValue = "書き換えたよ！"
</script>
<p id="text">この部分のテキストを書き換えたい！</p>
</body>
上記のプログラムはエラーが出て処理が中断します。何故か？
それは逐次実行されているからです。
script要素内でp要素の取得・設定を行っていますが、この時点ではまだp要素は表示されていない為エラーが発生するわけです。
1つめの解決方法として、script要素とp要素の順序を入れ替えるパターン。
<body>
<p id="text">この部分のテキストを書き換えたい！</p>
<script type="text/javascript">
var text = document.getElementById("text");
text.firstChild.nodeValue = "書き換えたよ！"
</script>
</body>
こうすればp要素の表示後にscriptが実行される為、問題無く動作します。
そういうこともあってかscriptをHTMLの末尾にまとめて書く人も多く見受けられます。
そして、もう一つの方法にイベントという概念があります。
イベントの概念
イベントは「○○が読み込まれたら」、「○○がクリックされたら」といった、特定のアクションが起きたタイミングを指します。
下記のコードは先述のコードをイベントに対応させたものです。
<body>
<script type="text/javascript">
window.onload = function(){
var text = document.getElementById("text");
text.firstChild.nodeValue = "書き換えたよ！"
}
</script>
<p id="text">この部分のテキストを書き換えたい！</p>
</body>
window.loadはページの読み込みが完了したタイミングで実行される関数です。
window.loadを利用することでそのタイミングまで処理を遅延させることができるのでp要素の取得・設定が問題なく行えます。
また、window.loadは画像を含めた全てのコンテンツを読み込んだ後に実行される為、画像が多いページでは非常にレスポンスが悪くなります。
そこで役立つのがjQueryです。
jQueryを使ったイベント処理
以下は先述のコードをjQueryでの処理に置き換えたものです。
<body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
var text = document.getElementById("text");
text.firstChild.nodeValue = "書き換えたよ！"
});
</script>
<p id="text">この部分のテキストを書き換えたい！</p>
</body>
上記コードではjQueryの読み込み処理の追加と、
window.loadの部分が$(function(){…})に置き換わっています。
また、$(function(){…})の部分は$(document).ready(function(){…})としてもOKです。
window.loadとの違いですが、この記述の場合、画像の読み込み待ちはしないという点が異なります。その為、window.loadよりもレスポンスがかなり良いです。ほとんどの場合はこちらを使ったほうが良いでしょう。
まとめ
プログラムは基本的には逐次実行されますが、必要に応じてイベントを利用して任意のタイミングで処理を実行しましょう。
イベントを多用すれば柔軟な処理が可能になりますが、プログラムが入り乱れることになるのでプログラムの規模が大きくなればなるほど可読性が落ちます。
その解決策についてはまた機会があれば解説します！