JavaScript のおべんきょう

jQuery と PHP でテンプレートの CSS を簡単に作れるなにかを製作中ですが、意味不明になってきたので基礎を学びたいと思いますヽ(・ω・)ノ

というのも、とりあえず動けば御の字!と思って書いていたのを見かねた nic せんせーが、こうやったらいいよと書いてくれたお手本の中身がさっぱりわからんからです。
var とか : とかの意味がわかったらもうちょっと何とかなるかもと企んでいます。

プログラムの構造を再利用性を高くするのを抽象化といいます。
たくさんのタイピングをしないことと、タイプミスを減らすこと、プログラム全体の見通しをよくする、などといったメリットがあります。

2008-05-02 IRC のログ nicせんせーの発言より抜粋

とのこと!なんかよくわかったような気がするよ!

最初に自分で書いてたコードはこんなの。

$('#bodyColor').focus(function() {
	var t = setInterval(function() {
		if($('#bodyColor').val().match(/^[0-9a-f]{6}$/)) {
			$('body, #header').css('color', '#'+$('#bodyColor').val());
			$('#bodyColor').css('background-color', '#ffffff');
			$('p.bodyColor').hide();
		}
		else {
			$('#bodyColor').css('background-color', '#ef3b3b');
		}
	}, 100);
});

こんなのが延々と項目の分だけずらーっとありました。
部分的に見たら (私的には) わかりやすかったんだけど、機能を追加したいときとか全部の箇所に追加しないとならんくてコピペが大変。

nic せんせーが書いてくれたやつは、こういう材料 (配列) で、下ごしらえはこうやって (いくつかの変数) 、こう調理すると完成どん! (最後の function ?) みたいなかんじだと思います。
私のは、材料一つ一つの下ごしらえと調理法はひとまとまりになっているけど、コードを全部読まないと全部の材料すらわからないので、レシピに置き換えるとすごく不親切だしわかりにくい。
こういうことですね?せんせー!

そんな事情で nic せんせーの書いてくれたやつを解読すべく頑張ります。
きっと私の脳みそに合わせて書いてくれているはずなのでそんなに難しいことは書いていないはず!
以下、ジャポニカ学習帳。無駄に長いよ。

CSS を書き換えるメソッド

var colorChange = { ? };

変数「 colorChange 」を宣言している。
var は変数。

asColorNumber: function( a ) { 〜 },
checkColorValue: function( element ) { 〜 }

あとで出てくる var roll の中身と同じようなものを作ってるってことかなぁ。
var colorChange の中身が連想配列になるってこと?

ラベル「 asColorNumber 」の中身は a というパラメータを持った関数で、ラベル「 checkColorValue 」の中身は element というパラメータを持った関数です。

: (コロン) は連想配列。
function は関数。( ) 内はパラメータ = 引数。

if( this.checkColorValue( a.fromElement ) ){
	return true;
}
else{
	return false;
}

もし、オブジェクト自身のラベル「 checkColorValue 」の値が・・・わからん。
せんせーのコメントには「 a の中身は roll オブジェクト(配列)の要素」とあるけど、そんなの誰が決めたんだ!
そして、if( ? == true ) の太字部分が省略されているのではなかろうか。

1 行目はわからんので飛ばして、1 行目の条件に当てはまっている場合は true を返して、そうでない場合は false を返す。

this はオブジェクト自身を示す。
return は関数からの戻り値を指定する。

if( $( a.toElement ).css( a.property ) != '#'.concat( $( a.fromElement ).val() ) )
	$( a.toElement ).css( a.property, '#'.concat( $( a.fromElement ).val() ) );

もし、roll オブジェクトの toElement の property という CSS の値が fromElement の値と異なる場合、toElement の値を fromElement の値で書き替える。

!= は「等しくない」の演算子。
concat は 配列を連結する。$( a.fromElement ).val() の値が eeeeee だったとしたら #eeeeee となるということ。
val は内容を返す。$( a.fromElement ) の値を返すということ。

if { } の { } が省略されてますね!

return $( element ).val().match(/^[0-9a-f]{6}$/)? true: false;

$( element ) の値が /^[0-9a-f]{6}$/ に当てはまっていたら true を返し、そうでない場合は false を返す。
$( element ) ってなんだ・・・さっきからなんとなく雰囲気はわかるんだけどはっきりした説明がつかない。

match は正規表現を使用して文字列を検索し、一致した文字列を返す。
/^[0-9a-f]{6}$/ は 0 から 9 まで、a から f までの文字が 6 文字だった場合の正規表現。

? ? foo : bar; は論理式で、もし ? が true だった場合は foo を返し、そうでない場合は bar を返すということ。if( ? ) { foo の処理 } else { bar の処理 } と同じこと。

CSS を書き換えるリスト

var roll = [
	{ property: 'color', fromElement: '#bodyColor', toElement: 'body, #header'},
	{ property: 'background-color', fromElement: '#bodyBackground', toElement: 'body, #header'},
	{ property: 'color', fromElement: '#descriptionColor', toElement: 'p.description'},
	{ property: 'color', fromElement: '#naviTitleColor', toElement: '#navigation dt'}
];

変数「 roll 」は配列で、その配列の一つ一つが連想配列ってこと?わからん。

テキストフィールドの評価状況を管理するオブジェクト

var flag = {
	status: null,
	valid: function( b ){
		this.status = this.status && b? true: false;
	}
};

変数「 flag 」の中身は連想配列ってこと? colorChange と同じかな。
ラベル「 status 」は常に null、ラベル「 valid 」は b というパラメータを持った関数で、this.status と b の両方が true だった場合 true を返し、そうでない場合は false を返す・・・って何のこっちゃ。
せんせーのコメントには「すでにステータスが false だったら true が渡されても false のまま」とあるのでその処理なんだろうけど意味はわからん。

&& は論理積の演算子。両方とも true だったら true を返す。

メイン

(function($){
	〜
})(jQuery);

メインの関数の外枠。
最後の (jQuery); が謎だったので質問してみた。

(function(hoge){})(huga); とした場合 hogeにhugaが代入される
ここでは (function($){})(jQuery); なので $にjQueryが代入される
別になくてもいいけど jQuery 縛りですよという明示にもなるから俺はいれてる

2008-05-01 IRC のログ nicせんせーの発言より抜粋

とのこと。わかったようなわからんような。

var t = setInterval( function(){ 〜 }, 1000 );

以下の関数を指定の時間毎に繰り返すということ。
setInterval はタイマーのメソッド。単位はミリ秒なので 1000 と指定したら 1 秒ということ。
変数名は省略してもいいらしい。

flag.status = true;
for( var i = 0; i < roll.length; i++ ){
	flag.valid( colorChange.asColorNumber( roll[i] ) );
}

まずステータスを true にしておいて、書き換えリストを順番にチェックする。とせんせーのコメントに書いてあった。

for は指定された条件が false になるまで繰り返し処理を行う。
var i = 0; は「初期値」。変数 i は 0 ですよということ。
i < roll.length; は「条件」。変数 i が配列 roll の長さよりも小さいときということ。length は配列の長さを示すプロパティだけどちょっと特殊らしい。
i++ は「条件の変更」。++ はインクリメントで変数の値を 1 つ増やす、なので、変数 i の値を 1 つ増やすということ。
flag.valid ? は「命令」。配列 roll の 1 つ目から順番に colorChange.asColorNumber を実行するんだけど、flag.valid (すでにステータスが false だったら true が渡されても false のまま) ということ。だんだん説明が適当になってきた気がする。

if( flag.status ){
	$('p.submit input.button').removeAttr( 'disabled', 'disabled' );
}
else{
	$('p.submit input.button').attr( 'disabled', 'disabled' );
}

もし、全ての評価で true だったら submit できる、 評価のうちひとつでも false が出たら submit できない。とせんせーのコメントにある。

$(‘p.submit input.button’) の 2 種類はわかるよ! attr は該当の input に disabled=”disabled” という属性値を設定するということ、removeAttr はその属性値を削除するということ。
でも ( flag.status ) と書いただけで「すべての評価が true だったら?」なんて指定ができるのかがわからん。

一通り調べてみたけど

よくわからないことに変わりはなかったようだ(´・ω・`)
以下、もうちょっと調べてみてわかったこと。

オブジェクトってなんだ?

this.checkColorValue は colorChange.checkColorValue と同じことですよね。
flag.valid は変数 flag の中の valid ってこと?

ググってたら見つけて解決しつつある。
マークアップエンジニア、デザイナー向けJavaScript入門 ? SlideShare 16 ページ17 ページ

prototype について

前述のスライド 20 ページに「 prototype 」という概念について調べるといいよと書いてあったので早速ググる。

プロトタイプ(prototype)によるJavaScriptのオブジェクト指向 – 暗黙の参照:CodeZine
これだっ! function( a ) の中で a.fromElement と指定してどうして var roll の中身が取り出せるの?という疑問が解決した!のかな?

全く関係ないけど本文中に半角の ‘ (シングルクォート) や ” (ダブルクォート) を書くと勝手に全角に変換されてしまう。WordPress の機能なのか、テンプレートの作り方が悪いのか。

今回のやつを作ろうと考えたときはこんな大掛かりなことになるとは思っていなかったのですが、新しいことを覚える楽しさと、動いたらきっとうれしいぞ!という妄想で完成させたいと思います(`・ω・´)

「JavaScript のおべんきょう」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です