20191219-react_lightningtalk.pdf

Transcript

1. Atomic design & design framework Takuya Otani
2. c o n f i d e n t i a l n TypeScript https://www.typescriptlang.org/ n React https://reactjs.org/ n mobx https://mobx.js.org/ n ant.design https://ant.design/ n styled-component https://www.styled-components.com/ 1 Frontend で利⽤している主要な技術スタック Frontend で利⽤している主要な技術スタック
3. c o n f i d e n t i a l n TypeScript https://www.typescriptlang.org/ n React https://reactjs.org/ n mobx https://mobx.js.org/ n ant.design https://ant.design/ n styled-component https://www.styled-components.com/ 2 Frontend で利⽤している主要な技術スタック Frontend で利⽤している主要な技術スタック
4. c o n f i d e n t i a l 3 Atomic design Atomic design n 汎⽤性 → 細かくすると汎⽤性は増す n 保守性 → パーツを増やしすぎない
5. c o n f i d e n t i a l 4 Atomic design Atomic design n 汎⽤性 → 細かくすると汎⽤性は増す n 保守性 → パーツを増やしすぎない
6. c o n f i d e n t i a l 5 Atomic design Atomic design n 汎⽤性 → 細かくすると汎⽤性は増す n 保守性 → パーツを増やしすぎない 2 原⼦ vs 1 原⼦ あるいは︖
7. c o n f i d e n t i a l 6 Atomic design Atomic design n 機能性 → 1 原⼦ = 1 機能 n 可搬性 → 共通パーツとして利⽤できる
8. c o n f i d e n t i a l 7 Atomic design Atomic design n 機能性 → 1 原⼦ = 1 機能 n 可搬性 → 共通パーツとして利⽤できる ⽣年⽉⽇⼊⼒ = 1 機能
9. c o n f i d e n t i a l 8 Atomic design Atomic design n 機能性 → 1 原⼦ = 1 機能 n 可搬性 → 共通パーツとして利⽤できる
10. c o n f i d e n t i a l 9 Atomic design Atomic design n 原⼦ → UI パーツとして最低限機能する単位 n 分⼦ → 原⼦の組み合わせ = 原⼦のコンテナ n ⽣体 → 分⼦ or/and 原⼦のコンテナ
11. c o n f i d e n t i a l 10 Atomic design Atomic design n 原⼦ → UI パーツとして最低限機能する単位 n 分⼦ → 原⼦の組み合わせ = 原⼦のコンテナ n ⽣体 → 分⼦ or/and 原⼦のコンテナ 原⼦ 原⼦ ⽣体 分⼦
12. confidential 11 Ant design + styled component Ant design + styled component n Ant design → ⼀貫したデザイン n Styled component → パーツ単位でのスタイル適⽤
13. confidential 12 Ant design + styled component Ant design + styled component n AppColors.js カラー定義は js にして ant.design デフォルトスタイルを 上書き。TypeScript からも読み込 めるように
14. confidential 13 Ant design + styled component Ant design + styled component n AppColors.js カラー定義は js にして ant.design デフォルトスタイルを 上書き。TypeScript からも読み込 めるように webpack.config AppColors をロードして ant.design 設定を上書き
15. confidential 14 Ant design + styled component Ant design + styled component n AppColors.js カラー定義は js にして ant.design デフォルトスタイルを 上書き。TypeScript からも読み込 めるように TypeScript で import styled-component で利⽤
16. justInCase Technologies は フロントエンドエンジニアを絶賛⼤募集中です。 "