イベントが開催されました。本稿では,このイベントの模様をレポートします。イベントでは『フロントエンドエンジニア養成読本』の著者陣によるパネルセッションが行われました。司会は本書モデレータでもある,斉藤祐也さんです。斉藤祐也さんパネラーの皆さん。左から,谷拓樹さん、平木聡さん、水野隼登さん、加藤賢一さん、原一成さん、泉水翔吾さん、杉本吉章さん、佐藤歩さん今回はカジュアルに進行したいということで,アルコール等の飲み物があらかじめ用意されました。出版祝も兼ねて最初に乾杯を行いました。乾杯の後,まずは各パネラーの簡単な自己紹介と担当した章の紹介が行われました(敬称略⁠)⁠。斉藤:今はCA(サイバーエージェント)ではなく,リッチメディアでフロントエンドの開発を行っています。Webブラウザの基礎知識」を書きました。このタイミングで本書を発行することになったきっかけは,技術評論社の編集者の高屋さんから声をかけていただいたからなのですが,いまフロントエンドという分野では収拾がつかないくらいやることが増えてきたタイミングであったとも言えます。そのような中,フロントエンドエンジニアを養成するような本を作りたいという話が出てきて,執筆することになりました。執筆陣には,CA主催の「Frontrend」という勉強会で登壇した人のみを選びました。内容としては,新しい情報を解説するというよりは今までやってきたことをきちんと説明しています。大きな意味では本書が次のステップになるための地図になればと思っています。谷拓樹:仕事として主にHTMLとCSSの設計,テクニカルディレクション,最近ではUIデザインも行っています。Components入門」です。平木聡:主にJavaScriptでソーシャルゲームを作っています。現場で使える品質管理」です。マークアップクイックレシピ」を担当しました。普段は女性向けWebサービスを作っています。加藤賢一:執筆者にはFrontrendの登壇者を集めたという話がありましたが,わたしだけは登壇したことがなく,普段イベントではカメラマンをしています。HTML/CSS/JavaScript基礎」です。業務ではAmebaのサービス部門で,サービスの運用や新規開発を行っています。原一成:普段はAmebaのプラットフォームを作っていて,フロントエンドの部分と,node.jsを使ってフロントエンドサーバを構築しています。Gitでバージョン管理」です。泉水翔吾:普段の業務は,弊社が展開している各サービスのパフォーマンス改善であったり,フロントエンド技術の推進業務を行っています。斉藤:次は名古屋勢です。杉本吉章:実はCAに入って1年もたっていない新米です。普段の業務では,CAで出しているサービス間を回遊するための仕組みをJavaScriptで作っています。WebRTCの実装」です。佐藤歩:サービス部門にいて,現在はキュレーションメディアを開発していますが,専門はフロントエンドです。パフォーマンス入門」です。斉藤:実はもう一人いるのですが,本日は不在です。フロントエンドの開発環境」を執筆しています。担当した章で伝えたかったこと次に,担当した章で伝えたかったことを章の順番ごとに述べていきました。第1章:フロントエンドエンジニアとは?斉藤:先ほども話したとおり,今後フロントエンドエンジニアがどのように成り立っていくべきなのかについて書いています。斉藤:皆さんご存知のとおり,フロントエンドエンジニアの主戦場はWebブラウザです。そのためWebブラウザの内部的挙動について知らなければ,仕事が成り立たなくなります。そこで,その基礎を解説しました。Rocksに書かれてあるようなことですが,自分らしく書いてみました。斉藤:石本さんが書いているのですが,何をもって書いたのかは分からないです。加藤:本書を読み進めるにあたっての,HTML/CSS/JavaScriptの基礎を説明しています。これらの話はいろいろなところで語られているもので,それを再構成している形です。フロントエンジニアとして知ってほしいことを書いています。斉藤:加藤さんは本を書くのが初めてでしたよね?加藤:はい。執筆期間が2ヶ月くらいあり,後半1ヶ月でがんばったのですが一晩で半ページくらいしか進まず,つらかったです。斉藤:ちなみに僕だけスケジュール通りに脱稿しています。第5章:マークアップクイックレシピ水野:5章から具体的な話を説明しています。マークアップの章なのですが7割はHTML5の構文を網羅的に説明しています。残りは,コーディングスタイルのベストプラクティスとHTML周辺のここ最近のツールを浅く広く紹介しました。それぞれの説明では,なぜHTMLをこう書くか,なぜ使うのかを理由づけして書くようにしました。谷:CSS実践という章で,前半はCSSのレイアウトパターン,後半はCSS設計という形で構成しました。外部のセミナーでもこのあたりを話すことが多く,それをまとめてみました。普段からCSSを教える機会があります。レイアウトの方法はいろいろあって,どのプロパティを使うのが正解かと聞かれることがありますが,どれが正解と言うものはありません。いくかのパターンを知っておくことでそれぞれのメリット/デメリットを知り,使い分けることが大事です。そのため,CSSを設計・実装する上でのパターンを書くようにしました。泉水:JavaScriptを書く上で,何を気にしたら良いのかということについて書きました。CAではアプリケーションを複数人で開発することも多いのですが,JavaScriptは制約が少ない言語であるため,開発者が設計・指針を意識して書かないと破たんしていくというのを間近で感じてきたからです。Undersocre.jsやLo-Dash,Backbone.js,AngularJSのライブラリについても取り上げ,それぞれのメリット/デメリットについて軽く触れています。原:モバイル,ここではスマートフォンですが,この環境はもう普及していますよね。その中で,モバイルUIの考え方,モバイル専用サイトの作り方などについて半分ほど書いています。マルチデバイス向けと言うと,レスポンシブWebデザインです。制約があって使えない場合も多いのですが,SEOを含めてマルチデバイス向けを作るには効率的ですので,必要な考え方について説明しています。斉藤:石本さんが書いた章です。デベロッパーツール等のブラウザのデバッグツールついてが半分ほど,そして残りのYeomanやGruntなどの自動化のツールについて,彼の言葉で説明されています。ここまでの話を聞いている時点で,やることがとても多いと思うかもしれません。自動化を勉強しないと残業が多くなると思いますので,この章を読んで早く帰れるようになりましょう。第10章:JavaScript開発におけるテスト平木:まだ,テストを書いたことがなくても「テストしなきゃ」と考えている人がいると思います。どこから始めたら良いのか等,ハードルが高いと考えている人が多いはずです。そこで,テストを書ける人にとってはすでに把握されているような内容ですが,テストの仕方について網羅的にと言うか,どうしたらテストを書ける状態になるかを念頭において書きました。佐藤:パフォーマンスは,ネットワークやJavaScript等,いろいろな基礎知識があわさって対策を取るものだと思います。この章では基本的な対策や検証方法を取り上げ,アプリケーションが少なくとも遅くならないように,願わくば速いものにするための手掛かりになるように,気をつけて書きました。海外のプレゼンを見ると,レンダリング,ネットワーク,スクリプトなど,要因ベースで分けていることが多いように思います。実際の現場でパフォーマンスの話をすると,どこを速くしたいのかという点で混じりあってることが多いのではないでしょうか。作っている本人としても,この施策でどこが速くなるんだっけ?と,混乱してしまう人も少なからずいます。そこで今回の本では要因ベースで分けるのではなく,ページを最初読み込んだ時(イニシャライズ⁠)⁠,実際に開いて操作した時(ランタイム)でそれぞれについて快適に動くように,フェーズで分けてなるべく分かりやすく書いたつもりです。斉藤:僕の記憶がたしかなら,この章が一番ページ数が多いはずです。そのくらいパフォーマンスは大切です。パフォーマンスまで考えたことがない人はぜひ読んでみてください。原:(挙手してもらったところ)参加者の皆さんもGitを使っている人も多いみたいですね。Gitは初めて使うと機能が多くて,難しいと思うかもしれません。この章では,自分が使ってきた中で,便利だなと思った点,ここを押さえておくと良いという点を中心に書きました。バージョン管理の概念やスナップショット,コミット,ブランチモデル等を説明しています。Requestについてもスクリーンショット中心に紹介しました。平木:品質管理ということで何を書けば良いかと悩んだんですが,結局のところパフォーマンス,ドキュメント,コードカバレッジに絞って書きました。これらについて,あると便利になるツールの紹介を中心に,使えれば自動化等で仕事が楽になるだろうということを意識して紹介しました。杉本:もともとサーバーサイドでの開発経験が長かったので,自分が担当することになりました。セキュリティは検討して当たり前で,フロントエンドの流行に流されず,基本を押さえておきましょうということを念頭において書きました。XSS,CORS,Apacheやngnixのサーバ設定について紹介しています。斉藤:先日,TweetDeckにXSSの脆弱性を抱えたまま,運営されていたという話がありました。フロントエンドでJavaScriptが書かれるようになって,例えば全部JavaScriptでカッコイイかもしれないと思うかもしれませんが,気をつけてくださいという章ですね。斉藤:残りの章は開発の最前線,現場で使えるのかな?という点ではまだよく分からないものですが,フロントエンドの未来となる要素を取り上げました。谷:割り当てられたページ数が少なかったので,簡潔にまとめました。Componentsのサンプルも簡単なものを取り上げていますので,こういうふうになっているんだなと理解してもらえればと思います。Componentsの世界で実現できることにフォーカスしています。6はES.nextやharmonyとも呼ばれています。6が仕様の策定中ということもあり,完全には網羅できていませんが,主たる新機能はおおよそカバーし紹介しています。5で問題になっている事柄を解決したものなので,だいぶ良くなっていると思います。Components良いよね,ES6良いよねと来て,えっWebRTCなの?という感じですが,前回のFrontrendにてWebRTCをテーマに発表したものを焼き直して,原稿に落とし込みました。本書の一番最後でNATを越えて終えるということでフロントエンドらしくないですし,今すぐ使えるとは言えないのですが,WebSocketと同じリアルタイム技術ということで,勉強した成果を書きました。ちなみに,会場でWebRTCに触ったことがある人は1,2割くらいでした。斉藤:......という感じで,全部で17章208ページで構成されています。ムック本という種類なのですが,見本が届いた時にはとても厚いなと感じました。最近では電子書籍の制作にも関わる。CSS,JavaScriptの基本から現場で役立つ技術まで満載!]』,Kindleストア・楽天Koboにて販売開始。2019」を開催しました。DAY1・DAY2の様子を注目セッションとともにお伝えします。LINEのエンジニア3名がイベントに先駆けて見どころを紹介します。コードの安全性・安定性を高める開発サイクル~テスト管理の効率を上げ,脆弱性診断を自動で行う~本連載では,連載「業務を改善する情報共有の仕掛け」を受けつつ,安全性・安定性を加えた開発サイクルについて考えていきます。若者世代から圧倒的な人気を誇るライブ配信&動画投稿コミュニティアプリ「MixChannel」(ミクチャ)の裏側(レコメンドシステムやサーバサイド開発など)について解説していきます。その他の連載CSS3アニメーションでつくるインターフェイス表現CSS3によるアニメーション表現を紹介していきます。その中でも,幅広い読者に応用してもらえるだろうインターフェイスを主なお題とします。MySQL道普請便り本連載では,MySQLを使ったアプリ開発・運用に関するノウハウをご紹介していきます。RecipeUbuntuの強力なデスクトップ機能を活用するための,いろいろなレシピをお届けします。JavaScriptセキュリティの基礎知識JavaScriptに関するセキュリティ上の問題はどこで発生し,どうすれば防ぐことができるのか?について解説していきます。〜システムをきちんと運用するための基礎知識システムは「作って終わり」ではなく,運用の中でさまざまな問題が発生します。問題の発生に備えて事前にどのような対応をしておくべきなのか,問題発生時に何をしなければならないのか,ポイントを解説していきます。きたみりゅうじの聞かせて珍プレーソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。Linuxのメンテナンスの傍ら,Linuxやオープンソースソフトと日々を過ごす著者が,その魅力とつきあい方を,エッセイ風味でお届けします。PRESS特別編集部員,さわやか笑顔のスーパーハカーはまちちゃんとネット大好き14歳わかばちゃんが,毎号,読者の皆さんから寄せられたおたよりを紹介します。皆さんの日頃の悩みにも答えちゃいますよ。]メールでのお知らせメールで次の案内をお送りしております。メールの配信を希望する方は,利用したい項目をチェックしてメールアドレスを入力し,[登録]ボタンをクリックしてください。UPDATES[ほぼ週間に1回]新刊メールマガジン[ほぼ週間に1回]電脳会議の各号案内[ほぼ1ヵ月半に1回]※変更する場合や停止する場合は,登録情報変更ページをご覧ください。※登録いただいたメールアドレスには,そのお知らせ以外,配信いたしません。Ltd.ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。