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

Forkwell という会社の勉強会で登壇したときの資料。フロントエンドの人たちはデザインに近いところで仕事しているのに、小手先のツールに支配されすぎているので目線を上げるためのアンチテーゼ的な資料

Transcript

1. ϑϩϯτΤϯυ࠷લઢʹྲྀ͞Εͳ͍
   "UPNJD
   %FTJHO
   ͱ͍͏ߟ͑ํɻ αΠόʔΤʔδΣϯτ
   ࢵ஛༎ٍ
2. ࣗݾ঺հ ࢵ஛༎ٍ
   ࡀ
   αΠόʔΤʔδΣϯτ
   ೥৽ଔ
   ܳೳਓϒϩάɺ"OESPJEΞϓϦϚʔέοτɺҭ੒ήʔϜɺιγϟήϓϩσϡʔ αʔɺιγϟήΤϯδχΞ ɺ".&45"(&
   +BWB
   
   1.
   
   /PEFKT
   
   'SPOUFOE
   +4
   
   3JPUKT
   
   4XJGUษڧத
   
   গ͠Ӧۀ
   ݸਓͰσβΠϯҊ݅ɺ#B1"̍ظੜɺTDIPPͰ/PEFKTͷઌੜɺஶॻʹʮ8FC ੡࡞ऀͷͨΊͷ(JU)VCͷڭՊॻʯ
   ࠷ۙ࡞ͬͨ΋ͷɿݰؔʹஔ͍ͨ-*/&
   CFBDPOͰఱؾ༧ใCPUɺޫΔ੕ͷඃΓ ෺
4. ܳೳਓͱ༡΂Δʂίʔφʔػೳ
5. ຊ୊
6. 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
7. ·͞ʹϑϩϯτΤϯυ࠷લઢ
8. ͜Μͳ࣌୅ͦ͜ ΢Σϒඪ४
9. ΢Σϒඪ४ )5.-
   $44
   %0.
   &$."4DSJQU
   47(
   ʜ جຊతʹ͸
   8FC
   ੍࡞ʹ͓͍ͯ଄Γ΍͘͢͢ΔͨΊͷن֨ɻ )5.-͸ߏ଄ɺ$44͸දࣔํ๏ɻ&$."4DSJQU
   ͸
   &4
   Έ͍ͨʹݴޠͱͯ͠ਐԽ͍ͯ͘͠ɻ
   ʜΈ͍ͨͳɻ
10. 8FC
    $PNQPOFOUT w 8$͕ࡦఆ͍ͯ͠Δ
    8FC
    ͷ෦඼Խٕज़
    w 6*
    ͷίϯϙʔωϯτԽ ྫ͑͹
    5XFFU
    #VUUPO
    ͕͋ͬͨͱͯ͠ <tweet-button> Έ͍ͨͳλάҰ͚ͭͩͰ
    
    )5.-
    $44
    +4
    ػೳ
    ·Ͱ͕༻ҙ͞ΕΔ
11. 8FC
    $PNQPOFOUT
    ͷࠓ w ͔͠͠·ͩ·࣮ͩ༻తͰ͸ͳ͍
    w (PPHMF
    ͷ߈ΊͯΔ
    1PMZNFS
    Έ͍ͨͳ࣮૷΋΍΍ෳࡶͰະདྷײ ͕ڧ͍ɻ
    w ίϯϙʔωϯτ࣮૷ͷ࣮ݱʹ޲͚ͯಠࣗ࿏ઢͰ૸Γग़͢ϑϨʔ ϜϫʔΫୡ
    w 3FBDU
    "OHVMBS
    1PMZNFS
    7VFKT
    3JPUKT
    ౳ʜ
    w ͲΕ΋ڞ௨͍ͯ͠Δͷ͕
    )5.-
    ཁૉΛ֦ுͯ͠࠶ར༻Մೳͳ ίϯϙʔωϯτͱίʔυͰ
    6*
    ΛߏஙͰ͖ΔΑ͏ʹ͍ͯ͠Δɻ
12. 8FC
    6*
    ͷίϯϙʔωϯτԽ͸ࠓޙ΋Πέͦ͏ͩͧʜʁ
13. "UPNJD
    %FTJHO ίϯϙʔωϯτԽͷࢦඪɺઃܭͷϧʔϧɻ
14. "UPNT
15. ϥϕϧʢςΩετʣɺϘλϯɺΠϯϓοτ࿮ͳͲɺ͜ΕҎ্෼ׂͰ͖ͳ͍ίϯϙʔωϯτ
16. .PMFDVMFT
17. ෳ਺ͷ
    "UPNT
    ͕·ͱ·ͬͨ΋ͷɻ
    ʢྫɿϘλϯͱϥϕϧɺΠϯϓοτΛ·ͱΊͯ̍ͭͷϑΥʔϜʹͳΔʣ
18. 0SHBOJTNT
19. ෳ਺ͷ
    .PMFDVMFT
    ΍
    "UPNT
    ͕·ͱ·ͬͨ΋ͷɻ
    ʢྫɿϩΰͱϝχϡʔϦετɺݕࡧϑΥʔϜΛ߹ΘͤͯϔομʔʹͳΔʣ
20. 5FNQMBUFT
21. 0SHBOJTNT
    Λ·ͱΊͨίϯςϯπ͕ͳ͍ঢ়ଶͷ΋ͷɻ
    ʢྫɿ͜͜·ͰདྷΔͱ΄΅ϫΠϠʔϑϨʔϜͷ༷ͳΠϝʔδʣ
22. 1BHFT
24. *OTUBHSBN
    Ͱͷྫ
25. ".&45"(&
    Ͱ
    4UZMF(VJEF
    Λ࡞ͬͯӡ༻
26. ࣮ࡍʹ࡞ͬͨλάΛຊ൪Ͱ΋ͦͷ··࠶ར༻
27. ΍ͬͯͯΑ͔ͬͨ͜ͱ
28. είʔϓ͕ྑ͍ w ίϯϙʔωϯτԽͷϧʔϧ͕໌֬ʹͳΔͷͰ໎Θͳ͍ɻ
    w ͦͷλά͚ͩͷ࣮૷Λ͢Ε͹͍͍ͷͰѹ౗తʹݟ΍͍͢
    w TDPQFE
    ͳ
    DTT
    ͕ϝΠϯʹͳΔ͕ɺػೳ͕গͳ͘
    DMBTT
    ͕ Ϳ͔ͭΒͣݟ௨͕͠ྑ͘ͳΓɺ#&.
    Έ͍ͨͳ؅ཧΛ͠ͳ ͯ͘ྑ͍ɻ
    w ͦΕʹͱ΋ͳͬͯ
    %0.
    ʹର͢Δ
    +4
    ͷૢ࡞΋গͳ͘ݟ΍ ָͯ͘͢ɻJE
    
    DMBTT
    ࢦఆͰΘ͟Θ͟
    K2VFSZ
    ౳͕ඞཁͳ͍
29. ѹ౗తʹ࢓ࣄ͕͠΍͍͢ w ϧʔϧ͕ܾΊ΍͘͢ͳͬͯɺ6*
    ͷ৭ͱ͔ύʔπͱ͔ʹ໊લ͕͍͍ͭͯ ΔͷͰଞͷϝϯόʔͱ࿩͕͠΍͍͢
    w σβΠϯʹରͯ͠࢖ͬͯͳ͍৭΍αΠζɺύʔπ͕͋Δͱ͍͏࿩͕Ͱ͖ Δɻ࠶ར༻Ͱ͖ͳ͍ͷ͔ฉ͚Δ͠ɺඍົͳσβΠϯ͕๷͛Δɻ
    w ΧελϜλάͷ໊લͱϑΝΠϧ໊͕ҰॹͳͷͰίʔυΛ୳͢ͷ΋ָʹͳ Δɻ
    w ࢓༷શମ͕ܾ·͍ͬͯͳͯ͘΋ɺύʔπ͔Βઌʹ࡞͓ͬͯ͘͜ͱ͕Ͱ͖ Δ͠ɺσβΠϯมߋ΋ָɻ
    w ͍ܰελΠϧௐ੔ͳΒσβΠφʔʹͦͷ··௚ͯ͠΋Βͬͯ΋ྑ͍
    w ࠶ར༻Ͱ͖Δλά͕͋Δ࣌ͷշײ͕ؾ͍͍࣋ͪʜ
30. ΍ͬͨ΄͏͕͍͍͜ͱ w ύʔπ΍৭ʹ໊લΛ͚ͭΔɻ
    w ˞
    4
    
    .
    
    -
    Έ͍ͨͳ໊લ͸ޙͰζϨΔࣄ͕͋ΔͷͰ਺ࣈͰ ؅ཧͨ͠ํ͕͍͍͔΋ɻ
    w 'MVY
    ͱ͔ͱ૊Έ߹ΘͤΔͱɺσʔλͷ΍ΓऔΓ·Ͱ͔ͬͪΓϋ Ϛͬͯؾ͍͍࣋ͪɻ
    w ؆୯Ͱ͍͍͔Β
    4UZMF
    (VJEF
    Λ༻ҙͯ͠ɺ࡞ͬͨίϯϙʔωϯ τΛ֬ೝͰ͖ΔखஈΛ༻ҙ͢Δɻ
    w ίϯϙʔωϯτຖʹςετ͕ॻ͚Δʂ
31. ͜ΕΒ͸
    8FC
    ͚ͩͷϞϊͰ͸ͳ͍ʂʂ
    w 6*
    Λίϯϙʔωϯτຖʹ࣮૷Λࡉ෼Խ͠ɺػೳ͝ ͱ࠶ར༻͢Δɻ
    w ίϯϙʔωϯτʹ໊લΛ͚ͭͯ։ൃऀ಺Ͱڞ༗͠ɺ σβΠϯΛ౷Ұ͢Δɻ
    w 4UZMF
    (VJEF
    ౳Ͱίϯϙʔωϯτͷ؅ཧΛͯ͠ɺσ βΠϯͷݟ௨͠Λྑ͘͢Δɻ
32. 8FC
    $PNQPOFOUT
    
    
    "UPNJD
    %FTJHO  ίϯϙʔωϯτΛ࢖ͬͨϑϩϯτΤϯυ։ൃ
    ͷπʔϧΛબ͹ͳ͍ҰͭͷσβΠϯख๏
33. ͓·͚
    3JPUKT
    ͸͍͍ͧ w ਌͠Έͷ͋Δ)5.-෩ͷ࣮૷͕Ͱ͖ΔͷͰɺ8FC
    $PNQPOFOUT
    ΛҰ൪γϯϓϧʹ࣮ݱͯ͘͠ΕΔɻ
    w σβΠφʔ΍+4ΰϦΰϦॻ͘Α͏ͳਓ͹͔ΓͰ͸ͳ ͍8FC੍࡞ۀքશൠͷਓʹ؆୯ʹίϯϙʔωϯτମ ݧͤ͞Δ͜ͱ͕Ͱ͖Δɻ
    w 3FBDU
    Ͱ͖Δਓͷ࠾༻ͬͯ೉͍͠ɻ+4
    ॻ͚ΔਓͬͯϐϯΩϦͩͬͨΓ͢Δɻ
    
34. ·ͱΊ w 8FC
    DPNQPOFOUT
    ͸ඪ४Խ͚ͩͰ͸ͳ͍͘ΖΜͳ ϑϨʔϜϫʔΫ͕޲͔͍ͬͯΔ͠ɺ͍͍ྲྀΕɻ
    w ίϯϙʔωϯτԽͱ͍͏ॴʹ໨Λ޲͚ͯߦͬͨ࣌ɺ ϑϩϯτΤϯυ԰͞Μͱͯ͠Ͳ͏͢Δ͔ʁ
    w "UPNJD
    %FTJHO
    ͷΑ͏ͳίϯϙʔωϯτΛ্ख͘σ βΠϯͰ͖Δߟ͑ํΛ਎ʹ෇͚ͯɺϑϩϯτΤϯυ ք۾ͷߥ೾Λ৐Γӽ͑·͠ΐ͏ʂ
35. ϑϩϯτΤϯυ࠷લઢʹྲྀ͞Εͳ͍
    "UPNJD
    %FTJHO
    ͱ͍͏ߟ͑ํɻ