こんにちは、UIT室 フロントエンドエンジニアのtrkwとyugoです。
2017/3/18に大阪で開催されたFRONTEND CONFERENCE 2017に行ってきました。
3連休の初日ともあってか、新幹線も大阪も人にあふれかえっていました。

まず

腹ごしらえ、からの…

会場

10時から18時とエンジニアのコアタイムにも関わらず参加者が多かったイメージです。
7Fの会場が一時満席になることもありました。

セッション

trkwとyugoが聞いたセッションはこのとおりです。
記事の後ろの方でスライドを載せておくので、気になるセッションがあったら、スライドを見てください！

• あらゆる人のためのフロントエンド
• エンジニアとデザイナーとの距離
• React/FluxベースのElectronアプリをリモートチームで開発した話
• スタンドアロンAMPのススメ
• flowtype による型のある世界入門
• WebGL 2.0時代の幕開け – ウェブのグラフィックスはどう変わるのか
• いわゆる”フロントエンド”がない世界について考える

あらゆる人のためのフロントエンド

花谷拓磨さん
現役高校生エンジニアさんでした。
yugoが高校生の時、なにしてたかを振り返るとバンド活動が1割とモンスターハンターが9割の生活をしていた気がしますね。
現在のフロントエンド、これからのフロントエンドの状況を説明してくれました。
結局、未来の仕様を利用できる環境は限られているので、
現状のJS + Webpack + any…のような開発環境は続いていくと思います。ということでした。
流行の移り変わりが激しいFrontEndで、生き残るためのお話も面白かったです。内容はスライドでご確認ください！
ちなみにyugoは案件で行わない限り、個人の学習においては勝ち馬に乗る方法を取っています…

エンジニアとデザイナーとの距離

安田 学さん
エンジニアとデザイナーの共通認識が違うことによる意思疎通の難しさをお話してくれました。
特にWebデザインで以下のようなものは、テンプレート化できるかもという話が面白かったです。

• 異なる画面幅での見え方
• 文章が長い時の見え方
• エラーがあったときの見え方
• アニメーションの速さ、動き方

僕らもまずは、カラー、アイコン、パーツくらいの単位でデザイナーとコミュニケーションをとっていきたいと思います。
また、当社のデザイナーがどの点をテンプレート化できると考えているのかと意見交換してみるのも良いかと思いました。

React/FluxベースのElectronアプリをリモートチームで開発した話

太田 絵一郎さん
3拠点（1人1人違う拠点）でのリモート開発でもハッカソンはできるというお話。
特に技術選定が大事というところと、Electronを利用して多くの社員の方に利用してもらうという話が面白かったです。
electron-builderを利用して、Windows、macOS、Linuxの環境を構築しているだとか？
electron-builder
https://github.com/electron-userland/electron-builder
内部からの反響も良かったようで、
モチベーション、学習の両面で良いなと思いました。
社内の連絡系環境も3種類ほどあるので、
社内用ツールを同様にElectronで簡単に作れるといいなと思いました。
うちにも社内ハッカソンとかあると面白いかも…

スタンドアロン AMP のすゝめ

石本 光司さん
AMPのお話。
AMPはそこまで、仕組みなどを調べていなかったので、
今回そこを説明していただけて良かったです。
各種検索エンジンでも対応が増えてきているので、これから積極的に対応していってもいいかと！
特にAMPは、モバイルに縛られているわけではないという話で、
メルカリアッテのトップページはPCで見てもAMP対応しているというところが面白かった。
動画を見てもらえれば分かると思いますが、早い。
https://www.youtube.com/watch?v=t6rHrAwic88

flowtype による型のある世界入門

さいさん
特に下記のようなシステムを開発するなら、
型は必要でJavaScriptならflowもオススメというお話。

• 長期間保守されることが想定されるシステム
• 大規模なシステム
• 継続的にリファクタするシステム
• ミッションクリティカルなシステム
• システムに関わる人が入れ替わるシステム

TypeScriptとの比較も面白かったです。
既存システムには、Flowで型導入し、
新規案件の場合は、TypeScriptだと良いとのことでした！
yugoはこの後、flow、TypeScript、両方を学習中のReact Nativeで試しましたが、どちらも一旦あきらめました…
既存に乗せるのちょっとしんどかった（泣
新規で作る時にはTypeScriptでやってみます！！

WebGL 2.0 時代の幕開け – ウェブのグラフィックスはどう変わるのか

杉本 雅広さん
WebGL 2.0は、WebGLおじさんにはおいしい話題だけど、フロントエンドエンジニアにはまだ恩恵がないかも？
見せていただいたサンプルがすごかったので、こちらでも紹介
大量の演算を必要とするアルゴリズム
https://www.kuva.io/hair-simulation/
高い精度を要求するケース
https://uber.github.io/deck.gl/#/
CPU から多数のパラメータを渡す
https://www.marmoset.co/viewer/
Webの持つ役割が広がり、ネイティブアプリケーションの特権を奪っていくような流れがありますが、このWebGLの進化もそのような流れのひとつといえるのではないか、と話されていて、興味深いと感じました。

いわゆる ” フロントエンド ” がない世界について考える

岡本 秀高さん
VUIのお話。
いつ使えるようになるか分からない技術ではあるけど、
いつAmazon Echoが日本に来ても大丈夫なように、
技適の通ってない技術を追っているあたり、あついと感じました。
自分たちで、Alexaを作る会なども行ったそうです。
すごい…

スライド

• あらゆる人のためのフロントエンド 花谷 拓磨さん
• 新ツールやサービスから考える、明日からのデザインフロー 深沢 幸治郎さん
• エンジニアとデザイナーとの距離 安田 学さん
• HTMLスナップショット2016改 momdoさん
• UIデザインから知る「持続可能なデザイン」 山下 一樹さん
• React/FluxベースのElectronアプリをリモートチームで開発した話 太田 絵一郎さん
• ウェブを構成するUIの品質とHTML 桝田 草一さん
• スタンドアロン AMP のすゝめ 石本 光司さん 近日スライドが公開されるようです。
• Enduring CSS 高津戸 壮さん
• flowtype による型のある世界入門 さいさん
• CSSフレームワークをつくろう！ キタジマ タシさん
• WebGL 2.0 時代の幕開け ウェブのグラフィックスはどう変わっていくのか 杉本 雅広さん
• いわゆる”フロントエンド”がない世界について考える 岡本 秀高さん
• webの変遷から考えるUIの設計とその先 榊原 昌彦さん(スライド見つけられませんでした…)

ハンズオン

• XDを使ってプロトタイプを作ろう Yasui Risaさん
• sketchの基本操作を覚えて業務に活かそう コンチさん
• gulpで学ぶSassとpug ショウノ シオリさん
  • Google Docs、GitHub、CodePen
• Reactで覚えるイマドキのフロントエンド開発 アマギタカヨシさん
• Netlifyで作ったSPAやwebサイトを公開しよう 岡本 秀高さん
• Angular入門者ハンズオン 奥野 賢太郎さん

懇親会

シャレたお店で、いろんな催しが行われました〜

感想

初参加で東京からの参加しましたが色々なセッションがあり、自分たちが不足しているところを探せる場のような気がしました。
FRONTEND CONFERENCEのテーマが「つながる」でしたが、

• フロントエンドエンジニアとしてサーバサイドエンジニアやデザイナーとどのようにコミュニケーションしていくべきなのか。
• フロントエンドに限らない技術のトレンドとどのように繋がっていけばいいのか。

という観点が必要なんだなと感じました。
現場からは以上になります。