Tweet
Tweet

Slide 1

Slide 1 text

ReactͰֶͿ UIίϯϙʔωϯτ σβΠϯ

Slide 2

Slide 2 text

ࣗݾ঺հ • iOS/AndroidΞϓϦ։ൃ • 6೥ؒͰ໿30ຊͷεϚϗΞϓϦΛઃܭ/੡଄ • ͳͷͰUIͷந৅Խ͕޷͖ • ϑϩϯτΤϯυ • ੩తαΠτ͔ΒSPA·Ͱ • γεςϜΞʔΩςΫτݟश͍

Slide 3

Slide 3 text

Α͔ͬͨ͜ͱ • νʔϜϝϯόʔ͕Componentࢦ޲Ͱ࡞ΕΔΑ ͏ʹͳͬͨ • ઃܭൣғ͕໌֬ʹͳͬͨ • SMACSS΍BEMΛ͋·Γߟ͑ͳͯ͘Α͘ͳͬ ͨ

Slide 4

Slide 4 text

ͭ·͖ͮͲ͜Ζ • ந৅Խͷ୯Ґ • ঢ়ଶΛ࣋ͭ৔ॴ • ෳࡶ͗͢ΔΠϯλʔϑΣʔε

Slide 5

Slide 5 text

React Basic Theoretical Concepts (ൈਮ)

Slide 6

Slide 6 text

Transformation • UI͸σʔλ͔Βผͷσʔλܗࣜ΁ͷ୯ͳΔ౤ ӨͰ͋Δɻ Original Data Presentational Data

Slide 7

Slide 7 text

Abstraction • UI͸࠶ར༻Մೳͳཁૉʹந৅ԽՄೳͰɺ͜Ε Β͸࣮૷ͷৄࡉΛ֎෦ʹ࿙ग़͠ͳ͍ɻ Component CSS Scroll Moment Timer Velocity

Slide 8

Slide 8 text

Composition • ෳ਺ͷUIͷந৅Λ߹੒ͯ͠ผͷந৅Λ࡞੒͢ Δɻ Card Search Bar Filterable CardList Card

Slide 9

Slide 9 text

State • UI͸୯ͳΔαʔόɾϏδωεϩδοΫͷঢ়ଶ ͷίϐʔͰ͸ͳ͍ɻ(ͷͰ࣌ʹ͸UIͷঢ়ଶΛ࣋ ͭ͜ͱ͕ඞཁ) Original Data Presentational Data State UserEvent

Slide 10

Slide 10 text

Presentational / Container Component

Slide 11

Slide 11 text

Presentational & Container Container Presentational Presentational Presentational Presentational Container Presentational

Slide 12

Slide 12 text

Presentational Component • Presentational Componentͷؔ৺͝ͱ͸ݟͨ ໨ͷΈɻ • Πϕϯτॲཧ΍σʔλͷՃ޻͸Containerʹ೚ ͤΔ

Slide 13

Slide 13 text

Container Component • ϏδωεϩδοΫ΍Presentational Componentؒͷ૬ޓ࡞༻Λ؅ཧ͢Δɻ • ಛʹFlux ArchitectureͰ͸storeΛComponent ʹඥ෇͚Δ໾ׂΛ࣋ͭɻ

Slide 14

Slide 14 text

UIͷந৅Խ

Slide 15

Slide 15 text

UIίϯϙʔωϯτͷ෼ղ

Slide 16

Slide 16 text

ϩάΠϯϑΥʔϜͷ৔߹ • ID/Passwordೖྗ͕Ͱ͖Δ • ID/ύεϫʔυ͕8จࣈҎ಺ͷ৔߹͸Τ ϥʔΛදࣔ͢Δ • ೖྗΤϥʔ͕͋Δͱ͖͸ϩάΠϯϘλ ϯΛΫϦοΫͰ͖ͳ͍ • ϩάΠϯϘλϯΛΫϦοΫ͢Δͱid/ passwordΛฦ͢ id hogehoge password ******* id must be at least 8 characters Login

Slide 17

Slide 17 text

σʔλߏ଄Λߟ͑Δ id hogehoge password ********* Login ϩάΠϯϑΥʔϜ - ϢʔβID - ύεϫʔυ

Slide 18

Slide 18 text

ৼΔ෣͍Λݟ͚ͭΔ id hogehoge password ********* Login ϩάΠϯϑΥʔϜ - ϢʔβID - ύεϫʔυ - ID௕ΛνΣοΫ͢Δ - ύεϫʔυ௕ΛνΣοΫ͢Δ - ϩάΠϯϘλϯΛ༗ޮʹ͢Δ - ϩάΠϯϘλϯΛແޮʹ͢Δ

Slide 19

Slide 19 text

ঢ়ଶΛݟ͚ͭΔ 送信不可 送信可能 検証OK 検証NG ૹ৴Մ൱ঢ়ଶ ೖྗݕূঢ়ଶ

Slide 20

Slide 20 text

࣮૷ʹམͱ͠ࠐΉ LoginForm - userId: string - password: string - onSubmit: function - validateUserId(userId): bool - validatePassword(userId): bool - canSubmit: bool - handleSubmit(userId, password)

Slide 21

Slide 21 text

΋͏গ͠൚༻తʹ͢Δ • όϦσʔλʔΛ֎͔Βઃఆ͍ͨ͠ • ೖྗϑΟʔϧυΛ࠶ར༻Ͱ͖ΔΑ͏ʹ͍ͨ͠

Slide 22

Slide 22 text

ݟͨ໨ʹूத͢Δ Container LoginForm Input Input SubmitButton Validator Validator

Slide 23

Slide 23 text

ίϯϙʔωϯτΛ෼ׂ͢Δ 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ίϯϙʔωϯτ͕Ͱ͖Δ

Slide 24

Slide 24 text

·ͱΊ • UI͸جຊతʹσʔλͱঢ়ଶͷදݱͰ͔͠ͳ͍ • ΠϯλʔϑΣʔεϑΝʔετͰߟ͑Α͏ • ಺෦࣮૷ΛӅṭ͠Α͏ • ԼҐίϯϙʔωϯτ͸Ͱ͖Δ͚ͩදࣔʹઐ೦ ͠Α͏