私が守る4つのコーディング原則〜より良いコードを書くために〜

2024.02.28

はじめに

コーディングとは、さまざまなブラウザとコミュニケーションするための手段と考えています。

ブラウザは人間と一緒で、いろいろな人（？）がいて、見た目も違うし、せっかちな人もいれば、のんびり屋さんもいます。

それぞれが異なる特徴があり、私が書いた同じコードでも、ブラウザによって受け取り方が違うようで表示のされ方が異なることもしばしば。

そんな中で、私が守っているコーディング原則を紹介します。

キレイなレポート（HTML）を書く

HTMLは、ホームページを作るための言葉です。まるで料理でいう「材料」のようなもの。コレがなければ、ホームページを作ることはできません！

でも、ただ材料を並べればいいというわけではありません。おいしい料理を作るには、材料を上手に組み合わせることが大切です。

HTMLも同じです。ただ単に機能するだけのHTMLではなく、キレイで、整理された、意味的に正しいHTMLを書くことが大切です。

そうすることで、

ユーザーにとって見やすく使いやすいホームページになる
誰でも見やすいホームページになる
後から修正や追加がしやすいホームページになる

というメリットがあります。

適切なタグの使用

HTMLタグは、ホームページの骨組みを作るための大切な部品です。まるで、レゴブロックで家を作るようなイメージです！

それぞれの部品には役割があり、例えば、

<h1> は、一番大きな見出しを表す部品
<h2> は、<h1> より少し小さな見出しを表す部品
<p> は、段落を表す部品

といったように、たくさんの種類があります。

適切な部品を使うことで、ホームページの内容がわかりやすく、読みやすくなるのです。

HTMLコードの例

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>キレイなHTMLの例</title>
</head>
<body>
  <header>
    <h1>メインタイトル</h1>
  </header>
  <section>
    <h2>サブセクション</h2>
    <p>ここには重要な情報が含まれます。</p>
  </section>
  <footer>
    <p>© 2024 私のウェブサイト</p>
  </footer>
</body>
</html>

意味的に正しいマークアップ

HTML5では、より意味的に分かりやすい新しい部品が追加されました。

例えば、

<article> は、記事を表す部品
<section> は、セクション（記事など）を表す部品
<nav> は、ナビゲーション（メニューなど）を表す部品
<header> は、ヘッダー部分（ロゴなどを入れることが多い）
<footer> は、フッター部分（著作権表示などを入れることが多い）

といったように、それぞれの部品が役割を持ち、より意味的に分かりやすくホームページを作ることができます。

これらの部品を使うことで、

ホームページの内容がより明確になり、読みやすくなる
検索エンジンがホームページの内容を理解しやすくなる

というメリットがあります。

誰でも使いやすいホームページを目指して

アクセシビリティとは、すべての人がホームページを使いやすくすることを考えることです。

例えば、視覚障害のある人がホームページを利用する場合は、画面に表示されている文字を読むことができません。

そこで、画像には代替テキストという説明文を記述することで、視覚障害のある人でも画像の内容を理解できるようにする必要があります。

<img src="example.jpg" alt="説明的なテキスト">

他にも、

文字サイズを大きくしたり、読みやすいフォントを使ったりする
音声読み上げソフトに対応させる
簡単な操作でホームページを利用できるようにする

といった工夫をすることで、より多くの人が使いやすいホームページを作ることができます。

インデントの一貫性を保つこと

コードを書くとき、インデントという方法を使って、コードをスッキリと見やすくすることができます。これは、まるで段落を空けるように、コードの行頭を一定量だけ空けることです。

インデントには、

コードの構造を分かりやすくする
コードを読みやすくする
チームで開発するときに、コードを共有しやすくする

といったメリットがあります。

インデントのルール

インデントには、いくつかルールがあります。

インデントの幅: 2スペースか4スペースのどちらかを選ぶ
プロジェクト全体で統一する: 同じプロジェクトの中では、すべてのファイルで同じインデントの幅を使う
一貫性を保つ: すべてのコード行で、同じインデント幅を使う

インデントのツール

多くのテキストエディタや統合開発環境（IDE）では、インデント機能が備わっています。これらのツールを使うと、手動でインデントを設定することなく、自動的にインデントを適用することができます。

インデントは、コードを分かりやすく、読みやすく、共有しやすいようにするための大切なルールです。

整然と並んだコードは、まるで美しい楽譜のように見えますよ！

コメントを書く

プログラミングでコードを書くとき、コメントという方法を使って、コードの説明や補足情報を書き込むことができます。

コメントは、単なるメモ書きではなく、コードを理解するための重要なツールです。

適切なコメントを書き込むことで、

ほかの開発者がコードを読んだときに、何をしようとしているのか理解しやすくなる
将来の自分がコードを読んだときに、何を考えて書いたのか思い出せる
コードのメンテナンスや修正が容易になる

といったメリットがあります。

コメントの例

コードが何をするのか説明

// ユーザーの入力を検証し、エラーがあればユーザーに通知する
function validateUserInput(input) {
  ...
}

難解な部分や特定の選択がされた理由を説明

// パフォーマンス最適化のために、一時的にキャッシュを使用
if (cacheExists(input)) {
  return getCachedResult(input);
}

将来の改善点や現在の制限を明示

// ToDo: この関数は将来的に非同期処理に変更する予定
function fetchData() {
  ...
}

サクサク快適！表示速度を意識する！

ホームページの表示速度は、ユーザーにとってとても重要なポイントです。ページの読み込みが遅いと、ユーザーはイライラして、せっかくのホームページを見ずに離れてしまうかもしれません。

だから、常に表示速度を意識して、サクサク読み込めるようにすることが大切です！

なぜ表示速度が重要なのか？

ユーザー満足度アップ

ページの読み込みが速いと、ユーザーは快適にサイトを閲覧でき、滞在時間も長くなります。

検索エンジン対策

Googleなどの検索エンジンは、表示速度を検索結果のランキングの指標としています。つまり、表示速度が速いほど、検索結果で上位に表示される可能性が高くなるんです！

表示速度を上げる方法

画像の軽量化

画像ファイルは、ページ全体の容量を大きく左右します。画像サイズを適切に圧縮したり、適切な形式（例：JPEG、PNG、WebP）を選択することで、読み込み時間を短縮できます。

CSSとJavaScriptの圧縮

CSSファイルやJavaScriptファイルを圧縮し、不要なコードを削除することで、ファイルサイズを減らし、読み込み速度を向上させます。

ブラウザキャッシュの活用

ブラウザキャッシュを適切に設定することで、再訪問時の読み込み速度を大幅に向上させることができます。

非同期ローディング

JavaScriptやCSSを非同期で読み込むことで、ページの主要コンテンツの読み込みを妨げることなく、必要なリソースを読み込むことができます。

これらの方法を組み合わせることで、ユーザーの満足度を向上させ、ホームページ全体の利便性を高めることができます。

まとめ

この記事では、私がより良いコードを書くために守っている4つの原則を紹介しました。

キレイなレポート（HTML）を書く

HTMLはホームページを作るための言葉です。材料を上手に組み合わせるように、適切なタグと意味的に正しいマークアップを使い、見やすく、使いやすいホームページを目指します。

インデントで読みやすいコードに

コードの構造をわかりやすくするためにインデントルールを統一し、整然と並んだコードを目指します。

コメントで理解を深める

コードの意図や動作を説明するコメントを記述することで、コードの理解度を高め、メンテナンス性を向上させます。

サクサク快適！表示速度を意識する

画像の軽量化、CSSとJavaScriptの圧縮、ブラウザキャッシュの活用など、様々な方法で表示速度を最適化し、ユーザーにとって快適なサイトを提供します。

これらの原則を意識することで、より分かりやすく、保守しやすい、そしてユーザーにとって快適なコードを作ることができます。

ところで、コーディング中はカフェラテを飲みながら作業すると、なぜかうまく書けている気がしませんか？

Blog