Opt Technologies Magazine

オプトテクノロジーズ 公式Webマガジン

#10 市ヶ谷Geek★Night「型のあるフロントエンドの世界〜フロントエンド・フロンティア〜」レポート

f:id:opttechnologies2015:20161106114316p:plain

11/4(金)に市ヶ谷のオプトカフェにて表題のイベントを開催したのでその様子をレポートします。

あいさつ

こんにちは。uryyyyyyyです。オプトで開催している「市ヶ谷Geek★Night」も今回で10回目となりました!今回もとても盛況でTwitterのタグがトレンド入りするほど盛り上がったので、その様子をレポートします。

なお、僕は当日は受付とTwitterタイムライン係も担当していました。会場にいた 方はご存知でしょうが、会社PCのセキュリティソフトの関係で5分毎にPCを起こしに来ていた者です。。。

市ヶ谷Geek★Nightとは

オプトでは、エンジニア向けイベントとして、一年ほど前から「市ヶ谷Geek★Night」を定期的に開催しています。 おもしろくてタメになるイベントを目指し、エンジニア中心に運用されているイベントです。

過去開催回はこちらになります。

ichigayageek.connpass.com

#10 型のあるフロントエンドの世界 について

ichigayageek.connpass.com

オプトでは、Scala/Javaを扱うサーバーサイドエンジニアが多かったことから、フロントエンドでも型を使いたいということで以前からTypeScriptを積極的に活用していました。

しかし最近ではそれだけではない様々なAltJS/型チェックのツールが出てきているので、ぜひ一度このテーマで話し合いつつ今後のツール選定の参考にしたい(あわよくばこのあたりに関心のあるエンジニアにアプローチしたい)と思い開催に至りました。

今後も市ヶ谷Geek★Nightではニーズがありそうな勉強会を開催していきたいと考えておりますので、扱って欲しいテーマなどあればコメントなど頂ければと。

イベントレポート

前置きが長くなりましたがイベントのレポートをまとめます。

なお、当日にハッシュタグにてつぶやかれた内容をこちらにまとめています。 合わせてご覧頂いて、当日の盛り上がりを感じ取って頂ければ。 上が僕がまとめたもの、下が参加者にまとめていただいたものになります。僕の方はわかりやすいように少し編集を加えています。

http://togetter.com/li/1044813togetter.com

http://togetter.com/li/1044814togetter.com

また、他の参加者の方よりイベント当日にレポートを上げて頂いたので、合わせて共有させて頂きます。

nabeliwo.hatenablog.com

また今回はLTは3枠ですが、これは「多めに話したい」とのオーラを感じ取ったので枠を減らして時間制限を設けない形にしていました。

では、以下で各発表についてまとめていきます。 内容については既に資料が公開されているので内容はそちらを見て頂くとして、主に質疑や雰囲気についてお話します。

株式会社オプト 伏見大輔 「フロントエンドが本当に必要だったもの」

sisisin.github.io

f:id:opttechnologies2015:20161107112310j:plain

一番手ということで、実践的な内容というよりこれからのWebフロントエンドを取り巻く環境を見返して「なぜフロントエンドで型なのか」を順を追って解説していく発表でした。Twitterを見ていると、「良い地固めトーク」などの反応を頂いていました。

TypeScript+Angular1系の構成を扱っているという話の中で、「デザイナーさんからもらうHTML / JSなどの適用はどうしているのか?」という問いに対して、「エンジニアサイドでAngular + TypeScriptに落とし込む作業をやっています。ここは必要なコストと認識しています。」と答えていました。

ちなみにオプトでのTypeScriptの実践的な活用事例はこのような形です。

tech-magazine.opt.ne.jp

株式会社トレタ 吉田徹生さん「型を使うと便利な開発」

f:id:opttechnologies2015:20161107112332j:plain

一番手の伏見と被る部分も少しありましたが、フロントエンドの歴史とその辛さを丁寧に語って頂き、そこからなぜ型が登場したのか、どのように型と向きあっていくべきかといったお話を頂きました。特に過去を振り返ってのトークでは多くの笑い(苦笑い?)が起きていました。

「なぜTypeScriptか?」については、JSの書き方を許容しつつもそこにゆるく型を付けていけるという、JSのスーパーセットという位置づけだからかと感じました。

初期の導入が面倒ながらも、複数人開発の際に間違いが起きにくい、IDEの補完が効きやすくなる、といった点で良いのではとのやりとりもありました。

株式会社キュア・アップ 鈴木晋さん「実践投入してわかったflowtypeのメリデメ」

f:id:opttechnologies2015:20161107112354j:plain

flowtypeを実践で使った事例というなかなか珍しい発表をして頂きました。(登壇者はなんと51番目のコントリビュータだとか)

flowtypeはAltJSではなくあくまで型チェッカで、 undefined is not a function (あるいは ぬるぽ )問題を解決するために生み出された、ということでした。

「flowtypeを採用した理由は?」という質問に対して、先ほどのTypeScriptと違ってあくまでJSなため、Simpleで導入・捨てるのが楽なところとJSの進化についていきやすいところを挙げていました。全部載せでeasyに対して、Simpleを組み合わせていきたい、という対比を使われていました。

また、 @flow を付け忘れて型チェックが効かなくなる問題については、lintやbabelの何かで解決できるよ、といった質疑も伺えました。

株式会社ビズリーチ 竹添直樹さん「Scalaによるタイプセーフなフロントエンド開発」

f:id:opttechnologies2015:20161107112414j:plain

発表中に「そもそもフロントエンドエンジニアがScala書くの?」との問いで会場がドッと湧いていたくらいアウェー(?)な場でしたが、サーバーサイドがScalaの場合に型情報をUniversalに共有できる点を話して頂きました。

現実的な使い方としては、フロントエンドのサーバーとの連結部分やロジックなど、型を共有したい部分をScala.jsで書いてAPIを公開しておいて、普通のJSではViewの描画のみに専念する(二槽式と呼ばれている?)と良いのではとのこと。

質問で、「JSのモジュール化(import/export)の構文に対応していないのか?」との質問に対して会場では「できるといった話はまだ聞いてない」とお答えいただきましたが、その後のブログで追記されていたので合わせて共有させて頂きます。

takezoe.hatenablog.com

LT1 motoyan_kさん 「WEBフロントエンド開発にHaxeつかってたけどElmに乗り換えてもいいかなって思った話」

qiita.com

「元々Haxeを使っていたけど、奥さんにWindowsPCを捨てさせられてエディタがなくなったからやめた」などと面白いエピソードとともに、「奥さんに時間を取られるエンジニアにとって覚えることが少ないElmは良いぞ」というお話を頂きました。

性能や他ライブラリとの連携も考慮されているとのことです。

LT2 Yosuke Toriiさん 「Friendly Elm (怖くないElm)」

まさかのElmかぶりでした。Elm organizationのmemberであるjinjorさんに、Elmの良さと実践事例をご紹介頂きました。

Elmはランタイムエラーが本当に出ないように作れるらしく、サンプルとしてこれまでExcel管理していた座席表をElmで実装してみたら本当にエラーが出なかったとのこと。ソースコードはこちらで公開されているようです。(コントリビュータ2人いると思ったら同一人物っぽいですね。)

github.com

LT3 ovrmrwさん 「GraphQL in wonder typed land」

qiita.com

(IDは"overmorrow"から来てると本人に伺いました。)

まさかの19分のLTをして頂き、見事geekNightの最長LT記録を叩き出しました。

GraphQLでのschemaと呼ばれる定義についてのお話と、それをTypeScriptで扱うと型の恩恵が受けられて良いというお話でした。 初心者でも理解しやすい、とのことでしたが会場の様子はTogetterのまとめを見てください。

おまけ

f:id:opttechnologies2015:20161107113836j:plain

今回は少し予算をもらえたため、食事が豪華になりました。 普段よりも美味しい食事と、さらに「市ヶ谷Geek★Night」ケーキも提供しました。 食べ物の減り具合とTwitterを見るに、なかなか好評だったようです!

今後もみなさまに盛り上げて頂くことで、さらに予算をもらえるよう頑張っていきます。╭( ・ω・)و ̑̑ グッ !

まとめ

テーマは登壇した伏見が考えてくれたのですが、多種多様なAltJSの話が聞けて大変満足感のある内容だったのではと思います。(あとDartも欲しかった感ありますね。。)「市ヶ谷Geek★Night」では引き続きこのように需要のあるテーマの勉強会を行っていきます。ぜひ「市ヶ谷Geek★Night」とオプトにご興味をもって頂き、ご参加ください。

ちなみに、次回は12/21に「仮 Sparkchristmas(スパークリスマス)」と題してSparkの運用・チューニングをテーマとしたイベントを行う予定です。こちらもご都合つけばぜひご参加ください。