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

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

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

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

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

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

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

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

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

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

11 サービスの構成 

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

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

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

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

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

17 PWA(ServiceWorker/Webプッシュ通知) ● 現在はトップページのみ、キャッシュを導入 ● Webプッシュはアプリでも使っている OneSignalを使っています ○ 詳しくは弊社玉川のブログ記事もぜひご覧ください！ ○ 既存WebサイトをPWA対応して一部の機能を実装してみる （ https://blog.spacemarket.com/code/add_pwa/ ） Workboxを使い、ServiceWorkerでのキャッシュやWebプッシュ通知を実装 

18 リポジトリ構成 

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

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

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

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 サービス開発 

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

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

26 まとめ 

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

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

No content