LoginSignup
67

More than 5 years have passed since last update.

静的サイト構築におけるフロントエンド実装スキル要件シート

Last updated at Posted at 2015-04-06

追記

シートを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を使わなければならない場合は、使える環境の用意・設定を自分で行う必要がありますし、比較的新しい技術がキャッチアップできているかどうか、仕事をお任せする上でも重要な要素の一つだと思います)

※時間が経てばこれらも陳腐化してしまうので、定期的に見直しが必要かと思います

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
67