コーディング・スタンダードの重要性の理解

オープンバイト

3か月前

コーディング標準は、プログラミングの文法規則のようなものです。適切な文法が書かれた言語を明確で理解しやすくするように、コーディング標準はあなたのコードを一貫性のある読みやすいものにします。

あなたのために: You’ll find it easier to read and update your code in the future.
その他:コードを共有したり、チームで仕事をしたりする場合、他の人はわかりやすさを評価するでしょう。
ワードプレス: Since it’s open-source, many people contribute. Standards keep everything unified.

チームワークにおけるコーディング標準の実世界での応用

Imagine you’re working on a WordPress project as part of a large team. Everyone contributes different parts of the code—some focus on the backend, others on styling, and others on accessibility. Without consistent standards, the project can become chaotic quickly. Coding standards ensure that:

スムーズなコラボレーション: When everyone follows the same rules, it’s easier for developers to read and understand each other’s work.
少ないマージ競合:一貫性のないフォーマットは、変更をマージする際にコードの衝突を引き起こすことがよくあります。標準はこのような衝突を最小限に抑え、チームがより効率的に作業できるようにします。
より良いオンボーディング:プロジェクトに参加する新しい開発者は、標準化されたコーディングスタイルに従うことで、既存のコードを理解するために費やす時間を短縮し、迅速にスピードアップすることができます。

ある開発者がプロジェクトから離れ、新しいチームメンバーがそのパートを引き継ぐ必要があるというシナリオを考えてみましょう。前の開発者が適切なコーディング標準に従っていれば、新しいメンバーはすぐにプロジェクトに参加し、コードを保守し、理解するのにあまり時間をかけずに改良を加えることができます。

WordPress PHPコーディング標準

PHP is WordPress’s core language. Following the PHP coding standards ensures that your code integrates smoothly with WordPress and is easy for others to understand.

1.PHPタグ：常に完全なPHPタグを使用してください。 <?php ?.のような短いタグは避けてください。 <? ?> すべてのサーバーで動作するとは限らないからです。

<?php
// Your PHP code here
?>

2.ファイルエンコーディング：PHPファイルをバイトオーダーマーク(BOM)なしでUTF-8で保存します。

3.改行：Unixスタイルの行末 (\n).

4.インデントインデントには（スペースではなく）タブを使用してください。これにより、異なるエディタ間でコードの一貫性が保たれます。

命名規則

1.機能と方法：小文字とアンダースコアを使用してください。

function get_user_data( $user_id ) { // 関数コード
    // 関数コード
}

2.変数：小文字とアンダースコア。

$user_name = 'John Doe'；

3.Classes：大文字の単語（StudlyCaps）を使用します。

クラス UserProfile {
// クラスコード
}

4.定数：すべてアンダースコア付きの大文字。

define( 'MAX_UPLOAD_SIZE', 1048576 )；

空白とインデント

1.カンマの後のスペースパラメータや配列の項目を列挙するときは、カンマの後にスペースを入れてください。

$colors = array( 'red', 'green', 'blue' )；

2.制御構造：制御キーワードと開始括弧の間にはスペースを入れてください。

if ( $condition ) {
    // コード
}

3.演算子：代入演算子、比較演算子、論理演算子の周りにはスペースを入れてください。

$total = $price + $tax；
もし( $total > 100 ) {。
    // コード
}

制御構造

1.ブレースの配置Allmanスタイルを使用し、開始ブレースを改行します。

if ( $condition )
{
    // コード
}
else
{
    // コード
}

2.elseif** キーワード使用 elseif ではなく でなければ.

if ( $condition )
{
    // コード
}
elseif ( $other_condition )
{
    // コード
}

3.依田条件：定数またはリテラルを比較の左辺に置きます。

if ( true === $is_active )
{
    // コード
}

これは、偶発的な割り当て(= ではなく ==).

ベストプラクティス

1.省略記法のPHPタグは避けましょう：より良い互換性のために、常に完全なタグを使用してください。

2.関数の引数：明確で説明的な変数名を使用してください。

関数calculate_total( $subtotal, $tax_rate ) { // 合計を計算します。
    // コード
}

3.入力のサニタイズユーザー入力のサニタイズとバリデーションを常に行いましょう。

$user_id = intval( $_GET['user_id'] );

4.出力のエスケープデータを出力する前に、セキュリティ上の問題を防ぐためにエスケープしてください。

echo esc_html( $user_name )；

5.コメントコメントを使用して、複雑なロジックや重要な注意事項を説明します。

// 税込み合計金額を計算

インラインドキュメンテーション規格

適切な文書化によって、コードの理解と保守が容易になります。

1.関数のコメント各関数の前にコメントブロックを入れてください。

/**
 * 税込みの合計金額を計算します。
 *
 * @param float $subtotal 小計金額です。
 * @param float $tax_rate 税率を小数で指定します。
 * 合計金額です。
 */
function calculate_total( $subtotal, $tax_rate ) { // 関数コード
    // 関数コード
}

2.パラメータと戻り値の型各パラメータと戻り値の型を指定します。

3.インライン・コメント：コードの複雑な部分を説明するために、控えめに使ってください。

$discount = 0.0; // ディスカウント変数の初期化

WordPressにおけるHTMLコーディング標準

HTMLはウェブコンテンツのバックボーンです。きれいでセマンティックなHTMLを書くことは、アクセシビリティとSEOのために非常に重要です。

一般ガイドライン

1.Doctype：常にHTML5のdoctypeで開始します。

<!DOCTYPE html>

2.言語属性：で言語を指定します。 <html> タグを使用しています。

<html lang="en">

3.文字エンコードUTF-8を使用してください。

を使用してください。

HTMLの構造化

1.セマンティック要素：次のようなHTML5のセマンティック要素を使用します。 <ヘッダー, <ナビ, <セクション, <記事, <フッター.

<ヘッダー

2.インデント入れ子になった要素をインデントするには、2つのスペース（またはタブ）を使用します。


    アイテム1</li
    アイテム2
</ul

3.属性：属性名には小文字を使用し、属性値は二重引用符で囲みます。

<img src="image.jpg" alt="素晴らしい写真">

ベストプラクティス

1.アクセシビリティ常に以下を含みます。 アルト 属性を画像に使用し、必要に応じてARIAロールを使用します。

<img src="logo.png" alt="会社ロゴ">

2.Self-Closing Tags: For HTML5, you don’t need to self-close void elements like <br>, <img>, <入力.

<br>
<img src="image.jpg" alt="説明">

3.コメント必要であれば、HTMLコメントを使ってコードのセクションを説明してください。

WordPressにおけるCSSコーディング標準

CSSはウェブサイトのプレゼンテーションをコントロールします。きれいで効率的なCSSを記述することで、サイトの見栄えが良くなり、読み込みも速くなります。

一般ガイドライン

1.構文：セレクタ、中括弧、プロパティと値のペア。

.class-selector {
    プロパティ: 値；
}

2.インデント罫線内のインデントには2つのスペース（またはタブ）を使用してください。

3.コメントセクションを区切ったり、複雑なルールを説明したりするにはコメントを使います。

/* ヘッダスタイル */
ヘッダー
    /* プロパティ */
}

クリーンなCSSの記述

1.セレクタ名：小文字とハイフンを使用してください。

.main-navigation {
    /* スタイル */
}

2.スタイリングのためのIDは避けましょう：特定性を低く保つために、IDの代わりにクラスを使いましょう。

/* 正しい */
.button {
    /* スタイル */
}

/* 避ける */
#submit-ボタン { /* スタイル
    /* スタイル */
}

3.省略記法プロパティ：可能であれば、省略記法のプロパティを使用してください。

/* 正しい */
margin: 10px 5px 15px 0；

/* 拡大 */
margin-top: 10px；
margin-right: 5px；
margin-bottom：margin-bottom: 15px；
margin-left: 0；

4.ゼロ値：ゼロ値の単位を省略。

padding：0;

ベストプラクティス

1.スタイルの整理レイアウト、タイポグラフィ、カラーなど、関連するスタイルをグループ化します。

2.セクションのコメントコメントを使用して、スタイルシートをセクションに分割します。

/* タイポグラフィ / / カラー / / レイアウト */

3.Avoid !important: の代わりに具体性を使用します。 重要 でスタイルを上書きします。

4.メディアクエリメディアクエリは、関連するスタイルの近く、または別のセクションに配置します。

メディア (最大幅: 768px) { {.
    .main-navigation {
        display: none；
    }
}

推奨ツールとプラグイン

WordPressのコーディング標準に従っていることを確認するために、以下のツールの使用を検討してください：

PHP CodeSniffer:このツールは、WordPressのPHPコーディング標準の違反を検出するのに役立ちます。WordPress Coding Standards ルールセットと一緒に使うことで、コードを自動的にチェックすることができます。
エディタコンフィグ:多くのIDEやコードエディタは.editorconfigファイルをサポートしており、異なるエディタや開発者間で一貫したコーディングスタイルを維持するのに役立ちます。
ESLint と Stylelint:これらのツールを使ってJavaScriptとCSSのlintを行い、よくある間違いを見つけ、一貫性を強化しましょう。
もっとかわいく:HTML、CSS、JavaScriptに一貫したスタイルを自動的に適用できるコードフォーマッター。
VSCode拡張機能:
- PHPインテレフェンセ:インテリジェントなオートコンプリートと機能ヒンティングを提供し、潜在的な問題を検出します。
- ワードプレス・スニペット:WordPressでよく使われる関数やスニペットを集め、開発をスピードアップ。

避けるべき一般的な誤り

1.一貫性のないネーミング： camelCaseとsnake_caseを混在させると混乱が生じますので、プロジェクト全体を通して所定の命名規則を守ってください。

2.出力をエスケープしないXSSのようなセキュリティの脆弱性を防ぐために、ユーザーが作成したコンテンツを出力する前に必ずエスケープしてください。

// 正しい
echo esc_html( $user_input )；

// 正しくない
echo $user_input；

3.グローバルの不適切な使用:必要な場合を除き、グローバル変数の使用は避けましょう。変数を関数に明示的に渡すことで、コードをモジュール化し、テストしやすくします。

4.インラインスタイルの使用:インラインスタイルは、CSSの保守やオーバーライドを困難にするため、避けるべきです。常に外部スタイルシートを使用してください。

すべてをまとめる

Let’s look at an example that combines PHP, HTML, and CSS following WordPress coding standards.

例シンプルな PHP テンプレート

PHPファイル (template-example.php):

<?php
/**
 * Template Name: Example Template
 *
 * A template to demonstrate coding standards.
 *
 * @package WordPress
 * @subpackage Your_Theme
 */

get_header(); ?>

<main id="main-content" class="site-main">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post(); ?>

            <article id="post-<?php the_ID(); ?>" no numeric noise key 1006>
                <header class="entry-header">
                    <?php the_title( '<h1>', '</h1>' ); ?>
                </header>

                <div class="entry-content">
                    <?php the_content(); ?>
                </div>
            </article>

        <?php endwhile;
    else : ?>

        <p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'your-text-domain' ); ?></p>

    <?php endif; ?>
</main>

<?php get_footer(); ?>

CSSファイルスタイル.css):

/* メインコンテンツのスタイル */
.site-main {
    margin: 0 auto；
    max-width: 800px；
    padding：20px；
}

.entry-header h1 {
    font-size: 2em；
    margin-bottom：0.5em；
}

.entry-content {
    line-height: 1.6；
}

その他のリソース

WordPress開発者ハンドブック: 開発者.wordpress.org
PHPドキュメント: phpネット
Mozilla Developer Network (MDN) ウェブドキュメント:
W3Cマークアップ検証サービス: バリデータ
WordPressコーディング標準:

結論

WordPress のコーディング標準に従うことで、あなたのコードはクリーンで一貫性があり、プロフェッショナルなものになります。これにより、プロジェクトを維持しやすくなり、WordPress コミュニティの他の人があなたと協力しやすくなります。

覚えておいてください：

習うより慣れろ:これらの基準に従ってコーディングすればするほど、より自然になります。
最新情報:コーディングの標準は進化していくので、WordPressの公式ドキュメントに注目してください。
助けを求める:説明が必要な場合は、WordPressのコミュニティはフレンドリーで喜んで助けてくれます。

ハッピーコーディング！