FOLIOʹը૾ճؼςετΛಋೖͨ͠2018/8/23 Bonfire Frontend#2
View Slide
- ݟ ༸ี a.k.a. @Quramy- WebϑϩϯτΤϯυΤϯδχΞ- લʹFOLIOͱ͍͏ωοτূ݊ձࣾʹೖࣾࣗݾհ
ಥવͰ͕͢
ը໘ͷςετॻ͍ͯ·͔͢ʁ
- DOMͷΞαʔγϣϯΛॻ͘ͷ໘- Ͳ͜·ͰΞαʔτ͢Δ͔ɺ։ൃऀ࣍ୈʹͳΓ͕ͪ- Ξαʔτ͕গͳ͚Εɺෆ҆- Ξαʔτ͕ଟ͗͢Εɺϝϯς͕େมը໘ςετ͋Δ͋Δ
locale: fr ͷͱ͖ɺԿΛνΣοΫ͠·͔͢ʁ nodeName, textContent, classList શ෦֬ೝ͢ΔʁͲ͜·ͰΞαʔτ͠·͔͢ʁGood evening, {{name}}.Bon soir, {{name}}.Other...
ʮલճޭͨ͠DOMग़ྗʯΛexpectedʹ͢Εɺ։ൃऀ͕ΞαʔγϣϯίʔυΛهड़͢Δख͕ؒল͚Δ4OBQTIPUςετͰָ͕Ͱ͖ΔThe latest snapshot (DOM String)The actual snapshot (DOM String)Update if snapshot is acceptedAssertion
DOMϕʔεsnapshotςετಋೖ͕༰қɻҰํͰɺDOMϕʔεͰελΠϧͷݕূ͍͠ɻCSSͷద༻݁Ռ·ͰؚΊͯࣗಈςετͰ͖Δͱخ͍͠ɻ%0.WT*NBHF
͜͜ʹςΩετΛೖΕ·͢ɻͻͱͭͷεϥΠυʹ༰Λ٧Ί͗͢ͳ͍Α͏ʹ͠·͠ΐ͏ɻԿ͏Δ͍͞Α͏Ͱ͕͢ʮ̍ຕͷεϥΠυʹ̍ͭͷҙຯʯ͕εϥΠυ࡞ΓͷجຊͰ͢ɻը૾ͬͨΒ͑͑Μ͚
Ͳ͏Δͷ͔
- UIίϯϙʔωϯτͷΩϟϓνϟը૾ੜ- औಘͨ͠Ωϟϓνϟը૾ͷൺֱݕূը૾ճؼςετʹඞཁͳཁૉ
FOLIOͷϑϩϯτΤϯυ React + ReduxߏɻReactίϯϙʔωϯτ։ൃͰStorybookΛར༻ɻ͜ΕΛΘͳ͍खͳ͍6*ίϯϙʔωϯτͷΩϟϓνϟը૾ੜ
4UPSZCPPL
- ඳըʹඞཁͳpropsΛ༩͑ΕUIΛ࠶ݱͰ͖Δ Flux / ReduxͷΞʔΩςΫνϟͱ૬ੑ͕Α͍- ΠϨΪϡϥʔͳέʔεͷݟͨ؆୯ʹ࡞ΕΔ4UPSZCPPLίϯϙʔωϯτͷςετπʔϧ
Storybook͔ΒΩϟϓνϟը૾Λऔಘ͢Δπʔϧ৭ʑex: imageshots / roki / storybook-chrome-screenshot, etc…※ Ωϟϓνϟऔಘʹ͍ͭͯޙड़ΩϟϓνϟΛࡱΔͷ༰қ
https://github.com/reg-viz/reg-suit Λར༻ʢ͋Δҙຯࣗલը૾ճؼςετͷͨΊͷCLI- ൺֱରͱ͢ΔGit commitͷಛఆ- ը૾ͷࠩΛνΣοΫ͠ɺ݁ՌΛHTMLϨϙʔτͱͯ͠ग़ྗ- ൺֱ݁ՌΛAWS S3Google Cloud StorageΞοϓϩʔυ- ݁ՌΛSlackGitHub௨औಘͨ͠Ωϟϓνϟը૾ͷൺֱݕূ
- ReactίϯϙʔωϯτCSSΛมߋͯ͠git push- CIͰStorybookͷ֤story͕Ωϟϓνϟ͞ΕΔ- reg-suitͰը૾ൺֱςετ͕࣮ߦ͞ΕΔ- SlackͱGitLabͷPRʹ௨͕ඈͿϫʔΫϑϩʔ·ͱΊ
͜͜ʹςΩετΛೖΕ·͢ɻͻͱͭͷεϥΠυʹ༰Λ٧Ί͗͢ͳ͍Α͏ʹ͠·͠ΐ͏ɻԿ͏Δ͍͞Α͏Ͱ͕͢ʮ̍ຕͷεϥΠυʹ̍ͭͷҙຯʯ͕εϥΠυ࡞ΓͷجຊͰ͢ɻ
ݱͰͷ
ίʔυϕʔεͷมߋʹର͢ΔݟͨͷӨڹ͕ҰྎવͳͷͰɺϒϥϯσΟϯά৽ʢ8/8ʹਖ਼ࣜϦϦʔε͠·ͨ͠ʂʣͰʹཱͬͨɻҰํͰɺҰےೄͰ͍͔ͳ͍՝ු্ɻ࣮ࡍʹӡ༻ͯ͠Έͯ
ِཅੑޡݕग़(ຊਖ਼͍͠ͷʹɺޡͬͯࠩൃੜͱΈͳ͞ΕΔ)͕ଟൃ- ΞηοτಡΈࠐΈͷ͍ӽ͠- CSSͷద༻ͷ͍ӽ͠ൃੜͨ͠ᶃεΫγϣ͕ෆ҆ఆ
ը૾ͷಡΈࠐΈલʹεΫγϣ͞Εͯϩΰ͕ܽམ൵͍ࣦ͠ഊྫͦͷ
webϑΥϯτͷಡΈࠐΈલʹεΫγϣ͞Εͯจࣈ͕ζϨΔ൵͍ࣦ͠ഊྫͦͷ
PCͱεϚϗ྆ํͷViewportͰεΫγϣΛࡱΔstoryͰɺViewportͷมߋʹਵ͢ΔελΠϦϯάܭࢉྃલʹΩϟϓνϟ͞ΕͯɺຊདྷSP༻ͷΩϟϓνϟ͕PC͚ͷը૾ʹͳͬͯ͠·ͬͨɻ൵͍ࣦ͠ഊྫͦͷ
ൃੜͨ͠ᶄɿ$*͕͍1ճpushͯ͠CI͕ճΓ͖Δ·Ͱɺ15Ҏ্ඞཁ
10ఔΛStorybookΩϟϓνϟऔಘ͕Ί͍ͯͨɻ(Ωϟϓνϟରը૾500ఔ)1ຕ͝ͱʹϒϥβͷϖʔδϩʔυ͕ൃੜ͢Δ࣮Ͱ͋ͬͨͨΊɺjsͷධՁ͕࣌ؒਖੵঢ়ଶͰ݁ߏͳϘϦϡʔϜɻ$*͕͍࣌ؒ
ʮ҆ఆͯ͠ྔ࢈͢ΔʯΛߟ͑ͳ͚Εɺͷɻ҆ఆੑɾੑೳͷ՝ͱʹʮStorybookͷΩϟϓνϟऔಘʯʹىҼ͍ͯ͠ΔͨΊɺ͜ͷ෦Λ1͔Βݟ͢͜ͱʹɻ(ॳطଘͷOSSΛར༻͍ͯͨ͠)ΩϟϓνϟΛࡱΔͷ༰қʜ
StorybookͷΩϟϓνϟΛࡱΔCLIΛ࡞Γ·ͨ͠ɿhttps://github.com/Quramy/zisui※ ໋໊ʮࣗͰٵ͍ग़ͧ͢ʂʯͱ͍͏͓ؾ࣋ͪͷද໌Ͱ͢Α͠ɺࣗͰ࡞Ζ͏
- ֤ϝτϦΫε(DOMཁૉ/Ϧϑϩʔճ/ελΠϧ࠶ܭࢉճ)͕ఆৗঢ়ଶʹͳΔ·ͰΩϟϓνϟऔಘΛԆ- CSSΞχϝʔγϣϯͷࣗಈOFF[JTVJͷಛɿ҆ఆੑ
- ෳىಈͨ͠PuppeteerͰฒྻʹը૾औಘ- Storybookͷը໘ϩʔυ1ճͷΈ- storyͷΓସ͑ postMessage[JTVJͷಛɿੑೳ
- Ϧιʔε ͰઌಡΈ ※ ݱঢ়preview-head.htmlʹgulpͰهड़ͦͷଞ҆ఆԽͷͨΊͷϙΠϯτ
- StorybookͰը૾ճؼςετΛ͍ͯ͠·͢- DOMϕʔεͷεφοϓγϣοτςετͱൺΔͱɺϋʔυϧߴ͍͚Ͳɺಋೖ͢ΔՁेʹ͋Δͱࢥ͏·ͱΊ