【初心者必読】コーディングが上達するコツを超具体的に解説する

今回は初心者にこそ伝えたい、コーディング上達のためのコツと気をつけるべきポイントについて解説します。

本記事は以下のような悩みを持っている人が対象です。

コーディングがある程度できるようになってくると、「自分が書いているコードは本当にいいコードなのか？」と誰もが疑問に思うはずです。僕もそうでした。

そんな人に向けて、本記事では少しでもいいコードを書くためのヒントをお伝えできればと思います。

（あくまで初心者向けに書いているので、踏み込んだ上級者向けの内容はここでは触れません）

ちなみに僕はフリーランスのWeb制作者です。実務でいろいろなコードを見てきたので、その経験を生かして具体的にいいコードを書くためのコツを解説していきます。

「いいコード」って何ですか？

そもそも「いいコード」とは何でしょうか？

人によって違うと思いますが僕はこのように考えています。

詳しく見ていきます。

1.全てに意味があるコード

「あなたの書いたコードの1行1行にはどんな意味があるのか？」が説明できるなら「いいコード」と言えます。

より具体的に言えば、

みたいなことです。

これも詳しく見ていきます。

なぜそこでそのHTMLタグを使ったのか？

これは、

この程度の説明が自分の中でできれば大丈夫です。これが「意味のあるコード」です。

つまりHTMLのそれぞれのタグの持つ意味を理解し、適切に使い分けることができれば「意味のあるコーディング」ができていると言えます。

よりいいコーディングをするために知っておくべきHTMLタグをまとめました。

他にもありますが、それは自分が実際にサイトを作っていく過程で少しずつ学んでいけば大丈夫です。

また「この場合はこのタグを使わないとダメ」といった厳密な決まりはないので、個人の裁量で決まる部分も多少あります。

どのタグを使ってコーディングをすべきかは自分でサイトを使ったりいろんなサイトのコードを読んで慣れていくしかありません。

繰り返しになりますが、HTMLのそれぞれのタグの持つ意味を理解し、適切なマークアップをすることで意味のあるコーディング＝いいコーディングができるようになります。

なぜそのクラス名にしたのか？

HTMLのタグにクラス名をつける際、なぜそのクラス名にしたか説明できますか？そのクラス名にした理由はなんですか？

おそらく「クラス名」は初心者が大いに悩む課題だと思います。僕もたくさん悩みました。

なぜ悩むかというと「クラス名の付け方」がわからないからですよね。「どういうクラス名にすると具体的にどういいのかわからないから」だと思います。

なぜクラス名の付け方がわからないのかというと、「クラス名が持つ具体的な役割」が認識しにくいからだと思います。

実際初心者の人がこれまで作ってきたサイトのクラス名は「なんとなく」でつけられていると思います。「技術書にこう書いてあるから」とか「なんとなくそれっぽいから」とか。

しかし、それではいいコードとは言えません。

いいコードを書くためには「それぞれのクラス名が意味を持っている」必要があります。

どういうことかというと、

こんなクラス名をつけてあげる必要があるわけです。

いいクラス名は例えば.top-news、.top-news__title、.top-news__dateといったクラス名です。なんとなくどのページのどこを指しているかわかる気がしませんか？（ちなみに__などを使って階層関係を示す書き方をBEMと言います）

このようなクラス名なら「トップページのニュースセクションかな」と推測できるはずです。

また、ニュースページが存在しても.news-sec__article、.news-sec__titleといったクラス名なら「ニュースページのセクションかな」と推測できるはずです。

このようなクラス名は「どのページのどの部分であるか」がわかりやすい（推測しやすい）のに加え、コードの「影響範囲」がわかりやすいです。これが「意味のあるクラス名」です。

悪い例も紹介します。

もしトップページの1つ目のセクションを.sec1というクラス名にしてしまうと、このクラスがトップページ以外にも存在するかどうか判断しづらいです。もしかしたらニュースページの1つ目のセクションも.sec1というクラス名かもしれないし、他のページの1つ目のセクションもこのクラス名かもしれないので影響範囲がわかりづらいです。

また、.block-smallといったクラス名もどのページのどこを指しているのかわかりづらい上、他のページにもこのクラスがあるかどうか判断しづらいです。もし修正が入って.block-smallのスタイルを変更した場合、他の場所にあるかもしれない.block-smallやその周りのレイアウトが崩れるかもしれません。

このような「影響範囲」がわかりづらいクラス名は、他の人が修正する際にどこにどれだけこのクラスを持つタグがあるのか把握するのが非常に面倒で、精神的に負荷のかかるストレスフルな作業となるので避けるべきです（実際の案件では第三者が自分の書いたコードを修正することがよくあります）

では、どうすればいいクラス名をつけられるようになるのでしょうか？

それは、「CSS設計を学ぶこと」と「いいクラス名を知ること」です。

「CSS設計」とはCSSの保守性、メンテナンス性、拡張性などを高めるためにCSSに一定の規則を設けることです。設計が上手な人のコードは誰が見ても修正しやすくコードの影響範囲もわかりやすいです。

「CSS設計」には有名なもので

といった手法があります。

個別に解説するとかなり長くなるので省略しますが、これらが使えるようになると今までのなんとなくのクラス名ではなく、意味や理由のあるクラスの命名規則を理解し、見違えるほど修正や拡張がしやすくなるはずです（特にサイトの規模が大きくなればなるほど顕著に現れます）

CSS設計を学ぶには以下の本を一読することをおすすめします。

これまで解説してきた「いいコード」の書き方や、SMACSS、FLOCSSなどのCSS設計について詳しく解説しています。クラス名の付け方やコードの書き方が不安な人に絶対に読んでほしい1冊です。

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」 [ 谷拓樹 ]

created by Rinker

• Kindle
• Amazon
• 楽天市場
• Yahooショッピング

また「いいクラス名」の例として以下の記事を参考にするといいと思います。CSSで頻繁に使われるクラス名をリストにしてくれています。

＞＞CSSのクラス名を決めるときに使うリストをつくりました – Qiita

「CSS設計」と「いいクラス名を知る」ことで、「なぜこのクラス名である必要があるのか？」が説明できるようになります。これができればいいコーディングができるようになります。

複数考えられるCSSの指定のうち、なぜそのスタイルで指定したのか？

デザインからコーディングするにあたってスタイルの指定に何パターンかある場合があります。

例えばこのレイアウトの場合、

といったやり方が考えられますが、実務で使われるのはほとんどの場合display: flex;です。

なぜなら、この3つの中で一番柔軟でありシンプルかつわかりやすいからです。

display: table;やfloatでも全く同じことはできますが、display: flex;を使った指定が一番簡単で挙動もわかりやすいのです。

つまり、複数の選択肢の中からその場その場に合わせて一番いいものを自分で選んで使うことができれば「なぜこのスタイルにしたのか」が説明できるわけです。

じゃあ「どうすれば複数の選択肢から一番いいものを選べるようになるのか？」ですが、これを知るには「いいコード」と「悪いコード」を知っておく必要があります。

「いいコード」は誰にとっても扱いやすくシンプルでわかりやすい一方、「悪いコード」はどこがどう繋がっているのかが把握しにくく挙動もわかりにくいのでストレスになります。

何が「いいコード」で「何が悪いコード」かを知るには自分で色々な人のコードを読むのが一番手っ取り早いです。そして色々な人のコードを読むには「実務」が一番です。

実務でコードを自分で読んでみて「わかりにくいな」と思う箇所は悪いコードだし、「ここわかりやすい！」と思う箇所はいいコードです。

そうやって色々な人が書いた「いいコード」と「悪いコード」にたくさん触れることで「何が一番適切か？」といったことが判断できるようになります。

繰り返しになりますが、実務を通して色々な人が書いたコードを読むことで、その場で一番適切なスタイルやコードを書けるようになります。これができればいいコーディングができるようになります。

長くなったので一旦まとめます。

2.誰が見てもわかりやすいコード

僕が考える「いいコード」の2つの目の条件は、初心者から上級者まで誰が見てもわかりやすいコードです。

具体的に言えば、

ということです。

CSSの難しいプロパティは使わない

CSSのプロパティはできるだけ簡単なものを選んで使います。

これは初心者あるあるだと思いますが、変に難しいプロパティを使おうとする人がいると思います。

気持ちはわかりますが、あえて複雑で難しいプロパティを使うメリットは1つもありません。

例えばdisplay: grid;という便利なプロパティがありますが、これは使い方が結構難しく上級者向けです。

これをただ「便利だから」という理由だけでたくさん使ってしまうと、他の人が修正する際display: grid;を知らない場合は「これ何？」というところから始めなければならず、余計な負担が増えます。難しい技術になればなるほどそれを知らない人がたくさん出てきます。

必要なのは「いかにシンプルで簡単なプロパティを選んで使えるか」です。

シンプルなコードなら初心者から上級者まで多くの人が簡単に理解できるので、「いいコード」だと言えます。

ただし、やむを得ない場合は難しい技術でも使うべきです。

なぜなら無理やり簡単な技術で乗り切ろうとすると逆に複雑になるからです。

どこがどう関係しているのか、どこがどういう役割があるのかを把握するのが難しくなり、「簡単な技術を使ったのに複雑」という状況になってしまいます。

これでは本末転倒なので、やむを得ない場合は難しい技術でも使いましょう。

こんなことを言うと上級者から「display: grid;みたいな技術を知らないのが悪い」と言われそうですが、僕からすれば「難しい技術を知らない人が悪いのではなく、高い技術があるのにそれを誰でもわかるシンプルなコードに落とし込めない方が悪い」と思います。

技量がある人は技量がない人でもわかるように難しいコードをシンプルなコードに落とし込んでいくことが必要だと思います。

繰り返しですが、あまり知られていないプロパティや難しい技術を使うのではなく、できるだけシンプルで簡単なものを選んで使いましょう。

挙動がぱっと見わかりにくい箇所はコメントを書いておく

できるだけシンプルなコードを書いても、どうしても複雑になってしまう箇所もあります。

そういった「挙動がぱっと見わかりにくい箇所」は積極的にコメントを残しておきましょう。

「コメントってそんなに大事なの？」と思うかもしれませんが、あるのとないのとでは理解のしやすさに圧倒的な差が出ます。

という感じです。

複雑な箇所ほどコメントが大いに役立ちます。ぱっと見挙動がわかりにくそうな箇所は積極的にコメントを残しておくことを心がけましょう。

ここで一旦まとめます。

3.修正しやすいコード

僕が考える「いいコード」の3つの目の条件は、修正しやすいコードです。

具体的いえば、

ということです。

セレクタは基本的に全部クラスセレクタで指定する

CSSのセレクタは基本的に全部クラスセレクタで指定します。

なぜこんなことをするのかというと、「詳細度」が関係してくるからです。

出典：CSSの光と闇

詳細度が強いほどスタイルが優先されます。

IDセレクタ、クラスセレクタ、要素セレクタなどをごちゃ混ぜにして書いてしまうと詳細度がぐちゃぐちゃになり思った通りにスタイルが効いてくれません。するとより強い詳細度を使ったスタイルの上書き合戦が始まります。

一度こうなってしまったら最後、どこがどうなっているか把握することができず修正がただただ苦行となります。これではいいコードとは言えません。

詳細度の問題を解決する方法は「基本的に全部クラスセレクタで指定する」ことです。IDセレクタや要素セレクタの使用は原則禁止です（これは実際に現場でも取り入れられている方法です）。

HTMLのタグ全てにクラスを振り、そのクラスをセレクタにしてスタイルを当てていくことで、全てクラスセレクタで指定できれば詳細度を全く気にすることなく修正ができます。

また、クラスセレクタはHTMLタグに依存しないので、たとえHTMLタグが変わったり階層関係が変わっても影響を受けることなくスタイルを維持できます。

具体例を出します。

以下は悪いコードです。

<div>
  <h2>ここにタイトル</h2>
</div>

div h2 {
  margin-top: 15px;
}

ここでこんな修正が来たとします。

修正指示通りHTMLを変えます。CSSはそのままです。

<div>
  <h3>ここにタイトル</h3>
</div>

div h2 {
  margin-top: 15px;
}

しかし、HTMLを修正したことによってCSSのスタイルがうまく当たらなくなってしまったのがわかると思います。

要素セレクタを使っているとこういうことが頻繁に起こります。つまりHTMLを書き換えるたびにCSSが崩れるのでいちいちどこがどう崩れたかを調べて直さないといけないのです。非常に面倒ですよね。

こんなことが起こらないようにHTMLのタグ全てにクラスを振ることでHTMLタグや階層が変わってもスタイルに影響を与えないようにします。

以下はいいコードです。

<div class="contents">
  <h2 class="contents__title">ここにタイトル</h2>
</div>

.contents__title {
  margin-top: 15px;
}

これなら<h2>が<h3>に変わろうが、<div>が<section>に変わろうが、階層関係が変わろうがスタイルを維持できます。

今まではなんとなくIDセレクタや要素セレクタを使ってコーディングしていた人もいると思いますが、今度からは「基本的に全部クラスセレクタ」で書いてみてください。

シングルクラスで指定する（階層を深くしない）

CSSのクラスセレクタでスタイルを指定する際、階層を深くしないようにします。

これも詳細度の関係です。階層が深ければ深いほど詳細度が強くなります。

階層の深さがバラバラだと詳細度もバラバラになり、結果として修正の際にスタイルの上書き合戦となってしまいます。

これを防ぐために「使用できるのは1階層のクラスセレクタのみ」というルールを設けます。

具体的なコードはこんな感じ。これはいいコードですね。

HTML

<section class="contents">
	<div class="contents__inner">
		<ul class="contents__list">
			<li class="contents__item">
				<a href="" class="contents__link"></a>
			</li>
		</ul>		
	</div>
</section>

CSS

.contents {
	/* ここにスタイル */
}
.contents__inner {
	/*ここにスタイル*/
}
.contents__list {
	/*ここにスタイル*/
}
/* 以下同じ感じ */

このようにすれば

という状態になります。

逆にこんなCSSの書き方は悪いコードです。

.contents {
	/* ここにスタイル */
}
.contents .contents__inner {
	/*ここにスタイル*/
}
.contents .contents__inner .contents__list {
	/*ここにスタイル*/
}

これは「階層が深くなっているので詳細度にばらつきが出る＝修正などがしづらい」というのも悪いポイントですが、特定のセレクタに依存してしまっているという面もあります。

上のコードの場合、もしHTMLから.contents__innerを消してしまった場合、.contents__listは.contents__innerに依存しているため、スタイルが効かなくなってしまいます。

そうなると余計な修正の手間が増えますよね。どこがどこに依存しているかをいちいち調べて依存関係を解消しなければならず、非常に面倒でストレスフルな作業になります。

そうならないためにも「セレクタで指定できるのは1階層目のクラスセレクタのみ」とすることで余計な修正の手間を省き、いいコードにすることができます。

やればわかるんですが、詳細度が全部同じだと本当に修正がやりやすいです。マジで。

また、ここで紹介したことはCSS設計にも深く関わってきます。綺麗な設計ができるとどんどんいいコードが書けるようになるのでぜひ習得して欲しいです。

インラインスタイルは使わない

<div style="width: 50%;">というようにHTMLタグに直接スタイルを指定する「インラインスタイル」は頼むからやめてください。

インラインスタイルはデベロッパーツールから発見しにくいので「コードが効かない…」という現象に悩まされたり、詳細度が強いのでスタイルの指定がうまくいかなかったりして本当にいいことないです。

よほどの事情がない限りインラインスタイルは使わないでください。CSSはCSSファイルに書いてください。

!importantは使わない

!importantは詳細度が一番強い指定ですが、これも使わないでください。

もしスタイルを上書きしたいのなら!importantを使わない、かつ「1階層目でクラスセレクタのみの指定」のルールの範囲内でなんとかする必要があります。スタイルを無理やり上書きするのではなく、いらないスタイルを減らしたり、指定する場所を変えるなど工夫してください。

現場でも!importantはかなりうざがられる存在です。面倒だからといって気軽に使うと後の修正で自分の首だけでなく他人の首も絞めることになります。誰も幸せにならないのでお願いだから使わないでください。

ここで一旦まとめます。

少しでもいいコードを書くための具体的な方法

ここからは僕が実際に現場で見た「悪いコード」と、それを「いいコードに」変える方法を紹介していきます。

細かい内容が多いのですぐに使えると思います。

1.複数行のテキストは<br>で改行する

たまに長いテキストを<p>を羅列して改行している人がいますが、これ面倒です。

悪いコード

<p>ここにテキストが入ります。ここにテキストが入ります。</p>
<p>ここにテキストが入ります。ここにテキストが入ります。</p>
<p>ここにテキストが入ります。ここにテキストが入ります。</p>
<p>ここにテキストが入ります。ここにテキストが入ります。</p>

<p>を量産して改行するのではなく、<br>を使って改行してください。

この方がコードがすっきりするし、何よりテキストのコピペの際にラクです。

いいコード

<p>
  ここにテキストが入ります。ここにテキストが入ります。<br>
  ここにテキストが入ります。ここにテキストが入ります。<br>
  ここにテキストが入ります。ここにテキストが入ります。<br>
  ここにテキストが入ります。ここにテキストが入ります。
</p>

2.<br>で改行しすぎない

改行は<br>を使うという話をしたばかりですが、テキストの余白を<br>で無理やり作っている人がいます。これやめてください。

悪いコード

<p>
  ここにテキストが入ります。ここにテキストが入ります。<br>
  <br><br><br>
  ここにテキストが入ります。ここにテキストが入ります。
</p>

どれくらい空いているのかわかりづらいし、もしfont-sizeやline-heightが変わったら余白も変わってしまいます。

個人的には「<br>は連続2回まで。それ以上は<p>を分けてmarginやpaddingを使う」というようにしています。

いいコード

<p>
  ここにテキストが入ります。ここにテキストが入ります。<br>
  <br>
  ここにテキストが入ります。ここにテキストが入ります。
</p>
<p>ここにテキストが入ります。ここにテキストが入ります。</p>

p {
  margin-top: 15px;
}

3.同じスタイルは出来るだけ親要素に指定する

子要素の全てに同じスタイルを当てる場合はなるべく親要素に当てるようにしてください。

悪いコード

<div>
  <p>ここにテキストが入ります。</p>
  <span>ここにテキストが入ります</span>
</div>

p {
  font-size: 20px;
}
span {
  font-size: 20px;
}

親要素にスタイルを当てた方がぱっと見でわかりやすい上、コード量が減って見通しが良くなります。

また、修正の際に「どこにスタイルが当たっていてどこにスタイルが当たっていないのか？」がわかりやすいです。親要素にスタイルを当てることは修正のしやすさにもつながります。

いいコード（HTMLは変えていません）

<div>
  <p>ここにテキストが入ります。</p>
  <span>ここにテキストが入ります</span>
</div>

div {
  font-size: 20px;
}

4.画像に日本語名は使わない

たまに画像に日本語名を使っている人がいますがやめた方がいいです。ファイル名や画像名は基本的に半角英数でつけてください。

意味もなく混乱する上、思いがけないエラーの原因になりかないからです。

5.出来るだけ相対値を使う

特にfont-sizeやlihe-heightは相対値を使ってくれるとありがたいです。

悪いコード

p {
  font-size: 20px;
  line-height: 30px;
}

相対値を使った方が修正した箇所に合わせて自動でいい感じになってくれます。

スタイルがわかりやすい上、修正の手間が減るのでぜひ相対値を積極的に使ってください。

いいコード

html {
  font-size: 62.5%;
}
p {
  font-size: 2rem;
  line-height: 1.5;
}

font-sizeは基本的にrem指定です。デフォルトでは16pxになっているのでhtmlで62.5%（＝10px）を指定し、以降はrem指定します。2rem＝20pxですね。

line-heightは数値指定で単位はつけません。上のコードの場合、もしfont-sizeが3remに変わってもline-heightはfont-sizeにあわせて自動で変わってくれます。

6.<div>を乱用しない

初心者のコードに多いのが、<div>ばかり使ってマークアップしているというものです。

前に解説した通り、HTMLは意味を持つタグがたくさんあります。場面に合うように適切なタグを選んでマークアップしましょう。

でも「どこでどんなタグを使うのが適切なのかわからない」という人もいると思います。

そういう人は最初は肌感覚で大丈夫です。セクションっぽいから<section>とか、見出しっぽいから<h2>くらいの感覚で大丈夫です。

いろんな人のコードを見たりサイトを作っていくうちになんとなくわかってくると思うので、少しずつ慣れていけばokです。

7.テキストは<p>を使う

たまにテキストのみの場所を<div>でマークアップしている人がいます。

絶対ダメというわけではないですが、テキストしかないのにわざわざ<div>を使う理由もないので、普通に<p>でマークアップしてください。

8.CSSのスタイルを元にしたクラス名やめて

例えばwidth: 900px;だから.w-900というクラス名にするとかやめてください。

もしwidthが900pxじゃなくなったら非常に混乱するし、修正でmargin-top: 15px;みたいなスタイルが入ったら「いやwidth以外にもスタイルあるじゃん」と思われます。非常に面倒だし混乱します。

それと、色をそのままクラス名にするのもアウトです。

「色が緑だから.greenというクラス名にしよう」と考えて指定し、後の修正で「やっぱり青にしてほしい」となったらこんなコードになります。

.green {
  color: blue;
}

うざくないですか？

こういうのは混乱の原因になるのでやめてください。

いいコードが書けるようになる一番手っ取り早い方法

ズバリ「実務」です。

独学ではほとんどの場合自分の書いたコードしか見ることができませんが、実務を経験すれば上手い人からそうでない人まで色々な人が書いたコードをこれでもかというほど読むことができます。

上手い人のコードを見て「いい部分」を盗んで、そうでない人のコードを見て「悪い部分」を知ることで、手っ取り早く「いいコード」と「悪いコード」を知ることができます。

あとは学んだ知識を使って実際にサイトを作るだけです。実務ならお金をもらいながら練習できるのがいいですよね。

結局ある程度数をこなさないと上達はしないので、そういう意味でも実務が一番だと思います。独学だといくらサイトを作ってもお金もらえないし、何よりモチベの維持が大変ですからね。

ある程度力がついたら実務の世界へ飛び込みましょう！

最後に

他の人が書いたコードを修正するのって思った以上に大変で面倒なんですよ。

どこがどう繋がっているのか把握するところから始めないといけないし、悪いコードなら余計な手間が増えてストレスになります。

なのでまずは今回解説したポイントを参考に、少しでもいいコードが書けるように頑張って欲しいです。

今「どういうコードがいいコードなのかわからない」「どういうクラス名をつけたらいいかわからない」という人は、逆に言えばここがわかればかなりいいコードが書けるようになるはずです。

それと「CSS設計」ができない人は絶対に習得して欲しいです。設計ができる人とできない人はコードの修正のしやすさや読みやすさが圧倒的に違います。

CSS設計の本をもう一度貼っておきます。コーディングのやり方に不安がある人はとりあえず読んでみてください。

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」 [ 谷拓樹 ]

created by Rinker

• Kindle
• Amazon
• 楽天市場
• Yahooショッピング

最後に本記事の内容を総まとめします。

長くなりましたが今回はここまでです。参考になったら幸いです。

世の中にもっといいコードが増えればみんなが幸せになれます。いいコードが増えることを願っています。

ZennでCSS設計の
本を書きました！

「CSS設計をちょっと勉強したけど
結局よくわからなかった…」
そんな人に読んでほしい一冊です！

読んでみる