Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

63289c0da4c2735c97d34890e68087c7?s=47 yuuki79
November 05, 2016

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

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

63289c0da4c2735c97d34890e68087c7?s=128

yuuki79

November 05, 2016
Tweet

Transcript

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

  2. ࣗݾ঺հ ࢵ஛༎ٍ ࡀ  αΠόʔΤʔδΣϯτ೥৽ଔ ܳೳਓϒϩάɺ"OESPJEΞϓϦϚʔέοτɺҭ੒ήʔϜɺιγϟήϓϩσϡʔ αʔɺιγϟήΤϯδχΞ ɺ".&45"(& +BWB1./PEFKT'SPOUFOE+43JPUKT4XJGUษڧதগ͠Ӧۀ ݸਓͰσβΠϯҊ݅ɺ#B1"̍ظੜɺTDIPPͰ/PEFKTͷઌੜɺஶॻʹʮ8FC

    ੡࡞ऀͷͨΊͷ(JU)VCͷڭՊॻʯ ࠷ۙ࡞ͬͨ΋ͷɿݰؔʹஔ͍ͨ-*/&CFBDPOͰఱؾ༧ใCPUɺޫΔ੕ͷඃΓ ෺
  3. None
  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. 8FC6*ͷίϯϙʔωϯτԽ͸ࠓޙ΋Πέͦ͏ͩͧʜʁ

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

  14. "UPNT

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

  16. .PMFDVMFT

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

  18. 0SHBOJTNT

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

  20. 5FNQMBUFT

  21. 0SHBOJTNTΛ·ͱΊͨίϯςϯπ͕ͳ͍ঢ়ଶͷ΋ͷɻ ʢྫɿ͜͜·ͰདྷΔͱ΄΅ϫΠϠʔϑϨʔϜͷ༷ͳΠϝʔδʣ

  22. 1BHFT

  23. None
  24. *OTUBHSBNͰͷྫ

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

  26. ࣮ࡍʹ࡞ͬͨλάΛຊ൪Ͱ΋ͦͷ··࠶ར༻

  27. ΍ͬͯͯΑ͔ͬͨ͜ͱ

  28. είʔϓ͕ྑ͍ w ίϯϙʔωϯτԽͷϧʔϧ͕໌֬ʹͳΔͷͰ໎Θͳ͍ɻ w ͦͷλά͚ͩͷ࣮૷Λ͢Ε͹͍͍ͷͰѹ౗తʹݟ΍͍͢ w TDPQFEͳDTT͕ϝΠϯʹͳΔ͕ɺػೳ͕গͳ͘DMBTT͕ Ϳ͔ͭΒͣݟ௨͕͠ྑ͘ͳΓɺ#&.Έ͍ͨͳ؅ཧΛ͠ͳ ͯ͘ྑ͍ɻ w

    ͦΕʹͱ΋ͳͬͯ%0.ʹର͢Δ+4ͷૢ࡞΋গͳ͘ݟ΍ ָͯ͘͢ɻJEDMBTTࢦఆͰΘ͟Θ͟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 8FCDPNQPOFOUT͸ඪ४Խ͚ͩͰ͸ͳ͍͘ΖΜͳ ϑϨʔϜϫʔΫ͕޲͔͍ͬͯΔ͠ɺ͍͍ྲྀΕɻ w ίϯϙʔωϯτԽͱ͍͏ॴʹ໨Λ޲͚ͯߦͬͨ࣌ɺ ϑϩϯτΤϯυ԰͞Μͱͯ͠Ͳ͏͢Δ͔ʁ w "UPNJD%FTJHOͷΑ͏ͳίϯϙʔωϯτΛ্ख͘σ βΠϯͰ͖Δߟ͑ํΛ਎ʹ෇͚ͯɺϑϩϯτΤϯυ

    ք۾ͷߥ೾Λ৐Γӽ͑·͠ΐ͏ʂ
  35. ϑϩϯτΤϯυ࠷લઢʹྲྀ͞Εͳ͍ "UPNJD%FTJHOͱ͍͏ߟ͑ํɻ