スペースマーケットWebフロントエンド開発について〜2018冬〜

Transcript

1. スペースマーケット Webフロントエンド開発について 〜2018冬〜 フロントエンドチーム Yuki Manya

2. 2 自己紹介 Yuki Manya( @ymanya ) スペースマーケットでフロントエンドチームリーダー兼 Webフロントエンド・iOSアプリエンジニアをしています。 前職はQAとか新規事業の開発とかやってました。

3. 3 スペースマーケットのサービスについて

4. 4 SPACEMARKET 時間貸し・宿泊スペースを検索・予約できるメインのサービス

5. 5 SPACEMARKET DASHBOARD 掲載するスペースを管理するホスト向けのダッシュボードサービス

6. 6 SPACEMARKET BUSINESS 法人向けに社員の予約や支払いを一元管理できるサービス

7. 7 SPACEMARKET EVENT 予約情報を元に、簡単に参加者管理できるイベント告知ページが作成できるサービス

8. 8 SPACEMARKET ACCOUNT これまで上げてきたサービスのログイン・ログアウトを担当するサービス

9. 9 以上、現在5サービスを開発・運用しています

10. 10 これらのサービスをどのような構成で、 どのように開発をしているか、 Webフロントエンドの視点からざっくり発表します

11. 11 サービスの構成

12. 12 サービスの構成図 クライアントサイド サーバサイド スマートフォン アプリ API(REST/GraphQL) 移行中 Web フロントエンド

    (各サービスごと)

13. 13 サービスの構成図 クライアントサイド サーバサイド スマートフォン アプリ API(REST/GraphQL) この発表でお話するところ 移行中 Web

    フロントエンド (各サービスごと)

14. 14 サービスの構成図 クライアントサイド サーバサイド スマートフォン アプリ API(REST/GraphQL) 移行中 Web フロントエンド

    (各サービスごと)

15. 15 Fastlyでのキャッシュ • 未ログインの場合の SSR結果をキャッシュするように • 間違って変なキャッシュがされないよう、必要なページのみレスポンスヘッダを追加しキャッシュ アクセスの多いトップページやカテゴリトップなどをキャッシュ

16. 16 サービスの構成図 クライアントサイド サーバサイド Web フロントエンド (各サービスごと) スマートフォン アプリ API(REST/GraphQL)

    移行中

17. 17 PWA(ServiceWorker/Webプッシュ通知) • 現在はトップページのみ、キャッシュを導入 • Webプッシュはアプリでも使っている OneSignalを使っています ◦ 詳しくは弊社玉川のブログ記事もぜひご覧ください！ ◦

    既存WebサイトをPWA対応して一部の機能を実装してみる （ https://blog.spacemarket.com/code/add_pwa/ ） Workboxを使い、ServiceWorkerでのキャッシュやWebプッシュ通知を実装

18. 18 リポジトリ構成

19. 19 サービスの構成図 クライアントサイド サーバサイド スマートフォン アプリ API(REST/GraphQL) 移行中 Web フロントエンド

    (各サービスごと)

20. 20 フロントエンドのリポジトリ構成 SPACEMARKET SPACEMARKET DASHBOARD SPACEMARKET EVENT SPACEMARKET BUSINESS SPACEMARKET

    ACCOUNT Nodeの設定やデータモデル、ヘルパなどの サービスのコアとなる処理をまとめたリポジトリ フロントエンド共通リポジトリ サービス共通コンポーネントリポジトリ AtomicDesignをベースにした サービス共通コンポーネントをまとめたリポジトリ 1サービス1リポジトリ、プラスしてサービス共通リポジトリ 2つという構成です

21. 21 サービス共通リポジトリの依存解決 • リリースする際はgitのタグを、開発中はコミットハッシュを使って、共通リポジトリのバージョン管理 を行っています プライベートリポジトリなので、gitの認証情報を使ってnpmで依存解決しています サービスのpackage.jsonの例

22. 22 • コンポーネントの実装や デザイナレビュー用に Storybookを使っています • 弊社荒田のブログ記事がありますので、 ぜひご覧ください！ ◦ Atomic

    Designを使って Reactコンポーネントを再設計した話 https://blog.spacemarket.com/code/atomic-design%E3%82%9 2%E4%BD%BF%E3%81%A3%E3%81%A6react%E3%82%B 3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E 3%83%B3%E3%83%88%E3%82%92%E5%86%8D%E8%A8 %AD%E8%A8%88%E3%81%97%E3%81%9F%E8%A9%B1/ サービス共通コンポーネントリポジトリ デザイナとの共通言語Atomic Designをベースにstyled-componentsを使って実装 AtomicDesign Storybook

23. 23 サービス開発

24. 24 開発環境／デプロイ 開発・本番環境ともにDockerで、特定ブランチへのマージで自動デプロイされます 開発環境 ステージング環境 本番環境 AWS CodePipeline masterマージ stagingブランチ

    マージ

25. 25 • ApolloのQueryタグのssr属性を、ログイン・未ログインデータかで設定しておき、それぞれのタイミ ングで取得するように • 弊社のGraphQLのAPIは参照系が多く、まだあまり mutationは使っていません Apollo(GraphQLクライアント) 基本的に、SSR時に未ログインデータ、CSR時にログインデータを取得しています

26. 26 まとめ

27. 27 まとめ • 複数サービス、各ロールが並行して開発しやすい仕組みづくりをみんなで進めていま す！ • PWAやFastlyでのキャッシュ、GraphQLなど様々な取り組みも進めて、よりよいユーザ 体験・開発体験が得られるように改善してきました • 今後はPWAやコードスプリッティングをより進めたり、現状各サービスで多少アーキテク

    チャにズレがあるため統合するフレームワークを作っていくなど、改善を続けていきま す！

28. 28 We're Hiring! • スペースマーケットでは全方位で絶賛採用活動中です！ ◦ フロントエンド・バックエンド・技術基盤・新卒 Webエンジニアなど ◦ 興味のある方は「Wantedly

    スペースマーケット」で検索orQRコード読取！
29. None