【JavaScript】例文通りに書いているのに動かない！は、構文部分の勘違いかも。

皆さんこんにちは！
プログラミング初心者さんがつまずきやすいポイントを丁寧に解説、解消していく「初心者つまずき解消ブログ」です。

今回は、例として出てきた構文の通りに書いているのに、なぜか最後のコードしか機能しない……とお困りの初心者さんを救う記事です。

JavaScriptを学習中、いっちばん最初に例文を見せられて

以下が構文です。 
var elem = document.getElementById("ID名");

なんて言われても、何が言いたいのかさっぱりわからないですよね(笑)

例えば、

var elem = document.getElementById("ID名"); 

と書いてあったらID名は自分でつけていくもので、var elem = document.getElementById(“”)の部分が丸々構文なんだなって認識したり。

配列ならば

var array = [];

なんて例文がよく出てきますよね。
var array = [] と宣言すると配列が生まれて、[]の中にいろいろな要素を入れられるんだなぁ、みたいな。

実はそれ、勘違いです！

この事態をさらにわかりにくくしているのが、どこのサイトでもelemや、配列ならarrayを使って書かれていること！

プログラミングを始めたての方は、ネット検索で得た例文や教材に書いてある例文を参考にしたり、そのままコピーして使ったりする場合が多いと思います。
全部の変数がelemとarrayだから一番最後の処理しか動かないって感じでいきなりつまづいて心折れそうになるわけです。

そのため初心者のうちは例文を書き変えてみて、動くかどうかみてみましょう。

例
var array = new Array('太郎', '花子', '次郎');
↑  動く

var array = new Abcd(‘太郎', '花子', '次郎');
↑ 動かない

var abcd = new Array('太郎', '花子', '次郎');
↑  動く

こうしてみると、new Arrayが構文なんだなというようにわかります。

最初のうちは「〇〇」とは何か。と文字を読んだだけではわからない場合、上記のように実際に動かして、手触りの感覚で掴んでいくのが良いでしょう。