ラボメンバー「shimazaki」の投稿一覧

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らしいですが、その動きはあんまり加算っぽくないように思います。

shimazakiです。

PHPで配列処理を行うことの出来るforeachですが、不思議な動作に遭遇しました。

結果は

配列の中身：array(3) { [0]=> string(1) "a" [1]=> string(1) "b" [2]=> string(1) "c" }
要素の中身：string(1) "a"
配列の中身：NULL
要素の中身：string(1) "b"
配列の中身：NULL
要素の中身：string(1) "c"
最終的な配列の中身：NULL

のように出力されます。

Continue reading

shimazakiです。

先月社内勉強会で「PHPer向けJavaScript入門」をやりましたので、その資料を公開します。

PHPer向けJavaScript入門

資料はamachang氏のS6を使わて頂きました。

（ウィンドウリサイズ時のサイズ調整とマウスクリックでもページが進むように手を入れてあります、あとIEだと微妙に崩れてしまうので、Firefoxを推奨します）

自分自身真面目にJavaScriptの勉強をしたことがなかったので、良い勉強になりました。

PHPは分かる、JavaScriptはちょっとだけ分かる、もしくは何となく分かっている、という人にはオススメできるかもしれません。

間違っている箇所などありましたら指摘いただけると幸いです。