エラーがなかなか直らない！コーディング初心者がよくやってしまいがちな５つのミスとその解決策とは？

「初心者だから、エラーにたくさん遭遇するのか？」

そう思われる方が多いですが、実は現役エンジニアの仕事は、80%がエラーとの戦いだと言われています。

むしろ、エラー解決能力こそがエンジニアに求められるスキルになります。もちろん、スキルアップを重ねていくことでエラーの回避率が向上します。今回は数多くのエラーの中でも、初心者が特にミスしやすいことについて紹介します。

Hタグの親子関係が逆転

コーディングはCSSさえ間違っていなければ、見た目はいくらでも変更できます。しかしHTMLには多くの種類のタグが存在し、それぞれには意味があります。

その中の一つ、Hタグは重要な役割を担っています。

ランディングページやホームページはGoogleやYahoo!などの検索エンジンによって検索一覧に表示されますが、検索の上位に表示させるには、「SEO対策」が必要になります。

その中の一つが、適切なタグの設定です。特にH1タグはコンテンツの要を表すタグであるため、H1タグの親要素にはH2やH3など入れないよう、注意しましょう。

キャッシュのクリア

コーディングしたCSSやJavaScriptが反映されない時の主な原因の一つに「キャッシュ」があります。これはパソコン側に一時的にHTMLやCSS、画像などのデータを保存したものです。これがあるおかげで、再度サイトに訪問した際にスムーズに画面が表示されます。

便利な機能ではありますが、サイト制作中は更新の度に削除しなければ、新しく変更したデータが反映されません。

変更したデータが画面に反映されない時は、一度キャッシュクリアを実施したかどうかを疑ってみましょう。

文字サイズの最小が10px

これはGoogle Chrome特有の設定ですが、Google Chromeの画面でコーディングを確認する場合は、最小文字は10pxを想定すると良いでしょう。

実はこのブラウザだけ、最小文字がデフォルトで設定されています。(個別のブラウザ設定で変更は可能)

例えばSafariの画面では問題なく8pxの文字が表示されていても、納品先の人がGoogleChromeで納品したデータを確認する際、最小文字サイズの影響でデザインが崩れている可能性があります。視覚的にも10px以下の文字は小さいので、避けるのが無難です。

もしどうしても10px以下の文字を画面に反映させたい場合は、画像化する、もしくはCSSのtransformのscaleを使って表現しましょう。

クラスの命名

コーディングでは、ただ画面に必要なものを表示させる作業ではありません。保守性も考える必要があります。

もしクラス名を適当に決めるとどうなるのか？

他の人が編集する際、どのタグがどのクラスの装飾を適用しているのか、見つけるのが大変になります。

他の人でなくても、自身が数ヶ月後に編集する際は忘れていることが多いです。そのための対策として、命名の一般的なルールが存在します。

その中の一つが、BEMと呼ばれる命名規則です。

コーディング初心者の方は、早いうちにクラス命名を整える癖をつけましょう。

タイピングミス

最も遭遇率が高く、見つけるのが大変なのがタイピングミスです。

例えば、JavaScript。ここでは、自由に変数の名前を決めることができます。

例えばcheckMarkという変数を作り、呼び出す時にchechMarkと入力しても反映されません。特に存在しない単語を変数の名前にした場合は、見つけるのがさらに難しいです。

コーディングは書き方があっているのかどうかも重要ですが、そもそも入力ミスが無いかも気を配りましょう。

まとめ

いかがでしたか。経験したことのあるミスはありましたか？エラー解決は初心者時代だけの課題ではありません。

エラー解決した経験の数だけ、エラー解決能力のスキルアップが図れます。少しでもこの記事が、エラー解決の参考になれば幸いです。

NAKAJIMA