その他

> > > フロントエンドエンジニアリングとサーバサイドエンジニアリング

フロントエンドエンジニアリングとサーバサイドエンジニアリング

2013-02-21 17:35 - インターエデュ

近年、「フロントエンドエンジニアリング」という言葉が良く使われるようになりましたね。先日会社の近くの本屋さんに寄ってみたのですが、関連書籍もチラホラ見るようになりました。

まだ正式な定義というものは無さそうですが、概ねこんな業務を担う人のことを言うようです。

  1. HTMLマークアップ
  2. CSS3の記述、Javascriptのプログラミング
  3. サイト全体の設計(UIやサイトマップ、SEOなど)

以前なら「コーダー」とか、大きい括りでいうと「デザイナー」と呼ばれていた人たちですね。「サーバサイド」に対してクライアントサイド、つまりブラウザ周りのことを総合的にエンジニアリングする人たちのことを指すと私は理解しています。

なぜ、フロントエンドエンジニアリングという概念が注目されるようになったのか。それはHTML5やCSS3、jQueryなどが普及するに従って、こうした技術を扱うことが今まで以上に難しくなってきたからだと思います。というよりも、新しい技術をどんどんフォローアップしていくことが難しくなったと言ったほうがいいかもしれません。だからそれを専門とする人たち(というよりもそれを得意とするコーダー/デザイナー)をあえて「フロントエンドエンジニア」と呼ぶようになったのかもしれません。

video関係やWebStorage、ソケット関係なんかもより進んだHTML5で使える機能ですが、マークアップの延長上にあるとも言えますね。まだそれを専門的に扱う人がいないわけです。

HTML5のロゴ

HTML5はもともとXHTMLで提唱されていた「セマンティックウェブ」の概念をベースに、さらに実用的な「ウェブアプリケーションを実現するためのフレームセット」を目指して開発が進められています。だからこうした技術を使うことにより、今までよりも、より簡単に、より豊かな表現ができるようになってきたんですね。そういったわけで、フロントエンドエンジニアリングがウェブ制作の現場ではとても重要な位置を占めるようになってきたと思っています。

僕が面白いなぁと思うのは、HTML5の登場によって、「フロントエンドエンジニアリング」と「サーバサイドエンジニアリング」という二つの役割ははっきり分かれてきたのに対して、「フロントエントエンジニア」と「サーバサイドエンジニア」の境界は非常に曖昧であるということもよく分かったきたということです。

例えば、今までjavascriptはエンジニアが書くものという現場が少なくないように思います。もちろん意欲のあるデザイナーは自ら進んでjavascriptの面白さを取り入れてきたと思います。でもjQueryが分かればデザイナーでも、より簡単に、より早く豊かな表現ができる。そうするとエンジニアには二つの発想が生まれます。

  1. もうjavascript書かなくていいんだ〜(+o+)。PHP(とかのサーバサイドスクリプト)に集中できる!
  2. デザイナー/コーダーに負けてはいられない!僕が一番javascriptを上手く書けるんだ!

これは会社によりますね。でもどちらにしても深刻な問題です。ぼけーっとしてるとエンジニアの仕事が無くなるわけですから。これによってエンジニアにはさらに3つの選択肢を突きつけられるわけです。

  1. サーバサイドに突き進む
  2. フロントエンドもサーバーサイドも両方やる
  3. フロントエンドに転向(?)する


※実は1の「サーバサイドに突き進むも」AWSなんかが登場したことによって、プログラマとサーバ(インフラ)エンジニアの境界が曖昧になっているというのはまた別の話です。いつか時間があればしたいです。

どれも悪く無いと思います。ただどれをやるにしても、自分がどの領域の技術を、どれくらいマスターして活躍して行きたいのかというビジョンを持たないと、どれも中途半端になってしまう恐れがあります。また、誰とどういうリレーションを取りながら、業務に臨むのかを意識しないと、空回る、または自分に負荷が掛かり過ぎてしまうこともあるんじゃないでしょうか。

ただ、Twitter BootstrapなんかのCSSフレームワークは、よりエンジニアをフロントエンドエンジニアに近づける1つの要因になったと思います。良い意味で。なぜならエンジニアでも簡単にきれいなマークアップと、スタイルアップ、ちょっとしたアニメーションやギミックを実装することができるようになったからです。

Twitter Bootstrap

逆にフロントエンドエンジニアも、サーバサイドをかなり意識します。wordpressなんかをやっていると特にそうですが、意欲的なデザイナー・コーダーはPHPやMySQLも学習して、wordpressの基本的な動きを理解しようとしてくれます。

そうするとフロントエンドエンジニアとサーバサイドエンジニアの境界がすごく曖昧になってくるんですよね。別に困るわけではなく、すごくいい効果をもたらすと思っています。なぜなら今インターエデュがそんな感じだからです

実は同じ部内に非常に優秀なクリエイターの方がおりまして、まさに彼はフロントエンドエンジニアだなぁと日々思っています。彼と一緒に仕事をしているとものすごく早くモノゴトが進みます。彼はサーバサイドを意識したサイト構成・UIを考え、ajaxで返ってくるデータがどんな形式なのかを意識した上で、マークアップをしてくれるので、自分はサーバサイドに専念できる。

逆に私自身もTwitter BootstrapやLESSを使うことで、手早く、しかもメンテナンス性の高いプロトタイプを作ることができます。後は共同で、それぞれフロントエンドとサーバサイドを突き詰めていけば、今まで以上に楽に、早くウェブアプリケーションが作れるようになるわけです。そうすると、どういう機能が欲しいのか、とかUIはこうしようとか、そういった要件を詰める作業も面白くなるんですよね。

今まではコーダーにHTMLを作ってもらって、それをエンジニアがテンプレートとしてはめていくことが多かったですし、逆に詳しいことはエンジニアがやる、ということも多かったように思います。

逆に、CSSとかマークアップは全部コーダーさん、お願いとかいうこともありましたし、エンジニアがやらざるを得ないときは、ホントにヒドイマークアップとかスタイルにならざるを得ない時もあります。idとかclassの命名規則なんかも狂ってきますよね。

でも、ーダー・デザイナーがjQueryを覚えるだけで、エンジニアが適切なHTML5のマークアップとCSSフレームワークを覚えるだけで、状況はものすごく改善するんだなと実感しているところです。

というわけで、デザイナー/コーダーの皆さんは是非フロントエンドの技術ことを意識して欲しいと思いますし、エンジニアの方も、そのへんは意識するといいかもしれませんね。

フロントエンドエンジニアリングにご興味をお持ちの方、自信のある方、ぜひ一度弊社にお越しくださいませ。もちろんBootstrapとか、LESSとかCoffee Scriptとかに興味のあるエンジニアの方もお待ちしておりますよ〜!