Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フロントエンド最前線に流されない Atomic Design という考え方
Search
yuuki79
November 05, 2016
Design
1
5.1k
フロントエンド最前線に流されない Atomic Design という考え方
Forkwell という会社の勉強会で登壇したときの資料。フロントエンドの人たちはデザインに近いところで仕事しているのに、小手先のツールに支配されすぎているので目線を上げるためのアンチテーゼ的な資料
yuuki79
November 05, 2016
Tweet
Share
More Decks by yuuki79
See All by yuuki79
暗号屋の稼業 @ AWS Blockchain Webinar
79yuuki
0
100
暗号屋の稼業
79yuuki
0
500
NFTビジネス活用の可能性
79yuuki
1
470
サルでもわかるブロックチェーン講座
79yuuki
0
430
仮想通貨これからどうなる?
79yuuki
1
350
ビットコインに対する所有権は認められるのか
79yuuki
0
5.5k
Blockchain x Startup
79yuuki
0
5.6k
Ripple で学ぶ DEX の世界
79yuuki
0
6.3k
日本と海外の放送禁止文化の違い
79yuuki
0
770
Other Decks in Design
See All in Design
Findyのプロデチームの 歩みとこれから
satty9556
0
320
役立つシステムを作るためのAI活用
kanzaki
0
110
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
930
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
2k
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
320
mento Design Team Portfolio
mento0fficial
1
930
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
190
ユーザー体験は細部に宿る -ウィジェットQAの挑戦と気づき- / UX is in the details: Challenges and Learnings from Widget QA
bitkey
PRO
0
110
デザイナーがAIを使い倒して爆速プロダクト開発!社内ハッカソンでの取り組み紹介
abokadotyann
8
2.5k
Liquid GlassとApp Intents
touyou
0
440
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
190
企業にデザインが融けたとき、デザイナーにできること。事業会社12年間の探究と葛藤 / Designship2025
visional_engineering_and_design
0
790
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Designing for humans not robots
tammielis
254
26k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
The Language of Interfaces
destraynor
162
25k
Site-Speed That Sticks
csswizardry
13
920
Typedesign – Prime Four
hannesfritz
42
2.8k
Transcript
ϑϩϯτΤϯυ࠷લઢʹྲྀ͞Εͳ͍ "UPNJD%FTJHOͱ͍͏ߟ͑ํɻ αΠόʔΤʔδΣϯτࢵ༎ٍ
ࣗݾհ ࢵ༎ٍ ࡀ αΠόʔΤʔδΣϯτ৽ଔ ܳೳਓϒϩάɺ"OESPJEΞϓϦϚʔέοτɺҭήʔϜɺιγϟήϓϩσϡʔ αʔɺιγϟήΤϯδχΞ ɺ".&45"(& +BWB1./PEFKT'SPOUFOE+43JPUKT4XJGUษڧதগ͠Ӧۀ ݸਓͰσβΠϯҊ݅ɺ#B1"̍ظੜɺTDIPPͰ/PEFKTͷઌੜɺஶॻʹʮ8FC
࡞ऀͷͨΊͷ(JU)VCͷڭՊॻʯ ࠷ۙ࡞ͬͨͷɿݰؔʹஔ͍ͨ-*/&CFBDPOͰఱؾ༧ใCPUɺޫΔͷඃΓ
None
ܳೳਓͱ༡Δʂίʔφʔػೳ
ຊ
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
·͞ʹϑϩϯτΤϯυ࠷લઢ
͜Μͳ࣌ͦ͜ Σϒඪ४
Σϒඪ४ )5.- $44 %0. &$."4DSJQU 47(ʜ جຊతʹ8FC੍࡞ʹ͓͍ͯΓ͘͢͢ΔͨΊͷن֨ɻ )5.-ߏɺ$44දࣔํ๏ɻ&$."4DSJQU&4Έ͍ͨʹݴޠͱͯ͠ਐԽ͍ͯ͘͠ɻ ʜΈ͍ͨͳɻ
8FC$PNQPOFOUT w 8$͕ࡦఆ͍ͯ͠Δ8FCͷ෦Խٕज़ w 6*ͷίϯϙʔωϯτԽ ྫ͑5XFFU#VUUPO͕͋ͬͨͱͯ͠ <tweet-button> Έ͍ͨͳλάҰ͚ͭͩͰ )5.- $44
+4 ػೳ ·Ͱ͕༻ҙ͞ΕΔ
8FC$PNQPOFOUTͷࠓ w ͔͠͠·ͩ·࣮ͩ༻తͰͳ͍ w (PPHMFͷ߈ΊͯΔ1PMZNFSΈ͍ͨͳ࣮ෳࡶͰະདྷײ ͕ڧ͍ɻ w ίϯϙʔωϯτ࣮ͷ࣮ݱʹ͚ͯಠࣗ࿏ઢͰΓग़͢ϑϨʔ ϜϫʔΫୡ w
3FBDU "OHVMBS 1PMZNFS 7VFKT 3JPUKTʜ w ͲΕڞ௨͍ͯ͠Δͷ͕)5.-ཁૉΛ֦ுͯ͠࠶ར༻Մೳͳ ίϯϙʔωϯτͱίʔυͰ6*ΛߏஙͰ͖ΔΑ͏ʹ͍ͯ͠Δɻ
8FC6*ͷίϯϙʔωϯτԽࠓޙΠέͦ͏ͩͧʜʁ
"UPNJD%FTJHO ίϯϙʔωϯτԽͷࢦඪɺઃܭͷϧʔϧɻ
"UPNT
ϥϕϧʢςΩετʣɺϘλϯɺΠϯϓοτͳͲɺ͜ΕҎ্ׂͰ͖ͳ͍ίϯϙʔωϯτ
.PMFDVMFT
ෳͷ"UPNT͕·ͱ·ͬͨͷɻ ʢྫɿϘλϯͱϥϕϧɺΠϯϓοτΛ·ͱΊͯ̍ͭͷϑΥʔϜʹͳΔʣ
0SHBOJTNT
ෳͷ.PMFDVMFT"UPNT͕·ͱ·ͬͨͷɻ ʢྫɿϩΰͱϝχϡʔϦετɺݕࡧϑΥʔϜΛ߹ΘͤͯϔομʔʹͳΔʣ
5FNQMBUFT
0SHBOJTNTΛ·ͱΊͨίϯςϯπ͕ͳ͍ঢ়ଶͷͷɻ ʢྫɿ͜͜·ͰདྷΔͱ΄΅ϫΠϠʔϑϨʔϜͷ༷ͳΠϝʔδʣ
1BHFT
None
*OTUBHSBNͰͷྫ
".&45"(&Ͱ4UZMF(VJEFΛ࡞ͬͯӡ༻
࣮ࡍʹ࡞ͬͨλάΛຊ൪Ͱͦͷ··࠶ར༻
ͬͯͯΑ͔ͬͨ͜ͱ
είʔϓ͕ྑ͍ w ίϯϙʔωϯτԽͷϧʔϧ͕໌֬ʹͳΔͷͰ໎Θͳ͍ɻ w ͦͷλά͚ͩͷ࣮Λ͢Ε͍͍ͷͰѹతʹݟ͍͢ w TDPQFEͳDTT͕ϝΠϯʹͳΔ͕ɺػೳ͕গͳ͘DMBTT͕ Ϳ͔ͭΒͣݟ௨͕͠ྑ͘ͳΓɺ#&.Έ͍ͨͳཧΛ͠ͳ ͯ͘ྑ͍ɻ w
ͦΕʹͱͳͬͯ%0.ʹର͢Δ+4ͷૢ࡞গͳ͘ݟ ָͯ͘͢ɻJEDMBTTࢦఆͰΘ͟Θ͟K2VFSZ͕ඞཁͳ͍
ѹతʹࣄ͕͍͢͠ w ϧʔϧ͕ܾΊ͘͢ͳͬͯɺ6*ͷ৭ͱ͔ύʔπͱ͔ʹ໊લ͕͍͍ͭͯ ΔͷͰଞͷϝϯόʔͱ͕͍͢͠ w σβΠϯʹରͯͬͯ͠ͳ͍৭αΠζɺύʔπ͕͋Δͱ͍͏͕Ͱ͖ Δɻ࠶ར༻Ͱ͖ͳ͍ͷ͔ฉ͚Δ͠ɺඍົͳσβΠϯ͕͛Δɻ w ΧελϜλάͷ໊લͱϑΝΠϧ໊͕ҰॹͳͷͰίʔυΛ୳͢ͷָʹͳ Δɻ
w ༷શମ͕ܾ·͍ͬͯͳͯ͘ɺύʔπ͔Βઌʹ࡞͓ͬͯ͘͜ͱ͕Ͱ͖ Δ͠ɺσβΠϯมߋָɻ w ͍ܰελΠϧௐͳΒσβΠφʔʹͦͷ··ͯ͠Βͬͯྑ͍ w ࠶ར༻Ͱ͖Δλά͕͋Δ࣌ͷշײ͕ؾ͍͍࣋ͪʜ
ͬͨ΄͏͕͍͍͜ͱ w ύʔπ৭ʹ໊લΛ͚ͭΔɻ w ˞4.-Έ͍ͨͳ໊લޙͰζϨΔࣄ͕͋ΔͷͰࣈͰ ཧͨ͠ํ͕͍͍͔ɻ w 'MVYͱ͔ͱΈ߹ΘͤΔͱɺσʔλͷΓऔΓ·Ͱ͔ͬͪΓϋ Ϛͬͯؾ͍͍࣋ͪɻ w
؆୯Ͱ͍͍͔Β4UZMF(VJEFΛ༻ҙͯ͠ɺ࡞ͬͨίϯϙʔωϯ τΛ֬ೝͰ͖ΔखஈΛ༻ҙ͢Δɻ w ίϯϙʔωϯτຖʹςετ͕ॻ͚Δʂ
͜ΕΒ8FC͚ͩͷϞϊͰͳ͍ʂʂ w 6*Λίϯϙʔωϯτຖʹ࣮ΛࡉԽ͠ɺػೳ͝ ͱ࠶ར༻͢Δɻ w ίϯϙʔωϯτʹ໊લΛ͚ͭͯ։ൃऀͰڞ༗͠ɺ σβΠϯΛ౷Ұ͢Δɻ w 4UZMF(VJEFͰίϯϙʔωϯτͷཧΛͯ͠ɺσ βΠϯͷݟ௨͠Λྑ͘͢Δɻ
8FC $PNQPOFOUT "UPNJD%FTJHO ίϯϙʔωϯτΛͬͨϑϩϯτΤϯυ։ൃ ͷπʔϧΛબͳ͍ҰͭͷσβΠϯख๏
͓·͚ 3JPUKT͍͍ͧ w ͠Έͷ͋Δ)5.-෩ͷ࣮͕Ͱ͖ΔͷͰɺ8FC $PNQPOFOUTΛҰ൪γϯϓϧʹ࣮ݱͯ͘͠ΕΔɻ w σβΠφʔ+4ΰϦΰϦॻ͘Α͏ͳਓ͔ΓͰͳ ͍8FC੍࡞ۀքશൠͷਓʹ؆୯ʹίϯϙʔωϯτମ ݧͤ͞Δ͜ͱ͕Ͱ͖Δɻ w
3FBDUͰ͖Δਓͷ࠾༻͍ͬͯ͠ɻ+4ॻ͚ΔਓͬͯϐϯΩϦͩͬͨΓ͢Δɻ
·ͱΊ w 8FCDPNQPOFOUTඪ४Խ͚ͩͰͳ͍͘ΖΜͳ ϑϨʔϜϫʔΫ͕͔͍ͬͯΔ͠ɺ͍͍ྲྀΕɻ w ίϯϙʔωϯτԽͱ͍͏ॴʹΛ͚ͯߦͬͨ࣌ɺ ϑϩϯτΤϯυ͞Μͱͯ͠Ͳ͏͢Δ͔ʁ w "UPNJD%FTJHOͷΑ͏ͳίϯϙʔωϯτΛ্ख͘σ βΠϯͰ͖Δߟ͑ํΛʹ͚ͯɺϑϩϯτΤϯυ
ք۾ͷߥΛΓӽ͑·͠ΐ͏ʂ
ϑϩϯτΤϯυ࠷લઢʹྲྀ͞Εͳ͍ "UPNJD%FTJHOͱ͍͏ߟ͑ํɻ