FRONTEND CONFERENCE 2019行ってきたので雑な感想

日記

最近の案件でVueでSPAに入門して、設計どうしたらいいかさっぱりで困ったので、ヒントでもないかなーと行ってみた。

あと関西でやってくれるカンファレンスとても助かるのでできるだけ行きたいよね。

もっとデザイン寄りかなーと思ってたけど、思ってたよりプログラマ寄りというか、そんな感じだった。まあそもそも俺が選んだセッションがプログラマ寄りだったのもある。

セッション・LTの感想

各セッションのスライドは以下にいい感じでまとめられていた。

https://qiita.com/chieeeeno/items/33969dca006681e9be68

LTのスライドに関しては上記ページになかったので、ここからリンクしてある。またセッションのスライドのうちA-5についても上記ページにないためリンクした。

A-1 モダンJavaScript再入門

タイトル通りの話。VueでSPAやったときは一応ES2015で書いたけど、十分理解できているかというとそうでもなかったので。

Computed properties, 分割代入、別名つけての分割代入あたりは知らなかった。

個人的にいちばん気になったのは、紹介されているシンタックスがIE以外のブラウザではすでに一通り動作するというあたり。そういえばちょっとした動作確認するときに雑にconstとかアロー演算子使ってたけど、Firefoxでは動いてたな。

A-2 ディレクトリ構成ベストプラクティス 〜 Angularアプリを作り続けてわかったこと

Angularの人によるプロジェクトのディレクトリ構成の話。とはいえAngularに限った話ではなく。さらに言うならおそらくフロントエンドに限らずサーバサイドでも普通に通用する話だったかと。

ドメインごとにディレクトリ作るか、レイヤー(セッションではタイプと呼ばれていたけど)ごとに作るか。どっちもつらみがあり、特に大規模になるとつらいとのこと。

登壇者が辿り着いたベストプラクティスは割とシンプルに、あまり細かすぎない程度にレイヤーで分ける感じ。サーバサイドのフレームワークでよくあるのに近いかな、って感じで個人的には納得。

このセッションは話もとてもうまかった。が、内容しっかりしてる割にスピードあったのでついていくのが大変だった。

C-3 レガシーなフロントエンドをリプレイスする

A-2もそうだけど、このセッションもなにが問題なのかを説明するのがすごくうまかった。

Angular 1とVueが混在するとか、とにかく作ったかのようなレガシーっぷりがウケた。そんなレガシーを作り出してしまう環境から、どうやってしっかりリプレースする流れに持って行ったのかが気になるところ。

A-4 2019年のUIパフォーマンス

フロントエンドの表示のパフォーマンス周りの、多分基本的な話。なぜ多分かというとこの辺さっぱりなので基本的な話なのかの判断もつかないから。

小手先の話ではなく、そもそもライブラリは常に改善されているから最新版を使おうとか、ロードされるコードのサイズ自体を減らしていこうとか、本質的なところでどうこうしようという話だった。

コードの遅延ロード周りとかもいろいろあるっぽくて、ハイドレーションという初めて聞く手法もあるようで、この辺も相当奥が深そう。

なお登壇者によるハイドレーションのサンプルがここに。

https://github.com/jlkiri/partial-hydration-example

A-5 AWSを活用したフロントエンド開発

すぐ満席になっていたということもあり、早めの開始。それにしても終わるのが早くてちょっとびっくりだった。

スライド公開されてないのかな？　サーバサイドはAWSの各種サービスで置き換えられるから、フロントエンドだけでけっこうなところまで開発できちゃうよ、的な、サーバサイドの人間としては危機感感じるような話だった。

とはいえサーバサイドを自前で実装・運用しないで作るっての正直面白すぎるんで一回試してみたい。紹介されていたサービス周り確認したいのでスライド公開希望……。

2019-11-05 15時追記

スライド発見したのでリンクしておく。

https://speakerdeck.com/maeda/awswoyong-itahurontoendokai-fa

A-6 私たちはなぜ SPA で開発するのか

A-5がかなり早く終わったこともあり待ち時間が長く、登壇者の方がその間にOSS活動されてたのがとても印象的だった。

単純にSPAで開発する理由あまりわかってないので聞いてみたが、かなりしっかりした内容の話だった。あとこの方もまた話がうまかった。

A-7 フロントエンドエンジニアのためのセキュリティ対策

セキュリティ好きなので。最初は基本的な話になるのかな、と思いきや、最終的にはCSPの新しめの機能でDOM Based XSSがかなりのところまで回避できるようになるぞ、という、知らなかったエキサイティングな話になった。

CSPのTrusted Types, Perlでもtaintモードとかあったねー、みたいな感じのあれだと思うけど、これブラウザ側でサポートされれば、DOM Based XSSの回避もサーバサイドでのXSSの回避と同じくらい簡単になりそう。すごい。

つーかすでにPolyfillで動くという話なので、試さなくては。

LT-1 脊髄反射でプロダクト作ることの学びとススメ

https://www.notion.so/2019-7cbaa8438e6746029172267e50f9c5fa

小さなプロダクトをいろいろ作ってる方の話。小さなプロダクト、工数少ない割に学べること多いよー、みたいなこと言ってたのがとても興味深かった。

LT-2 Angularはいいぞ！フレームワークにAngularを採用した理由

https://slides.com/yayoimatsuoka/frontend-kansai-2019

Angularは作法が多いけど、そこがいいんだよー、という話。Vueは仕事で使って、ReactはチュートリアルくらいやったけどAngularはさっぱりなんで、ちょっと試したい。

A-2でもAngularのチュートリアル、内容がガチでいいよって話聞いたし。

LT-3 TypeScriptでHTTPリクエストを型安全にする方法

https://docs.google.com/presentation/d/1OoceK0kGSQ9N0l6q-d1UK3zo2gmImwDNKgSfBp8bkOg/edit#slide=id.g6f5b5c2297_0_147

このLTがまたすごかった。話がうまくて、内容もすごい。

せっかくTypeScript使っていても、axiosでHTTPリクエストすると戻ってくるデータが型なくてつらいので、型を簡単につけられるラッパ作りました、って話なんだけど、VS Codeでの補完のデモがほんといい感じで……。

そのライブラリは以下。TypeScript入門したら、試してみよう。

https://github.com/aspidajs/aspida

LT-4 コンポーネント管理の失敗と今後のやっていき

https://speakerdeck.com/yahooshiken/konponentoguan-li-falseshi-bai-tokorekarafalseyatuteiki

内容的にはちょうどC-3と同じ系統。ただしデザイン寄り、という感じ。

ボタンのデザインがぜんぜん共通化されていないという状況を、スクリーンショット撮ってまとめて問題意識を共有していく、というのはほんと理想的なやり方っぽい。見える化大事だよね……。

登壇者の方には懇親会でもためになる話を聞かせてもらいました。

LT-5 Automatic Test for Frontend Side

SeleniumやAppiumでのUIの自動テストの話。AIによる要素セレクタがあるっぽい？　スライドが軽くアニメーションしてかっこよかったのとそれくらいしか覚えてない……。

運営の混乱

セッション自体の進行には俺の見た限り問題なかったものの、細かいところでいろいろ気になった。

  • 部屋番号がわかりづらかった。B05とB06をつなげてB5(ここで0落とすのも)として使っていたようだが、これがわかるまでちょっと困った。
  • セッションのABCDと部屋番号の対応もわかりづらかった。パンフレットは色でだけ対応が載っている。上の問題とあいまってか、Twitterでハッシュタグを間違えていた人もいた。
  • プレミアムチケットでの優先席の指定が、事前の連絡ではGoogleフォームでの登録となっていたがそちらがスタッフから確認できるようになっておらず、会場で再度選択しなければならなかった。ま
  • その他優先席周りは混乱が多かった。特に立ち見が出る中、優先席に空きがあるのはなんとも言えない気分。
  • FRONTEND CONFERENCEに限らず割とどこでもそうだけど、休憩が席確保のためにじっさいには取れない状態なのはなんとかして欲しい。この手のカンファレンスは、全席指定にした方がいいんじゃないかと思う。

個人的な反省

懇親会で仕事くれくれしてしまったのは最悪だった。次からはしません……。

総括

なんか段々テンション下がっていく感想になってしまったけど、基本的にはとても楽しめた。わからないことが多い分学べたことも多かったし。

次も関西でやってくれるならぜひ行きたい。