技術情報

shimazakiです。

先日社内でJavaScriptでオブジェクト指向、という発表をおこないましたので、その資料を公開します。

• JavaScriptでオブジェクト指向

JavaScriptを本格的に勉強し始めて約半年ほどになりますが、とりあえずの一段落がついたかな、という感じがします。

shimazakiです。

先日社内で勉強会をした際にDOM入門、という名目で発表をおこないましたので、その資料を公開します。

• DOM入門

DOMは「element」という概念と、ドキュメントツリーと、ブラウザごとの差異が理解できれば後は理解への妨げになるものは無いかなと思います。

shimazakiです。こんにちは！

最近ようやくJavaScriptが理解できてきました。

そこで、自分がなんちゃってからそこそこになるまでに理解した5つ＋αのことを紹介したいと思います。

1.変数と関数が同じものであると理解する

PLAIN TEXT
JavaScript:
var hoge = alert;
hoge("hogehoge");
• JavaScriptは関数も変数に格納されています。

2.連想配列とオブジェクトが同じものであると理解する

PLAIN TEXT
JavaScript:
alert( location.href );
alert( location["href"] );
• JavaScriptは連想配列とオブジェクトは同じものです

3.関数がクラス（オブジェクト）になるということを理解する

PLAIN TEXT
JavaScript:
function hoge(){}
foo = new hoge();
• JavaScriptは関数に対してnewをつけるとその関数のインスタンスになります。

4.リテラルを理解する

• 配列リテラル[]
PLAIN TEXT
JavaScript:
var arr = ["aaa","bbb","ccc"];
• 関数リテラル function()
PLAIN TEXT
JavaScript:
var func = function(){
//処理
};
• オブジェクトリテラル{}
PLAIN TEXT
JavaScript:
var arr = {
aaa:"xxx"//文字列
,bbb:["y","yy","yyy"]//オブジェクトの要素として配列を定義（配列もリテラル）
,ccc:function(){}//オブジェクトの要素として関数を定義（関数もリテラル）
};
• JavaScriptはnewしなくとも配列やオブジェクトが生成できます。

5.prototypeという概念（JavaScript的オブジェクト指向）を理解する

PLAIN TEXT
JavaScript:
function hoge(){}
hoge.prototype.foo = "bar";
var obj = new hoge();
alert( obj.foo );// bar
• JavaScriptにはextendがありませんが、prototypeを使用することで値の引継ぎができるようになります。

＋α.DOMを理解する

• DOMを理解するとHTML（XML）コンテンツを自由自在に操作・表現することが出来るようになります。

DOMを理解するためのいくつかの条件はまたいずれ、自分が理解できた時に紹介させていただこうと思います。

Let's JavaScript！

今日のトリビア

JavaScriptの正規表現は・・・

「(?<=」後読み（戻り読み）や「(?<!」否定後読み（否定戻り読み）が使用できない。

1時間悩んだ自分への戒めを込めて。shimazakiでした。

これだけだとさすがに中身がないので、もう少し。

そもそも後読みを使いたかった（正確には本当に使いたかったのは否定後読みですが）理由として、pathinfo形式の現在のURLをスラッシュ区切りで変数に格納したい、という目的のためです。

例えば、
http://example.com/index.php/moduleName/ControllerName/ActionName
であった場合に

というような具合に。
ですが、先述の通り、否定後読みは使用できないので、

とすることで対応することにしました。

補足になりますが、
実際にはgetパラメータも切り分けるために、

としました。

今日のエントリがまだ見ぬ未来のJavaScripter入門者の助けになれば幸いです。

shimazakiです。

PHPで配列同士を結合する方法をまとめてみました。

array_merge

array array_merge ( array $array1 [, array $array2, ... ] )

特徴：
array1のキーが文字の場合、array2に同じキーがあれば、array2の値によって上書きされる。

PHP:

<?php
$arr1 = array('k1'=>'v1', 'k2'=>'v2');
$arr2 = array('k1'=>'vv1');
$arr = array_merge($arr1, $arr2);
var_dump($arr);
?>

arr1のk1がarr2のk1によって上書きされている。異なるキーはそのまま後ろに追加される

PHP:

array(2) {
["k1"]=>
string(3) "vv1"
["k2"]=>
string(2) "v2"
}

ただし、キーが数字の場合は上書きせず、追加する。

PHP:

<?php
$arr1 = array(10=>'v1', 1=>'v2');
$arr2 = array(10=>'vv1');
$arr = array_merge($arr1, $arr2);
var_dump($arr);
?>


キーが数字の場合は同じキーであっても上書きされず、追加となる。
また、数字のキーは完全に振りなおされる。
数字と文字が混ざった配列の場合でも、数字は振りなおされ、結合される。

PLAIN TEXT

PHP:

array(3) {
[0]=>
string(2) "v1"
[1]=>
string(2) "v2"
[2]=>
string(3) "vv1"
}

array_merge_recursive

array array_merge_recursive ( array array1 [, array ...] )

特徴：
array1のキーが文字の場合、array2に同じキーがあれば、元の要素を配列に変換しarray2の値を追加する

PLAIN TEXT

PHP:

<?php
$arr1 = array('k1'=>'v1', 'k2'=>'v2');
$arr2 = array('k1'=>'vv1');
$arr = array_merge_recursive($arr1, $arr2);
var_dump($arr);
?>

元々のk1の要素が配列になり、arr2のk1の要素が追加される。
その際の添え字は数字となる。

PLAIN TEXT

PHP:

array(2) {
["k1"]=>
array(2) {
[0]=>
string(2) "v1"
[1]=>
string(3) "vv1"
}
["k2"]=>
string(2) "v2"
}

ただし、キーが数字の場合はarray_mergeと同じ動作となる。

PLAIN TEXT

PHP:

<?php
$arr1 = array(10=>'v1', 1=>'v2');
$arr2 = array(10=>'vv1');
$arr = array_merge_recursive($arr1, $arr2);
var_dump($arr);
?>

array_mergeと同じ結果。

PLAIN TEXT

PHP:

array(3) {
[0]=>
string(2) "v1"
[1]=>
string(2) "v2"
[2]=>
string(3) "vv1"
}

加算演算子

特徴：
左側に右側を追加する。ただし、同じキーの場合、追加しない

PLAIN TEXT

PHP:

<?php
$arr1 = array('k1'=>'v1',  'k2'=>'v2');
$arr2 = array('k1'=>'vv1', 'k3'=>'vv3');
$arr = $arr1 + $arr2;
var_dump($arr);
?>

同じキーがある場合、array_mergeとは違い、上書きをせず、また、追加もしない。

PLAIN TEXT

PHP:

array(3) {
["k1"]=>
string(2) "v1"
["k2"]=>
string(2) "v2"
["k3"]=>
string(3) "vv3"
}

また、数字であっても上書きもせず、追加もされず、キーも振りなおされない。

PLAIN TEXT

PHP:

<?php
$arr1 = array(10=>'v1', 1=>'v2');
$arr2 = array(10=>'vv1');
$arr = $arr1 + $arr2;
var_dump($arr);
?>

PLAIN TEXT

PHP:

array(2) {
[10]=>
string(2) "v1"
[1]=>
string(2) "v2"
}

以上です。

配列を加算演算子で扱えるというのが何ともPHPらしいですが、その動きはあんまり加算っぽくないように思います。