こんにちは、フロントエンドエンジニアのじぇしーです。
今回は、2017年5月25日にチームスピリットさんとGoodpatchが共催したGoodpatch×TeamSpirit Meetupの様子をレポートします！
Reactをプロダクトに実戦投入しているエンジニア3名を迎えて、Reactによる開発ノウハウや、チーム開発について語り尽くしたイベントの様子を少しでもみなさんにお伝えできると嬉しいです。
Goodpatchからは、テックリードのよしこが登壇しました！
目次
今回の会場はチームスピリット！
今回の会場はチームスピリットさんのオフィス！
チームスピリットさんは、これまでバラバラに管理されることが一般的だった「勤怠管理」「経費精算」「工数管理」「社内SNS」等をクラウド上で統合・連携させた自社サービス“TeamSpirit”を提供しています。
製品の海外展開に向けて“TeamSpirit”の次期バージョンを開発中だそうです！次期バージョンからは開発環境のモダン化を進めており、言語やツールを刷新したり、CI/CD環境の整備、開発手法・体制の見直しをしているとのこと。その中で、React/Reduxを採用しているため、今回一緒にMeetupを開催することになりました！
チームスピリットさんのアイディアで、今回のMeetup限定のロゴ入りチロルチョコが配られました。かわいい！
よしこが開発した「参加者の名は。」で作成した参加者の皆さんの名札たち。
肉肉肉！！！すごい量！！（なんと、この肉、腹筋ローラーの力を信じろ氏がこの日のために仕込んでくださいました！）
Reactのパフォーマンスを改善する必要がなかった話(湊 義明氏)
最近筋トレにハマっているという湊氏からは、Reactのパフォーマンス改善について。
React自体は仮想DOMの効用で、DOMの変更については差分のみが適用されるため、パフォーマンスは担保されている という前提の元、仮想DOMの更新ロジックや、Reactの細かいパフォーマンスチューニングなどについてお話いただきました。
shouldComponentUpdateでのpropsの深い比較と浅い比較や、Reactを使うとき以外も役立つパフォーマンスチューニング、パフォーマンスチューニングのメリット・デメリットについても事例を交えて紹介してくださいました。
判断が難しい場所は「Perf」を使用してパフォーマンスの計測をされているとのことだったので、私も使ってみようかと思います。
いまSPAを作るなら〜Prott2の技術選定〜(よしこ)
Goodpatchテックリードのよしこからは、主にProttをフルリニューアルする際の技術選定を中心にお話しました。
Reactを採用した経緯、Reduxやflowを実際使ってみてわかった課題、CSS in JSについてなど、新規Webアプリケーション開発をするに当たって、とても参考になる内容でした。
テックリードとしての役割や、AngularからReactへのスイッチに対する社内のリアクションなど、チームマネジメントについても話は及びました。
React沼 CSS Architecture(腹筋ローラーの力を信じろ氏)
最後は 今回のイベントのためにキロ単位でローストビーフを作ってくださった 「腹筋ローラーの力を信じろ氏」(以下腹筋氏)からお話いただきました(ごちそうさまでした🐮)。
「 CSSコンポーネント切る前に自分の首が切られそう 」という緊迫した状況の中、CSS(Sass)や開発環境を、チームの状況やプロダクトを考慮しながら実装していった様子がとても参考になりました。
パネルディスカッション
スライド発表後のパネルディスカッションは、事前に募った質問に答えていく形で進みました。各社のデザイナーとの協業体制や(Goodpatchはデザインとフロントエンドの実装を完全に分業しています)、SPAでのCSS設計、jQueryライブラリなどとの共存などが話題として上がっていました！
個人的に興味深かった話として、湊氏から出た、ReactもAngularも大規模な開発になると学習量の総体はそれほど変わらないのではないかという話がありました。
Reactは小さく始められますが、そのぶん周辺のこまごまとしたライブラリの選定や、ビルド環境はどうするのかといった部分など、諸々の周辺環境を検討しなければなりません。
その点Angularはフルスタックなライブラリとして開発されているので、一度覚えてしまえば周辺環境をReactほど考慮する必要がありません。 ReactとAngularを選択するポイントの一つとして、学習曲線を前半にもってきたいか、後半に持ってきたいかという視点もあるのではないか、 というお話でパネルディスカッションは幕を閉じました！
終わりに
今回はReactそしてSPAについて、設計レベルから実装レベルまで幅広い視点から様々な意見を吸収することができる会となりました。
全体として、スピーカーの皆さんがReact自体というより、 Reactを使用したプロダクトをチームとしてどのように運用していくか という視点で色々と考えていたのが印象的でした。
大規模なアプリケーションを構築する際に、複雑性とそこから享受できるメリットをどのように天秤にかけるかというのはWebアプリケーションに限らず、悩ましい問題なのだなと感じました。
発表者の皆さんありがとうございました！
