PHPerがピュアJSを使うにあたって、苦しんだ点

altJSを学ぶ一貫として、ピュアなJSで実装した際に、理解に時間がかかった点をまとめます

変数名に$付けがち

phpでは変数を呼ぶときに$を頭につけますが、jsでは付けないのでついつい付けちゃってましたｗ

配列の表し方の違い

PHPの配列と連想配列

$drinks = ['water', 'tea', 'cola'];
$drinksNameAndPlice = [
        [
            'name'  => 'water',
            'price' => 100,
        ],
        [
            'name'  => 'tea',
            'price' => 130,
        ],
        [
            'name'  => 'cola',
            'price' => 150,
        ],
    ];

JSの配列と連想配列

let drinks = ['water', 'tea', 'cola'],
    drinksNameAndPlice = [
        {
            'name': 'water',
            'price': 100,
        },
        {
            'name': 'tea',
            'price': 130,
        },
        {
            'name': 'cola',
            'price': 150,
        },
    ];

JSでの連想配列は 中で{}で囲む必要がありました

配列もオブジェクト

PHPで配列と呼んでいたものは、JSでは言語構造ではなく、Arrayクラスのオブジェクトになる。

文字を入れただけだったfruitsに、プロパティ「.length」を呼び出すと、値の数が取れる

let fruits = ['りんご', 'バナナ']
console.log(fruits.length)
// 2

HTML要素の取得方法によって、返り値が違う

chromeのconsole（デベロッパーツール）で取得した結果です

Htmlタグ、HTMLCollection、NodeListの3パターン返ってきてます

ここの理解が甘かったため、property not definedのような、持ってないプロパティやメソッドを呼んで、調査に時間がかかりましたｗ

HTMLCollection

HTMLCollection は HTML 要素（element オブジェクト）の集まりから成る配列のようなオブジェクトで、各要素にはインデックス番号でアクセスできます。

NodeList

NodeList は配列のような DOM 要素（ノード）の集合を表すオブジェクトです。Node.childNodes などのプロパティや document.querySelectorAll() メソッドの戻り値は NodeList オブジェクトです。

foreachでcontinueできない

jsでは言語構造にforeachがなく、オブジェクトのメソッドを呼ぶ必要があります

また、言語構造に含まれていない為、foreachメソッド内でもcontinueやbreakなどの構文が使えません

continueなどを使いたい場合は、forやwhile文を使うことになります

phpではループは基本foreachで処理していたので、歯がゆい思いをしましたｗ

まとめ

今見返すと、基本的なことなので「ドキュメント読め」って感じですねｗ

未知の物に触れるときは、まずドキュメント読むように癖をつけていきたいですね

参考元：

https://developer.mozilla.org/ja/docs/Web/API/Document

https://www.webdesignleaves.com/pr/jquery/javaascript_01.html