プロは絶対やらないコーディングミス5選ー初心者がつまずきやすいNGと実務で通用する書き方
「動いているからOK」
「見た目が同じなら問題ない」
こうした考え方のままでは、実務で通用するコーディングにはなりません。
プロと初心者の違いは、派手なテクニックではなく
ミスをしない設計と書き方
にあります。
この記事では、現場で確実に評価を落とす「やってはいけないコーディングミス」を5つに絞り、
改善方法まで具体的に解説します。
ミス① 意味のないHTML構造
NG例
<div class="title">サービス紹介</div>
<div class="text">説明文</div>見た目は問題ありませんが、構造としては不適切です。
なぜダメか
・SEOに弱い
・アクセシビリティが低い
・可読性が悪い
OK例
<h2>サービス紹介</h2>
<p>説明文</p>ポイント
HTMLは「見た目」ではなく
意味（セマンティクス）で書く
ミス② クラス名が適当
NG例
<div class="box1">
<div class="red-text">
<div class="big-title">なぜダメか
・何を表しているか分からない
・修正が難しい
・チーム開発で破綻する
OK例
<div class="service-card">
<div class="service-title">
<div class="service-description">ポイント
クラス名は
見た目ではなく役割で命名する
ミス③ CSSの使い回しができない
NG例
.title1 { font-size: 24px; }
.title2 { font-size: 24px; }
.title3 { font-size: 24px; }なぜダメか
・同じコードが増える
・修正コストが上がる
・管理が崩壊する
OK例
.title {
font-size: 24px;
}ポイント
再利用を前提に設計する
ミス④ 余白がバラバラ
NG例
margin: 13px;
padding: 27px;
margin-top: 18px;なぜダメか
・デザインが崩れる
・統一感がなくなる
・調整が難しくなる
OK例
margin: 16px;
padding: 24px;ポイント
8px or 4px単位で統一する
ミス⑤ 無駄なコードが多い
NG例
display: block;
width: 100%;（不要な場合でも書いている）
なぜダメか
・可読性が下がる
・保守性が悪くなる
・ファイルが肥大化する
OK
必要なものだけを書く
ポイント
シンプルが最強
プロが意識していること
プロはコードを書くときに
・誰が見ても分かるか
・後から修正しやすいか
・再利用できるか
を常に考えています。
初心者との違い
初心者
・とりあえず動かす
・見た目優先
・場当たり的
プロ
・設計してから書く
・構造を重視
・再利用を前提
👉 この差が品質の差になります
一気にレベルが上がる習慣
① コードを減らす
書くことより
削ることが重要
② 命名を考える
コードの8割は命名で決まります。
③ ルールを作る
・余白
・フォント
・カラー
を統一する
④ 他人のコードを見る
プロのコードは最高の教材です。
まとめ
プロがやらないミスは以下の5つです。
- 意味のないHTML
- 適当な命名
- 再利用できないCSS
- バラバラな余白
- 無駄なコード
最後に
コーディングの質は
小さな積み重ねで決まります
派手な技術よりも
・正しい構造
・シンプルな設計
・再利用性
を意識することで、実務レベルに一気に近づきます。
まずは1つでもいいので、今日から修正してみてください。
