#フロントエンド開発今昔物語
フロントエンドと言っても、アプリやゲーム制作などではなく、いわゆるWebサイト制作のクライアントサイド側の話になります。
##時代背景
###昔
おじいさんには、Photoshop、Illustrator、Dreamweaverという3種の神器がありました。当時のWebサイト制作は、これらのソフトを利用し、おじいさんが一人で行っていました。おじいさんのような仕事をする人は、Webデザイナーと呼ばれ、とても人気がありました。おじいさんは幸せでした。
###今
いつしかWebデザインは分業化されるようになりました。おじいさんは久しくデザインをしていません。現在の彼の仕事は、デザイナから受け取ったPhotoshopデータを基にWebサイトを制作することです。それはHTML5サイトというとても都合の良いバズワードでまとめらてしまうこともあります。このことについて、おじいさんはやり場のない憤りを抱いています。
##HTML/CSSコーディング
###昔
おじいさんはDreamweaverというソフトを使いHTMLやCSSを書いていました。当時はまだNetscapeという名の絶滅種ブラウザまで存在していました。<table>レイアウトが翳りを見せ始め、XHTML + CSSがにわかに注目され出した頃のお話です。
###今
おじいさんは、昨今のHTMLやCSSのコーティングに、プログラミングの概念が適用されるようになっていることを知りました。そのようなコーディング開発環境では、いままでは不可能だった、変数の利用や条件分岐、繰り返しといった一般的なプログラミングの利点をコーディングに活用することにより、開発速度を向上させ、品質を維持することができるようになりました。またBoilerplateというテンプレートセットを利用するようになったことも、安定した品質の成果物を制作する手助けとなっています。
##JavaScript開発
###昔
おじいさんはJavaScriptを本格的なプログラミング言語とは思っていませんでした。おじいさんの時代からjQueryは人気があるライブラリーでしたので、それなりに動きのあるサイトは作っていましたが、グローバル空間の汚染は日常茶飯事でしたし、ましてやMVCの概念を持ち込もうなどという事は思いもよりませんでした。
###今
おじいさんは相変わらずjQueryを中心に開発を行っていますが、昨今のJavaScriptの流行から学び、グローバルな領域に変数を列挙してしまうようなことはなくなりました。近い将来はTypeScriptを導入しようと思っています。Backbone.jsやAngular.jsというMVCフレームワークについても関心をもっていますが、これらが彼の手がける案件に必要であったことはいまのところありません。
##自動化
###昔
おじいさんには自動化という概念がありませんでした。強いて言えばPhotoshopのアクションやドロップレットを作っていた事くらいでしょうか。
###今
おじいさんはWebサイト制作に非常に便利な自動化ツールが存在していることを知りました。それはGruntと呼ばれていました。ブラウザのライブリロードや、HTMLやJS、CSSファイルのリントやコンパイル、JS、CSSの結合/圧縮等、いまではこのツールが非常に役に立ってくれています。
##最適化
###昔
おじいさんには最適化という概念がありませんでした。すべてのJavaScriptとCSSは開発時と同じ状態で<head>タグ内に読み込んでいました。そうすることに何も疑問を抱かなかったのです。
###今
おじいさんはレンダリングブロックを意識し、これをできるだけ短くするため、JavaScriptとCSSを結合/圧縮するようになりました。画像は適切な単位でスプライトシートとして結合し、さらにPngについてはPngMiniを利用し圧縮をかけています。
##最後に
おじいさんは一昔前までは、Flashと呼ばれるとても活気のあるコンテンツの開発を行っていたのですが、さまざまな理由からFlashというメディアはこの世から徐々に姿を消しつつあります。そのことについて想いを馳せると、おじいさんはとても複雑な気持ちになります。Flashが花形だった当時と比べると、Webのトレンドも随分と様変りをしたものです。それでもおじいさんは、今もなおフロントエンドの開発に携われている自分は幸せだなぁと思っています。