✅ コーディングルール：インデントや命名の基本をおさえよう！
目次[-]
🔧 なぜコーディングルールが大事？
- 他の人が読みやすくなる
- 自分のコードをあとで見直しやすくなる
- チーム開発でミスが減る
✨ インデントルールを守ろう！
<!-- OK：子要素をスペース2〜4でインデント -->
<ul>
<li>りんご</li>
<li>バナナ</li>
</ul>
- スペース2または4 で統一
- タブは非推奨（環境依存でズレやすい）
- 「自分ルール」ではなく「プロジェクトで統一」するのが基本！
🛠 VS Codeで自動整形しよう！
✅ おすすめプラグイン：Prettier – Code formatter
- 自動でインデント、改行、クォーテーションなどを整えてくれる
- 複数人で開発するときにも非常に便利！
💡 導入手順（簡単！）
- VS Codeを開く
- サイドバーの拡張機能（四角いアイコン）をクリック
- 検索で「Prettier」と入力 → インストール
- 設定 → 「Format On Save（保存時に整形）」をオンに
// settings.json の一例
{
"editor.formatOnSave": true,
"prettier.tabWidth": 2,
"prettier.useTabs": false
}
これで保存するだけで自動インデント整形✨
✅ クラス名やIDの命名ルール
<!-- NG：意味がわからない -->
<div class="box1"></div>
<!-- OK：意味が伝わる -->
<div class="news-list"></div>
📌 命名のポイント
- ケバブケース（小文字 + ハイフン） がおすすめ：
header-menu - 役割や中身がわかる名前にする
- 数字だけ、略語だけ、英語の造語は避ける
✅ まとめ
| 項目 | ポイント |
|---|---|
| インデント | スペース2～4で統一する |
| VS Code補助 | Prettierで自動整形するのがおすすめ |
| 命名ルール | ケバブケースで意味のある名前を付ける |
読みやすく、整理されたコードは、保守もしやすくエラーも減らせます。
最初のうちから「正しい書き方」をクセにしておきましょう！
✉️ あなたのリクエスト教えてください！
「この記事わかりやすかった！」
「他にもこんな記事書いてほしい！」
そんな声を、ぜひXのDMで教えてください！😊📩
できるだけリクエストにお応えして、今後の記事作成に活かしていきます！
▶️ Xもフォローしてもらえるとめちゃくちゃ嬉しいです！
コメントを残す