HTML
CSS
JavaScript
ガイドライン

フロントエンドガイドラインについての質問表

More than 1 year has passed since last update.

Brad FrostがFrontend Guidelines Questionsで公開している同名のドキュメントを邦訳したものです。


フロントエンドガイドラインについての質問表

この1ページの質問表は、チームで効果的なフロントエンドガイドラインをつくり一貫性とまとまりのあるコードを共に書けるようにする為の補助ツールである。


HTML


HTMLの方針



  • HTMLを書く上でのチームとしての基本方針は何か? (例: セマンティックなHTML5マークアップを書く, アクセシビリティ, 等。 これらの 資料参照)


HTML Tools



  • HTML プリプロセッサーを使用しているか? (例: HAML, Jade, など)


  • テンプレートエンジンを使用しているか? (Mustache, Handlebars, など)


  • バックエンドの構成はフロントエンドに影響するか? (例: WordPress はマークアップのクラスにwp-paginateを加える) もしあれば, そうしたルールをについてさらに説明できるか?


HTML 記述のスタイル


  • スペースかタブか?


  • コメントルールはどういうものか?



CSS


CSSの方針



  • CSSを書く上でのチームとしての基本方針は何か? (例, モジュール方式, 長いセレクターの禁止, 等。 これら資料 参照)


CSSのメソロジー



  • CSSメソロジーを使用しているか? (例: SMACSS, BEM, or OOCSS) 使用する場合, その方法論に関する文章はどこにあるか?


  • そのメソロジーから逸脱した実装をしているか? その場合, その手法を説明することは可能か?


CSSツール



  • プリプロセッサーを使用しているか? (SassLess)


  • プリプロセッサーを使用する上でのガイドラインはあるか? (Sass Guidelines を参照)


  • ベースCSSを使用しているか? (例: Normalizereset)


  • ポストプロセッサーを使用しているか? (例: PrefixfreeAutoprefixer)


  • その他、特殊なCSSテクニックを使用しているか? (例: critical CSS)


CSS フレームワーク



  • チームで使用しているCSSフレームワークはあるか? (例: BootstrapFoundation) その場合, そのフレームワークの仕様書はどこにあるか?


  • フレームワークから何かしら逸脱した実装はしているか? その手法を説明することは可能か?


CSSのコーディングスタイルについて


  • スペースかタブか?

  • CSSのルールにスペースを含めるか?

  • プロパティのグルーピング ルールはあるか?


  • コメントルールはどういうものか?



JavaScript


基本方針



  • JavaScriptを書く上でのチームとして踏襲すべき基本方針はあるか? ( これらの 資料参考)


ツール



  • JSフレームワークを使用しているか? (例: jQuery, Ember, Angular, 等)

  • それらのフレームワークの仕様書はどこにあるか?


  • polyfills や shimsを何か使用しているか? (例: これらのいずれか)


  • プロジェクトで依存している3rdパーティのスクリプトは何か? (例えば フォームバリデーションやグラフやアニメーション等)


  • JavaScriptのテストは実施しているか? その場合, 使用しているツールは何か? (例: Jasmine, Karma, Selenium, 等)


JavaScript の記述スタイルについて

( これら 資料参照)


  • スペースかタブか?


  • コメントルールはどのようなものか?


  • 踏襲すべきデザインパターンはどのようなものか? (See these resources)



メディアについて



  • アイコンの実装法はどのようなものか? (SVG, アイコンフォント, 等)


  • レスポンシブ画像はどのように扱っているか? (srcset<picture />を使用する等)

  • 画像最適化の為に ツール を使用しているか?



フォントについて


  • カスタムフォントをどのようにロードしているか?


  • ウェブフォントを実装するために何かツールを使用しているか? (例: Font Squirrel, など)


  • カスタムフォントの為のサービスを利用しているか? (例: Fonts.com, Typekit, 等)



パフォーマンスについて



  • パフォーマンスの目標値はあるか? ある場合, どのような 計算方法 を使用してその目標値を決定しているか?


  • プロジェクトのスピードをどのように計測しているか? (例: Pingdom Speed TestGoogle PageSpeed)


  • ファイルサイズを圧縮する為に何か特別な方法を採用しているか? (例: Gzip, 画像最適化)


  • ワークフローの中でパフォーマンスに関連したツールを使用しているか? (例:WebPagetest, BigRig Speedcurve)



アクセシビリティについて


  • このチェックリストに記載されているアクセシビリティに関する勧告にしたがっているか?

  • ワークフローの中でアクセシビリティに関連した ツール を使用しているか?



その他ツールについて



  • タスクランナーを使用しているか? (例: GruntGulp)


  • 依存関係を管理するツールを使用しているか? (例: Bower or Composer)


  • スキャフォールディングツールを使用しているか? (例: Yeoman)


  • フロントエンドのスタイルを強化するための何かしらのツールを使用しているか? (例: Editor Config or linters)

  • このプロジェクトに従事するに辺り何か特定のその他のソフトウェアを使用する必要があるか?



バージョン管理について



  • どのバージョン管理ツールを使用しているか? ( 例:GitSubversion)


  • バージョン管理されたコードはどこにホストされているか? (例: 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.