Reactで学ぶUIコンポーネントデザイン / UI Component Design with React

Transcript

1. ReactͰֶͿ UIίϯϙʔωϯτ σβΠϯ
2. ࣗݾ঺հ • iOS/AndroidΞϓϦ։ൃ • 6೥ؒͰ໿30ຊͷεϚϗΞϓϦΛઃܭ/੡଄ • ͳͷͰUIͷந৅Խ͕޷͖ • ϑϩϯτΤϯυ • ੩తαΠτ͔ΒSPA·Ͱ • γεςϜΞʔΩςΫτݟश͍
3. Α͔ͬͨ͜ͱ • νʔϜϝϯόʔ͕Componentࢦ޲Ͱ࡞ΕΔΑ ͏ʹͳͬͨ • ઃܭൣғ͕໌֬ʹͳͬͨ • SMACSS΍BEMΛ͋·Γߟ͑ͳͯ͘Α͘ͳͬ ͨ
4. ͭ·͖ͮͲ͜Ζ • ந৅Խͷ୯Ґ • ঢ়ଶΛ࣋ͭ৔ॴ • ෳࡶ͗͢ΔΠϯλʔϑΣʔε
5. React Basic Theoretical Concepts (ൈਮ)
6. Transformation • UI͸σʔλ͔Βผͷσʔλܗࣜ΁ͷ୯ͳΔ౤ ӨͰ͋Δɻ Original Data Presentational Data
7. Abstraction • UI͸࠶ར༻Մೳͳཁૉʹந৅ԽՄೳͰɺ͜Ε Β͸࣮૷ͷৄࡉΛ֎෦ʹ࿙ग़͠ͳ͍ɻ Component CSS Scroll Moment Timer Velocity
8. Composition • ෳ਺ͷUIͷந৅Λ߹੒ͯ͠ผͷந৅Λ࡞੒͢ Δɻ Card Search Bar Filterable CardList Card
9. State • UI͸୯ͳΔαʔόɾϏδωεϩδοΫͷঢ়ଶ ͷίϐʔͰ͸ͳ͍ɻ(ͷͰ࣌ʹ͸UIͷঢ়ଶΛ࣋ ͭ͜ͱ͕ඞཁ) Original Data Presentational Data State UserEvent
10. Presentational / Container Component
11. Presentational & Container Container Presentational Presentational Presentational Presentational Container Presentational
12. Presentational Component • Presentational Componentͷؔ৺͝ͱ͸ݟͨ ໨ͷΈɻ • Πϕϯτॲཧ΍σʔλͷՃ޻͸Containerʹ೚ ͤΔ
13. Container Component • ϏδωεϩδοΫ΍Presentational Componentؒͷ૬ޓ࡞༻Λ؅ཧ͢Δɻ • ಛʹFlux ArchitectureͰ͸storeΛComponent ʹඥ෇͚Δ໾ׂΛ࣋ͭɻ
14. UIͷந৅Խ
15. UIίϯϙʔωϯτͷ෼ղ
16. ϩάΠϯϑΥʔϜͷ৔߹ • ID/Passwordೖྗ͕Ͱ͖Δ • ID/ύεϫʔυ͕8จࣈҎ಺ͷ৔߹͸Τ ϥʔΛදࣔ͢Δ • ೖྗΤϥʔ͕͋Δͱ͖͸ϩάΠϯϘλ ϯΛΫϦοΫͰ͖ͳ͍ • ϩάΠϯϘλϯΛΫϦοΫ͢Δͱid/ passwordΛฦ͢ id hogehoge password ******* id must be at least 8 characters Login
17. σʔλߏ଄Λߟ͑Δ id hogehoge password ********* Login ϩάΠϯϑΥʔϜ - ϢʔβID - ύεϫʔυ
18. ৼΔ෣͍Λݟ͚ͭΔ id hogehoge password ********* Login ϩάΠϯϑΥʔϜ - ϢʔβID - ύεϫʔυ - ID௕ΛνΣοΫ͢Δ - ύεϫʔυ௕ΛνΣοΫ͢Δ - ϩάΠϯϘλϯΛ༗ޮʹ͢Δ - ϩάΠϯϘλϯΛແޮʹ͢Δ
19. ঢ়ଶΛݟ͚ͭΔ 送信不可 送信可能 検証OK 検証NG ૹ৴Մ൱ঢ়ଶ ೖྗݕূঢ়ଶ
20. ࣮૷ʹམͱ͠ࠐΉ LoginForm - userId: string - password: string - onSubmit: function - validateUserId(userId): bool - validatePassword(userId): bool - canSubmit: bool - handleSubmit(userId, password) <LoginForm userId={this.props.userId} password={this.props.password} onSubmit={this.handleSubmit} />
21. ΋͏গ͠൚༻తʹ͢Δ • όϦσʔλʔΛ֎͔Βઃఆ͍ͨ͠ • ೖྗϑΟʔϧυΛ࠶ར༻Ͱ͖ΔΑ͏ʹ͍ͨ͠
22. ݟͨ໨ʹूத͢Δ Container LoginForm Input Input SubmitButton Validator Validator
23. ίϯϙʔωϯτΛ෼ׂ͢Δ LoginForm - userId: string - password: string - userIdValidator: function - passwordValidator: function - onSubmit: function - handleSubmit(userId, password) Input - value: string - type: string - onChange: function - handleChange(value) SubmitButton - value: string - disable: bool - onClick: function - handleClick() ೖྗ஋ͱݕূؔ਺ʹΑͬͯ Ұҙʹݟͨ໨͕ܾ·ΔUIίϯϙʔωϯτ͕Ͱ͖Δ
24. ·ͱΊ • UI͸جຊతʹσʔλͱঢ়ଶͷදݱͰ͔͠ͳ͍ • ΠϯλʔϑΣʔεϑΝʔετͰߟ͑Α͏ • ಺෦࣮૷ΛӅṭ͠Α͏ • ԼҐίϯϙʔωϯτ͸Ͱ͖Δ͚ͩදࣔʹઐ೦ ͠Α͏