JavaScriptを書くときのポイント

私の周りでなかなかJavaScriptに理解、というかいまどき（？）の書き方を知っている人があまりいないので、ちょっと寂しい。

やはり、プログラムの初級編で基礎的なコードしか学ばないからだろうか。結構奥は深いと思うのだけどね。
 

1. 基本的にJavaScriptはJSファイルに外部化

時々地でそのまま書いてしまっているようなHTMLを見かけるが、大原則は外部化。たとえそのページでしか使わないとしてもだ。運用上、そこにある方が都合がいい場合や、外部化するほどでもない少量（私的には2、3行と思っています）のコードは埋め込んでしまっても問題ないが、.htmlにはHTMLのみが記述されている方が望ましいと考えます。

2. 特定の処理に使用するコードはカプセル化しておく

なかなかこの方法をやっている人に出会ったことがない（そんなに人生経験ないですが^^;）のですが、カプセル化やパッケージ化はプログラム書く上では非常に重要なものだと思います。

使用している変数名や関数名のバッティングを防ぐという目的と、コードがきれいになり、なんのために使用するもの中がはっきりするからです。すべてとはいいませんがね。

JavaScriptでは主に2種類。すべてスタティックアクセスっぽく使える書き方と、newしてインスタンスを作成できるprototypeベースのオブジェクト。両者とも有効ですが、必要に応じて使い分けます。

// スタティックぽい書き方
var TomGS_ST = {
	title: 'tom-gs.com',
	id   : 5,
	getTitle: function() {
		return this.title;
	}
}
alert(TomGS_ST.getTitle());

// Prototypeな書き方
function TomGS_PT() {
	this.title = 'tom-gs.com';
	this.id    = 5;
}
TomGS_PT.prototype.getTitle() {
	return this.title;
}
var t = new TomGS_PT();
alert(t.getTitle());

3. HTMLにイベントハンドラは記述しない

よく、HTMLにonClickだとか書いたりするコードを見かけますが、HTMLが見にくくなったります。それにJavaScript上で、イベントハンドラに代入する方法もあまりおすすめできません。代入なので、互いに上書きしあって、ミスのもとになってしまいます。

ぜひともイベントリスナーを使いましょう。でも、イベントリスナーの実装はブラウザによって異なります。なので、最近はやりのフレームワークやライブラリを使うことをおすすめします。

// よろしくない書き方
window.onload = function() {
    alert('よろしくない方法。');
}

// Mootoolsを使用する場合
document.addEvent('click', function() {
    alert('おすすめの方法。');
});

4. 依存を気にしないためにフレームワークやライブラリを使う

ぶっちゃけ、3のイベントやDOMの操作方法、Ajaxにしてもブラウザ依存が気になってバグがバグを生むという悪循環。だったら、より信頼のおけるフレームワークやライブラリを使いましょう。Prototype.jsや、jQuery、Mootools、他にもだくさんあるでしょう。個人的にはMootoolsを使うことがおおいのですが、ぶっちゃけどれでもいいです。jQueryとか流行ってますが、jQueryのプラグインにはあまりいい経験がないので、、、Prototype.jsは重い。Mootoolsはクラスっぽくかけたりするし、ドキュメントもしっかりしている。拡張性も高いし、プラグインの使用に悩まされたことがあまりないので、よく使います。

• 前へ
• 次へ