高津戸編ピクセルグリッドのフロントエンドエンジニアひとりひとりに最近の仕事(主に2011年度)を振り返ってもらい、仕事で大活躍したツールや、ハマりまくったできごと、これから注目したい技術、手がけてみたい仕事をざっくばらんに語ってもらいました。第1回目は高津戸です。これがあって助かった!ベスト3最近、ハマりましたワースト3これから、この技術をあれこれしてみたいこれから、こんな仕事をしてみたいこのシリーズではピクセルグリッドのフロントエンドエンジニアひとりひとりに最近の仕事(主に2011年度)を振り返ってもらい、仕事で大活躍したツールや、ハマりまくったできごと、これから注目したい技術、手がけてみたい仕事をざっくばらんに語ってもらいました。念のため申し添えておきますと、これはエンジニア個々人の感想、意見です。これがあって助かった!ベスト3最近、ハマりましたワースト3これから、この技術をあれこれしてみたいこれから、こんな仕事をしてみたい第1回目はJavaScriptをメインに担当することが多い高津戸です。Backbone.jsBackbone.jsJavaScriptフレームワークBackbone.jsは、Model、Viewという雛形を使い、構造的にJavaScriptを書くことの出来るフレームワークです。大きめなサービスをJSベースで組む際に役立ちました。サーバーと逐一Ajaxでやりとりをする際、どのように書けばいいのかの指針となってくれました。Backbone.jsをひとことで説明するのは難しいのですが、これと出会わなかったら複雑な処理をどのように構造化するのかにとまどい、コードがぐちゃぐちゃになっていたと思います。Boilerplateとは、HTML5の鉄板(Boilerplate)である記述を1つのテンプレートに集約したもの。これに出会うまでは、オレ式HTMLテンプレートベースの改良にかなりの時間をかけていました。それはここに全部まとまっていたんです。それにこのテンプレートは逐一更新されている。自分テンプレートの改良はやめ、これをベースにすることにしました。reveal.jsreveal.jshtmlをスライド表示するJavaScriptライブラリを含んだテンプレートプレゼンテーションのスライド表示のためのJavaScriptライブラリを含んだテンプレートです。このテンプレートを使えば、キーノートのようなスライドをHTMLベースで作ることができます。最近は講演などでスライドを作る際、これをベースに作っています。これに出会うまでは、セミナー用のスライドを作り、改良するのにかなりの時間をかけていました。自分でテンプレートを作るという行為はそれ自体が勉強になり、楽しくはあったのです。毎回毎回その改良に時間をかけてしまっていたため、非効率と言えば非効率でした。Android今年はスマートフォン用サイトの案件が多かったです。その中で毎回毎回苦しめられたのがAndroidに標準搭載されている「ブラウザ」。HTML5+CSS3が使えると夢をみたのは最初だけで、かなり貧弱で、しかも機種ごとにまちまちな実装になっているブラウザという認識。スマートフォン向けに何かおもしろいことをしたいと考えるクライアントは多く、現実とのギャップを理解する、また説明するのに多くの時間を費やしたと思います。そんでもって、クライアントが夢見た計画はHTMLではできないということで、仕事に繋がらないことも多かったです(最近はかなりマシにはなっていますが)。viewportスマートフォン向けサイトを作る上で欠かせないのがmeta要素で指定できるviewport。これが分からなければ、どのようにページをデザインしたらいいのかも分からないと言えるほど重要な概念です。Niteにてviewportをテーマに話そうと調べてみたものの、蓋を開けたらこれも泥沼。iOSとAndroidの差や、傾けたときにどうなるとか、Androidのバージョンごとの差などがありました。分かりづらい公式ドキュメントと実機での動作を比べながら、理解するのにかなりの時間を要しました。シングルページなWebアプリシングルページなWebアプリを作る案件をこなすのに、かなり苦しみました。APIを使い、ダイナミックに行うというもの。その案件が始まる前にちょっと真似事をやったことがあったので、できますよーと結構タイトなスケジュールで請け負いました。実際にやってみると、サーバー側のAPIも最適なものに変えなければならなかったり、フロント側のJSの設計も確固たるものが必要になったり、作りながらUIを改良したりで、予想より大幅に工数がかかりました。結果的に2〜3ヶ月ほぼ休みなしの状態になってしまいました。なんとか終えられたものの、複数人で開発しなければならなかった、APIの設計も入念にチェックしなければならなかったなど、反省点の多い案件となりました。進め方については、会社としてとてもいい経験となりました。シングルページなWebアプリの開発です。Engine(Python)で作ったんです。現状は作っただけで放置状態になってしまっている上に、GAEが値上げされ、ちまちま財布が削られるので、せっかくだからNode.jsで作り直したいと思っています。自分は基本的にJavaScriptをメインに書いているため、サーバー側もうまいことJSでやってみたいです。これから、こんな仕事をしてみたいシングルページなWebアプリこれはさきほどお話したように、実際に作ってみてユーザー的にかなり快適なものであるし、設計面でもとても効率的であることを実感したからです。コレを作るのには、ちょっとやそっとJavaScriptが書けるだけではダメで、設計のやり方や、タスクを割り振って仕事を進めなければならないと、実際に仕事をしてみて痛感しました。この経験は貴重ですし、仕事としても大きくやりがいもあるので、社内でやり方を共有し、そんな仕事を多くこなしたいと思います。JavaScriptを駆使したリッチなUIのサイトピクセルグリッドはJavaScriptの会社を標榜しているのですが、そうは言っても、あらゆる仕事が、チャレンジングで、凝ったUIを採用し、先進的な技術を常に使っている...というわけではないです。僕が「おもしろいなー」と感じるのは、いろいろありますが、例えばそのひとつに、やったことのないようなUIを組んだりするということがあります。UI的にもおもしろく、JavaScript的にも、どうしたらできるのかと考え、試行錯誤しなければならないようなものです。いったものを作るのには、JavaScriptを書く僕だけではなく、デザインをする人も同様にそのようなことに興味を持ち、あれはできるのか、これはできるのかと、いろいろ相談しながら進める必要があります。今後は、そのような仕事にチャレンジしていけたらなと思っています。壮フロントエンド・エンジニアWeb制作会社、フリーランスを経て、株式会社ピクセルグリッドに入社。Webサイト、WebアプリケーションのHTML、CSS、JavaScript実装に携わってきた。受託案件を中心にフロント周りの実装、設計、テクニカルディレクションを行う。スケーラビリティを考慮したHTMLテンプレート設計・実装、JavaScriptを使った込み入ったUIの設計・実装を得意分野とする。jQuery入門』(技術評論社、2014年11月14日)がある。2013ベストセッションでは、全278セッション中、ベスト20セッションに選出。特定商取引法に基づく。