ショッピングカート

カートに商品はありません

ショッピングカート

カートに商品はありません

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

オープンバイト
オープンバイト 10/09/2024
1 コメント コメント。

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

  • あなたのために:将来、コードを読んだり更新したりするのが簡単になります。
  • その他:コードを共有したり、チームで仕事をしたりする場合、他の人はわかりやすさを評価するでしょう。
  • ワードプレス:オープンソースなので、多くの人が貢献しています。標準規格がすべてを統一します。

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

あなたが大規模なチームの一員としてWordPressプロジェクトに取り組んでいるとします。ある人はバックエンドに、ある人はスタイリングに、ある人はアクセシビリティにと、全員がコードの異なる部分に貢献しています。一貫した標準がなければ、プロジェクトはすぐに混沌としてしまいます。コーディング標準はそれを保証します：

  • スムーズなコラボレーション:全員が同じルールに従うことで、開発者はお互いの仕事を読み、理解しやすくなります。
  • 少ないマージ競合:一貫性のないフォーマットは、変更をマージする際にコードの衝突を引き起こすことがよくあります。標準はこのような衝突を最小限に抑え、チームがより効率的に作業できるようにします。
  • より良いオンボーディング:プロジェクトに参加する新しい開発者は、標準化されたコーディングスタイルに従うことで、既存のコードを理解するために費やす時間を短縮し、迅速にスピードアップすることができます。

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

WordPress PHPコーディング標準

PHP は WordPress のコア言語です。PHP のコーディング標準に従うことで、WordPress とスムーズに統合し、他のユーザーにも理解しやすいコードを作成することができます。

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.自己閉鎖タグ：HTML5では、以下のようなvoid要素を自己閉鎖する必要はありません。 <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のコーディング標準に従っていることを確認するために、以下のツールの使用を検討してください：

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

避けるべき一般的な誤り

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

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

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

// 正しくない
echo $user_input；

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

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

すべてをまとめる

WordPressのコーディング標準に従って、PHP、HTML、CSSを組み合わせた例を見てみましょう。

例シンプルな 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 コミュニティの他の人があなたと協力しやすくなります。

覚えておいてください：

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

ハッピーコーディング！

カテゴリー コードスニペットと開発ヒント, 開発者向けヒント
タグ , , ,
オープンバイト
オープンバイト

関連記事

回答

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

レポート

ハラスメントまたはいじめ行為
成熟した、またはデリケートな内容を含みます。
誤解を招く、または虚偽の情報が含まれている場合
虐待的または軽蔑的な内容を含むもの
スパム、偽コンテンツ、または潜在的なマルウェアが含まれています。

ブロックメンバー？

このメンバーをブロックすることを確認してください。

もうできないでしょう：

  • ブロックされたメンバーの投稿を見る
  • 投稿でこのメンバーについて言及
  • このメンバーをグループに招待
  • このメンバーにメッセージ
  • このメンバーを接続として追加します。

ご注意ください： この操作により、この会員も接続から削除され、サイト管理者にレポートが送信されます。 このプロセスが完了するまで数分かかります。

レポート

すでに報告済みです .