モダンフロントエンド勉強会に参加してきました

フロントエンドの技術についてキャッチアップすべく、7月23日に開催されたこちらの勉強会に参加してきました。TECH PLAY の勉強会は今回が初めてです。最新技術のキャッチアップというよりも、各会社の現状を知る機会になりました。

＊当日の流れ

freee/ラクスル/サイボウズさんがそれぞれ事業や使っている技術についてご紹介してくださったあと、司会の方が用意した質問について3社がそれぞれ回答していくという流れでした。

各社会社紹介（freee/ラクスル/サイボウズ）
パネルディスカッション
Q&A
懇親会

下記からは、パネルディスカッションでの各会社の回答をまとめました。

＊技術選定について

freee
メンテされていてissueが少ないライブラリ使う。
ラクスル
一部分だけSPAにしていたが、マイクロサービスを進めたタイミングでNuxtを導入し始め横に広げている。ビジネスサイドがSPAについての理解がないので、難易度や開発期間などについての議論が大切になっている。（Nuxt対応していないプラグインなどがあり時間かかることもあった）
サイボウズ
2011年頃は、信頼性を重視して型付きの Clousr を導入していた。導入してプロダクトに価値が出るものだったら入れたいが、新しい技術でもノウハウがないまま導入すると苦労することになる。コミュニティが習熟しているものを入れたい。

＊パフォーマンスについて

freee
仮装DOMを正しく使うことが大切。今は React などのフレームワークを使うとパフォーマンスについても解決してくれるので、to B のシステムではそれで十分だと思っている。他にはファイルの圧縮などに力を入れている。
ラクスル
to B 向けのサービスであるためあまり意識していないが、APIを非同期やプリロードにしたりしてストレスを溜めないようにしている。ファイルを扱う処理が多いのでサーバーサイドで処理し、フロントエンドでポーリングして待つといったこともしている。
サイボウズ
MySQL のチューニングに力を入れている。超速本を読んでこれから改善していこうとしている段階。

＊品質担保について

freee
開発速度を考慮してあえてやらないこともある。StroyBook に追加できる Storyshot というスクリーンショットのテストしている。静的解析を重要視していて Lint や Flow を使っている。webpack の管理が大変だったので、使えないモジュールを発見できるツールを使っている。また、変な依存を解決するために yarn 使っている。
ラクスル
タイプセーフについては重要視している。また、E2Eテストで TestCafe を導入しており、主要なテストケースだけ作成して CircleCI で動かすようにしている。
サイボウズ
Lint や TypeScript、Flow、Figma を導入している。また、スモールなテストを導入する動きはしていて、npm run allを使ってテストを実行している。

＊開発ワークフローについて

freee
モブプロを実践しているが、専門知識が身につきにくいデメリットがある。キャッチアップを目的とする場合は、有識者のライブコーディングをすると良いインプットになる。（ビルドのタイミングなど開発方法の改善に繋がる）
ラクスル
モブプロを実践しているが、疲れるので1時間程度のものに限定している。また、開発チームにおいてフロントエンドが少ない場合が多いが、最近人数が増えたので1プロジェクト2人は入れてるようにしている。
サイボウズ
モブプロを実践しており、レビュー時間の削減や若手の育成に繋がっている。ただ、その場にいる有識者が解決してしまうので個人で考える力が身に付かないといったデメリットもある。

＊働く環境について

freee
フロントエンドとサーバーサイドで職務が分かれていないので、状況によって対応できて仕事は進めやすい。
ラクスル
フロントエンドとサーバーサイドで職務が分かれている。フロントエンドはビジネス側ともサーバーサイドともコミュニケーションが必要になるポジションになっている。

＊フロントエンド開発者に期待すること

freee
必要な入出力や静的解析を重要視している。技術を楽しく使えるひとを求めている。
ラクスル
Fabric.js や Three.js を使ってグラフィックを描くことが多いので、立体的なUI/UXにこだわりがあるひとを求めている。to C のサービスを比較するとライフサイクル長くすぐに捨てられないので、こだわりは大事にしている。
サイボウズ
技術を使ってどうやって問題を解決させるかといったことを重要視している。プラグインを自分で書いたり OSS の開発といったこともやりたい。

＊所感

新しい技術に対する好奇心はありますが、事業的に導入するタイミングでなかったり、そもそもそのサービスに求められている価値を向上させる技術ではないこともあるので、自分が携わっているサービスによって使う技術を選定する大切さを実感しました。
また、GitHub の issue を確認してはいなかったので、今後はcommit や star の数だけでなく issue もよく確認しようと思います。静的解析や TypeScript については3社共通して導入していたので、TypeScript の勉強をして実践できるようにしておきたいと思います。
開発体制については、フロントエンドとサーバーサイドの両方を実装できたほうが柔軟に開発を進めやすいので、あまりはっきり境界を分けないほうが良さそうとも思いました。

TECH PLAY の勉強会に参加したのは初めてでしたが、各社の考え方や技術などを知ることができ、大きな学びになりました。懇親会は参加しませんでしたが、今後機会があったら参加したいと思います。
運営に関わった皆さま、ありがとうございました。

もぐもぐプログラミング