『フロントエンドエンジニア養成読本』出版記念イベントレポート

7月17日、渋谷マークシティにある株式会社サイバーエージェント（以下CA）本社にて、『フロントエンドエンジニア養成読本』出版記念イベントが開催されました。本稿では、このイベントの模様をレポートします。

イベントでは『フロントエンドエンジニア養成読本』の著者陣によるパネルセッションが行われました。司会は本書モデレータでもある、斉藤祐也さんです。

今回はカジュアルに進行したいということで、アルコール等の飲み物があらかじめ用意されました。そして、出版祝も兼ねて最初に乾杯を行いました。

著者陣の自己紹介

乾杯の後、まずは各パネラーの簡単な自己紹介と担当した章の紹介が行われました（敬称略⁠）⁠。

斉藤：今はCA（サイバーエージェント）ではなく、リッチメディアでフロントエンドの開発を行っています。今回の書籍のモデレータと、「⁠第1章フロントエンジニアとは？」「⁠第2章 Webブラウザの基礎知識」を書きました。このタイミングで本書を発行することになったきっかけは、技術評論社の編集者の高屋さんから声をかけていただいたからなのですが、いまフロントエンドという分野では収拾がつかないくらいやることが増えてきたタイミングであったとも言えます。そのような中、フロントエンドエンジニアを養成するような本を作りたいという話が出てきて、執筆することになりました。執筆陣には、CA主催の「Frontrend」という勉強会で登壇した人のみを選びました。内容としては、新しい情報を解説するというよりは今までやってきたことをきちんと説明しています。大きな意味では本書が次のステップになるための地図になればと思っています。

谷拓樹：仕事として主にHTMLとCSSの設計、テクニカルディレクション、最近ではUIデザインも行っています。担当した章は「第6章 CSS実践入門」「⁠第15章 Web Components入門」です。

平木聡：主にJavaScriptでソーシャルゲームを作っています。担当した章は「第10章 JavaScript開発におけるテスト」「⁠第13章現場で使える品質管理」です。

水野隼登：担当した章は「第5章マークアップクイックレシピ」を担当しました。普段は女性向けWebサービスを作っています。

加藤賢一：執筆者にはFrontrendの登壇者を集めたという話がありましたが、わたしだけは登壇したことがなく、普段イベントではカメラマンをしています。担当した章は「第4章 HTML/CSS/JavaScript基礎」です。業務ではAmebaのサービス部門で、サービスの運用や新規開発を行っています。

原一成：普段はAmebaのプラットフォームを作っていて、フロントエンドの部分と、node.jsを使ってフロントエンドサーバを構築しています。担当した章は「第8章モバイル・マルチデバイスへの対応」「⁠第12章 Gitでバージョン管理」です。

泉水翔吾：普段の業務は、弊社が展開している各サービスのパフォーマンス改善であったり、フロントエンド技術の推進業務を行っています。担当した章は「第7章 JavaScriptの設計と指針」「⁠第16章 ECMAScript 6」です。

斉藤：次は名古屋勢です。

杉本吉章：実はCAに入って1年もたっていない新米です。普段の業務では、CAで出しているサービス間を回遊するための仕組みをJavaScriptで作っています。担当した章は「第14章セキュリティ対策の基本」「⁠第17章 WebRTCの実装」です。

佐藤歩：サービス部門にいて、現在はキュレーションメディアを開発していますが、専門はフロントエンドです。担当した章は「第11章パフォーマンス入門」です。

斉藤：実はもう一人いるのですが、本日は不在です。石本光司さんです。「⁠第3章 UI/UXデザイン入門」「⁠第9章フロントエンドの開発環境」を執筆しています。

担当した章で伝えたかったこと

次に、担当した章で伝えたかったことを章の順番ごとに述べていきました。

第1章：フロントエンドエンジニアとは？

斉藤：先ほども話したとおり、今後フロントエンドエンジニアがどのように成り立っていくべきなのかについて書いています。

第2章：Webブラウザの基礎知識

斉藤：皆さんご存知のとおり、フロントエンドエンジニアの主戦場はWebブラウザです。そのためWebブラウザの内部的挙動について知らなければ、仕事が成り立たなくなります。そこで、その基礎を解説しました。HTML5 Rocksに書かれてあるようなことですが、自分らしく書いてみました。

第3章：UI/UXデザイン入門

斉藤：石本さんが書いているのですが、何をもって書いたのかは分からないです。

第4章：HTML/CSS/JavaScript基礎

加藤：本書を読み進めるにあたっての、HTML/CSS/JavaScriptの基礎を説明しています。これらの話はいろいろなところで語られているもので、それを再構成している形です。まずはフロントエンジニアとして知ってほしいことを書いています。

斉藤：加藤さんは本を書くのが初めてでしたよね？

加藤：はい。執筆期間が2ヶ月くらいあり、後半1ヶ月でがんばったのですが一晩で半ページくらいしか進まず、つらかったです。

斉藤：ちなみに僕だけスケジュール通りに脱稿しています。

第5章：マークアップクイックレシピ

水野：5章から具体的な話を説明しています。マークアップの章なのですが7割はHTML5の構文を網羅的に説明しています。残りは、コーディングスタイルのベストプラクティスとHTML周辺のここ最近のツールを浅く広く紹介しました。それぞれの説明では、なぜHTMLをこう書くか、なぜ使うのかを理由づけして書くようにしました。

第6章：CSS実践入門

谷：CSS実践という章で、前半はCSSのレイアウトパターン、後半はCSS設計という形で構成しました。外部のセミナーでもこのあたりを話すことが多く、それをまとめてみました。また、普段からCSSを教える機会があります。レイアウトの方法はいろいろあって、どのプロパティを使うのが正解かと聞かれることがありますが、どれが正解と言うものはありません。いくかのパターンを知っておくことでそれぞれのメリット／デメリットを知り、使い分けることが大事です。そのため、CSSを設計・実装する上でのパターンを書くようにしました。

第7章：JavaScriptの設計と指針

泉水：JavaScriptを書く上で、何を気にしたら良いのかということについて書きました。特にCAではアプリケーションを複数人で開発することも多いのですが、JavaScriptは制約が少ない言語であるため、開発者が設計・指針を意識して書かないと破たんしていくというのを間近で感じてきたからです。また、Undersocre.jsやLo-Dash、Backbone.js、AngularJSのライブラリについても取り上げ、それぞれのメリット／デメリットについて軽く触れています。

第8章：モバイル・マルチデバイスへの対応

原：モバイル、ここではスマートフォンですが、この環境はもう普及していますよね。その中で、モバイルUIの考え方、モバイル専用サイトの作り方などについて半分ほど書いています。そしてマルチデバイス向けと言うと、レスポンシブWebデザインです。なかなか制約があって使えない場合も多いのですが、SEOを含めてマルチデバイス向けを作るには効率的ですので、必要な考え方について説明しています。

第9章：フロントエンドの開発環境

斉藤：石本さんが書いた章です。デベロッパーツール等のブラウザのデバッグツールついてが半分ほど、そして残りのYeomanやGruntなどの自動化のツールについて、彼の言葉で説明されています。ここまでの話を聞いている時点で、やることがとても多いと思うかもしれません。自動化を勉強しないと残業が多くなると思いますので、この章を読んで早く帰れるようになりましょう。

第10章：JavaScript開発におけるテスト

平木：まだ、テストを書いたことがなくても「テストしなきゃ」と考えている人がいると思います。しかし、どこから始めたら良いのか等、ハードルが高いと考えている人が多いはずです。そこで、テストを書ける人にとってはすでに把握されているような内容ですが、テストの仕方について網羅的にと言うか、どうしたらテストを書ける状態になるかを念頭において書きました。

第11章：パフォーマンス入門

佐藤：パフォーマンスは、ネットワークやJavaScript等、いろいろな基礎知識があわさって対策を取るものだと思います。この章では基本的な対策や検証方法を取り上げ、アプリケーションが少なくとも遅くならないように、願わくば速いものにするための手掛かりになるように、気をつけて書きました。また、海外のプレゼンを見ると、レンダリング、ネットワーク、スクリプトなど、要因ベースで分けていることが多いように思います。しかし実際の現場でパフォーマンスの話をすると、どこを速くしたいのかという点で混じりあってることが多いのではないでしょうか。作っている本人としても、この施策でどこが速くなるんだっけ？と、混乱してしまう人も少なからずいます。そこで今回の本では要因ベースで分けるのではなく、ページを最初読み込んだ時（イニシャライズ⁠）⁠、実際に開いて操作した時（ランタイム）でそれぞれについて快適に動くように、フェーズで分けてなるべく分かりやすく書いたつもりです。

斉藤：僕の記憶がたしかなら、この章が一番ページ数が多いはずです。そのくらいパフォーマンスは大切です。まだパフォーマンスまで考えたことがない人はぜひ読んでみてください。

第12章：Gitでバージョン管理

原：（挙手してもらったところ）参加者の皆さんもGitを使っている人も多いみたいですね。Gitは初めて使うと機能が多くて、難しいと思うかもしれません。この章では、自分が使ってきた中で、便利だなと思った点、ここを押さえておくと良いという点を中心に書きました。バージョン管理の概念やスナップショット、コミット、ブランチモデル等を説明しています。この本もGitHubのPull Requestを使って書いているのですが、このPull Requestについてもスクリーンショット中心に紹介しました。

第13章：現場で使える品質管理

平木：品質管理ということで何を書けば良いかと悩んだんですが、結局のところパフォーマンス、ドキュメント、コードカバレッジに絞って書きました。これらについて、あると便利になるツールの紹介を中心に、使えれば自動化等で仕事が楽になるだろうということを意識して紹介しました。

第14章：セキュリティ対策の基本

杉本：もともとサーバーサイドでの開発経験が長かったので、自分が担当することになりました。セキュリティは検討して当たり前で、フロントエンドの流行に流されず、基本を押さえておきましょうということを念頭において書きました。内容としては、DOM based XSS、CORS、Apacheやngnixのサーバ設定について紹介しています。

斉藤：先日、TweetDeckにXSSの脆弱性を抱えたまま、運営されていたという話がありました。フロントエンドでJavaScriptが書かれるようになって、例えば全部JavaScriptでカッコイイかもしれないと思うかもしれませんが、気をつけてくださいという章ですね。

斉藤：残りの章は開発の最前線、現場で使えるのかな？という点ではまだよく分からないものですが、フロントエンドの未来となる要素を取り上げました。

第15章：Web Components入門

谷：割り当てられたページ数が少なかったので、簡潔にまとめました。Web Componentsのサンプルも簡単なものを取り上げていますので、こういうふうになっているんだなと理解してもらえればと思います。特に本書では、現状のHTML/CSSにはないスコープの概念、カプセル化をWeb Componentsの世界で実現できることにフォーカスしています。

第16章：ECMAScript 6

泉水：ECMAScript 6はES.nextやharmonyとも呼ばれています。この章ではECMAScript 6が仕様の策定中ということもあり、完全には網羅できていませんが、主たる新機能はおおよそカバーし紹介しています。ECMAScript 6はECMAScript 5で問題になっている事柄を解決したものなので、だいぶ良くなっていると思います。

第17章：WebRTCの実装

杉本：Web Components良いよね、ES6良いよねと来て、えっWebRTCなの？という感じですが、前回のFrontrendにてWebRTCをテーマに発表したものを焼き直して、原稿に落とし込みました。本書の一番最後でNATを越えて終えるということでフロントエンドらしくないですし、今すぐ使えるとは言えないのですが、WebSocketと同じリアルタイム技術ということで、勉強した成果を書きました。

ちなみに、会場でWebRTCに触ったことがある人は1、2割くらいでした。

斉藤：……という感じで、全部で17章208ページで構成されています。ムック本という種類なのですが、見本が届いた時にはとても厚いなと感じました。

一問一答

書籍の紹介が終わり、参加者からあらかじめ集めていた質問を含め、テーマを挙げて、それに対してパネラーが回答するコーナーに入りました。

ここからフロントエンド開発者になったきっかけ

斉藤：フロントエンド開発者になったきっかけと言うことですが、パネラーの人達はバックグラウンドが様々ですね。まずは谷さんから。

谷：どちらかと言うとデザイナーから入ったタイプです。もともと就職した会社がベンチャーで人がいなく、デザインしてブラウザに起こすのが自分だったのがきっかけです。マークアップやCSSにはまったということもあり、今は楽しくやらせてもらってます。

斉藤：佐藤さんは対極にいますよね？

佐藤：僕はエンジニアよりと言うか、前の会社ではPHPしか書いていませんでした。小さな会社だったので、その中でJavaScriptも書くようになりました。フロントエンドが盛り上がっているように見えたのと、CAに来るきっかけも重なり、フロントエンド専門になりました。

斉藤：2人とも、愛社精神がありますね。では、CAでエンジニア初採用の原さんはどうですか。

原：入社したのは2008年、CAでエンジニア採用が始まった時でした。そもそもHTMLとCSSしか書きたくないと思って、入社してきました。

斉藤：すごいですね……。

原：インターネットが流行りはじめた時に、掲示板（BBS）とかのCGIに感動して、ホームページを作りたい!と思って、その頃からフロントエンジニアをやっていたという感じですね。

斉藤：生粋のエンジニアだったんですね。

いま、注力していること、今後やりたいこと

斉藤：いま、注力していること、今後やりたいことを聞きたいと思います。まずは加藤さん、お願いします。

加藤：最近はAngularJSでつくることが多くなってきていて、最近はこれと格闘しています。以前使っていたBackbone.jsとは全く異なっていて苦労しています。また、会社の取り組みでワーキンググループというのがあり、自分は業務と全く関係ないフィジカルコンピューティング、いわるゆる電子工作に取り組んでいます。

斉藤：僕も最近ロボットに興味があり、一緒に取り組んでいます。

会場でフィジカルコンピューティングをしている人を聞いたところ、1割以下でした。

斉藤：会場でもフィジカルコンピューティングをしている人は少ないですね。NATを超えられませんよ。

平木：いや、NATを超えた結果ですね。

斉藤：なるほど。では、第二子が生まれたばかりの水野さんはどうですか？

水野：いまは業務に追われていて、注力している分野はないですね。

斉藤：それは大変ですね。

水野：……そうですね、いまのプロジェクトが息の長いサービスなので、目新しいことができません。もしも新しいことをやれるのであれば、vue.jsを入れてみたり、ネイティブライクなものをWebで実装してみたいですね。例えば、OpenGLでフィルターを実装したり、カメラAPIを使ったり、デベロッパーツールなどでGPUレイヤーの可視化ができるようになってきたのでアニメーションできないか、という点に興味が向いています。

これからフロントエンド開発者を目指す方にアドバイスを

斉藤：次は、これからフロントエンド開発者を目指す方にアドバイスしてください、という質問です。

現在フロントエンドエンジニアではないという人を挙手してもらったら、会場5割くらいでした。

斉藤：意外に（フロントエンジニアではない人が）多いですね。ぜひ本を買ってください。では平木さん、どうですか？

平木：これから目指しているのであればと言うと、まず書籍を購入してくださいというのが一つ（笑⁠）⁠ それと、フロントとサーバと分けて考えると、これからは厳しくなってくると思います。書籍の内容を見てもこんなにあるのかと思うかもしれませんが、垣根をつくるとこれからキャリア的に先細りになりそうなるのではないでしょうか。そのため、サーバ/インフラ、UI/UXとかあまり関係なくなく情報を収集して、浅くても学んでいくのが良いのではないかと思います。

斉藤：はい、今話題のフルスタックエンジニアになれというわけですね。あまりにも答えが良く、時間もないため次に行きます。

フロントエンドエンジニアのパフォーマンス改善をするモチベーションの施策は？

斉藤：ここからが事前に集まった質問です。フロントエンドエンジニアのモチベーションを保つには？ということですが、ちょうどその仕事をやっているのが泉水さんなので、お願いします。

泉水：個々のプロジェクトの抱える問題は、サービスの性質もシステム的にも異なるものなので、技術的なところはそれぞれフィードバックしていくしかないと思っています。モチベーションを保つため施策としては例えば、各プロジェクトに対してWebPagetestというツールを使って定量的にパフォーマンスを計測していて、それを週1回平均化しランキング付けをして発表しています。パフォーマンスが良かったプロジェクトには、ルンバをあげたりしています。パフォーマンスが上がるとPVも上がるはずなので、そのようにしてパフォーマンスへの興味や開発の意欲をかきたてるようにしています。

斉藤：ルンバしか聞こえませんでしたが。

泉水：改善率の高いプロジェクトについては、高級お肉なども出ています。

次に来るJavaScriptフレームワークは何だと思いますか？

斉藤：次にJavaScriptフレームワークは何だと思いますか、という質問です。名古屋勢の佐藤さんと杉本さんに全力を尽くしてもらいたいと思います。

佐藤：えっと、JavaScriptフレームワークに何が来るかはすごく興味がありません。

斉藤：本当ですか？

佐藤：えーと、順当にPolymerとかが来るなら、みんな、しばらく楽しめそうですね。

斉藤：杉本さんはどうですか。

杉本：僕と一緒に作りましょう！

斉藤：おっと……すごい、正解です（笑⁠）⁠ 新しいJavaScriptのフレームワークを作りたかったら、杉本さんと一緒に作りましょうということで。フレームワークは使うのものではない、つくるものだと言うことですね。

テストとリファクタリングについてどのような点に注意してますか

斉藤：次は、テストとリファクタリングではどのような点に注意しているかといことについいてなのですが、書籍での担当は平木さんでしたね。お願いします。

平木：テストコードではなく、自分の場合はテストしやすいコードになるように書くのに注意しています。テストコードを書くのは知識があれば問題なくできると思います。問題点はテストをしやすいコードや設計であって、これが重要です。例えば、1つのメソッドがとても長ければ、なかなかテストはつらいものがありますよね。そのため、分割するなど設計を気をつけています。

斉藤：杉本さん、つけ加えることはありますか？

杉本：そうですね、リファクタリングはテストと割と表裏一体なところがあります。そのため、テストする、イコール、リファクタリングも一緒にしていくということで、平木さんも言っていたとおり、コードを紐解きながら、コードを書き替えてテストを通るように改善していくということですかね。

どこまでモバイル対応していますか？

斉藤：どこまでモバイル対応していますか？という質問です。原さん、どうですか？

原：モバイル対応がスマートフォン対応ということであれば、CAでは100％しています。と言うか、まずはモバイル向けに作っています。そこからPC向けにつくり直しています。ケースバイケースですが、人数がいる場合には分けて作っても良いのではないかと考えています。また、動きが多かったり、モバイルユーザーの満足度を上げたりする場合には、分けたほうが良いと思います。その時に気をつけているのは、タップベースのUIや、できるだけ軽く、例えばライブラリもPCも別に用意したり、ネイティブコードを書いたりするとかです。レスポンシブももう少しやれたらと思うのですが、現実的にはモバイル対応100％と言う形です。

斉藤：僕もCAにいましたが、その頃はスマートフォン向けの対応しかしていない勇気のある会社だったので、ビビりました。今の会社では両方やってるため、レスポンシブを今後どのようにしていくかは今考えているところです。大きくワークフローが変わるのがレスポンシブだと思っているため、そのへんは時々によるのかなと思っています。

まとめ、懇親会

時間のやりくり上手い斉藤さんの司会により、予定時間の時間1分前に終わりました。まとめの挨拶では谷さんが会場と同じビルに入っている書店は23時まで空いているので、イベント後でも本書の購入できることをアピールしていました。

パネルディスカッション終了後は、同会場にて懇親会がにぎやかに行われました。