コードのスペルミスはどのようにしたら見つけることができますか?

基本的には、実行したときに表示されるエラーメッセージから見つけることができます。
2022年2月10日
ユーザー

コードの写経を日々やって動かしているのですが、綴りミスがたびたび発生します。
動かなくて悩んで、こちらのコード比較の機能を使って発見するのですが、自分でコードを作った場合、そのような比較はできません。
効果的に、綴り間違えを発見する方法を教えてください。

例えばこんなコードです。

'use strict';
{
  const dts=document.querySelectorAll('dt');
  dts.forEach(dt=>{
    dt.addEventListener('click',()=>{
      dt.parentNode.classList.tggle('appear');
      dts.forEach(el=>{
        if(dt!==el){
          el.parentNode.classList.remove('appear');
        }
      });
    });
  });

答えは toggleo が抜けています。
全体の中のほんの 1 か所なのですが、なかなか自力で発見できず、コード比較にまたお世話になっている次第です。
よろしくお願いします。

スタッフ

こんにちは。ご質問ありがとうございました。

コードの写経を日々やって動かしているのですが、綴りミスがたびたび発生します。
動かなくて悩んで、こちらのコード比較の機能を使って発見するのですが、自分でコードを作った場合、そのような比較はできません。
効果的に、綴り間違えを発見する方法を教えてください。

こちらの件ですが、今回の場合ですと、実行したときに該当の行でエラーが出るはずです。そのようにエラーメッセージをもとに間違いを探していくのが基本となります。

その他、今回のケースには該当しないかもですが、スペルミスを見つけるために個人的に実践しているのは以下のとおりです。

  • エディタの色分けやメッセージに注意する(エディタの機能によって、有効ではない表現にエラーアイコンがつくこともあります)
  • 複雑なコードのなかでは間違いを見つけにくくなるので、同様の動作をする小さな機能を作って検証していく(もしくはいったんゼロからすべてを作り直してみる、ということもよく行います)。
  • 怪しそうなコードをそのまま Google 検索してみる。「ひょっとして...ですか?」と候補が出てくることもあるので。
  • 英語のスペルミスの場合もあるので、翻訳ツールなどにかけてみる。以下の図のようになったりしますね。

このあたりはある程度慣れも必要になりますね。プロであってもたった 1 つのスペルミスに気づくために 1 日かかったりすることもよくあります。あまり悩みすぎずに気分転換しながらじっくり取り組んで見てください( 1 日経ったあとに見直すとすぐに気づくこともよくあります)。

ユーザー

回答ありがとうございます。
プロの皆さんでも、 1 日かかったりするのですね。驚きました。
エラーから探せば良いのですね。分かりました。
もし可能ならば、今後のレッスンでパターン別エラー対処や、 MDN などを使った各コマンドの検索や使い方の調べ方など企画していただけるとありがたいなと思いました。
(もしかして、既にある?)
ありがとうございました。

この質問はユーザーによって解決済みになりました