第0.5回 JavaScriptの記述場所 – jQueryによるJavaScript入門-Re:Creator's Kansai （リクリ）

こんにちわ。to-Rの西畑です。

前回は入門以前をお送りしましたが、今回は最初のステップとして、JavaScriptの記述場所をお送りします。

JavaScriptの記述場所は大きくわけて外部ファイル、script要素、インラインの3箇所になります。

インラインはCSSでいうstyle属性と同じように、様々な要素に直接記述することが可能です。

例えば、前の画面に戻るボタンなどは下記のように記述します。

<input type="button" value="戻る" onclick="history.back()" />

サンプル

cssがstyle属性内に記述するのに対して、JavaScriptはonclick属性やonmouseover属性などのイベント属性内に記述します。

またインラインの記述方法としては、a要素のhref属性内でjavascriptプロトコルを利用する記述方法もあります。

<a href="javascript:history.back();">戻る</a>

サンプル

ただし、最近ではCSSと同じように、インラインでの記述はあまり推奨されておりません。

様々な理由がありますが、記述場所が四散すると管理が複雑になるというのが大きな理由です。

script要素内に記述する方法もあります。

<script type="text/javascript">
window.onload = function(){
	document.getElementById("back").onclick = function(){history.back()};
}
</script>

サンプル

インラインに記述するより手続きが複雑になりますが、様々な記述を一箇所で行うことができ管理が楽になります。

script要素の記述場所はどこでもよいのですが、慣習的にはhead要素の内部(もしくはbody要素を閉じる直前)が多いです。

インラインのほうが簡単に書けると思われがちですが、jQueryにはhtmlの中身からスクリプトを分離する機能が多数用意されているので、簡単にscript要素などで記述することが可能です。

また、1枚のソースコードのほうがソースの確認が簡単な為、本講座ではscript要素のよる記述で解説を行っていきます。

script要素の外部ファイルを利用して記述していく方法があり、これがもっともポピュラーな記述方法になります。

<script type="text/javascript" src="読み込むjavascriptファイル"></script>

サンプル

javascriptファイルの拡張子はjsにするのが一般的です。

script要素はsrc属性がある場合はsrc属性に記述されている外部ファイルを、src属性がない場合はscript要素内に記述されているjavascriptを評価する為、src属性に記述がある場合はそのscript要素に書いたJavaScriptは評価されません。

外部化を行うと、多くのブラウザがjavascriptファイルの内容をキャッシュする為、2回目以降のアクセスはjavascriptファイルにアクセスせず表示される為、表示の高速化を図ることが可能です。

jQueryを読み込む。

jQueryを利用する際にはライブラリ本体は外部ファイルとして読み込み、実際の記述は別のscript要素を利用して記述します。

jQueryは公式サイトよりダウンロードします。

ページ中頃にある、Download jQueryよりダウンロードが可能です。(執筆時のバージョンは1.2.6）

ダウンロードしたjQueryファイルをscript属性で読み込みます。

<script type="text/javascript" src="./jquery-1.2.3.js"></script>

ダウンロードできるファイルは3種類あり、内容は全く同じなのですが

Minified and Gzipped：改行や空白を取り除いたものをgzip圧縮
Uncompressed：ノーマルのjQueryファイル
Packed：Packed:静的辞書＋可読文字符号化を行い圧縮

などファイルサイズを軽量化させるためのアプローチが異なります。

サーバーがgzip圧縮に対応している場合はMinified and Gzippedがもっとも優れているでしょう。

Packedはブラウザ上で展開される為、転送量は削減されるもののスペックの低いPCなどでは逆に遅くなることもあります。

よくわからない人はUncompressedを利用すれば問題ありません。圧縮はされていなくてもjQuery本体は97kbと非常に軽量ですので。

転送量が気になる場合は、Google AJAX Libraries APIを利用するという選択肢もあります。

Google AJAX Libraries API

Google AJAX Libraries APIはgoogleが様々なAjaxライブラリをストレージしており、それらを直接利用することが出来るサービスです。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2.6");</script>

このように記述すれば自動的にjQueryを読み込んでくれます。

サンプル

また、以下のように直接jQueryファイルを読み込むことも可能です。(6/13追記)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

まだ出たてのサービスですが、多くのサイトでGoogle AJAX Libraries APIが利用されれば、ほとんどのブラウザでGoogle AJAX Libraries APIがキャッシュされていることになり、自身のサーバーでストレージするより結果表示が高速化される可能性が高くなります。

またマイナーバージョンを省略してjsライブラリを読み込めば常に最新のバージョンを読み込むことが出来ます。
(下記の記述だと1.2.○の最新バージョン)

マイナーバージョンアップの多くがパフォーマンスの向上ですので、ソースコードを書き換えることなくパフォーマンスを向上させることも可能です。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2");</script>

ただ、あまり気にしなくても良いとは思いますが、googleのサーバーがダウンしたときなどは、Google AJAX Libraries APIを利用しているサーバーにも影響が出るであったり、インターネットに繋がっていない環境ですと開発が出来ない、またgoogleに悪意のあるコードを埋め込まれた際に問題が発生するなどの問題もあります。

JavaScriptの記述だけで長々と書いてしまいましたが、次回からは実際にjQueryを記述していきたいと思います。

【PR】書籍現場のプロから学ぶXHTML+CSS 好評発売中

タグ：Ajax | Google AJAX Libraries API | JavaScript | jQuery