2.1.賢さよりも単純さ

過(guò)度に巧妙なコードや不可解なコードの作成は避けてください。シンプルで明確で退屈なコードは、チームメイトを混亂させる「賢い」コードよりも優(yōu)れていることがよくあります。

代わりに:

const d = (x) => x % 2 ? 'odd' : 'even'; // Confusing intent

これを?qū)g行します:

const getOddOrEven = (number) => number % 2 === 0 ? 'even' : 'odd';

2.2.命名が重要

• 変數(shù)名と関數(shù)名は、その目的を明確に説明する必要があります。
• 関數(shù) (fetchMovies、calculateTotal) には動(dòng)詞を使用し、変數(shù) (userList、movieDetails) には名詞を使用します。

2.3.メソッドと関數(shù)を小さく保つ

関數(shù)は 1 つのことと 1 つのことを適切に実行する必要があります。ボブおじさんは、可能な限り関數(shù)をコード行 5 ～ 10 行に制限することをお?jiǎng)幛幛筏蓼埂?br>
悪い:

function renderMovieCard(movie) {
  // fetch data, format, render JSX in one place
}

良い:

これを fetchMovieDetails、formatMovieData、renderMovieCard などの複數(shù)の関數(shù)に分割します。

3.懸念の分離 (単一責(zé)任の原則)

すべてのコードには、単一の明確な目的がある必要があります。

3.1.コンポーネント、ロジック、スタイル

• コンポーネント: レンダリング/UI のみを処理します。
• ロジック: 再利用可能なロジックを カスタム フック またはユーティリティにカプセル化します。
• スタイル: スタイルを CSS モジュール、ユーティリティファースト CSS (Tailwind など)、またはスタイル付きコンポーネントに抽象化します。

3.2.例: きれいに分離されたコンポーネント

悪い (ロジック、スタイル、レンダリングの密結(jié)合):

const d = (x) => x % 2 ? 'odd' : 'even'; // Confusing intent

4.コミュニケーション: 自己文書(shū)化コードを書(shū)く

The Clean Coder からインスピレーションを得て、最小限の外部ドキュメントを必要とするコードを目指します。

4.1.コードはストーリーを伝える必要があります

コードの各行は、本を読むように論理的に流れる必要があります。例:

• 明確に名前が付けられた変數(shù)に條件を抽象化します。
• 「マジックナンバー」を名前付き定數(shù)に置き換えます。

前 (わかりにくい):

const getOddOrEven = (number) => number % 2 === 0 ? 'even' : 'odd';

後 (読み取り可能なインテント):

function renderMovieCard(movie) {
  // fetch data, format, render JSX in one place
}

5.テスト: セーフティ ネット

The Clean Coderではテストが主な焦點(diǎn)であり、プロフェッショナルは常に自分の作業(yè)をテストすることを強(qiáng)調(diào)しています。

5.1.テストカバレッジ

少なくとも次のことを目指してください:

• 80% 単體テスト カバレッジ。
• 統(tǒng)合テスト または E2E テスト を使用して主要なユーザー ジャーニーをテストします。

5.2.意味のあるテストを作成する

優(yōu)れたテストでは、実裝の詳細(xì)ではなく、動(dòng)作と要件について説明します。

テスト例:

function MovieCard({ movie }) {
  const isBlockbuster = movie.revenue > 1000000;
  return (
    <div>



<p>Good (Separation of concerns):<br>
</p>

<pre class="brush:php;toolbar:false">// hooks/useIsBlockbuster.js
export const useIsBlockbuster = (revenue) => revenue > 1000000;

// components/MovieCard.js
import { useIsBlockbuster } from '../hooks/useIsBlockbuster';
import styles from './MovieCard.module.css';

function MovieCard({ movie }) {
  const isBlockbuster = useIsBlockbuster(movie.revenue);
  return <div className={isBlockbuster ? styles.blockbuster : styles.movie}>{movie.title}</div>;
}

5.3.テストの自動(dòng)化

• CI/CD パイプライン (GitHub Actions、CircleCI など) を使用してテストを自動(dòng)化します。
• パフォーマンス テストを?qū)g行してボトルネックを早期に特定します。

6.継続的な改善

ボブおじさんは、自分の技術(shù)を練習(xí)するの重要性を強(qiáng)調(diào)します。これはフロントエンド開(kāi)発者に當(dāng)てはまります:

6.1.容赦なくリファクタリングを行う

• コード、特に技術(shù)的負(fù)債のある領(lǐng)域を定期的に見(jiàn)直して改善します。
• ボーイスカウトのルールを適用します: 「コードベースは見(jiàn)つけたときよりもきれいなままにしておきます。」

6.2.新しいツールとテクニックを?qū)Wぶ

• React Server Components、エッジ レンダリング、AI 支援 UX などの最新のフロントエンド トレンドを常に最新の狀態(tài)に保ちます。

7.時(shí)間管理と集中力

プロフェッショナリズムとは、手を抜かずに時(shí)間通りに納品することを意味します。 The Clean Coder のアドバイスに従って、時(shí)間を効果的に管理してください。

7.1.反復(fù)作業(yè)

機(jī)能をより小さな段階的な成果物に分割します。

7.2.オーバーコミットを避ける

不當(dāng)な期限には「ノー」と言えるようになりましょう。代わりに、品質(zhì)を維持できる成果物について交渉してください。

8.ソフトスキル: コラボレーションとコミュニケーション

プロのプログラマーはチームプレイヤーです。これは、デザイナー、プロダクト マネージャー、バックエンド開(kāi)発者との連攜方法にも當(dāng)てはまります。

8.1.早めに、頻繁にコミュニケーションをとる

• 進(jìn)捗狀況を定期的に共有します。
• できるだけ早くブロッカーや課題を提起してください。

8.2.コードレビュー

ピアコードレビューに積極的に參加します。學(xué)習(xí)と改善の機(jī)會(huì)として活用してください。

9.フロントエンドのクリーンなアーキテクチャ

The Clean Coder のアーキテクチャ原則を適用して、コードベースが成長(zhǎng)しても保守可能であることを保証します。

9.1. UI を狀態(tài)管理から分離

• 一元化された狀態(tài)には、Redux Toolkit または Zustand を使用します。
• コンポーネント內(nèi)でローカル狀態(tài) (モーダル切り替えなど) を維持しますが、複雑な狀態(tài)ロジックを?qū)熡氓楗ぅ芝楗辘宋韦筏蓼埂?/li>

9.2.依存関係の注入を使用する

依存関係 (API やサービスなど) をハードコーディングするのではなく、小道具として渡します。これにより、テスト容易性が向上します。

10.決して學(xué)習(xí)をやめないでください

The Clean Coder の本質(zhì)は、プロフェッショナリズムは目的地ではなく旅であるということです。

• マスターを継続するための書(shū)籍:
  • 「クリーン アーキテクチャ」ロバート C. マーティン著。
  • 「JavaScript: The Good Parts」Douglas Crockford 著。
  • Martin Fowler 著「リファクタリング」
• 実踐練習(xí): 定期的に小規(guī)模なサイド プロジェクトを構(gòu)築するか、オープンソースに貢獻(xiàn)します。

最終的な感想

2025 年にマスター フロントエンド開(kāi)発者になるには、プロフェッショナリズム、クリーン コードの原則、継続的改善の考え方を受け入れることが重要です。これらのテクニックを毎日適用すると、時(shí)間が経つにつれて、コードに技術(shù)的な卓越性と職人技の両方が反映されるようになります。これらの概念を適用した実際のプロジェクトの內(nèi)訳をご希望の場(chǎng)合はお知らせください。

以上がコードをよりクリーンにするためのヒントをいくつか紹介します。の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。