つい先日、業務でコードを書いていたときのことです。
正直に言います。

自分でも驚くレベルの凡ミスを3つ連続でやりました😭
しかも全部、基礎中の基礎です。

① 変数名「taxAll」の悲劇

ある処理で 売り上げ金額の合計値に、taxAll という変数を使っていました。
ところが、どこかで

taxAlll

と l が1つ多い スペルを書いていたのです。
最初は当然、

ロジックがおかしいのでは？
どこかで値が書き換わっているのでは？

と、処理の流れを一から全部見直しました。

配列も確認。
条件分岐も確認。
その他全てのロジックを確認。

それでも「合っている」。

なぜ？？？

40分ほど経ってから、念のためAIに聞いてみました。
すると即答。

スペルが間違っていますよ。

……。

All と Alll。

たった1文字。
でもそれだけで40分消えました。

② div に value はない

次はHTML。
JavaScriptから値を操作しようとしていました。

<div id="price"></div>

これに対して、

document.getElementById("price").value = 10000;

と書いていました。
でも反映されない。

なぜ？
AIに聞いてみると、

div 要素に value 属性はありません。
使用するなら textContent です。

……確かに。

document.getElementById("price").textContent = 100;

そうです。

value があるのは input や textarea。
div にはありません。
完全に思い込みでした。

③ load と DOMContentLoaded のタイミングの違い

さらにもう一つ。
JavaScriptで要素を操作するためにイベントを設定していました。

とある変数名.addEventListener("load", とある関数名);

でもうまくいかない。

なぜ？

これもAIに聞いてみると即答。

DOMの構造だけを扱うなら
DOMContentLoaded を使う方が適切です。

そう。

  • load → 画像など すべてのリソースが読み込まれてから発火
  • DOMContentLoaded → HTML構造の読み込み完了時に発火

タイミングが違うんです。

自分は「要素を読み込んだら実行」と思っていたのに、
実際は「全部読み込んでから実行」になっていました。

「そんな凡ミスするの？」と思った人へ

この記事を読んで、

そんなミスするなんて大丈夫？

と思った人もいるかもしれません。
しかもこれ、すべてCrebitのレッスンで扱っている内容です..。

では、なぜこんな凡ミスをしてしまうのか。
理由はいくつかありますが、その一つが「複数の言語を扱っていること」による影響です。
僕は普段、JavaScriptだけを使っているわけではありません。
他の言語にも触れています。

そうすると、頭の中で無意識のうちに別の言語のルールを適用してしまうことがあります。

その結果、思い込みによる不具合を生んでしまう。
そんなことが、実際に起きるのです。

でも、これでいいと思っています

正直、少し恥ずかしいです。
でも同時にこうも思っています。

間違えたことは、記憶に残る。

  • スペルミス → もう二度と忘れない（Allみたいにlが連続するような単語はなるべく書かない）
  • div に value → 体が覚えた（不用意にvalue属性を使わない、一旦確認）
  • load と DOMContentLoaded → 完全に整理された（注意ポイントとして気にする）

これは逆にラッキーです。

人は、苦い経験のほうが強く記憶に残ります。

失敗は、成長のログ

だから僕は今回のミスを、

「なかったこと」にしません。
こうして記事に書いて、自分のためにも残しておきます。

エンジニアは、

  • ミスしない人
    ではなく、
  • ミスを資産にできる人

だと思っています。

みなさんへ

いっぱい失敗してください。
いっぱいハマってください。

そして、
「なんで動かないんだ…」と悩んでください。

その時間は無駄ではありません。
確実に、力になります。
そして基礎って大切だと痛感するはずです。

今日の凡ミス3連発も、未来の自分への投資でした。
一緒に、強くなっていきましょう。