More Related Content Similar to サービスの成長を支えるフロントエンド開発 #denatechcon
Similar to サービスの成長を支えるフロントエンド開発 #denatechcon (20) サービスの成長を支えるフロントエンド開発 #denatechcon1. Copyright © DeNA Co.,Ltd. All Rights Reserved.
サービスの成長を
支えるフロントエンド開発
February 10, 2017
Naoki Endo x Takefumi Yoshii
DeNA Design Strategies Office
DeNA Co., Ltd.
2. Copyright © DeNA Co.,Ltd. All Rights Reserved.
AGENDA
■ 自己紹介
■ サービス運用におけるパラダイムシフトとの最適な付き合い方
■ 直近の業務における選択 - React を選んだ観点 -
■ 直近の業務における選択 - Vue.js を選んだ観点 -
■ 中長期的にサービスを支えるコンポーネント設計
2
4. Copyright © DeNA Co.,Ltd. All Rights Reserved.
自己紹介
■ 遠藤 直樹
■ 株式会社ディー・エヌ・エー デザイン戦略室第2グループ
■ 2015年1月 DeNA に入社
■ ベンチャー企業・フリーランスでデザイナー兼フロントエンジニアとして働く。そ
の後、株式会社パズルへ入社して、主に広告プロモーションのWebサイト制作
を担当。
■ 多くのユーザを抱えるサービスの制作をしたくて転職。
4
5. Copyright © DeNA Co.,Ltd. All Rights Reserved.
自己紹介
■ DeNA 入社後はエブリスタ・Anyca・KenCoMなどのフロントエンドを担当。
■ 現在は新規サービスでフロントエンド実装を行いながら、複数のサービスで設
計と指導に従事。
5
Anyca
6. Copyright © DeNA Co.,Ltd. All Rights Reserved.
自己紹介
■ 吉井 健文
■ 株式会社ディー・エヌ・エー デザイン戦略室第3グループ
■ DeSC ヘルスケア株式会社 企画開発部
■ 2016年 DeNA に入社
■ 前職は広告制作会社にて、デザイン・フロントエンド開発を担当。
■ 事業会社でサービス開発に関わることに魅力を感じ転職。
6
7. Copyright © DeNA Co.,Ltd. All Rights Reserved.
自己紹介
■ DeNA では Mirrativ・ゲームプロモーションサイトを実装。
■ 現職のDeSC ヘルスケア株式会社では「KenCoM」の企画開発に従事。
7
デュエルエクスマキナ
(DUELS X MACHINA)
公式サイト
DeNA DESIGN BLOG
(デザイン戦略室)
8. Copyright © DeNA Co.,Ltd. All Rights Reserved.
サービス運用における
パラダイムシフトとの
最適な付き合い方
8
パラダイムシフト - Wikipedia:その時代や分野において当然のことと考えられていた認識や思想、社会全体の価値観などが革命的にもしくは劇的に変化することをいう。
9. Copyright © DeNA Co.,Ltd. All Rights Reserved.
フロントエンド界隈
2・3年で起こった
パラダイムシフト
9
パラダイムシフト - Wikipedia:その時代や分野において当然のことと考えられていた認識や思想、社会全体の価値観などが革命的にもしくは劇的に変化することをいう。
サービス運用におけるパラダイムシフトとの最適な付き合い方
10. Copyright © DeNA Co.,Ltd. All Rights Reserved.
10
サービス運用におけるパラダイムシフトとの最適な付き合い方
※登壇者の開発現場で体感している年表です。いずれのツールも各プロダクトで健在であり、リリース時期の前後により表を作成しています
サービス運用におけるパラダイムシフトとの最適な付き合い方
※登壇者の開発現場で体感している年表です。いずれのツールも各プロダクトで健在であり、リリース時期の前後により表を作成しています
11. Copyright © DeNA Co.,Ltd. All Rights Reserved.
11
■ AltJS(Babel・TypeScript・CoffeeScript)
■ Web Components framework(React・Angular・Vue.js)
■ CSS pre processor(PostCSS・SASS・LESS・Stylus)
■ CSS naming conventions(BEM・ITCSS・FLOCSS)
■ Module bundler(webpack・gulp + npm scripts)
■ package manager(yarn・npm)
■ webpack、Browserifyによるモジュールシステム
■ Javascriptで静的型付け
■ Flux・Reduxによる状態の管理
■ Unit test・e2e test
乱立するコンポーネントフレームワーク。
各種トランスパイル言語によるロックイン...
サービス運用におけるパラダイムシフトとの最適な付き合い方
12. Copyright © DeNA Co.,Ltd. All Rights Reserved.
12
過去のパラダイムシフトで得た知見
フロントエンド開発現場は多かれ少なかれ、
リリース時期のトレンドにロックインさる。
リプレイスに工数が割けない現場は、
過去のドキュメントを元に運用するしかないのが現状。
サービス運用におけるパラダイムシフトとの最適な付き合い方
13. Copyright © DeNA Co.,Ltd. All Rights Reserved.
サービス運用におけるパラダイムシフトとの最適な付き合い方
13
過去のパラダイムシフトで得た知見
アウトプットに貢献する技術改革は常に起きている。
しかしながら、全てがサービスに寄与し得るとは限らない。
サービスを中長期運用するうえで最適解とは?
私たちが選択したフロントエンド開発のいまを
お伝えしていきたい。
14. Copyright © DeNA Co.,Ltd. All Rights Reserved.
14
仮想DOMの火付け役。viewのみ
のライブラリで、アプリケーション
構築のためには様々なモジュー
ルが必要
( Facebook )
2017年2月 現在. 社内で使われているフレームワーク
オールインワンのフレームワー
ク。静的型付けのTypeScriptを
標準で使用、テストツールも充
実
( Google / Microsoft )
ReactやAngularの影響を受け、
2016年にもっとも成長したフレーム
ワーク。可読性や保守性と楽しさと
のバランス
( Evan / john resig )
React Angular Vue.js
サービス運用におけるパラダイムシフトとの最適な付き合い方
15. Copyright © DeNA Co.,Ltd. All Rights Reserved.
直近の業務における選択
- React を選んだ観点 -
15
16. Copyright © DeNA Co.,Ltd. All Rights Reserved.
16
ツールセットと開発環境
■ React + Redux + redux-saga
■ npm scripts + webpack + webpack-dev-server
■ yarn + npm
■ Ruby on Rails
直近の業務における選択 - React を選んだ観点 -
17. Copyright © DeNA Co.,Ltd. All Rights Reserved.
17
静的片付けは見送り
Typescript ・ flowtype は導入を控えた。
実装要件においてそれが MUST ではなかったため。
propTypesや、UnitTest で代替する方針に。
直近の業務における選択 - React を選んだ観点 -
18. Copyright © DeNA Co.,Ltd. All Rights Reserved.
18
React Redux を選定した基準
■ フレームワークとして設計が確立されている
■ モジュール単位でのリプレイスしやすさ
■ テストコードの書きやすさ
いずれも共通している点は「疎結合」であること。
疎結合なモジュール・コードは、パラダムシフトに強く
中長期運用に向いていると考えた。
直近の業務における選択 - React を選んだ観点 -
19. Copyright © DeNA Co.,Ltd. All Rights Reserved.
19
Redux
Fluxパターン実装のひとつ。
React 専用の状態管理ライブラリの印象が強いが、
多くのviewライブラリと組み合わせが可能。
コーディングガイドが統一されるため
独自設計が生じにくい。
直近の業務における選択 - React を選んだ観点 -
20. Copyright © DeNA Co.,Ltd. All Rights Reserved.
20
直近の業務における選択 - React を選んだ観点 -
21. Copyright © DeNA Co.,Ltd. All Rights Reserved.
21
Redux で React の責務が単純になる
Redux の恩恵で React のコンポーネントライフサイクルを
使う場面がほとんど無くなる。Reactの責務は view を返す
シンプルなものになり、State を持つことが無くなる。
純粋な関数で記述された jsx コンポーネントは
再利用性が高まりパフォーマンス向上も期待できる。
参考文献: React Stateless Functional Components @Cory House
直近の業務における選択 - React を選んだ観点 -
22. Copyright © DeNA Co.,Ltd. All Rights Reserved.
22
Redux で React の責務が単純になる
直近の業務における選択 - React を選んだ観点 -
React.Componentを継承した場合
23. Copyright © DeNA Co.,Ltd. All Rights Reserved.
23
Redux で React の責務が単純になる
直近の業務における選択 - React を選んだ観点 -
React Reduxで頻出する、Stateless Functional Component の一例。
コンポーネントの状態はStoreで管理され、共有される。
コンポーネントからロジックが排出される。
24. Copyright © DeNA Co.,Ltd. All Rights Reserved.
24
Redux がもたらす疎結合性
Redux のお作法にならうことで、
各レイヤーの粒度が小さく、役割が明確になる。
モジュール同士を疎結合にしてくれるため、
Redux に変わる 状態管理ライブラリが将来台頭しても
jsx で記述された Componentは継続して利用できる可能性が高い。
(Reactが置きかわる場合も同様)
直近の業務における選択 - React を選んだ観点 -
25. Copyright © DeNA Co.,Ltd. All Rights Reserved.
25
直近の業務における選択 - React を選んだ観点 -
26. Copyright © DeNA Co.,Ltd. All Rights Reserved.
26
直近の業務における選択 - React を選んだ観点 -
Reduxに置きかわる状態管理ライブラリの台頭に備える。
Reactで記述されたコンポーネントは継続利用が可能
MobX alt
27. Copyright © DeNA Co.,Ltd. All Rights Reserved.
27
直近の業務における選択 - React を選んだ観点 -
Reactに置きかわるViewライブラリの台頭に備える。
Reduxによる状態管理は継続利用が可能
28. Copyright © DeNA Co.,Ltd. All Rights Reserved.
28
React Redux のテスト
Redux に則り記述されたコードは、
Actions・Reducers・Components、各レイヤーの責務が
シンプルなため、テストコードも明瞭に。
テストの書きやすさもReduxの特徴
【React Redux のunitテスト一例】
■ props 分岐で期待するコンポーネントテスト
■ reducer の initialStateとactionType による戻り値
■ mock や stub はモジュールの汎用性に応じて
詳細: React Redux テスト考察 @Takepepe (Takefumi.Yoshii)
直近の業務における選択 - React を選んだ観点 -
29. Copyright © DeNA Co.,Ltd. All Rights Reserved.
29
React Redux のテスト
直近の業務における選択 - React を選んだ観点 -
【Component テスト一例】
リグレッションテストだけでなく、unitテストはI/F明示として
運用資産になる。アプリケーション規模が大きくなるにつれ、
事故を未然に防ぐ恩恵を受けやすい。
30. Copyright © DeNA Co.,Ltd. All Rights Reserved.
30
Redux の副作用を扱う
React Redux の設計思想に則り構築すると、
それだけでは扱いきれない副作用が発生する。
ビジネスロジックや外部要因に起因するイベント、
非同期処理、アニメーションなど。
副作用を扱うためには middleware が必要。
選定した redux-saga は多くの副作用を扱うことができる。
【Redux の副作用一例】
■ Ajax / Animation
■ websocket
■ History location
【redux-saga】
■ https://github.com/redux-saga/redux-saga
直近の業務における選択 - React を選んだ観点 -
31. Copyright © DeNA Co.,Ltd. All Rights Reserved.
31
redux-saga の 特徴
疎結合な状態でReact Redux の
アーキテクチャに組み込める。
API (redux-saga/effects) で、非同期処理の
並列リクエスト・コールバック・キャンセルなどを
同期的な記述で完結に記述出来る。
処理列のなかで、Storeの状態を参照出来る。
直近の業務における選択 - React を選んだ観点 -
32. Copyright © DeNA Co.,Ltd. All Rights Reserved.
32
redux-saga の API
【redux-saga/effects 抜粋】
■ fork(Lounch saga task)
■ take(Waiting Action)
■ call(Waiting Promise Resolved)
■ put(Dsipatch Action)
■ select(Reference Store)
直近の業務における選択 - React を選んだ観点 -
33. Copyright © DeNA Co.,Ltd. All Rights Reserved.
33
直近の業務における選択 - React を選んだ観点 -
34. Copyright © DeNA Co.,Ltd. All Rights Reserved.
34
redux-saga の コード
各々がブレークポイントを持った
マルチスレッドの様な振る舞いをする。
ES2015 Generator function を使用。
直近の業務における選択 - React を選んだ観点 -
42. Copyright © DeNA Co.,Ltd. All Rights Reserved.
42
React Redux 所感
数十ページに渡るWebサービス構築を予定していたり、
複雑なGUIアプリケーション構築にお勧め。
数ページのSPA実装のためには重量オーバー…?
直近の業務における選択 - React を選んだ観点 -
以上、Reactを選んだ観点でした!
43. Copyright © DeNA Co.,Ltd. All Rights Reserved.
直近の業務における選択
- Vue.js を選んだ観点 -
43
44. Copyright © DeNA Co.,Ltd. All Rights Reserved.
直近の業務における選択 - Vue.js を選んだ観点 -
44
ツールセットと開発環境
■ Vue.js + Vuex
■ npm scripts + webpack + Browsersync
■ yarn + npm
■ Ruby on Rails
45. Copyright © DeNA Co.,Ltd. All Rights Reserved.
45
Vue.js を選定した基準
■ 単純なテンプレート構文による宣言的レンダリング
■ コンポーネントシステム
■ プログレッシブフレームワーク
コードの可読性や、フレームワークに不慣れなメンバーも
導入ハードルが低い。アジャイル開発向きなため
プロダクトの中長期運用に向いている。
直近の業務における選択 - Vue.js を選んだ観点 -
46. Copyright © DeNA Co.,Ltd. All Rights Reserved.
46
単純なテンプレート構文による宣言的レンダリング
既存のマークアップ資産を流用する容易さ
直近の業務における選択 - Vue.js を選んだ観点 -
47. Copyright © DeNA Co.,Ltd. All Rights Reserved.
47
コンポーネントシステム
Web Components の仕様に沿ったモデル化
直近の業務における選択 - Vue.js を選んだ観点 -
48. Copyright © DeNA Co.,Ltd. All Rights Reserved.
48
プログレッシブフレームワーク
コアは宣言的レンダリング & コンポーネントシステム
とりあえず動くものを素早く完成させる
モジュール化の粒度の自由さ
クライアントサイドルーティングを加えたければ & vue-router
大規模状態管理を加えたければ & Vuex
直近の業務における選択 - Vue.js を選んだ観点 -
49. Copyright © DeNA Co.,Ltd. All Rights Reserved.
49
導入も簡単で、
サクサクと動くものを作ることに集中した結果…
直近の業務における選択 - Vue.js を選んだ観点 -
50. Copyright © DeNA Co.,Ltd. All Rights Reserved.
状態管理ツラい物語1
あるところに仕様を決めながら作っていたため、
複数人で高速プロトタイピングを繰り返した結果、
1コンポーネントの粒度もバラバラなソースがありました。
リリースを終えて運用フェーズに入ったことで、
関わっていた人は減り、バラバラだったファイルに秩序をもたらすためモ
ジュール化を進めることになりました。
最初はとても大きな単位でコンポーネントを作っていたため、
大量の状態を1コンポーネントが抱えています。
50
直近の業務における選択 - Vue.js を選んだ観点 -
51. Copyright © DeNA Co.,Ltd. All Rights Reserved.
状態管理ツラい物語2
51
直近の業務における選択 - Vue.js を選んだ観点 -
これは見通しが悪いと、
コンポーネントの粒度を細かくしていくと、
だんだん props のバケツリレーが増えてきます。
親から子へ、子から孫へ、孫からひ孫へ…
双方向バインディングしてると、コンポーネント間の関係を追っていくの
がとても大変です。
ただリレーしてるだけで使ってない値がコンポーネント内に存在します。
1箇所直すと、他に影響が出ててしまわないか不安になってきました。
52. Copyright © DeNA Co.,Ltd. All Rights Reserved.
状態管理ツラい物語3
52
「信頼できる状態管理の仕組みがほしい」
直近の業務における選択 - Vue.js を選んだ観点 -
53. Copyright © DeNA Co.,Ltd. All Rights Reserved.
状態管理ツラい物語4
53
直近の業務における選択 - Vue.js を選んだ観点 -
React 界隈で流行っている Flux, Redux
「いつやるか?今でしょ!」
用語の多さを見ればわかるとおり、
ソース量の増加があって、冗長化されているようにみえます。
しかし、データの流れが一方向になったため、
可読率と変更に対する安定性が上がり、
状態遷移を追うことが楽になりました。めでたしめでたし。
54. Copyright © DeNA Co.,Ltd. All Rights Reserved.
54
Vuex を導入した理由
■ 書き方がバラバラだった
■ コンポーネント粒度が細かくなっていく
■ 大量の状態を1つのコンポーネントが抱えていた
■ バケツリレーするだけで、コンポーネントが使わない値が量産
直近の業務における選択 - Vue.js を選んだ観点 -
55. Copyright © DeNA Co.,Ltd. All Rights Reserved.
55
直近の業務における選択 - Vue.js を選んだ観点 -
56. Copyright © DeNA Co.,Ltd. All Rights Reserved.
56
サービスの成長に合わせて
状態管理も柔軟に
これもプログレッシブ
直近の業務における選択 - Vue.js を選んだ観点 -
58. Copyright © DeNA Co.,Ltd. All Rights Reserved.
Linter の設定を用意して、
記述ルールのドキュメントを廃止する
サービスによって、記述ルールが個人の趣味に偏りがち。
ESLint, Sass-lint, stylelint でスタンダードな書き方に矯正して、チーム
としてメンテナンスをできる体制にする。
58
中長期的にサービスを支えるコンポーネント設計
59. Copyright © DeNA Co.,Ltd. All Rights Reserved.
59
.eslintrc.js
airbnb/javascript
をベースにルールを追加
.stylelintrc
stylelint/stylelint-config-standard
をベースにルールを追加
ESLint や stylelint では extend を利用して、
OSSで多くの人が採用しているスタンダードに合わせやすい。
中長期的にサービスを支えるコンポーネント設計
60. Copyright © DeNA Co.,Ltd. All Rights Reserved.
こんなPRのくだらない指摘を未然に防ぐ。
60
中長期的にサービスを支えるコンポーネント設計
61. Copyright © DeNA Co.,Ltd. All Rights Reserved.
61
CSS 設計のこれまでと、これから
■ BEM のコンポーネントスコープ
■ OOCSS, SMACSS, の柔軟性
■ ITCSSの記述順と詳細度
各設計が解決している問題点を継承。
プロジェクト単位でルールを作り上げているのが現状。
中長期的にサービスを支えるコンポーネント設計
62. Copyright © DeNA Co.,Ltd. All Rights Reserved.
62
CSS 設計のこれまでと、これから
■ BEM のコンポーネントスコープ
■ OOCSS, SMACSS, の柔軟性
■ ITCSSの記述順と詳細度
SPAフレームワークと併せて登場した CSS Modules は、
これらの問題を解決するかもしれない。
中長期的にサービスを支えるコンポーネント設計
63. Copyright © DeNA Co.,Ltd. All Rights Reserved.
63
CSS Modules はフロントエンド設計を
改変するのか
CSS Modules とは、javascript を bundle する際、
各コンポーネントに一意のhash値をclass名として付与し、
CSSグルーバル汚染を解決するアプローチ。
Bundleされたjavascriptにcssのコードが内包され、
CSS in JS とも呼ばれている。
同一ディレクトリにコンポーネントを定義している
javascript、stylesheetを配置するケースが多い。
中長期的にサービスを支えるコンポーネント設計
64. Copyright © DeNA Co.,Ltd. All Rights Reserved.
64
CSS Modules はフロントエンド設計を
改変するのか
Vue.js でのコンポーネントの作り方と CSS Modules
中長期的にサービスを支えるコンポーネント設計
65. Copyright © DeNA Co.,Ltd. All Rights Reserved.
65
CSS Modules はフロントエンド設計を
改変するのか
React でのコンポーネントの作り方と CSS Modules
中長期的にサービスを支えるコンポーネント設計
66. Copyright © DeNA Co.,Ltd. All Rights Reserved.
66
CSS Modules はフロントエンド設計を
改変するのか
ブラウザでの展開例
中長期的にサービスを支えるコンポーネント設計
webpackによる一意のclass付与
コンポーネントマウント時
head タグ内に挿入される
67. Copyright © DeNA Co.,Ltd. All Rights Reserved.
67
CSS Modules はフロントエンド設計を
改変するのか
CSS Modules はグローバル汚染を解決したものの、
プロダクトを取り巻く様々な要因により
導入できないのが、現場の実情。
※そもそも、React や Vue.js など、CSS Modules が利用できる環境ではない
※Featureテストなど外部コードからDOM名を参照できない
※外部リソースを挿入した際、詳細度のコントロールが辛くなる
中長期的にサービスを支えるコンポーネント設計
68. Copyright © DeNA Co.,Ltd. All Rights Reserved.
68
CSS Modules はフロントエンド設計を
改変するのか
SPA・非SPAが混在するプロダクトで共有し辛い…
javascript と css が密結合になってしまうこと、
特定のフレームワークによるロックインも
避けたいところ。
中長期的にサービスを支えるコンポーネント設計
69. Copyright © DeNA Co.,Ltd. All Rights Reserved.
69
2017年2月現在
CSS Modules は全てのプロダクトで
最適解であるとは限らない
中長期的にサービスを支えるコンポーネント設計
70. Copyright © DeNA Co.,Ltd. All Rights Reserved.
70
が、いつかは移行したい。
将来的に移行しやすい設計を意識することで
自然と良いCSS設計を得ることができる
中長期的にサービスを支えるコンポーネント設計
71. Copyright © DeNA Co.,Ltd. All Rights Reserved.
71
CSS Modules を見据えた
CSS設計
ここで、CSS Modules が成し遂げようとしたことが
長年試行錯誤されてきたCSS設計の
台頭であったことに立ち返りたい。
それらのCSS設計と
CSS Modules の共通点とは?
中長期的にサービスを支えるコンポーネント設計
72. Copyright © DeNA Co.,Ltd. All Rights Reserved.
72
中長期的にサービスを支えるコンポーネント設計
■ 名前空間
■ 関心の分離
■ 状態管理
73. Copyright © DeNA Co.,Ltd. All Rights Reserved.
73
中長期的にサービスを支えるコンポーネント設計
■ 名前空間
■ 関心の分離
■ 状態管理
74. Copyright © DeNA Co.,Ltd. All Rights Reserved.
74
CSS設計で再現する
名前空間
いずれのCSS設計もコンポーネントスコープを担保するため
BEM(Block・Element・Modifier)を用いた
命名規則を取り入れている。
BEMにおけるBlock = 名前空間 は、
CSS Modules が付与するhash値と等しい。
中長期的にサービスを支えるコンポーネント設計
75. Copyright © DeNA Co.,Ltd. All Rights Reserved.
75
CSS設計で再現する
名前空間
SPA コンポーネントの粒度に倣い、view関連ファイルを定義。
ファイルツリーに由来する名前空間をBEMのBlock名に。
view関連ファイルのツリー構造を対にしてみる。
■ partial ≒ component
■ locals ≒ props
中長期的にサービスを支えるコンポーネント設計
76. Copyright © DeNA Co.,Ltd. All Rights Reserved.
76
CSS設計で再現する
名前空間
非CSS Modulesプロダクトであっても、
将来的に移行しやすい状態に。
コンポーネントの粒度や I/F設計が
自然と良いものに。
中長期的にサービスを支えるコンポーネント設計
77. Copyright © DeNA Co.,Ltd. All Rights Reserved.
77
中長期的にサービスを支えるコンポーネント設計
■ 名前空間
■ 関心の分離
■ 状態管理
78. Copyright © DeNA Co.,Ltd. All Rights Reserved.
78
コンポーネント同士の
関心の分離
外部定義からの影響は遮断したい。
担保した名前空間が台無しに…
BEMにおけるElement = プライベート要素 で、
外部の名前空間から関心を分離してみる。
中長期的にサービスを支えるコンポーネント設計
79. Copyright © DeNA Co.,Ltd. All Rights Reserved.
79
コンポーネント同士の
関心の分離
名前空間以外の指定を含んでしまうと、
該当コンポーネントに関する定義が分散してしまう。
また、その存在で担保していたレイアウトが破綻し、
アウトプットが予測しづらい設計に。
中長期的にサービスを支えるコンポーネント設計
80. Copyright © DeNA Co.,Ltd. All Rights Reserved.
80
コンポーネント同士の
関心の分離
外部コンポーネントを配置するため、
Container Element を用意する。
BEM Element 指定は、CSS Modules における
:local() や scoped の機能と等しい。
中長期的にサービスを支えるコンポーネント設計
81. Copyright © DeNA Co.,Ltd. All Rights Reserved.
81
中長期的にサービスを支えるコンポーネント設計
■ 名前空間
■ 関心の分離
■ 状態管理
82. Copyright © DeNA Co.,Ltd. All Rights Reserved.
82
予測しやすい状態管理
CSSの指定はコンポーネントの
BOXモデル・装飾の定義だけではない。
状態に応じて、Modify(修正)をかけ
定義を積み重ねていく。
ある特定の状態に一致したとき、
コンポーネントに対して変化を与える様な
管理方法の危険性に触れていく。
中長期的にサービスを支えるコンポーネント設計
83. Copyright © DeNA Co.,Ltd. All Rights Reserved.
83
予測しやすい状態管理
詳細度の競合が発生し、影響範囲が予測できなくなる。
特定の状態になったとき、予想外の崩れが発生する。
中長期的にサービスを支えるコンポーネント設計
影響範囲を特定するのが困難な例
?
84. Copyright © DeNA Co.,Ltd. All Rights Reserved.
84
予測しやすい状態管理
そこで、コンポーネント単位で状態を管理することに。
状態による変化の優先順位が予測しやすくなる。
コンポーネント単位にまとまるため、
CSS Modules への移行も容易に。
中長期的にサービスを支えるコンポーネント設計
CSS Modules への移行例
85. Copyright © DeNA Co.,Ltd. All Rights Reserved.
85
新しいトレンドには
起源となるアイデアと知見が背景にある。
それを見逃さずに意識することで、
中長期運用における最適解を導くことができる。
中長期的にサービスを支えるコンポーネント設計
86. Copyright © DeNA Co.,Ltd. All Rights Reserved.
86
ご清聴ありがとうございました
design.dena.com