追記
シートをPDFにしてみました。
gulpでmdをpdfに変換しただけなので雑ですが...
https://github.com/nekoneko-wanwan/utility_files/blob/master/dist/frontend_require_sheet.pdf
はじめに
近年Webサイト制作における開発手法の効率化はめざましいものがあり、人・チーム間のスキル差が問題となる場面も増えてきたように思います。表示パフォーマンス・開発スピードの向上を優先した結果、最終的なメンテナンス性や拡張性が落ちてしまったこともありました。
テンプレートエンジン・cssプリプロセッサ・altJS・圧縮結合...みんながみんな覚えてしまえば解決なのですが、現実的には中々そうもいきません（自分も含め）。
そこでフロントエンド開発において、案件で使用すべきスキルを確認・調整するための簡単なシート（表）を作成してみました。
前提条件
- 今回は静的サイトのフロントエンド開発の技術に絞っています。
- そもそもの案件を実現させるために、特定のスキルが必要になるものは今回は除いています（レスポンシブ対応、フレームワークを使ったMV*とか）。
- 納品物に対しての制作スキルを想定しているため、作業環境は問いません（Vagrantを使用するかどうかとか）
- 広義ではコーディング規則にあたるかもしれませんが、そんなに細かい指定はしていません。
- 制作ファイルの管理方法はコーディング規則にあたると思うので、ここでは省略します。
特に使える場面
- 初めて外注する相手など、現在のスキルが見えにくい制作者がアサインされる場合
- 納品される側のスキル、どのようなものを要求しているかが不明瞭な場合
- こういう技術で制作するため納品物はこうなりますけれど良いですか、という確認
- 「コーディング規則は無いから、やりやすいように作って良いよ」と言われて、後から文句を言われないように
つまりこのシートは、__特に難しい仕様もなく簡単な案件だけど、後で変な苦労をしないように最低限の決まりごと__を明確にすることを目的としています。
シート
- ○ → 必須選択（基本一つのみ）
- □ → 任意選択（複数可）
- 備考には記載のないツール名、versionなどを入力すると良いかもしれません
htmlの作成・出力方法
| 選択 | 要件 | 備考 |
|---|---|---|
| ○ | 特になし | コンパイル後ファイルだけで、管理上問題が無ければこれを選ぶ |
| ○ | テンプレートエンジン | 例: jade |
| ○ | 静的サイトジェネレータ | 例: Jekyll |
| ○ | その他 | |
| □ | 元データを納品物に含める（コンパイルする場合） |
###ファイルの共通化（インクルード）
| 選択 | 要件 | 備考 |
|---|---|---|
| ○ | しない | |
| ○ | SSI | |
| ○ | PHP | .html内でphpを使用 |
| ○ | DreamWeaverのテンプレート | |
| ○ | JavaScriptで読み込む | |
| ○ | テンプレートエンジン | |
| ○ | 静的サイトジェネレータ | |
| ○ | その他 | |
| □ | 元データを納品物に含める（コンパイルする場合） | |
| ※どこまでファイルを細分化するかは要検討 | ||
| ※表示ページごとに多少の差異がある場合、施策を要検討 |
タスクランナー
| 選択 | 要件 | 備考 |
|---|---|---|
| ○ | 使わない | コンパイル後ファイルだけで、管理上問題が無ければこれを選ぶ |
| ○ | Gulp | |
| ○ | Grunt | |
| ○ | その他 | |
| □ | 設定ファイルにaltJSを使用する | |
| □ | 設定ファイルを納品物に含める | gulp.jsやpackage.jsonなど |
###cssプリプロセッサ
| 選択 | 要件 | 備考 |
|---|---|---|
| ○ | 使わない | |
| ○ | sass | |
| ○ | scss | |
| □ | compassを使用 | |
| ○ | less | |
| ○ | その他メタ言語 | 例: stylus |
| □ | cssを圧縮する | |
| □ | タスクランナーを使用 | |
| □ | コマンドラインを使用 | |
| □ | その他ツールを使用 | |
| □ | 元データ・設定ファイルを納品物に含める |
###cssスプライト
| 選択 | 要件 | 備考 |
|---|---|---|
| ○ | しない | |
| ○ | 手作業で対応 | |
| ○ | プリプロセッサを使用 | |
| ○ | タスクランナーを使用 | |
| ○ | その他 | 例: python, glue |
###cssフレームワーク
| 選択 | 要件 | 備考 |
|---|---|---|
| ○ | 使わない | |
| ○ | Bootstrap | |
| ○ | Foundation | |
| ○ | Gumby | |
| ○ | その他 | |
| □ | フレームワークを改造して使用する（class名など） |
###JSライブラリ
| 選択 | 要件 | 備考 |
|---|---|---|
| ○ | 使わない | |
| ○ | 以下いずれかを使用 | |
| □ | jQuery1.X | |
| □ | jQuery2.X | |
| □ | Zepto | |
| □ | Prototype | |
| □ | jQuery Mobile | |
| □ | Modernizr | |
| □ | Underscore | |
| □ | CreateJS | |
| □ | レガシーブラウザ対策 | 例: IE9.js, html5shiv.js |
| □ | その他 |
###JSの結合
| 選択 | 要件 | 備考 |
|---|---|---|
| ○ | しない | |
| ○ | タスクランナーを使用 | |
| ○ | その他 | |
| □ | 元データを納品物に含める |
###JSの圧縮
| 選択 | 要件 | 備考 |
|---|---|---|
| ○ | しない | |
| ○ | タスクランナーを使用 | |
| ○ | その他 | |
| □ | 元データを納品物に含める |
###altJS
| 選択 | 要件 | 備考 |
|---|---|---|
| ○ | 使わない | |
| ○ | CoffeeScript | |
| ○ | TypeScript | |
| ○ | Haxe | |
| ○ | その他 | |
| □ | 元データを納品物に含める |
###png画像の最適化
| 選択 | 要件 | 備考 |
|---|---|---|
| ○ | しない | |
| ○ | タスクランナーを使用 | |
| ○ | その他 | 例: PNGGauntletを使用 |
###Webフォント（アイコンフォント）
| 選択 | 要件 | 備考 |
|---|---|---|
| ○ | 使わない | |
| ○ | 以下いずれかを使用 | |
| □ | Google Web Fonts | |
| □ | Typekit | |
| □ | Fonts.com | |
| □ | Font Awesome | |
| □ | その他 | 独自のフォント含む |
| □ | class名を変更して使用する |
おわりに
- 前段階に時間がかけられない
- コーディング規則が無い（あってもアップデートされてない or 現実的に全て守っていられない）
- とりあえず素早くサクッと作りたい・作って欲しい
- 納品されたもののメンテナンスができない・・・
そんな時に役に立つかもしれません。
また実制作者がどの程度できるかどうか、簡単な判断材料になるかもしれません。
（SSIを使わなければならない場合は、使える環境の用意・設定を自分で行う必要がありますし、比較的新しい技術がキャッチアップできているかどうか、仕事をお任せする上でも重要な要素の一つだと思います）
※時間が経てばこれらも陳腐化してしまうので、定期的に見直しが必要かと思います