【増枠】Frontend de KANPAI!

今回は DeNA さん主催の Frontend のイベントに参加してきましたので、 報告しようと思います。hashtag はこちら #frokan

firebase の勢いがすごい。あと now も多少人気で、now 信者の私とっては嬉しい 。

※ https://twitter.com/DeNACreators/status/1152199891860389888
※ https://twitter.com/antidotech/status/1152154690617872384
※ https://twitter.com/wanami3103/status/1152202843618603008

https://frokan.connpass.com/event/135584/

イベント概要

「Frontend de KANPAI!」（以下、FROKAN）は、フロントエンドエンジニアやフロントエンドに興味がある人が集い、ドリンク片手にゆるく交流・技術交換ができるコミュニティを目指しています。

※ https://frokan.connpass.com/event/135584/

特徴的だったのが立食形式という点です。 会場には多少の椅子が用意されているものの、ほとんどの人が立ってドリンクを持ちながら、登壇者のお話を聞いていました。

座っていると私はあんまり他の参加者とコミュニケーションしない人です。 椅子があると、その椅子が自身のテリトリーになってしまって閉じこもってしまう気持ちがあります。 しかし、立っているとその縛りがないので、楽にコミュニケーションを取れた感じがありました。 照明が暗かったというところもあると思います。ちなみに、お酒は一切飲んでないです。（笑）

ただ、翌日は少しつらかったです...。

https://twitter.com/silverbirder/status/1152348180643627008

普段は、メモをがっつり書いて twitter に投稿している私ですが、 今回は一切そのようなことをしていません。したがって、ほぼ記憶ベースでイベント内容を報告します。ご了承ください。 誤りありましたら、ご指摘下さい。

印象に残ったお話

React と WebComponents で Vanilla な開発

日本経済新聞社 宮本 将 さん

WebComponents に興味がある私は、この発表は気になっていました。

https://twitter.com/silverbirder/status/1149648900627693572

内容をざっくり説明すると「CustomElements をプロダクトとして使っていたけど、つらみがあったので typescript で縛るようにしたよ」 というものでした。CustomElements は Web 標準の技術ですが、react や vue のような prop による型縛りがありません。 すべて文字列として表現するため、バリデーションチェックがつらいというお話が印象的でした。 そこで、react(JSX) + typescript を駆使して CustomElements を Wrap することで上記問題を解決されたそうです。

実際に導入したことによる「つらみ」というものは、プロダクト導入検討している私にとってはありがたいお話でした。

そもそも、なぜ CustomElements を導入したのかというお話もありました。 日経さんでは WebApplication というより Static な WebSite に近いプロダクトだそうです。 そのため、react や vue といったフレームワークは必要以上な機能が多いため却下し、 Vanilla な JS で CustomElements を進めて行こうという経緯があるそうです。 プロダクトの特徴に応じてコンポーネント選択すべきね。

※ CustomElements っていろんなフレームワークで対応しているんですね。

https://custom-elements-everywhere.com/

実録フグ料理

株式会社ディー・エヌ・エー Takepepe さん

当初、「お、ネタ枠か？」と思っていたのですが、 予想以上に面白いお話でした。

Project Fugu というものがあります。

https://www.heise.de/developer/artikel/Google-Projekt-Fugu-Die-Macht-des-Kugelfisches-4255636.html

Unter dem Codenamen Fugu plant Google die Einführung zahlreicher Webschnittstellen in seinem Webbrowser Chrome, welche die Lücke zwischen Progressive Web Apps und ihren nativen Gegenstücken schließen wollen.

Google 翻訳を通すと

コードネーム Fugu の下、Google は Chrome ウェブブラウザで数多くのウェブインターフェースを立ち上げることを計画している。これは Progressive ウェブアプリと彼らのネイティブの対応物との間のギャップを埋めるであろう。

つまり Chrome ウェブブラウザからネイティブな部分を操作できることを目的としています。 今回 Takepepe さんが紹介していたのは Shape Detection API です。 バーコードやテキスト、そして顔を形状検出するデモの発表がありました。 どれもサクッと簡単に動作していましたが、まだ実験的な機能なため安定しない部分もあるそうです。

次の画像は顔検出した箇所にモザイクを入れるデモです。これは笑いました。

※ https://twitter.com/antidotech/status/1152180161413931008

ちなみに、Fugu という名前の由来は、 「ネイティブな部分を操作することは色々な事ができるようになり夢が広がるが、使い所を誤ると危険なもの」という話から フグの「調理の仕方によって美味しい料理になるが、毒があるので調理の仕方を誤ると危険なもの」という自戒の念を込めて Fugu になりました。 ネイティブな部分を操作できるということは、センシティブな情報を取得できてしまうという面があります。 そこが使い方によっては「毒」になるものですね。

新しい API

株式会社ディー・エヌ・エー feb19 さん

https://speakerdeck.com/feb19/xin-sii-api

いきなりポエムを語り始めた feb19 さん。 「DeNA の人たちは、みんなこうなのか？」と面白く見ていました。 この発表では、HTML,CSS,JS の API が紹介されていました。 LazyLoad という有名なものから、少しマニアックな inverted-color まで幅広く、よくこんなもの知ってるんだなと驚きました。

最後に

フロントエンドのイベントは、今回初めてかもしれません。 参加者の多くは、どちらかというと「陽の者」が多く、ノリが楽しい人たちばかりでした。 参加者の方と技術的な話をしたのですが、やはり react, vue, augular のワードが多かった印象です。なんだか聞き飽きた印象もありますが、それだけ需要があるのだなと改めて思いました。

Tags