【2019/08/15】 週刊256times

第二期は途中で終わってしまったのですが、現在は引き続き新しい256timesのサービスデザインを設計中です。

今までのスクールのような形式になるかはわかりませんが、ゼロからコードを書けるようになる方法についてはだいぶ知見が溜まったので、それを活かしながら開発チームと議論を続けているところです。

週刊256timesはこれからも続けていこうと思いますので（進捗報告することで自身にプレッシャーをかけていくメソッド...）、ご興味のある方はこれからもチェックしていただければと思います。

...というだけでは味気ないので、これまでの経験から初学者がはまりやすいポイントを豆知識コラム的に紹介してみますかね...。

イベントリスナーは別物だと考えている人が多い？

JavaScriptの課題で次のようなものを出したのですが、同じような回答をする人が多かったのでご紹介。

0から9までのリストを作ってください。そしてそれぞれの数値をクリックしたらそれが何番目の項目か、alertが出るようにしてください。

このような課題があったときに少なくない人が次のように回答することがわかりました。

for (let i = 0; i < 10; i++) {
 const li = document.createElement('li');
 li.textContent = i;
 document.querySelector('ul').appendChild('li');
}

for (let i = 0; i < 10; i++) {
 const lis = document.querySelectorAll('li');
 lis[i].addEventListener('click', () => {
   alert(i);
 });
}

どうもaddEventListener()は特殊な命令だと思っているらしく、ちゃんと要素を作ってページに追加してからイベントリスナー設定しなくちゃ！と考えているようでした。

そうではなくて、textContentと同じようにaddEventListenerも設定していいのだよー、と指示してあげると「あ、そうなんだ、だったら一つのループでいいじゃん！」と納得する人が多かったですね...。

どちらも間違いではないですし、必ず1つ以上の解法があるのがプログラミングの楽しいところなので、どちらの書き方もできるようになっておくといいですね。