女性向けエンジニアスクール
パスを間違えている
script.js を js フォルダに入れたのに src="script.js" のままだと読み込めません。開発者ツールの Network タブに 404 と出ます。src="js/script.js" のようにフォルダ名から書きます
JavaScript入門：コードを動かすのよくある間違い
レッスンの本文で注意している点を、つまずきの側から39件ぶん並べ直しました。書いた覚えのある形が見つかったら、 そのままレッスンに戻って前後を読めます。
HTML に JavaScript を読み込む
レッスンを読む閉じタグを省略する
<script src="script.js" defer /> のような自己閉じは効きません。script タグは必ず </script> で閉じます
defer を付けずに head に置く
HTML がまだ組み上がっていない状態で走るため、第 8 章以降で null が返る原因になります。head に置くときは defer とセットにします
console.log で表示する
レッスンを読むconsole.log で満足してしまう
表示は出るのにテストが赤いままになります。値は必ず return で返します
クォートの種類が揃っていない
開始と終了は同じ記号にします。バラバラだと文字列が閉じられず構文エラーになります
console.log で表示するで詳しく読む関数を呼ばずに名前だけ書く
helloConsole は関数そのもの、helloConsole("山田 太郎") が呼び出しです。カッコを忘れると関数の中身が実行されません
文字列を連結する
レッスンを読む空白や句読点を入れ忘れる
見た目では気づきにくく、テストだけが赤くなります。区切り文字は自分で足します
文字列を連結するで詳しく読む変数名をクォートで囲んでしまう
"name" と書くと、引数の中身ではなく name という 4 文字がそのまま出ます
数値の足し算のつもりが連結になる
文字列が 1 つでも混ざれば連結です。足したい部分はカッコでくくります
文字列を連結するで詳しく読む四則演算
レッスンを読む文字列のまま計算しようとする
入力欄から取った値は文字列です。+ は連結になってしまいます
優先順位を勘違いする
「18 ヶ月を 10 倍したい」つもりで次のように書くと、* 10 だけが先に計算されて 72 になります
カッコの閉じ忘れ
開いた数と閉じた数が合わないと構文エラーになります。エディタの色分けで対応を確かめる癖を付けます
四則演算で詳しく読むコメントで意図を残す
レッスンを読むブロックコメントを閉じ忘れる
*/ を書き忘れると、そこから先のコードが全部コメント扱いになります。関数まるごと消えるので、動かないのに理由が分からず悩みます
ブロックコメントを入れ子にする
/* */ は入れ子にできません。内側の */ で終わってしまい、残りが構文エラーになります
文字列の中の // をコメントだと思う
文字列の内側はコメントになりません。URL を書いても切れずに残ります
コメントで意図を残すで詳しく読むエラーを読んでみる
レッスンを読むエラーを読まずに書き直す
赤い文字を見た瞬間に閉じてしまい、勘で直そうとするパターンです。まず種類と行番号を声に出して読みます
エラーを読んでみるで詳しく読む行番号だけを見て前後を見ない
とくに SyntaxError は、原因が示された行より前にあります。カッコとクォートの対応を上へたどります
大文字と小文字を同じだと思う
userName と username は別の名前です。ReferenceError の半分はこれが原因です
つくる 起動メッセージ
レッスンを読む計算のカッコを忘れる
学習期間が 122 のように数字の並びになります。計算部分はカッコでくくります
句読点や単位の前後の空白がずれる
テストは 1 文字も違わないことを求めます。" 件、学習は " のように、読点の前後まで期待値と見比べます
return を分けて 2 回書く
最初の return で関数が終わるため、2 行目は実行されません。1 本の式につないでから返します
比較演算子と ===
レッスンを読む= と == と === を取り違える
= は代入です。if (published = true) と書くと、比較のつもりが代入になり、いつでも成立する条件ができあがります。等しいかを調べたいときは記号を 3 つ書く、と体に覚えさせてください
入力値を変換せずに比べる
入力欄の値は文字列です。year === 2026 は false になります。Number(year) === 2026 のように、比べる前に型をそろえます
NaN を === で調べる
x === NaN は必ず false です。Number.isNaN(x) に置き換えてください
論理演算子と短絡評価
レッスンを読む&& の戻り値を boolean だと思い込む
views && views >= 100 は、views が 0 のとき 0 を返します。false ではありません。真偽値を返したいなら Boolean() で包みます
a === 1 || 2 と書く
「a が 1 または 2」を表したつもりでも、2 は truthy なので式全体が常に truthy になります。a === 1 || a === 2 のように、比較を 2 回書いてください
短絡評価を忘れて右辺に処理を置く
isReady && init() は isReady が偽なら init() が呼ばれません。呼ばれない可能性を意識せずに書くと、初期化されないまま進むバグになります
三項演算子で簡潔に
レッスンを読む: を書き忘れる
三項演算子は ? と : がセットです。偽のときの値を省略することはできません。「条件が真のときだけ何かしたい」なら三項演算子ではなく if 文の出番です
戻り値ではなく処理を書いてしまう
三項演算子は値を選ぶための道具です。c ? doA() : doB() のように副作用のある関数を並べると、戻り値が捨てられて読みにくくなります。処理を分けたいときは if 文にします
入れ子を深くしすぎる
3 段以上の入れ子はレビューでほぼ必ず指摘されます。書けることと読めることは別なので、段数が増えたら素直に if / else if に書き換えてください
?? で既定値を用意する
レッスンを読む0 を消してしまう
count || 10 は、count が 0 のとき 10 になります。件数や金額のように 0 に意味がある値には ?? を使ってください
?? を || や && と括弧なしで混ぜる
a ?? b || c は SyntaxError です。優先順位が紛らわしいため、言語仕様として括弧を必須にしています。(a ?? b) || c のように、どちらを先に評価するかを自分で明示してください
既定値を毎回書き散らす
同じ既定値を関数のあちこちに ?? で書くと、あとで変えるときに漏れます。既定値は関数の入り口で一度だけ決めて、以降はその変数を使い回すのが読みやすい形です
演算子の優先順位
レッスンを読むa === 1 || a === 2 を a === 1 || 2 と書く
後者は (a === 1) || 2 と解釈され、2 は truthy なので式全体が常に truthy になります。比較は毎回きちんと書きます
! の範囲を勘違いする
!published && views > 0 は (!published) && (views > 0) です。「公開中かつ閲覧数ありではない」と書きたいなら !(published && views > 0) と括弧が必要です
?? を括弧なしで混ぜる
動かない構文エラーなので、実行前に必ず気づけます。落ち着いて括弧を足してください
演算子の優先順位で詳しく読むつくる 表示名を決める
レッスンを読む数値の既定値に || を使う
今回は既定値が 0 なので worksCount || 0 でもたまたま同じ結果になります。しかし既定値が 0 以外のとき、たとえば views || 10 と書くと、実際に 0 回だった閲覧数が 10 にすり替わります。数値には ??、と決めておくと事故りません
?? と || を括弧なしで混ぜる
nickname || fullName ?? "名無し" は SyntaxError です。別々の const に分けるか、括弧を書いてください
数値と文字列の連結を忘れる
"作品 " + count + " 件" の + は、左が文字列なので連結として働きます。順番を変えて count + " 件" と書くと数値が文字列に変換されて連結されますが、count + 1 + " 件" のように算術を混ぜるときは、意図した順に計算されているか確かめてください