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ページで構成されています。ムック本という種類なのですが，見本が届いた時にはとても厚いなと感じました。