minneのモダンWeb開発：フロントエンド編

2020年12月時点でのminneのフロントエンド刷新の概要です。「ペパボテックカンファレンス#13」で登壇した際のスライドになります。東雲はフロントエンド刷新にメインのエンジニアとして参加しています。

Transcript

1. 1 minneのモダンWeb開発 フロントエンド編
2. 2 2 Yuki Yamakoshi 山越 祐希 　　 東雲（ @Yshinonome_IT ） 2020年　GMOペパボ新卒入社 minne事業部マーケットグループ フロントエンドエンジニア 業務 • Web版minneの開発改善 • フロントエンド刷新
3. 3 minneの フロントエンド刷新概要 サーバーサイドとフロントエンドの分離 Section 1 3
4. 4 4 フロントエンド刷新概要 現在のWeb版minne サーバーサイドとフロントエンドが Rails上でモノリシックになっている これからのWeb版minne サーバーサイドとフロントエンドを分離する サーバーサイドはRails フロントエンドはNext.js
5. 5 5 フロントエンド刷新概要 ペパボの共通基盤デザインシステムInhouseを導入 • ペパボの各サービスが個別に考えている原則やガイドライン、実装したア セットのうち、重複しているものを全てのサービスで使えるように一般化して あらかじめ用意したもの • Inhouseを使うことで、ペパボ内の他のサービスとコンポーネントを共有す ることができ、独自に実装するコンポーネントを減らすことができる
6. 6 6 フロントエンド刷新概要 • エンジニアとデザイナーの並行開発を可能にする • エンジニアとデザイナーの開発コスト削減 • フロントエンドのパフォーマンス向上 メリット
7. 7 フロントエンド刷新による タスクの流れの変化 Section 2 7
8. 8 8 Web開発の流れ エンジニアとデザイナーの並行開発を可能にする デザイナー Web エンジニア 今までのWeb開発 開始 終了 Web エンジニア 画面フローや画面デザインを考えてもらう デザイナーの作業を待つ ※他のタスクを進めます 考えたモックなどをエンジニアに渡す デザイナーの案を受けて実装を行う
9. 9 9 Web開発の流れ エンジニアとデザイナーの並行開発を可能にする デザイナー サーバーサイド エンジニア これからのWeb開発 開始 終了 フロントエンド エンジニア タスクの分割 対応が必要な コンポーネントを 伝える それぞれの領域で並行作業 一緒に表示の調整・確認 API提供
10. 10 技術選定 Vue.js or React Section 3 10
11. 11 11 技術選定 Vue.js メリット • HTMLベースのテンプレート構文なので学習コストが低い • 双方向データバインディングにより、 データ更新による挙動を簡単に実装できる デメリット • 双方向データバインディングはデータの流れを複雑にする • TypeScriptとの相性が微妙 • メジャーアップデートがあり、Composition APIの書き方覚える必要がある
12. 12 12 技術選定 React メリット • TypeScriptとの相性が良い • 単方向データバインディングによりデータの流れがわかりやすい 大規模開発で有利 • React Hooksの登場によりかなり書きやすくなった クラスを書く必要がほぼなくなった デメリット • JSX記法なのでデザイナーもJavaScriptをある程度学ぶ必要がある 学習コストが高い
13. 13 13 技術選定 minneではReact 理由 • TypeScriptでの開発が前提なので相性が良い方が良い • 開発の規模が大きくなっていってもデータの流れがわかりやすい • コンポーネントを適切に分けて開発をすれば プログラムの再利用性が高い 学習コストの面を考慮しても上記のメリットを取るべきと判断した
14. 14 技術選定 Next.js Section 4 14
15. 15 15 技術選定 minneではNext.js 理由 • アプリケーションフレームワークを使うことで開発コストを抑える • minneはユーザーが作品を登録し頻繁に更新が行われ、 SEOも維持したいのでSSRがやりたかった • ビルド周りの最適化やページのプリフェッチなどの パフォーマンスチューニングを裏でやってくれる • ルーティングの設定を自分でやる必要がない
16. 16 技術選定 CSS Modules or CSS in JS ※Next.jsで使うことが前提 Section 5 16
17. 17 17 技術選定 CSS Modules（Next.js 9.2〜） メリット • CSSファイルで書くのでそのままの記法で書ける • JSファイルと分離されている • Next.jsがデフォルトサポートしていて、 ファイル名.module.css にするとScopedなCSSになる デメリット • TypeScriptの型システムの恩恵がそのままでは得られない
18. 18 18 技術選定 CSS in JS（styled-components） メリット • ファイル単位、コンポーネント単位でのスコープが可能 • JSとして書くのでJSの変数をそのまま使える デメリット • SSR対応させるには設定が必要になる
19. 19 19 技術選定 minneではCSS Modules 理由 • CSSファイルをJSファイルから分離することで エンジニアとデザイナーがより並行作業しやすくなる（感覚） • JSファイルの行数も抑えられ、 組み込みコンポーネントで書けるからコードが読みやすい（感覚） • 選定の判断をするほどの機能的な良し悪しの差は あまりないと思っていて、ひとまず、 よりシンプルに書けるCSS Modulesを使ってみようという判断
20. 20 フロントエンド刷新後の 構成図 Section 6 20
21. 21 21 新しいフロントエンド構成図 Next.js（React）× TypeScript 社内横断の デザインシステム Inhouse ライブラリ APIの取得（Apollo Client） コンポーネント Container Components Presentational Components GraphQL CSS Modules テスト（Jest） フロントエンドの インフラ
22. 22 最新のフロントエンド技術で Web開発したい方 お待ちしております！！ 22