Digital Marketing ROKUJIGEN

6PLUSメディア 6Plus > カテゴリ0 > 【初心者向け】コードが読みやすくなる！コーディングスタイルガイド【未経験デザイナー奮闘記】

【初心者向け】コードが読みやすくなる！コーディングスタイルガイド【未経験デザイナー奮闘記】

rokujigen

公開日

更新日

株式会社六次元でデザイナーをしているさねまつです！

コードを書き始めると、最初は「動けばOK！」って思うことが多いですよね。

私も最初はあまり深く考えていませんでした。

でも、いざ他の人とコードを共有したり、自分で見直すときに「あれ？これ何してたんだっけ？」と困ること、ありませんか？

他の人がコードを読んだときに、すぐに理解できるようにするのって意外と大変…

でも、ちょっとした工夫でコードが読みやすくなれば、自分も周りの人もずっと作業がしやすくなります！

 

今回はコードをより読みやすく、そして管理しやすくするための「より良いコーディングスタイル」についてまとめます。

初心者の方でも小さな工夫を積み重ねることで、コードがスッキリと整理され、

後から見直す際やチームでの作業でも困らないコーディングができるようになります。

一貫したスタイルを意識して、より効率的で理解しやすいコードを目指していきましょう！

 

コーディングスタイルとは？

コーディングするうえで大切になってくるのはコーディングスタイルです。

コーディングスタイルとは、コードを書くときのルールや見た目を統一することです。

HTMLやCSSでは、コーディングスタイルを統一することで、コードに一貫がでて読みやすくなります。

コードの読みやすさは後からコードを見返すときや、他の人と協力して作業する際に

理解しやすく、ミスを減らすためにはとても重要です。

次の章からは、実際のコード例を見ながら「良いコード」と「悪いコード」の違いを解説していきます。

それぞれの良し悪しを比較することで、どのようにコードを書けば読みやすくなるのかが分かりやすくなります。

ちょっとしたポイントを押さえるだけでコードの質がぐっと向上するので、一緒に見ていきましょう！

 

インデントとフォーマット

まずは「インデント」と「フォーマット」について説明していきます。

「インデント」とは、HTMLやCSSのコードの行頭に空白を入れて、階層や構造を整理することを指します。

「フォーマット」は、コード全体の見た目を整えるためのルールを指し、コードを読みやすくするための基本的なポイントです。

インデントの重要性

HTMLやCSSでは、インデントを正しく使うことでコードの階層構造が一目で分かるようになります。

たとえば、HTMLでは親子関係を明確にし、CSSではセレクタやプロパティの区切りをわかりやすくするのに役立ちます。

例として、以下のようなHTMLコードを比べてみましょう。

 

悪い例（インデントなし）

<div>
<p>こんにちは</p>
</div>

良い例（インデントあり）

<div>
　<p>こんにちは</p>
</div>

CSSでも同様に、セレクタとプロパティを整理するためにインデントを活用します。

 

悪い例

body{background-color:#fff;color:#333;}

 

良い例

body{
　background-color:#fff;
　color:#333
}

 

これにより、コード全体の見通しが良くなり、編集ミスを減らすことができます。

 

行の長さや改行ルール

HTMLやCSSでも、1行が長すぎるとコードが読みにくくなってしまいます。

例えば、以下のように改行を適切に行うことで、コードを整理できます。

悪い例（改行なし）

<divclass=“container main-content”id=“content”style=“background-color: #f5f5f5;”onclick=“handleClick()”>Welcome to the website!</div>

良い例（改行あり）

<div
   class=“container main-content”
   id=“content”
   style=“background-color: #f5f5f5;”
   onclick=“handleClick()”
>
   Welcome to the website!
</div>

 

CSSではプロパティを1行ずつ書き、複数のセレクタをリスト形式で整理すると良いです。

 

悪い例

h1,h2,h3{margin:0;padding:0;color:#000;}

 

良い例

h1,h2,h3{
　　　margin:0;
　　　padding:0;
　　　color:#000;
}

 

HTMLやCSSでのインデントとフォーマットは、コードを整理し、読みやすくするための基礎です。

一貫性を意識することで、自分や他の人がコードを簡単に理解できるようになります。

 

コメントの書き方

コードにはコメントを書くことができます。

コメントを書くことで他の人が内容を理解しやすくなりますが、

コメントの書きすぎは逆効果になることもあります。

ここでは、必要なコメントと不必要なコメントの違いを見てみましょう。

 

必要なコメントの例

<!– メインのナビゲーションメニュー –>
<nav>
　<ul>
　　<li><a href=”#home”>ホーム</a></li>
　　<li><a href=”#about”>会社概要</a></li>
　　<li><a href=”#services”>サービス</a></li>
　</ul>
</nav>

 

不必要なコメントの例

<!–これはdivの開始 –>
<div>
　<p>こんにちは、世界！</p>
</div>
<!–これはdivの終了 –>

 

不必要なコメントは、コード自体が明らかに何をしているのかが分かる場合に多用されがちです。

このようなコメントはかえってノイズとなり、コードの読みやすさを下げることがあります。

一方で、セクションの目的や複雑な処理の意図を説明するコメントは、後から見返したときに理解を助ける大切な情報となります。

 

読み手がすぐ理解できるコメントの例

/*色設定*/
body{
　background-color:#f0f0f0;/*背景色は淡いグレー*/
　color:#333;/*テキストカラーは暗めのグレー*/
｝
/* メインコンテンツのスタイル */
.main-content {
　margin: 20px auto; /* コンテンツを中央揃え */
　max-width: 800px; /* 最大幅を800pxに制限 */
}

「なぜそのコードを書いたのか」「コードの意図」を分かりやすく説明することがポイントです。

これにより、読み手がスムーズに理解できるようになります。

 

実践的なスタイルガイド

ここでは、HTMLとCSSを書くときに役立つ実践的なテクニックを紹介します。

コードが複雑になってもわかりやすく整理できるようにするためのポイントを見ていきましょう。

 

クラス名の命名規則

CSSでスタイルを適用する際、クラス名の付け方はとても重要です。

分かりやすいクラス名を使うことで、他の人がコードを見たときに意図を理解しやすくなります。

また、自分自身でも管理がしやすくなります。

 

おすすめの命名規則の一つとして「BEM（Block Element Modifier）」があります。

BEMは、クラス名を「Block（ブロック）」、「Element（エレメント）」、「Modifier（モディファイア）」という要素に分けて命名する方法です。

たとえば、次のような例があります。

 

<!– BEMを使った命名の例　–>
<div class=”card”>
　<h2 class”card_title”>タイトル</h2>
　<p class=”card_description”>説明文です。</p>
　<button class=”card_button card_button–primary”>クリック</button>
</div>

 

・cardは「Block」で、コンポーネント全体を表します。

・card_titleやcard_descriptionは「Element」で、ブロック内の具体的な要素を示します。

・card_button–primaryは「Modifier」で、特定のスタイルを持つボタンを表します。

BEMの命名規則を使うとどのクラスがどの要素に関連しているのかを簡単に理解できるようになります。

 

HTML構造を整理するコツ

HTMLを書くときは、コードの階層構造を意識して整理することが大切です。

ポイントを押さえると今よりも見やすく、メンテナンスしやすいコードをかけるようになります。

 

1.セマンティックな要素を使う

できるだけ<div>や<span>などの汎用的な要素よりも、<header>,<main> ,<artcle>,<footer> といったセマンティックなタグを使いましょう。

コードを読む人がすぐに構造を理解できるようになります。

※セマンティックとは？…タグの選び方に「意味」を持たせることをセマンティックといいます。

セマンティックなHTML要素を紹介します。

・<header>：ページやセクションのヘッダー部分を示します。

・<nav>：ナビゲーションメニューを示します。

・<main>：ページの主要なコンテンツ部分を示します。

・<section>：ページの特定のセクション（区切り）を示します。

・<article>：独立したコンテンツ、記事やブログの投稿を示します。

・<aside>：メインコンテンツに関連する補足情報を示します（サイドバーなど）。

・<footer>：ページやセクションのフッター部分を示します。

 

悪い例

<div class=”section”>
●<div class=”title”>会社概要</div>
●<div class=”text”>私たちの会社についての情報です。</div>
</div>

 

良い例

<section>
●<h2>会社概要</h2>
●<p>私たちの会社についての情報です。</p>
</section>

 

2.一貫したインデントを使う

インデントを統一してコードの階層を視覚的にわかりやすくしましょう。

インデントが整っているだけで、コード全体の見通しが良くなります。

 

3.不要なネストを避ける

※ネストとは？…要素や構造が「入れ子」になっている状態の事。

HTMLの階層が深くなりすぎると、CSSでスタイルを適用するのが難しくなります。←いろんなところにクラスがついているからね！

できるだけシンプルな構造を保つよう心がけましょう。

 

ツールを活用しよう

コードを書く際に役立つツールを上手に活用することで、効率的にきれいなコードを保つことができます。

特に、HTMLとCSSのコードは視覚的にわかりやすく整理することが重要です。

この章では、エディタの設定やチーム開発に役立つツールを紹介します。

 

エディタの設定

エディタを効果的に設定することで、コーディングの効率が大きく向上します。

VSCode（Visual Studio Code）はカスタマイズ性が高く、初心者にも使いやすいツールです。←私も使っています！

ツールを導入することで、より快適にコードが書けるようになりますよ！

 

【Prettier】

Prettierは、HTMLとCSSを自動で整形してくれるツールです。

インデントや改行を統一することで、コードが常に美しい状態で保たれます。

保存時に自動で整形してくれるので、コードを書くときにスタイルを気にせずに集中できます。

 

初心者向けの使いやすい拡張機能

初心者でもすぐに使える拡張機能が豊富にあります。

 

【Live Server】

HTMLファイルを編集しながら、リアルタイムでブラウザで結果を確認できる便利な拡張機能です。

コードを保存すると即座に変更が反映されます。

 

【Auto Close Tag】

HTMLタグを入力すると、閉じタグも自動で追加してくれる拡張機能です。

タグの閉じ忘れを防ぎます。

 

【CSS Peek】

HTML内で使用しているCSSクラスやIDがどこで使われているかを簡単に確認できる拡張機能です。

これらのツールを使うことで、コードの管理が楽になり、作業の効率が向上します。

 

チーム開発を考えたスタイル

HTMLとCSSでも、チームでの開発ではスタイルを統一することが重要です。

Gitを活用し、コードレビューを通じて一貫性を保ちながら作業を進めましょう。

 

Gitを使って統一感を保つ

Gitは、複数人での開発においてコードを管理するために非常に便利です。

特にHTMLとCSSでは、コードが増えると整理が難しくなるので、ブランチごとの作業ルールやコミットメッセージの統一が大切です。

これにより、コードの衝突を減らし、後で見やすく修正ができます。

Gitについては前回の記事で詳しく説明していますので是非見てみてください！

 

コードレビューでスタイルを確認する

コードレビューでは、他のメンバーが書いたHTMLやCSSコードをチェックし、スタイルに関するフィードバックを交換します。

命名規則やインデントの統一、冗長なコードの排除などに注意を払い、可読性を重視したコードに改善しましょう。

レビュー時にPrettierを使って自動整形を確認すると、スタイルの一貫性が保たれます。

 

よくある初心者のミスと解決法

HTMLとCSSを学び始めたばかりのときに、よくあるミスがあります。

これらを事前に知っておくと、つまずきを防ぐことができます。

この章では、初心者がよく犯しがちなミスとその改善方法を具体的な「悪い例」と「良い例」を使って紹介します。

 

ありがちなエラー例

・HTMLタグの閉じ忘れ

HTMLでは、タグのペアを正しく閉じることが非常に大切です。

閉じタグを忘れてしまうと、ブラウザが意図しない表示をしてしまうことがあります。

 

悪い例

<div>
●<p>こんにちは
</div>

 

良い例

<div>
●<p>こんにちは</p>
</div>

 

良い例では、<p>タグがきちんと閉じられています。

タグをきちんと閉じることで、HTMLが正しくレンダリングされ、予期せぬレイアウト崩れを防げます。

 

・CSSセレクタの指定ミス

CSSでは、正しいセレクタの指定が重要です。

IDやクラス名を間違えると、スタイルが適用されないことがあります。

 

悪い例

#button{
●●background-color:blue;
}

.button{
●●color:white;
}

 

良い例

.button{
●●background-color:blue;
●●color:white;
}

 

良い例では、クラス名が統一されています。

IDとクラスの役割をしっかりと理解し、適切に使い分けることが重要です。

 

・不必要なCSSの指定

同じスタイルを複数の場所で繰り返し書いてしまうことがあります。

これは冗長になり、コードが読みづらくなります。

 

悪い例

.header{
●●font-size:20px;
●●color:black;
}

.footer{
●●font-size:20px
●●color:black;
}

 

良い例

.text{
●●font-size:20px;
●●color:black;
｝

.header{
●●font-family:Arial,sans-serif;
}

.footer{
●●font-family:Times New Roman,serif;
}

 

良い例では、共通のスタイルを.textクラスにまとめ、個別のスタイルを他のクラスで管理しています。

このように、共通のスタイルはまとめて管理することで、CSSの効率が上がります。

 

・HTMLの構造が不適切

HTMLの要素を適切にネスト（入れ子）せずに使うことがよくあります。

例えば、<ul>（リスト）タグの中に<div>タグを直接入れてしまうなどです。

これを適切に整理しないと、ページの表示に影響が出ます。

 

悪い例

<ul>
●●<div>アイテム1</div>
●●<div>アイテム</div>
</ul>

良い例

<ul>
●●<li>アイテム1</li>
●●<li>アイテム1</li>
</ul>

良い例では、<ul>タグの中に適切な<li>（リストアイテム）タグを使っています。

HTMLの正しい構造を守ることで、ブラウザが期待通りに表示します。

 

・CSSのオーバーライドミス

※オーバーライドミスとは…スタイルが他のスタイルによって上書きされてしまう現象です。

CSSでは、スタイルが競合する場合、後に書かれたスタイルが優先されます。

しかし、あまりにもスタイルが上書きされると、どのスタイルが適用されるか分かりづらくなり、バグの原因になります。

 

悪い例

.button {
　background-color: blue;
}
.button {
　background-color: red;
}

 

良い例

.button-blue{
　background-color: blue;
}
.button-red{
　background-color: red;
}

 

良い例では、異なる背景色を異なるクラスに分けて管理しています。

クラス名を工夫して、スタイルの重複や競合を避けることができます。

まとめ

コーディングスタイルで意識することは、完璧を目指すことではなく、一貫性を保つことです。

完璧なコードを書くことは確かに理想ですが、どんな小さなことでも「一貫している」ことが最も重要です。

一貫性を持たせることで、コードの可読性が格段に向上し、他の人と協力する際にもスムーズに作業を進められます。

 

完璧を求めすぎて悩むよりも、まずは自分のスタイルに一貫性を持たせて書くことが、着実に成長するための第一歩です。

少しずつでも良いので、インデントや命名規則、コメントの書き方などを意識し、改善していくことで、自然とコーディングが上達します。

最初は小さなミスやクセがあっても、少しずつ修正しながら続けていけば、気づいた時にはかなりの成長を感じるはずです。

一貫性を保つことが、初心者から脱却するための大切なステップになります。焦らず、自分のペースで進めていきましょう！

 

関連記事

資料ダウンロードはこちら

1,000本以上の広告を運用してきた代理店が教える『WEB広告運用3つの超基本』

WEB広告は、掲載場所や期間などが固定されている純広告とは違い、仮説検証を繰り返して、改善していく運用型の広告になります。こちらの資料ではその際、大切となる重要な３つの軸をご紹介！

フォームに必要事項をご記入いただくと、無料で資料ダウンロードが可能です。






    資料をダウンロード頂いた方に、弊社からご提案のメールかお電話をさせていただく場合がございます。以下のいずれかにチェックを入れてください。（複数可）

    プライバシーポリシーに同意いただけましたら、チェックをお入れください。

    （必須）