はじめに
コーディングを始めたばかりの頃、私はこんなふうに思っていました。
「コードなんて誰も見ないし、自分が分かればいいじゃん」
「サイトが動けば裏側はどうなっててもOK！」
HTMLもCSSも、とにかく動く形になればそれで良い。
あとで自分でも読めないぐらいのコードになっていても、
「まあ動くし問題ないでしょ」と片づけていました。
「どうせ後から見返すこともないだろう」
そんなふうに思い込んでいたんです。
でも、ある出来事をきっかけに
動けばOK → 読みやすさは必須
に私の意識はガラッと変わりました。
この記事では、そのきっかけと、そこから得た学びをまとめます。
とりあえず動けばOKだった頃
当時の私は、とにかく見た目を再現できればOKでした。
- クラス名は「○○01」「○○02」
- 内側だから in、外側だから out などの曖昧命名
- CSSはその時に見つけた場所へ適当に追記
- margin/paddingで力技の位置合わせ
- コメントなし
- インデントもなんとなく
- 似たパーツは他の場所からコピペ
完全に形だけ作ることが目的で、
コードの意味や構造を考える余裕はありませんでした。
「コーディング＝パズル」くらいの認識で、
似たコードをコピペして完成！…そんな毎日でした。
壁にぶつかったのは「後から直せない」瞬間
転機は突然やってきました。
それは、自分の書いたコードが自分で読めないという瞬間。
ちょっとしたデザイン変更が入っただけなのに、
「どこを直せばいいの…？」
「触ったら全体が崩れた…」
と完全に詰まりました。
- 何がどのスタイルに作用しているか分からない
- 似た class が大量に乱立して判断不能
- margin が二重三重について地獄の調整作業
- 少し触ると他の箇所まで一緒に変わって崩れる
- class 名を無理に長くしても混乱は増すだけ
仕事後の疲れた夜、
本気で「もう無理…」と泣きそうになったのを覚えています。
自分が書いたコードなのに、
もう見たくない…と思うほどでした。
読みやすさの大切さに気づいた瞬間
変化のきっかけになったのは、
自主制作で作っていたLPの回答例を見たときです。
回答例のコードは、
- クラス名が整理されている
- どこを指しているかすぐ分かる
- 構造がスッキリしている
「え…こんなに見やすいの！？」
と衝撃を受けました。
その瞬間、
「他の人が見るかもしれない」
「未来の自分が見るかもしれない」
という意識が生まれました。
そこから、
意味のあるコードを書く
ことの重要性に気づき始めました。
私が意識し始めたこと
- クラス名は意味のある単語にする
- セクションで構造を区切る
- 同じパーツは共通化して使いまわす
- CSSは用途ごとに整理
- margin/paddingはルールを決めて統一
- コメントを残して迷いを減らす
最初は少し面倒に思えたけれど、
後で触ったときの見やすさに驚きました。
コードを「書く」から「設計する」へ
ある日、自分が整理しながら書いたコードを見てふと気づきました。
「あ、コードってただ書くだけじゃなく、設計するものなんだ」
HTMLで構造を決めて、
CSSのルールを整えて、
仕組みを組み立てていく感じ。
この意識に変わってから、
コーディングが一気に楽しくなりました。
今は「未来の自分が喜ぶコード」を意識する
今の目標は、
見やすく、使い回しができて、無駄がないコード
です。
- クラス名に迷ったら意味を優先
- 無駄に長すぎない命名
- コメントを丁寧に入れる
- 共通化できる部分はまとめる
- ベースコードを持つようになった
まだまだ改善点はあるけれど、
動けばOKだけの自分を卒業できた実感があります。
まとめ
- 最初は「動けばOK」で全然いい
- でも必ず「後で困る経験」をして成長する
- コードは“書くものではなく、設計するもの”
- 読みやすいコードは自分と他人の未来を助ける
- 少しずつ整えれば自然とレベルは上がる
コーディングの学びは、
気づいた瞬間にパッと景色が変わることが多いです。
焦らず、一歩ずつ積み重ねていけば大丈夫です。
コメント