すべてのウェブ開発者が知っておくべき61のこと

元の URL: http://stackoverflow.com/questions/72394

翻訳者：阮一峰

1. インターフェースとユーザーエクスペリエンス

1.1

主要なブラウザが Web 標準をどのように実装しているかを理解し、サイトがすべての主要なブラウザで適切に実行されることを確認します。少なくとも次のエンジンをテストする必要があります: Gecko ( Firefoxで使用)、Webkit ( Safari 、 Chrome 、および一部のモバイル ブラウザーで使用)、IE (テスト用に Microsoft がリリースしたアプリケーション互換性 VPC イメージを使用できます)、およびOpera 。同時に、異なるオペレーティング システムも、ブラウザーが Web サイトをレンダリングする方法に影響を与える可能性があります。

1.2

ブラウザ以外にも、携帯電話、スクリーン リーダー、検索エンジンなど、Web サイトを使用する方法は他にもあります。このような状況で Web サイトがどのように機能するかを知っておく必要があります。 MobiForge は、モバイル Web サイトの開発に関する関連知識を提供します。

1.3

ユーザーへの影響を最小限に抑えながら Web サイトをアップグレードする方法を理解します。一般的に言えば、バージョン管理システム (CVS、Subversion、Git など) とデータ バックアップ メカニズム (バックアップ) が必要です。

1.4

ユーザーにわかりにくいエラー メッセージが表示されないようにしてください。

1.5

ユーザーの電子メール アドレスを、少なくともプレーン テキストで直接表示しないでください。

1.6

ウェブサイトに適切な使用制限を設定し、しきい値を超えると自動的にサービスを停止します。 (これはウェブサイトのセキュリティにも関係します。)

1.7

Web ページのプログレッシブ エンハンスメントを実装する方法を理解します。

1.8

ユーザーが POST リクエストを送信すると、常に別の Web ページにリダイレクトされます。

1.9

ウェブサイトのアクセシビリティ（障害を持つ人がどのように使用できるか）を忘れないでください。米国のサイトでは、これが法的な要件となる場合があります。 WAI-ARIAにはこれに関する優れた参考資料があります。

2. セキュリティ

2.1

ウェブサイトのセキュリティに関する包括的なガイダンスを提供するOWASP 開発者ガイドをお読みください。

2.2

SQL インジェクションとその防止方法について理解します。

2.3

ユーザーが送信したデータを決して信頼しないでください (Cookie もクライアントによって送信されます)。

2.4

ユーザーのパスワードはプレーンテキストで保存せず、ハッシュ形式で保存してください。

2.5

ユーザー認証システムに過度の自信を持たないでください。脆弱性に気付かないうちに簡単に侵害される可能性があります。

2.6

クレジットカードの処理方法を学びます。

2.7

ログインページや機密情報を扱うその他のページではSSL / HTTPSを使用します。

2.8

セッションハイジャックに対処する方法を知る。

2.9

クロスサイトスクリプティング (XSS) を回避します。

2.10

クロスサイトリクエストフォージェリ (XSRF) を回避します。

2.11

システムを最新バージョンに保つために、パッチをタイムリーに適用してください。

2.12

データベース接続情報が安全であることを確認してください。

2.13

使用しているプラ​​ットフォームの最新の攻撃手法とセキュリティの脆弱性を常に把握しておいてください。

2.14

Google のブラウザ セキュリティ ハンドブックをお読みください。

2.15

Web アプリケーション ハッカー ハンドブックを読んでください。

3. パフォーマンス

3.1

可能な場合は常にキャッシュを使用してください。 HTTP キャッシュとHTML5 オフライン ストレージを正しく理解して使用します。

3.2

画像を最適化します。 20KB の画像ファイルを Web ページの繰り返し背景パターンとして使用しないでください。

3.3

gzip/deflate を使用してコンテンツを圧縮する方法を学びます ( deflate が推奨されます)。

3.4

複数のスタイルシート ファイルまたはスクリプト ファイルを 1 つのファイルに結合します。これにより、ブラウザーの http リクエストの数と、gzip 圧縮後のファイルの合計サイズを削減できます。

3.5

フロントエンドのパフォーマンスを改善するための優れたヒントが多数掲載されている Yahoo のExceptional Performanceサイトや、 YSlowツールをご覧ください。 Google のページ速度は、 Web ページのパフォーマンスを分析するために使用されるもう 1 つのツールです。どちらもFirebugをインストールする必要があります。

3.6

Web ページで多数の小さな画像 (ツールバーなど) を使用する場合は、 CSS Image Sprite を使用して HTTP リクエストの数を減らす必要があります。

3.7

トラフィック量の多い Web サイトでは、ドメイン間でコンポーネントを分割することを検討する必要があります。

3.8

静的コンテンツ（画像、CSS、JavaScript、Cookie に関連しないその他の Web コンテンツなど）は、Cookie の使用を必要としない別のドメインに配置する必要があります。ドメイン名の下に Cookie がある場合、クライアントがドメイン名に対して行う各 http リクエストに Cookie の内容が添付されるからです。ここでの良いアプローチは、コンテンツ配信ネットワーク (CDN) を使用することです。

3.9

ブラウザが Web ページをレンダリングするために必要な http リクエストの数を最小限に抑えます。

3.10

JavaScript ファイルを圧縮するには、Google のClosure Compilerを使用します。YUI Compressorも使用できます。

3.11

Web ページにこのファイルがまったく含まれていない場合でも、ブラウザは自動的にこのファイルを要求するため、Web サイトのルート ディレクトリに favicon.ico ファイルがあることを確認してください。したがって、このファイルが存在しない場合は、多くの 404 エラーが生成され、サーバーの帯域幅が消費されます。

4. 検索エンジン最適化（SEO）

4.1

example.com/index.php?page=45 の代わりに example.com/pages/45-article-title などの「検索エンジンに適した」URL を使用します。

4.2

「ここをクリック」ハイパーリンクは使用しないでください。SEO の機会を無駄にし、スクリーン リーダーの有効性が低下します。

4.3

XML サイトマップファイルを作成します。デフォルトの場所は通常、/sitemap.xml (つまり、Web サイトのルート ディレクトリに配置されます) です。

4.4

同じコンテンツを指す URL が複数ある場合は、Web ページ コードで<link rel="canonical" ... />を使用します。

4.5

Google のウェブマスター ツールと Yahoo のサイト エクスプローラーを使用します。

4.6

最初からGoogle Analytics (またはオープンソースのトラフィック分析ツールPiwik ) を使用してください。

4.7

robots.txtの役割と検索エンジン スパイダーの仕組みを理解します。

4.8

www.example.com へのリクエストを example.com にリダイレクトする（301 Moved Permanently リダイレクトを使用）、またはその逆を行うのは、Google がこれらを 2 つの Web サイトとして扱い、ランキングを個別に計算するのを防ぐためです。

4.9

悪意のある、または怪しいウェブスパイダーが存在することを認識してください。

4.10

ウェブサイトにテキスト以外のコンテンツ（ビデオ、オーディオなど）がある場合は、Google のサイトマップ拡張プロトコルを参照してください。

5. テクノロジー

5.1

HTTP プロトコルと、GET、POST、セッション、Cookie などの概念、および「ステートレス」の意味を理解します。

5.2

XHTML / HTMLおよびCSS がW3C 標準に準拠し、検証に合格することを確認してください。これにより、ページがブラウザの不具合を引き起こすことがなくなり、スクリーン リーダーや携帯電話で適切に動作するようになります。

5.3

ブラウザが JavaScript スクリプトを処理する方法を理解します。

5.4

Web ページ上の JavaScript ファイル、スタイル シート、その他のリソースがどのように読み込まれ、実行されるかを理解し、それらがページのパフォーマンスにどのように影響するかを検討します。場合によっては、スクリプト ファイルを Web ページの最後に配置することが適切な場合があります。

5.5

特に iframe を使用する予定の場合は、JavaScript サンドボックスの仕組みを理解してください。

5.6

JavaScript が利用できないか無効になっている場合があり、Ajax が必ずしも機能しない場合があることに注意してください。 「NoScript」は一部のユーザーの間で人気が高まっており、スクリプトのサポートはモバイル ブラウザによって大きく異なること、Google はほとんどのスクリプトを実行せずにページをインデックスすることを覚えておいてください。

5.7

301 リダイレクトと 302 リダイレクトの違いを理解します (これも SEO 関連の質問です)。

5.8

デプロイメント プラットフォームについてできる限り詳しく学習します。

5.9

スタイルシートのリセットの使用を検討してください。

5.10

ブラウザの違いを無視できる JavaScript フレームワーク ( jQuery 、 MooTools 、 Prototypeなど) の使用を検討してください。

6. バグを解決する

6.1

プログラマーは時間の 20% をコーディングに費やし、80% の時間をメンテナンスに費やしていることを理解し、それに応じて時間を計画してください。

6.2

効果的なエラー報告メカニズムを確立します。

6.3

ユーザーがあなたに連絡して、提案や批判をすることができるチャネルやシステムをいくつか作成します。

6.4

将来のメンテナンス担当者や顧客サービス担当者向けに、システムの動作を明確に説明するドキュメントを作成します。

6.5

頻繁にバックアップしてください。 (そして、それらのバックアップが有効であることを確認してください。) バックアップ メカニズムに加えて、回復メカニズムも必要です。

6.6

SubversionやGitなどの何らかのバージョン管理システムを使用してファイルを保存します。

6.7

ユニットテストを忘れないでください。Seleniumなどのフレームワークが役立ちます。

（以上）