Frontend Meetup Vol.1にいってきました。場所は有楽町にある株式会社FiNCでした。キッチンのあるおしゃれな会場でした。
テーマSPAでSPAに関して知見のある方々が登壇されていました。濃い話が聞けたのでおもしろかったです。
以下は発表資料のまとめと感想です。
React/Reduxで半年くらい真面目にSPAするとわかること
@takayuki_shmzさんのReactとReduxを使ってSPAをした話。
もともとネイティブアプリがあって、それと同じ体験を提供するためにSPAを選択したとのこと。既存のAPI資源もあったので、それを活かして最短でリリースしたかった。ドキュメントも豊富だったのも後押しした。
SPAで幸せになれると思ったけどそうでもなかった。正しくコンポーネント指向をしないと大変とのこと。Fluxもコード量が多くなるので把握するのがとても大変とのこと。
正しくコンポーネント指向しないと辛いというのは確かにその通りだと思った。割とページに特化したコンポーネントが作られていておいおいと思ったことは結構ある。これは多分ReactでもVueでも同じことなんだろうな。自分で作るときは出来るだけ汎用性を意識したい。
革命と秩序とSPA
@joe_reさんのfreeeにおけるSPAの取り組みに関する歴史の話。この方はもはやこの界隈ではおなじみの人になっている気がします。
最初はBackbone.jsを使っていて、そのあと社内フレームワークが登場。そのあとVue.jsをView Modelに使用していたけど、複雑になっていくアプリケーションだとスケールしないという問題が発生。そこでReact + Flux というパラダイムシフトが起き、フロントエンド委員会を設立して一気にReactでやっていく環境を整えた。それでもチーム間で開発をするとき各層のインターフェースを理解しないで実装を行ってしまうため複雑さがましてしまう。そこでflowtypeを導入して秩序を作ろうとしている。
freeeのフロントエンドへの本気度がその歴史を通じてよくわかったのがおもしろかった。苦しみ抜いた上で最適解を選んでいるのが尊敬できる。あとフロントエンド委員会を設立できるというところがfreeeという会社のエンジニアの凄いところだなと思う。こういうパラダイムシフト的なものは段階的に買えるのではなく一気に変えるなどしないと多分無理なんだろう。
Angularと心中する
@Quramyさんの心中というかAngularをどう使ってアプリケーションを作っているかという話でした。
Angularでコンポーネント指向の開発を行ったりCSSのスコープの問題に対処するためにBEMを用いて開発を行っていたが、クラス名が長くてだるい問題が発生し、それを解決するために独自ディレクティブを作った話や、scaffolding的なコード自動生成のタスクを作ったりして開発の労力を少なくしたりエラーをモニタリングするためにrollbarを使ったりする話を聞くことが出来た。
心中するというからどんな物騒な話かと思いきや、Angularを使った開発の話でほっとした。コード自動生成や、rollbarの話はとてもおもしろかった。ある程度型が決まっていたらコードを自動生成できるようにした方が省エネでとてもよさそう。rollbarのsource mapファイルをアップロードしてJSのエラーをトラッキングするというのは実務でも使える知識なのでやっていきたいと思った。
Angularと決別する
@konpyuさんのAngularと決別というよりはコンテンツ配信とSPAの話。
コンテンツ配信系のサービスで initial load が遅いのはUX的にとても悪い。何を置いてもまずはとにかく初期ロードを早くしないと行けない。基本的なチューニングから見直しはじめた。 やったこととして。
- DOM の数を減らす
- 単純にDOMを減らし最近流行のシンプルなデザインにしていく。
- HTTP 負荷を減らす
これだけやるだけでも30%ほど速くなった。 今後は体感で速くしていきたい。「速く感じる」ことが出来れば良い。枠組みだけ最初にレンダリングして他のコンポーネントは逐次やっていく等。 SPAはモバイルだと露骨に性能に影響が出てくるので注意。
割と順当なチューニングで30%速くなるというのは凄いと思った。やはりこういう小さなことからはじめるのが一番良さそう。デザイナーがはじめにDOMを組んでしまっていてそれを中心にアプリケーションを構築していると難しそうだけど・・・。SaaSを切るというのはすぐ出来そうだと思った。
ウェルネスタイム
FiNCならではのイベントがありました。今回はウェルネスタイムという枠で、トレーナーのかたが肩こりに効くマッサージや型を動かす方法を実践しました。仕事が終わった後でさらに座って発表を聞いていたので、体を動かすのはかなり気持ちよかったです。さすがはヘルスケアのベンチャーだと思いました。
SPAと覚悟
@teppeiさんのSPAとは何かという話。これはだいぶ響く発表だった。
SPAとはなにか
ブラウザにとっては1枚のページそこに様々なハックを駆使してリッチな体験を提供するアプリケーション
ブラウザの標準的なUXに満足できない人がやる。ブラウザを超える覚悟がないならSPAは選択すべきではない。SPAならではの考慮事項は大量にある。ちゃんとa11yを自分で考えて実装しなくてはならない。あなたのSPAは本当にブラウザを超えているのか？あなたはSPAでどんな問題を解決したのか？
一方でブラウザを超えすぎてもだめ。ユーザはブラウザを操作するという気持ちでSPAなページを見るのでユーザを驚かせるような実装は出来るだけ控えたほうがいい。
自分が響いた言葉で
あなたのSPAは本当にブラウザを超えているのか？あなたはSPAでどんな問題を解決したのか？
というのがあって、SPAをすることでどんな問題を解決するのかというのは常に意識しないといけないと思った。やりたいだけならべつにやる必要はない。何か解決したい問題があってそれを解決するためにSPAを選択する。そういう姿勢は大事だなと思いました。流行ってるからSPAを選択するというのは間違ってますね。まぁ勉強するためにSPAを選択するというのもある気はしますが、それは自分のプロダクトでやるのが正解でしょうね。
1pxをめぐる戦い
@yoshiko_pgさんのCSSについての話。
可変長なりストで項目が4つ以下の時はリストの下線は必要で、5つ以上の時はなくすということをCSSでどう表現するかという話。 nth-child や not を利用して複雑な表現が可能になるというのがおもしろかった。これぐらい自由自在にCSSが使えるようになると楽しいだろうなと思った。
SPAでのセッション管理とセキュリティ
@uryyyyyyyさんのSPAでのセッション管理とセキュリティの話。
セッション管理では基本Cookieを使えば良い。CSRF対策は動的にフォームが変わるSPA等では仕込むのが結構難しい。ブラウザのpre flightの仕組みを使うと良い。独自ヘッダをつけるかContent-typeをapplication/jsonにしてサーバー側でバリデーションをかけることで解決する。ざっくりとセキュリティについて理解しておくこととブラウザの制約を知ることは大事。
CSRFをなんとかするときのpre flightの仕組みとかはよく知らなかったので調べたいと思った。SPAをやることの覚悟としてセキュリティ周りのことはやらなきゃいけ内っぽいのでよく考えたい。
Angular2でつまづいたところ
@nacika_insさんのSNSを作ったときAngular2で躓いたところについて。
認証機能で躓いたことに関して発表されていました。やはりSPAで作るとそういうところが難しいようですね。紹介されていたmint snsはシンプルな感じでとても良さそうでした。
まとめ
濃いものからライトなものまで幅広い発表内容だったのでかなり濃密な時間を過ごせました。特にSPAの覚悟についての話を聞けたのが良かったです。自分がSPAで作るときそのSPAはちゃんとブラウザを超えるものになっているか。ちゃんと意識する必要があります。とはいえ、これからのWebの時代。SPAで構築するのが最適な場面もないことはないはずなので、キャッチアップをちゃんと行っていくことは大事だと思いました。
あと、FiNCならではのウェルネスタイムがおもしろかったのでFiNCが会場の勉強会はまた行ってみたいと思いました。
