フロントエンド最前線に流されない Atomic Design という考え方

by yuuki79

Slide 1

Slide 1 text

ϑϩϯτΤϯυ࠷લઢʹྲྀ͞Εͳ͍ "UPNJD%FTJHOͱ͍͏ߟ͑ํɻ αΠόʔΤʔδΣϯτࢵ஛༎ٍ

Slide 2

Slide 2 text

ࣗݾ঺հ ࢵ஛༎ٍ ࡀ αΠόʔΤʔδΣϯτ೥৽ଔ ܳೳਓϒϩάɺ"OESPJEΞϓϦϚʔέοτɺҭ੒ήʔϜɺιγϟήϓϩσϡʔ αʔɺιγϟήΤϯδχΞ ɺ".&45"(& +BWB1./PEFKT'SPOUFOE+43JPUKT4XJGUษڧதগ͠Ӧۀ ݸਓͰσβΠϯҊ݅ɺ#B1"̍ظੜɺTDIPPͰ/PEFKTͷઌੜɺஶॻʹʮ8FC ੡࡞ऀͷͨΊͷ(JU)VCͷڭՊॻʯ ࠷ۙ࡞ͬͨ΋ͷɿݰؔʹஔ͍ͨ-*/&CFBDPOͰఱؾ༧ใCPUɺޫΔ੕ͷඃΓ ෺

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

ܳೳਓͱ༡΂Δʂίʔφʔػೳ

Slide 5

Slide 5 text

ຊ୊

Slide 6

Slide 6 text

React, ES6, TypeScript, babel, Browserify, webpack, Ramda, Grunt, gulp, JSX, Angular, Vue, KnockoutJS, bluebird, node.js, CommonJS, Flow, Mimosa, Virtual DOM, async, underscore lodash, fetch, promise, Jade, pug ect, handlebars, Flux, Redux ... ࠷ۙಡΜͩهࣄ ʲ຋༁ʳ೥ʹ+BWB4DSJQUΛֶΜͰͲ͏ײ͔ͨ͡ IUUQLJLVDIJIBUFCMPKQFOUSZ

Slide 7

Slide 7 text

·͞ʹϑϩϯτΤϯυ࠷લઢ

Slide 8

Slide 8 text

͜Μͳ࣌୅ͦ͜ ΢Σϒඪ४

Slide 9

Slide 9 text

΢Σϒඪ४ )5.- $44 %0. &$."4DSJQU 47(ʜ جຊతʹ͸8FC੍࡞ʹ͓͍ͯ଄Γ΍͘͢͢ΔͨΊͷن֨ɻ )5.-͸ߏ଄ɺ$44͸දࣔํ๏ɻ&$."4DSJQU͸&4Έ͍ͨʹݴޠͱͯ͠ਐԽ͍ͯ͘͠ɻ ʜΈ͍ͨͳɻ

Slide 10

Slide 10 text

8FC$PNQPOFOUT w 8$͕ࡦఆ͍ͯ͠Δ8FCͷ෦඼Խٕज़ w 6*ͷίϯϙʔωϯτԽ ྫ͑͹5XFFU#VUUPO͕͋ͬͨͱͯ͠ Έ͍ͨͳλάҰ͚ͭͩͰ )5.- $44 +4 ػೳ ·Ͱ͕༻ҙ͞ΕΔ

Slide 11

Slide 11 text

8FC$PNQPOFOUTͷࠓ w ͔͠͠·ͩ·࣮ͩ༻తͰ͸ͳ͍ w (PPHMFͷ߈ΊͯΔ1PMZNFSΈ͍ͨͳ࣮૷΋΍΍ෳࡶͰະདྷײ ͕ڧ͍ɻ w ίϯϙʔωϯτ࣮૷ͷ࣮ݱʹ޲͚ͯಠࣗ࿏ઢͰ૸Γग़͢ϑϨʔ ϜϫʔΫୡ w 3FBDU "OHVMBS 1PMZNFS 7VFKT 3JPUKT౳ʜ w ͲΕ΋ڞ௨͍ͯ͠Δͷ͕)5.-ཁૉΛ֦ுͯ͠࠶ར༻Մೳͳ ίϯϙʔωϯτͱίʔυͰ6*ΛߏஙͰ͖ΔΑ͏ʹ͍ͯ͠Δɻ

Slide 12

Slide 12 text

8FC6*ͷίϯϙʔωϯτԽ͸ࠓޙ΋Πέͦ͏ͩͧʜʁ

Slide 13

Slide 13 text

"UPNJD%FTJHO ίϯϙʔωϯτԽͷࢦඪɺઃܭͷϧʔϧɻ

Slide 14

Slide 14 text

"UPNT

Slide 15

Slide 15 text

ϥϕϧʢςΩετʣɺϘλϯɺΠϯϓοτ࿮ͳͲɺ͜ΕҎ্෼ׂͰ͖ͳ͍ίϯϙʔωϯτ

Slide 16

Slide 16 text

.PMFDVMFT

Slide 17

Slide 17 text

ෳ਺ͷ"UPNT͕·ͱ·ͬͨ΋ͷɻ ʢྫɿϘλϯͱϥϕϧɺΠϯϓοτΛ·ͱΊͯ̍ͭͷϑΥʔϜʹͳΔʣ

Slide 18

Slide 18 text

0SHBOJTNT

Slide 19

Slide 19 text

ෳ਺ͷ.PMFDVMFT΍"UPNT͕·ͱ·ͬͨ΋ͷɻ ʢྫɿϩΰͱϝχϡʔϦετɺݕࡧϑΥʔϜΛ߹ΘͤͯϔομʔʹͳΔʣ

Slide 20

Slide 20 text

5FNQMBUFT

Slide 21

Slide 21 text

0SHBOJTNTΛ·ͱΊͨίϯςϯπ͕ͳ͍ঢ়ଶͷ΋ͷɻ ʢྫɿ͜͜·ͰདྷΔͱ΄΅ϫΠϠʔϑϨʔϜͷ༷ͳΠϝʔδʣ

Slide 22

Slide 22 text

1BHFT

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

*OTUBHSBNͰͷྫ

Slide 25

Slide 25 text

".&45"(&Ͱ4UZMF(VJEFΛ࡞ͬͯӡ༻

Slide 26

Slide 26 text

࣮ࡍʹ࡞ͬͨλάΛຊ൪Ͱ΋ͦͷ··࠶ར༻

Slide 27

Slide 27 text

΍ͬͯͯΑ͔ͬͨ͜ͱ

Slide 28

Slide 28 text

είʔϓ͕ྑ͍ w ίϯϙʔωϯτԽͷϧʔϧ͕໌֬ʹͳΔͷͰ໎Θͳ͍ɻ w ͦͷλά͚ͩͷ࣮૷Λ͢Ε͹͍͍ͷͰѹ౗తʹݟ΍͍͢ w TDPQFEͳDTT͕ϝΠϯʹͳΔ͕ɺػೳ͕গͳ͘DMBTT͕ Ϳ͔ͭΒͣݟ௨͕͠ྑ͘ͳΓɺ#&.Έ͍ͨͳ؅ཧΛ͠ͳ ͯ͘ྑ͍ɻ w ͦΕʹͱ΋ͳͬͯ%0.ʹର͢Δ+4ͷૢ࡞΋গͳ͘ݟ΍ ָͯ͘͢ɻJEDMBTTࢦఆͰΘ͟Θ͟K2VFSZ౳͕ඞཁͳ͍

Slide 29

Slide 29 text

ѹ౗తʹ࢓ࣄ͕͠΍͍͢ w ϧʔϧ͕ܾΊ΍͘͢ͳͬͯɺ6*ͷ৭ͱ͔ύʔπͱ͔ʹ໊લ͕͍͍ͭͯ ΔͷͰଞͷϝϯόʔͱ࿩͕͠΍͍͢ w σβΠϯʹରͯ͠࢖ͬͯͳ͍৭΍αΠζɺύʔπ͕͋Δͱ͍͏࿩͕Ͱ͖ Δɻ࠶ར༻Ͱ͖ͳ͍ͷ͔ฉ͚Δ͠ɺඍົͳσβΠϯ͕๷͛Δɻ w ΧελϜλάͷ໊લͱϑΝΠϧ໊͕ҰॹͳͷͰίʔυΛ୳͢ͷ΋ָʹͳ Δɻ w ࢓༷શମ͕ܾ·͍ͬͯͳͯ͘΋ɺύʔπ͔Βઌʹ࡞͓ͬͯ͘͜ͱ͕Ͱ͖ Δ͠ɺσβΠϯมߋ΋ָɻ w ͍ܰελΠϧௐ੔ͳΒσβΠφʔʹͦͷ··௚ͯ͠΋Βͬͯ΋ྑ͍ w ࠶ར༻Ͱ͖Δλά͕͋Δ࣌ͷշײ͕ؾ͍͍࣋ͪʜ

Slide 30

Slide 30 text

΍ͬͨ΄͏͕͍͍͜ͱ w ύʔπ΍৭ʹ໊લΛ͚ͭΔɻ w ˞4.-Έ͍ͨͳ໊લ͸ޙͰζϨΔࣄ͕͋ΔͷͰ਺ࣈͰ ؅ཧͨ͠ํ͕͍͍͔΋ɻ w 'MVYͱ͔ͱ૊Έ߹ΘͤΔͱɺσʔλͷ΍ΓऔΓ·Ͱ͔ͬͪΓϋ Ϛͬͯؾ͍͍࣋ͪɻ w ؆୯Ͱ͍͍͔Β4UZMF(VJEFΛ༻ҙͯ͠ɺ࡞ͬͨίϯϙʔωϯ τΛ֬ೝͰ͖ΔखஈΛ༻ҙ͢Δɻ w ίϯϙʔωϯτຖʹςετ͕ॻ͚Δʂ

Slide 31

Slide 31 text

͜ΕΒ͸8FC͚ͩͷϞϊͰ͸ͳ͍ʂʂ w 6*Λίϯϙʔωϯτຖʹ࣮૷Λࡉ෼Խ͠ɺػೳ͝ ͱ࠶ར༻͢Δɻ w ίϯϙʔωϯτʹ໊લΛ͚ͭͯ։ൃऀ಺Ͱڞ༗͠ɺ σβΠϯΛ౷Ұ͢Δɻ w 4UZMF(VJEF౳Ͱίϯϙʔωϯτͷ؅ཧΛͯ͠ɺσ βΠϯͷݟ௨͠Λྑ͘͢Δɻ

Slide 32

Slide 32 text

8FC $PNQPOFOUT "UPNJD%FTJHO ίϯϙʔωϯτΛ࢖ͬͨϑϩϯτΤϯυ։ൃ ͷπʔϧΛબ͹ͳ͍ҰͭͷσβΠϯख๏

Slide 33

Slide 33 text

͓·͚ 3JPUKT͸͍͍ͧ w ਌͠Έͷ͋Δ)5.-෩ͷ࣮૷͕Ͱ͖ΔͷͰɺ8FC $PNQPOFOUTΛҰ൪γϯϓϧʹ࣮ݱͯ͘͠ΕΔɻ w σβΠφʔ΍+4ΰϦΰϦॻ͘Α͏ͳਓ͹͔ΓͰ͸ͳ ͍8FC੍࡞ۀքશൠͷਓʹ؆୯ʹίϯϙʔωϯτମ ݧͤ͞Δ͜ͱ͕Ͱ͖Δɻ w 3FBDUͰ͖Δਓͷ࠾༻ͬͯ೉͍͠ɻ+4ॻ͚ΔਓͬͯϐϯΩϦͩͬͨΓ͢Δɻ

Slide 34

Slide 34 text

·ͱΊ w 8FCDPNQPOFOUT͸ඪ४Խ͚ͩͰ͸ͳ͍͘ΖΜͳ ϑϨʔϜϫʔΫ͕޲͔͍ͬͯΔ͠ɺ͍͍ྲྀΕɻ w ίϯϙʔωϯτԽͱ͍͏ॴʹ໨Λ޲͚ͯߦͬͨ࣌ɺ ϑϩϯτΤϯυ԰͞Μͱͯ͠Ͳ͏͢Δ͔ʁ w "UPNJD%FTJHOͷΑ͏ͳίϯϙʔωϯτΛ্ख͘σ βΠϯͰ͖Δߟ͑ํΛ਎ʹ෇͚ͯɺϑϩϯτΤϯυ ք۾ͷߥ೾Λ৐Γӽ͑·͠ΐ͏ʂ

Slide 35

Slide 35 text

ϑϩϯτΤϯυ࠷લઢʹྲྀ͞Εͳ͍ "UPNJD%FTJHOͱ͍͏ߟ͑ํɻ