チームスピリットデベロッパーブログ

チームスピリット開発者のブログ

フロントエンド・アーキテクチャ Meetup 参加レポート

こんにちは。プロダクトディベロップメントチームのエンジニア id:tsi-shinjo です。 今回は、先日(2019/01/24)開催した フロントエンド・アーキテクチャ Meetup by scouty × TeamSpirit についてレポートします!

teamspirit.connpass.com

今回のイベントについて

今回は、幅広いテーマでLTをする「ほろよいてっく」とは異なり、「フロントエンドアーキテクチャ」という観点でそれぞれの知見を共有する、という目的で、株式会社scouty様と合同で開催されました。ライブラリやフレームワークの使い方・テクニックについて扱う勉強会が多い中で、「フロントエンドの設計」に絞ってのイベントはなかなか珍しいのではないかと思います。

1. フロントエンド設計の話 / 株式会社scouty 翁さん(フロントエンドマイスター)

scouty翁さん(1) scouty翁さん(2)

最初は、株式会社scoutyのフロントエンドマイスター(!)、翁さん( @kahirokunn )のLTで始まりました。

Atomic Design や、それにインスパイアされた Atomic Componentといったデザイン手法、他の発表者の話題にも上がっているDDD(ドメイン駆動設計)のほか、内部状態の整合性を保つための設計パターンとして Flux, CQRS, QueryComponent, Business Logic Component など、さまざまな設計手法をご紹介いただきました。

Atomic Design や Flux (Redux) は弊社のフロントエンドでも採用していますが、改めて他の設計手法も眺めると、それぞれの特徴が見えてきて興味深いですね。Atomic Component については実装例もご紹介いただいたので、実際にコードを読んでみるのも面白いです!

2. TeamSpiritのフロントエンドアーキテクチャ / 株式会社チームスピリット 横山(フロントエンドアーキテクト)

TS横山(1) TS横山(2)

続いて、弊社のフロントエンドアーキテクト・横山によるLTです。弊社ではDDD(ドメイン駆動設計)をフロントエンド設計に取り入れていますが、なぜそれを採用したのか、React+Redux上でDDDを実装するにはどうすればよいかといったノウハウを、コードを交えて簡潔に説明してくれました。

DDD自体、例の分厚い本を読むのはかなり骨が折れる(しかも実践DDDはフロントエンドについてはほとんど言及されていない)ため、実践しようにもなかなか難易度が高いですが、こうしてフロントエンドDDDの実践例を見ると、いまチャレンジしようと考えている方にはとても心強く感じるのではないでしょうか。

3. チームスピリット社のFEメンバーがドメイン駆動を取り入れようとしてきた歴史の話 / 株式会社チームスピリット 植田(プロジェクトマネージャ・元フロントエンドエンジニア)

TS植田(1) TS植田(2)

休憩を挟んで三番目は、弊社プロジェクトマネージャの植田から。先ほどの横山のLTを受けて、弊社のチームがDDDを取り入れるまでにどのような試行錯誤がされたか、という話でした。

ディレクトリ構造の設計とその変遷、Flowtype導入の経緯など、DDDに限らず「チームスピリットのFEチームがどういった悩みをもっていて、どう試行錯誤を繰り返して設計してきたか」が、実感を交えつつ説明されていました。似た悩みを感じている方はたくさんいると思うので、共感された方はぜひ実践していただきたいですね!

4. 何故 TeamSpirit には DDD が必要だったのか / 株式会社チームスピリット 湊(開発マネージャ兼フロントエンドエンジニア)

TS湊(1) TS湊(2)

最後は弊社の開発マネージャ・湊が、なんと出張先のシンガポールからリモートで発表してくれました!(何故か向こうのオフィスは今日にかぎって照明が薄暗く、映像がちょっとホラーになっていましたが……)

湊もまたDDDを取り入れるまでの経緯を語ってくれましたが、植田のLTとは異なり、「複数のチームに分かれて開発する上でDDDはどう役立ったか」という観点からの話でした。「DDDという設計方針が存在することで、チーム内だけでなく、チームを超えた関係性にも秩序が生まれるようになった」という話は、今までにない視点で興味深かったです。DDDは開発が大規模であるほど享受できるメリットが大きいので、プロダクトのフェーズを見ながら良いタイミングで導入していきたいですね。

まとめ

「フロントエンドアーキテクチャ」という話題に絞ったMeetUpでしたが、それぞれに異なる視点からの考察があり、とても多様性があり興味深い会でした。LT後の懇親会では至るところでDDDについての話で盛り上がっていたようです。

DDDアンケート 開催後のアンケートを見ると、「ドメイン駆動設計は聞いたことがある or 学習をしたことはあるが、実際の業務では活用していない」という方が多かったようです。 「今回のMeetUpを受けてドメイン駆動設計(や他の設計手法)を試してみた」という方が増えると嬉しいですね。その際はぜひご登壇をお願いします!

実践ドメイン駆動設計 (Object Oriented SELECTION)

実践ドメイン駆動設計 (Object Oriented SELECTION)

次回は2月13日(水)に、 サービス品質向上しナイト ~みんなでテスト!10年続くチームと品質~ というイベントを開催予定です。弊社のシニアQAエンジニアも登壇予定ですので、ご期待ください!

willgate.connpass.com

We're Hiring!!

チームスピリットではエンジニアを募集しています。興味をもった方、もっと詳しく話を聞いてみたい方は、ぜひ以下のリンクからお問い合わせください!

www.teamspirit.co.jp