女性向けエンジニアスクール
HTML ファイルが書きかわると思ってしまう
JavaScript が変えるのは、いまブラウザの中にある DOM だけです。次のコードで肩書きを変えても、index.html の中身は 1 文字も変わりません。
JavaScriptでWebページを動かすのよくある間違い
レッスンの本文で注意している点を、つまずきの側から39件ぶん並べ直しました。書いた覚えのある形が見つかったら、 そのままレッスンに戻って前後を読めます。
DOM とは何か
レッスンを読むdocument を自分でつくろうとする
document はブラウザが用意している変数です。次のように書くと、もともとあるものを上書きしてしまい、以降の DOM 操作が全部おかしくなります。
ソース表示と Elements タブを同じものだと思う
「ソースの表示」は、サーバーから届いた元の HTML です。「Elements」は、いまの DOM です。JavaScript で足したカードはソース表示には出てきません。動いているかどうかを確かめるときは、必ず Elements タブのほうを見ます。
DOM とは何かで詳しく読む要素を取得する
レッスンを読むセレクタの記号を忘れる
クラスなら .、id なら # が要ります。付け忘れるとタグ名として探しにいくので、当然見つかりません。
querySelectorAll の結果に直接プロパティを書く
NodeList は要素の入れ物であって、要素そのものではありません。まとめて設定はできません。
要素を取得するで詳しく読む1 つしか無いのに querySelectorAll を使う
間違いではありませんが、cards[0] と書くところが増えて読みにくくなります。1 つに決まっているなら querySelector、複数を相手にするなら querySelectorAll、と使い分けます。
テキストを書き換える
レッスンを読むtextContent を関数として呼ぶ
textContent はプロパティです。丸かっこは付けません。
代入したあとに子要素を掴もうとする
textContent への代入で中身は消えます。順番を間違えると、掴めるはずのものが null になります。
数値をそのまま入れて驚く
textContent に数値を入れると、自動で文字列に変わって表示されます。エラーにはなりませんが、0 を入れたときに空欄に見えてしまうことがあります。単位や説明を足して "0 回表示" のように渡すと、意図が伝わる表示になります。
class を付け外しする
レッスンを読むclass 名に . を付けてしまう
CSS のセレクタと混ざりやすいところです。classList に渡すのは class の名前だけで、. は要りません。
スペース区切りで 2 つ渡す
add に "featured new" のような空白入りの文字列を渡すと InvalidCharacterError になります。2 つ足したいときは引数を 2 つに分けます。
CSS に無い class を付けて「効かない」と悩む
classList.add は、CSS にその指定があるかどうかを気にしません。存在しない class を付けても、エラーは出ず、見た目も変わりません。効かないときは、まず検証ツールで class が付いているかを見て、付いていたら CSS のほうに指定があるかを確かめます。
要素を作って追加する
レッスンを読むappend を忘れる
いちばん多い間違いです。エラーは出ません。何も起きないだけです。
要素を作って追加するで詳しく読むタグ名にかっこや記号を付ける
createElement に渡すのはタグ名だけです。
class を付ける先を間違える
見た目が当たらないときは、class を付けた要素と、CSS が狙っている要素がずれていることがよくあります。.work-card の指定は article に付けないと効きません。中の h3 に付けても何も起きません。
配列から一覧を描画する
レッスンを読む関数の中で return を忘れる
createWorkCard の最後の return card を書き忘れると、関数は undefined を返します。append(undefined) は文字列の "undefined" を足してしまうので、カードのかわりにその文字だけが並びます。
createElement を forEach の外に置く
要素は 1 件ごとに新しくつくらないといけません。外で 1 つだけつくって使いまわすと、同じ要素が親から親へ移動するだけで、最後の 1 枚しか残りません。
配列から一覧を描画するで詳しく読むforEach の中で return すれば全部止まると思う
止まりません。飛ばすだけです。1 件でも条件に合うものが見つかったら終わりにしたい、という処理は forEach には向いていません。第7章の find を使うか、for-of に書き換えます。
つくる ギャラリーをデータ駆動にする
レッスンを読む空にせずに描いて、カードが倍になる
workList.textContent = "" が無いまま renderWorks を 2 回呼ぶと、10 枚並びます。描き直す関数の 1 行目を空にする、と覚えます。
消したはずの要素を掴んだままにする
HTML から消した要素を掴んでいた古いコードが残っていると、null や undefined に対する操作でエラーになります。エラーが出た行より下は動かないので、「途中までしか描かれない」という症状になります。
HTML に書いた見た目と、JS でつくる見た目がずれる
class の付け忘れがいちばん多い原因です。HTML では <article class="work-card"> なのに、JavaScript で card.className を書き忘れると、枠も余白も付かない裸の article が並びます。並べて見比べる段取りは、このずれを見つけるためのものです。
クリックに反応する
レッスンを読む丸かっこを付けて渡してしまう
丸かっこを外して showMessage と書きます。渡すのは関数そのものです。
要素を取る前で綴りを間違えている
id の綴りが 1 文字違うと helloButton は null になり、Cannot read properties of null で止まります。エラーが指す行番号は addEventListener の行ですが、本当の原因は 1 行上にあります。
イベント名に on を付ける
addEventListener に渡す名前に on は付けません。"click" です。エラーは出ず、ただ何も起きないので気付きにくい間違いです。
event オブジェクト
レッスンを読む引数を書き忘れる
引数がないので event は未定義です。event is not defined で止まります。関数の丸かっこの中に event と書き足します。
closest を挟まずに target を使う
説明文を押すと event.target は p で、その中に h3 はありません。null に対して .textContent を読もうとして止まります。まず closest でカードまで戻します。
カードの外を押したときを考えていない
カードとカードのすき間を押すと card は null です。if (!card) return; の 1 行を入れるだけで防げます。
入力欄の値を取る
レッスンを読むtextContent で読もうとする
入力欄の中身は textContent には入りません。何を打っても空のままです。value を使います。
文字列のまま計算する
"5" + 100 は "5100" です。Number() を通してから足します。
登録する相手を間違える
document に登録すると、名前欄やメール欄を打ったときにも動いてしまいます。今回は #message に直接登録します。
フォーム送信を制御する
レッスンを読むボタンに登録してしまう
button では submit は起きません。登録する相手は form です。
引数を受け取っていない
event is not defined で止まり、止められないまま送信されます。関数の丸かっこに event と書き足します。
丸かっこを付け忘れる
これは関数を参照しただけで、呼んでいません。エラーも出ないので気付きにくく、ページだけが再読み込みされます。event.preventDefault() と書きます。
つくる ダークモード切替
レッスンを読むadd だけ書いている
1 回目は暗くなりますが、2 回目以降は何も起きません。add はすでに付いていれば黙って何もしないからです。toggle に置き換えます。
class 名にドットを付けてしまう
classList に渡すのは class 名そのものです。ドットが要るのは querySelector のセレクタのときだけです。.dark という名前の class が付いてしまい、CSS には当たりません。
className を上書きしてしまう
これは class 全体を dark だけで置き換える書き方です。元から付いていた class があれば消えてしまいます。付け外しには classList を使います。
つくる フォームの入力チェック
レッスンを読むreturn を書き忘れる
エラー文と受け付けた文が同時に出ます。if の中の最後に return; を置きます。
エラーを消す処理がない
一度出たエラー文が残ったままになります。正常だったときに formError.textContent = "" を書きます。
条件を && でつないでしまう
これは「両方とも空のとき」です。片方だけ空のときは素通りしてしまいます。どちらか一方でも空なら止めたいので || を使います。