みなさん、こんにちは！
誰でも出来るWeb制作の方法
を発信している
よっしーと申します！
この記事を読んでいる方は、
WEB制作などコーディングの勉強を
始めたばかりの方が多いでしょう。
私がカリキュラムをこなしていた時は
理解してコードを書くことだけで
手いっぱいでしたが、
ググって見た目を整えたり、
コードを書いてPRを出した時に
「ただコード書くだけじゃダメじゃん…」
そう感じた理由が
「コードは他の人も見る」
ということです！
そこで
勉強中の初心者からでも始められる
コーディング時の注意点について
まとめました！
1.なぜコードを見る人を意識するの？
私がコードを見る人を
意識するようになったきっかけは、
メンターからフィードバックをもらった時です。
自分の修正後のコードを見ると、
短縮できるコードがたくさんあるのが
分かりました。
その時気づいたことが
2つあります。
1つ目が
「無理やり変えてごめんなさい！！！」
ということ。
課題に沿ったコードでも
すごく見にくかっただろうなと思います。
2つ目に気づいたことは
「無駄が多すぎる…」
ということです。
見た目は整っているものの
中身を見るとぐちゃぐちゃで
コードだけだとどうなっているのか
分かりませんでした…
そんなことがあったので、
みなさんも他の人を意識しないと、
作業効率が下がってしまいます…。
しかしこのnoteの方法を
実践していただくことで、
作業の効率化だけでなく、
「動くコード」から「見やすいコード」に
することができるようになります。
そんなお得な方法を
これから解説していきます！↓
2.押さえておくべきポイント
冒頭でもお話しましたが、
「コードは他の人も見る」
ということが
重要になってきます！
そもそも見やすいコードとは？
「コードは他の人も見る」
とお伝えましたが、
見やすいコードを書くには
どんなスキルが必要だと思いますか？
まず知って欲しいのが
・コメントを書く
・インデントを揃える
・クラスの命名を分かりやすくする
①コメントを書く
私たち本人から見ても
わからないコードがあるのは
当たり前です。
しかし、
「ここだけを見ればわかる」
というものを残せたら
「分かりやすい！」
とメンターと自分
お互いのためになります
②インデントを揃える
インデントがそろってなかったら
どの内容がどのタグの中に
属しているのか分かりません。
その時はブラウザでの表示が
きれいで手直しの必要がなくても
今後手直しする可能性は
大いにあります。
つまり、
必ず誰かが困ります
自分のコードを
自分やメンターが見て、
「わかりづらいコードだな…」
「この人のコード添削したくない…」
なんて思われたら、
メンタルズタボロで
もうコードなんて書きたくなくなります…。
③命名を分かりやすくする
なぜ未来の自分を意識するかというと
忘れるからです！
作業の続きを別の日にやると、
「このコードどこのコードだっけ？」
「なんでこんなこと書いてあるんだ？」
と、パッと見てわかりません。
数年後になると、
余計にさっぱりわからないでしょう。
作業の効率化のために、
未来の自分を意識する必要があります！
見やすいコーディング方法3厳選！
「他の人」を意識しながら
コーディングするには
どうしたらいいのか？
先ほど解説した
3つのポイントを
詳しく見ていきましょう！
コメントをつける（難易度☆）
コーディングの勉強をしていると、
ただコードを連ねてしまうことは
ないでしょうか？
（私はそうでした…）
そうすると、
振り返った時や第三者が見た時に
読み解かないと
何が書いてあるかわかりません。
読み解く時間って
結構かかるんですよね…。
突然ですが、例題です。
下記は簡易的なHTMLコードですが、
何について書いてあるか
わかりますか？
<div class="content1">
<p>さくら</p>
</div>
<div class="content2">
<p>おもしろい</p>
</div>「さくら」ってお花？人間？
「おもしろい」って何が？
なんのこっちゃ、ですよね。
それではコメントを入れましょう。
<!-- 名前 -->
<div class="main-content">
<p>さくら</p>
</div>
<!-- 感想 -->
<div class="sub-content">
<p>おもしろい</p>
</div>
コメントアウト（Ctrl + /）することで、
パッと見て何が書いてあるのか
わかりやすくなりました。
短いコードでもわかり辛いものですから、
たくさんコメントを入れて
第三者にもわかりやすいものにしましょう！
インデントを揃える（難易度☆☆）
「インデント」という単語を
初めて聞く方もいるかもしれませんが、
こういったものです↓
インデントとは、HTMLやCSSなどの
コードを書くときに、階層構造に合わせて
行の先頭にスペースを入れることです
言語化すると難しいですが、
別に難しいことはありません。
「段を揃える」
それだけです。
段を揃えるだけって
簡単そうに思えますが
意外と意識してないとズレます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>インデントの例</title>
</head>
<body>
<header>
<h1>私のポートフォリオ</h1>
</header>
<main>
<section>
<h2>自己紹介</h2>
<p>こんにちは! よっしーです。よろしくお願いします！</p>
</section>
</main>
<footer>
<p>© 2025 My Site</p>
</footer>
</body>
</html>上記のようなコードが
インデントが揃った見やすいコードです。
構成がすごく分かりやすいですよね！
逆に揃っていないと…
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>インデントの例</title>
</head>
<body>
<header>
<h1>私のポートフォリオ</h1>
</header>
<main>
<section>
<h2>自己紹介</h2>
<p>こんにちは! よっしーです。よろしくお願いします！</p>
</section>
</main>
<footer>
<p>© 2025 My Site</p>
</footer>
</body>
</html>
このようにタグのインデントが
一列になって階層がよく分からない
といった問題が起きます。
タグのインデントを揃えないと
分かりにくくなるので
コードの修正がしにくいです。
対策としては、VSCodeの拡張機能で
保存した時に自動的に整形してくれる
機能があるので利用しましょう。
インデントが揃っていないだけで
修正箇所がわからないといった
ミスになりかねません。
また、コーディング中に
インデントを揃えるときは
タブキーを利用しましょう
命名規則に合わせる（難易度☆☆☆）
「命名規約」という単語を
初めて聞く方もいるかもしれないので
解説します。
命名規約（命名規則）とは、
ファイルの名前や
HTMLのclass属性の名前の付け方など、
コーディングする時に用いる
それぞれの名前付けに規則性を持たせること。
言語化すると難しいですが、
別に難しいことはありません。
「名前を揃える」
それだけです。
ただ名前の揃え方にも
種類が5つあります。
一つ目はコンスタントケースです。
USER_NAMEというように
すべて大文字にして
単語をアンダーバーでつなぎます
二つ目はパスカルケースです。
UserNameというように
単語の頭文字を
大文字にしてつなぎます。
三つ目はキャメルケースケースです
userNameというように
最初の単語以外の
頭文字を大文字にします。
四つ目のスネークケースです。
user_nameというように
単語同士をアンダーバーでつなぎます。
五つ目はケバブケースです。
user-nameというように
単語同士をハイフンでつなぎます。
5つ紹介しましたが、
HTMLのクラス名によく使われるのは
ケバブケースです。
<コードの例>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ケバブケースの例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main-container">
<h1 class="page-title">ようこそ！</h1>
<p class="welcome-message">このページはケバブケースの例です。</p>
</div>
</body>
</html>上記のコードのmain-container
のようにハイフンでつながっている
クラス名がケバブケースです。
プログラミング言語によって使う
ケースが異なるので
使い分けていきましょう。
3.さいごに
コーディングの注意点について
いかがだったでしょうか？
まずは「なぜ気にするのか」を考えて、
「どのように気をつけていくのか」
徐々に考えていきましょう！
難しい内容もあったかと思いますが、
まずはコメントをつけるところから
始めてみましょう！
コメントを書いたら、
その行で「Ctrl + /」を押すだけです！
この記事を読んで
・もっと注意点を知りたい
・やり方がわからない
・うまく反映されなくて困っている
という方は
公式LINEで相談を受け付けています！
それからプログラミング
勉強している方は、
この合言葉を覚えておいてください。
「覚えるよりも理解する」
これを絶対に忘れないでください。
現場で働く人は
すべて覚えているのではなく、
ググりながら仕事をしています。
プログラミングは
暗記ゲーではないので、
もっと気楽に積み上げていきましょう！
0件のコメント