フロントエンド開発の実践: 保守可能で効率的でエレガントなコードの作成

導入

フロントエンド開発は急速に発展している分野であり、さまざまな新しいテクノロジやツールが次々と登場するにつれて、コードを保守可能、効率的、洗練されたものに保つことがますます重要になっています。この記事では、フロントエンド開発のベストプラクティスと規律のいくつかと、コード例を使用してそれらを実装する方法について詳しく説明します。

コーディングスタイル

インデントとスペース

インデントには 2 つまたは 4 つのスペースを使用し、タブは使用しないでください。

// 好的
function goodExample() {
    
    
  let x = 1;
  if (x > 0) {
    
    
    console.log("Positive");
  }
}
// 不好的
function badExample() {
    
    
	let x = 1;
	if (x > 0) {
    
    
		console.log("Positive");
	}
}

括弧とセミコロン

ステートメントの最後には必ずセミコロンを追加し、左括弧の前にはスペースを追加してください。

// 好的
if (condition) {
    
    
  // code
}
// 不好的
if(condition){
    
    
  // code
}

ディレクトリ構造

明確なディレクトリ構造により、コードの可読性と保守性が向上します。

my-app/
|-- src/
|   |-- components/
|   |-- containers/
|   |-- utils/
|-- public/
|-- package.json
|-- README.md

命名規則

変数の名前付け

命名法を使用しますcamelCase。

// 好的
let myVariable = 1;
// 不好的
let my_variable = 1;

関数の名前付け

動詞と名詞の組み合わせを使用します。

// 好的
function fetchData() {
    
    
  // code
}
// 不好的
function data() {
    
    
  // code
}

メモとドキュメント

一行コメント

単一行のコメントに使用します//。

// 这是一个单行注释

複数行のコメント

/* */複数行のコメントを作成するために使用します。

/*
这是一个多行注释
*/

モジュール性とコンポーネント化

コードの編成には ES6 モジュールまたは CommonJS モジュールを使用します。

// utils.js
export function add(a, b) {
    
    
  return a + b;
}
// main.js
import {
    
     add } from './utils';

パフォーマンスの最適化

画像の遅延読み込み

IntersectionObserver画像の遅延読み込みを使用します。

const observer = new IntersectionObserver((entries) => {
    
    
  entries.forEach((entry) => {
    
    
    if (entry.isIntersecting) {
    
    
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});
document.querySelectorAll('img').forEach((img) => {
    
    
  observer.observe(img);
});

バージョン管理

バージョン管理に Git を使用し、Git Flowワークフローに従います。

# 创建一个新分支
git checkout -b feature/new-feature
# 提交更改
git add .
git commit -m "Add new feature"
# 推送到远程仓库
git push origin feature/new-feature

テスト

単体テストには Jest または Mocha を使用します。

// sum.test.js
const sum = require('./sum');
test('adds 1 + 2 to equal 3', () => {
    
    
  expect(sum(1, 2)).toBe(3);
});

要約する

フロントエンド開発仕様に従うと、コードの保守性と可読性が向上するだけでなく、チームのコラボレーションの効率も向上します。この記事が有益な情報とガイダンスを提供することを願っています。

お読みいただきありがとうございます。ご質問やご提案がございましたら、お気軽にご連絡ください。