JavaScript - ウエブアプリケーション開発入門講座

JavaScriptとは

JavaScriptとはブラウザ上で動作するスクリプト言語です。JavaScriptを用いるとサーバサイドでページを生成する動的なウエブアプリとは対照的に、クライアント側でそのページの一部を変更するなどの動的な処理を行うことができます。
最近では、クライアントでのJavaScriptロジックの内部に、外部リソースを通信で取得し動的にページを書き換えるajaxと呼ばれる技術も流行っています。また、JavaScriptはHTMLウエブページをXML-DOMドキュメントとして取り扱い、操作することが可能であったり、また、CSSと呼ばれるウエブページのスタイルの定義も同じく動的に操作可能です。これを応用することでJavaScriptを用いると、ディスクトップアプリケーションに匹敵するインタラクティブなウエブページを表現することが可能なため、利用者にも直感的で使いやすいUIを提供することが可能になります。
JavaScriptとHTML内部にそのソースを記述する場合は scriptタグ内部にそのコードを記述します

<script type="text/javascript">
<!--
document.write("Hello World!!");
//-->
</script>

または,JavaScriptのコードのみで構成される別のファイルを用意し

<script type="text/javascript" src="test.js">

と呼び出すことも可能です

とほほのJavaScriptリファレンス

firebug

JavaScriptは以前はブラウザ製品毎に多少の仕様の違いがあり、統一的にサポートするウエブアプリケーションを開発することが困難な時代がありました。現在ではECMAScriptと呼ばれる標準化Scriptの策定と、それをサポートしたブラウザがリリースされています。
JavaScriptを開発する際は、一般的にスクリプト型のサーバプログラムと同様にテキスト編集&ブラウザでの実行動作確認(debug)を繰り返します。現在、最もこの開発作業を簡易に行う方法として人気が高いのは firefox に firebug と呼ばれる拡張機能をインストールしてこの作業を行う方法です。

firebugはJavaScriptをデバックするためだけのアドオンではなく多機能です。これを用いると、既存のウエブページが内部でどのようなJavaScriptを実行しているか、HTMLのデザインがどのように構成されているかが簡単に確認できます。
firebugを起動するにはFirefoxの右下の虫のアイコンをクリックします。動的に画面が書き変わるようなサイト(下の例はgooの地図情報の画面)でfirebugのXHRの画面を開き、ブラウザを動作(地図をグリグリ)させてみましょう。XHRにURLが順次表示されると思います。これはユーザのアクションの度に、サーバの情報をHTTPで取得しています。実際にその通信の中身も確認できます.

firebugはHTMLの構造を視覚的に確認することが可能です。firebugの調査という項目をクリックして、ブラウザの画面をなぞってみましょう。カーソルが乗った箇所のHTMLの構成部分がfirebugの画面に表示されます。その他,その箇所のCSS定義なども確認できます。HTML/CSSはfirebugの画面で動的に書き換えることも可能です

firebugはブラウザの表示パフォーマンスを計測する際も利用されます。接続という項目をクリックして、ページを読み込んでみましょう。そのページで必要なリソースがどのような順番で読み込まれるのか。各項目のリソースの取得にどれぐらいの時間がかかっているのか。ページ全体を読み終わるのにどれぐらいの時間がかかっているのかが分かります。

firebugの機能で上であげたものはほんの一部です。「firebug 使い方」で検索するとさまざまなサイトで利用方法を解説しています。参考にしてみてください。

JavaScriptライブラリ

JavaScriptは上で解説したECMAScriptによって標準化の方向でブラウザ間での差異は無くなってくる方向ですが、現状はまだ、ブラウザ毎に一部の機能で文法(関数)が異なったりします。そのような差異を開発者が意識すること無くクロスブラウザ(どのブラウザでも同様の機能を提供すること)を意識したプログラムを書けるようにさまざまなJavaScriptライブラリが提供されています。また、クロスブラウザの対応だけでなく、JavaScriptで行いたい処理を簡単に実現するためのライブラリとしての機能もあります。JavaScriptは単純に記述するとコード量が膨大になりがちですがライブラリを利用することで汎用的な部分をライブラリ内で処理してくれるので、非常に開発が楽になります。
一般的に良く利用されているJavaScriptライブラリは

JQuery
prototype.js
YahooUserInterfaceLibrary(YUI)
script.aculo.us (主にエフェクト系のライブラリ)

などがあります。どのライブラリも日本語で解説したウエブページも多数ありますので、自分にあったライブラリを選んでマスターすると良いでしょう。