Brad FrostがFrontend Guidelines Questionsで公開している同名のドキュメントを邦訳したものです。
フロントエンドガイドラインについての質問表
この1ページの質問表は、チームで効果的なフロントエンドガイドラインをつくり一貫性とまとまりのあるコードを共に書けるようにする為の補助ツールである。
HTML
HTMLの方針
HTML Tools
- HTML プリプロセッサーを使用しているか？ (例： HAML, Jade, など)
- テンプレートエンジンを使用しているか？ (Mustache, Handlebars, など)
-
バックエンドの構成はフロントエンドに影響するか？ (例： WordPress はマークアップのクラスに
wp-paginateを加える) もしあれば, そうしたルールをについてさらに説明できるか？
HTML 記述のスタイル
- スペースかタブか？
- コメントルールはどういうものか？
CSS
CSSの方針
CSSのメソロジー
- CSSメソロジーを使用しているか？ (例： SMACSS, BEM, or OOCSS) 使用する場合, その方法論に関する文章はどこにあるか?
- そのメソロジーから逸脱した実装をしているか？ その場合, その手法を説明することは可能か?
CSSツール
- プリプロセッサーを使用しているか？ (Sass や Less)
- プリプロセッサーを使用する上でのガイドラインはあるか？ (Sass Guidelines を参照)
- ベースCSSを使用しているか？ (例： Normalize や reset)
- ポストプロセッサーを使用しているか？ (例： Prefixfree や Autoprefixer)
- その他、特殊なCSSテクニックを使用しているか？ (例： critical CSS)
CSS フレームワーク
- チームで使用しているCSSフレームワークはあるか？ (例： Bootstrap や Foundation) その場合, そのフレームワークの仕様書はどこにあるか？
- フレームワークから何かしら逸脱した実装はしているか？ その手法を説明することは可能か？
CSSのコーディングスタイルについて
- スペースかタブか？
- CSSのルールにスペースを含めるか？
- プロパティのグルーピング ルールはあるか?
- コメントルールはどういうものか？
JavaScript
基本方針
ツール
- JSフレームワークを使用しているか？ (例： jQuery, Ember, Angular, 等)
- それらのフレームワークの仕様書はどこにあるか？
- polyfills や shimsを何か使用しているか？ (例： これらのいずれか)
- プロジェクトで依存している3rdパーティのスクリプトは何か？ (例えば フォームバリデーションやグラフやアニメーション等)
- JavaScriptのテストは実施しているか？ その場合, 使用しているツールは何か？ (例： Jasmine, Karma, Selenium, 等)
JavaScript の記述スタイルについて
メディアについて
- アイコンの実装法はどのようなものか？ (SVG, アイコンフォント, 等)
-
レスポンシブ画像はどのように扱っているか？ (
srcsetと<picture />を使用する等) - 画像最適化の為に ツール を使用しているか？
フォントについて
- カスタムフォントをどのようにロードしているか？
- ウェブフォントを実装するために何かツールを使用しているか？ (例： Font Squirrel, など)
- カスタムフォントの為のサービスを利用しているか？ (例： Fonts.com, Typekit, 等)
パフォーマンスについて
- パフォーマンスの目標値はあるか？ ある場合, どのような 計算方法 を使用してその目標値を決定しているか？
- プロジェクトのスピードをどのように計測しているか？ (例： Pingdom Speed Test や Google PageSpeed)
- ファイルサイズを圧縮する為に何か特別な方法を採用しているか？ (例： Gzip, 画像最適化)
- ワークフローの中でパフォーマンスに関連したツールを使用しているか？ (例：WebPagetest, BigRig Speedcurve)
アクセシビリティについて
その他ツールについて
- タスクランナーを使用しているか？ (例： Grunt や Gulp)
- 依存関係を管理するツールを使用しているか？ (例： Bower or Composer)
- スキャフォールディングツールを使用しているか？ (例： Yeoman)
- フロントエンドのスタイルを強化するための何かしらのツールを使用しているか？ (例： Editor Config or linters)
- このプロジェクトに従事するに辺り何か特定のその他のソフトウェアを使用する必要があるか？
バージョン管理について
- どのバージョン管理ツールを使用しているか？ ( 例：Git や Subversion)
- バージョン管理されたコードはどこにホストされているか？ (例： Github or Bitbucket)
- バージョン管理ワークフローを採用しているか？ (例： gitflow, centralized, feature-branch, etc)
- バージョン管理されたコードを管理、統制している人は誰か？
- 課題管理はどこでされているか？
「サポート と 最適化」について
"サポート" と "最適化"の違いについて認識することは重要です。アナタのビジネスとユーザーにとって最も理にかなった環境に最適化するのと同時に一方で、できるだけ多くの環境をサポートする事にベストをつくすべきです。
- 最適化対象のブラウザーはどれか？
- 最適化対象のデバイスはどれか？
- グレードブラウザーサポート システムを採用しているか？
- さらに具体的な格付け（グレーディング）を必要とする特定のコンポーネントはあるか？
ローカライズに関して
- ウェブサイトは別の言語対応か？ その場合、別の言語にローカライズするに当たりどのような配慮がされるべきか？
開発/実装について
- プロダクション環境にフロントエンドのコードはどのように実装されるか？
ドキュメンテーションについて
- フロントエンドの機構を文書化するためにパターンライブラリーツール を使用しているか？
- 文書化された仕様書の所在はどこか？ リンクはあるか？
- メンテナンスと管理は誰の責任範囲か？
- ガイドラインがアップデートされた場合どうするか？
Feel free to modify or extend (such as adding specific sections for performance, accessibility, etc) this document for your own organization's needs. For questions, comments, additions, and corrections, please open an issue on Github and/or reach out to @brad_frost on Twitter.