便利なスニペットやフレームワーク

私は修行中のwebデザイナー/コーダー/ディレクターです。制作で主にXHTML/HTML5、CSSを使います。特にCSSなんかだと定番の表現をするのにスニペット(コードスニペット)を使います。Evernoteとかにストックがありますね。そして殆ど使ったことはないですが、HTML5 BoilerplateやTwitter Bootstrapといったフレームワークにも興味があります。

スニペットとフレームワークを使う際に考えたいこと

初心者を抜け出す為にスニペットを理解する

ですが、コピペで人のコードを流用しているとなかなかそのコードがどういう意味かを覚えられません。理解していない人の書くソースにはスニペットに含まれた、そのソース内では必要のない記述なんかがそのまま残っていることが多いです。実際困ることってそんなにないんですけど、中級者にとってはすごく気になることだったりします。

中級者を抜け出す為にフレームワークを理解する

私は修行中の身なのでここに達しているわけでもないのですが、フレームワークの中を見てみると、目からウロコの斬新な構造や、ここまで考えられているのかと驚くほど緻密な計算から作られている部分があります。そして実際、業務に追われる制作者は効率化のため自作フレームワークの様なものを作ったりもします。

スニペットとフレームワークの存在意義

能力の拡張として、または底上げとして

専門家にとって、スニペットやフレームワークは車輪の再発明の防止である

専門家は、スニペットやフレームワークを、既に作れるものを無駄に作らない為に使います。出来ることを繰り返しやることほど効率の悪いことはありません。自分の使っている技術がどういうものか分かった時、前に進むことができると思います。

非専門家にとって、スニペットやフレームワークはショートカットである

非専門家は、スニペットやフレームワークを、まだ自分では作れないものを作るために使います。別に専門家になりたいわけでもないのに、構造から始めて基礎からじっくり、なんてことほど効率の悪いことはありません。先人の生み出したショートカットを最大限に利用しましょう。

デザインツールにおけるプリセットも同じ

私はPhotoshopに備わったアクション、テクスチャー、ダウンロードしたブラシやプリセットなんかは可能な限り使わず、出来るものであれば自分で自作しています。さすがに写真から制作されたものやフォント、フィルタ等は使わせてもらってますが、他は自分でも作れるものばかりです。Photoshopの専門家になりたいですからね！あと、最近はHTML5とCSSの専門家にもなりたいのでコーディングについても頼りたくはないんですが、使いこなしも上手くなりたいところです。

[ダウンロード]商用無料、108個のピクセルベースパターン素材作りました – WEBCRE8.jp

[Photoshop]シームレスなテクスチャをワンクリックで作るアクションを作った – WEBCRE8.jp

過去にこういうの作ってます。

まとめ：ワークフローやキャリアパス次第で重視されるスキルは変わる

自分のなりたい技術者像、現状求められている仕事の能率を考えた上で、掘り下げるもの、掘り下げないものを決めていけばいいのかなと思います。

私はタイトルについてこのように考えています。もしかしたらプログラマさん方には全く違う見解もあるかもしれないので、意見をもらえると嬉しいですね！