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
mabl を融和させるための取り組み in クラウドサイン / how-to-fusion-...
Search
hivesbee
February 19, 2020
Programming
0
210
mabl を融和させるための取り組み in クラウドサイン / how-to-fusion-mabl-in-cloudsign
hivesbee
February 19, 2020
Tweet
Share
More Decks by hivesbee
See All by hivesbee
組織・プロセス・技術 フロントエンドの生産性向上への複眼的アプローチ
hivesbee
0
18
Design System Meets Vue.js
hivesbee
0
98
フロントエンドの組織について考える / think-about-front-end-organization
hivesbee
5
2.9k
ProgressiveにVueを導入している話 / vue-progressive-integration
hivesbee
1
580
ProgressiveにVueを導入している現場から送る小ネタ / vue-progressive-integration-tips-dialog
hivesbee
1
560
クラスへの割り込み処理とProxyとReflect / method-intercept-with-proxy-and-reflect
hivesbee
1
110
Other Decks in Programming
See All in Programming
暇に任せてProxmoxコンソール 作ってみました
karugamo
1
700
これが俺の”自分戦略” プロセスを楽しんでいこう! - Developers CAREER Boost 2024
niftycorp
PRO
0
180
[FlutterKaigi2024] Effective Form 〜Flutterによる複雑なフォーム開発の実践〜
chocoyama
1
4k
創造的活動から切り拓く新たなキャリア 好きから始めてみる夜勤オペレーターからSREへの転身
yjszk
1
120
DevFest Tokyo 2025 - Flutter のアプリアーキテクチャ現在地点
wasabeef
4
870
nekko cloudにおけるProxmox VE利用事例
irumaru
3
390
Mermaid x AST x 生成AI = コードとドキュメントの完全同期への道
shibuyamizuho
0
160
17年周年のWebアプリケーションにTanStack Queryを導入する / Implementing TanStack Query in a 17th Anniversary Web Application
saitolume
0
240
ゆるやかにgolangci-lintのルールを強くする / Kyoto.go #56
utgwkk
1
320
42 best practices for Symfony, a decade later
tucksaun
1
170
Thoughts and experiences on Rust and TypeScript
unvalley
2
230
プロダクトの品質に コミットする / Commit to Product Quality
pekepek
2
760
Featured
See All Featured
Side Projects
sachag
452
42k
Docker and Python
trallard
41
3.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Code Review Best Practice
trishagee
65
17k
Building an army of robots
kneath
302
44k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Statistics for Hackers
jakevdp
796
220k
Done Done
chrislema
181
16k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.4k
We Have a Design System, Now What?
morganepeng
51
7.3k
BBQ
matthewcrist
85
9.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
Transcript
NBCMΛ༥ͤ͞ΔͨΊͷऔΓΈ JOΫϥυαΠϯ .BTBTIJ)"("
© Bengo4.com, inc. 2020 "CPVUNF .BTBTIJ)BHB หޢ࢜υοτίϜגࣜձࣾ ΫϥυαΠϯࣄۀຊ෦ϓϩμΫτ෦ ΫϥυαΠϯͷϑϩϯτΤϯυΤϯδχΞ NBCMʹग़ձͬͨͷڈͷՆ
WTFOEBJ7VFKT/VYUKTNFFUVQ 5XJUUFS!)JWFTCFF (JUIVCIJWFTCFF 2 $MPVE4JHO❤NBCM
© Bengo4.com, inc. 2020 5BCMFPGDPOUFOUT ͳͥNBCMΛಋೖ͔ͨ͠ NBCMͷϝϦοτɺσϝϦοτ
NBCMͱ༥ͤ͞Δํ๏ ৺ཧతϋʔυϧͷআڈ ϓϩηεͷΈࠐΈ ӡ༻͚ͭͮ͠Δ 3
ͱɺ͜͜ͰҰ୴$.Ͱ͢
© Bengo4.com, inc. 2020 ΫϥυαΠϯͱʁ ܖక͔݁Βܖॻཧ·ͰՄೳͳ ΫϥυܕͷిࢠܖαʔϏε ܖަবࡁͷܖॻΛΞοϓϩʔυ͠ɺ૬खํ͕ঝೝ͢Δ͚ͩͰܖΛ݁Ϳ͜ͱ͕Ͱ͖·͢ɻ ॻྨͷड৴ऀΫϥυαΠϯʹొ͢Δඞཁ͕͋Γ·ͤΜɻ 5
© Bengo4.com, inc. 2020 ΫϥυαΠϯͱʁ 6 ͦͷଞ αʔϏε 80ˋ ిࢠܖࢢγΣΞNo.1※
※ిࢠܖαʔϏεओཁ12ࣾʹ͓͍ͯɺ༗ঈɾແঈΛؚΉൃऀଆϕʔεͰͷར༻ొࣾ ʢגʣܦࡁݚڀॴௐ 20197݄ݱࡏ
ͳͥNBCMΛಋೖ͔ͨ͠
© Bengo4.com, inc. 2020 ϓϩμΫτͷಛੑ ΫϥυαΠϯ ɹɹʹʢిࢠʣܖͷαʔϏε ΫϥυαΠϯ͕͑ͳ͍ ɹɹʹ͓٬͞·͕ܖΛߦ͑ͳ͍ ɹɹˠػձଛࣦʹܨ͕Γ͔Ͷͳ͍
࣭Λߴ͘อͪଓ͚ΔϓϨογϟʔ എܠ ػೳ͕૿͑Δͨͼʹςετ͕πϥ͘ʜ ։ൃͷଆ໘͔Β ஞ࣍ϦϦʔε͞ΕΔػೳɾվम ɹɹˠػೳͷςετɺϦάϨογϣϯςετ Ϋϩεϒϥβςετʢಛʹ*&ʣ ྉۚϓϥϯ✕ݖݶͷΈ߹Θͤരൃ ։ൃʹϚον͢Δςετͷεϐʔυײ͕ඞཁ
© Bengo4.com, inc. 2020 ͦΜͳத WTFOEBJͷ࠙ձʹͯʜ % FFςετͳΒNBCM͕͍͍Ͱ͢Αʂ ͐ʙɺͦ͏ͳΜ͢Ͷ
ʙNBCMʹ͍ͭͯ৭ʑڭ͑ͯΒ͏ʙ ΊͬͪΌ͍͍αʔϏε͡Όͳ͍Ͱ͔͢ ձࣾͬͨΒݕ౼͠·͢ % ?? ɾɾɾɾɾɾ
© Bengo4.com, inc. 2020 Կ͕Α͔͔ͬͨ ը໘ૢ࡞ͷΈͰFFςετ͕ ఆٛͰ͖Δ NBCM5SBJOFS DISPNFFYUFOTJPO
Ͱ ૢ࡞ΛهదٓΞαʔγϣϯΛ͔͚ͯ NBCM5SBJOFSͷ͍ํ͕ Θ͔Ε୭Ͱςετ͕ॻ͚Δ༰қ͞ ϚϧνϒϥβʹରԠ $ISPNFɺ'JSFGPYɺ4BGBSJɺ*&ʹରԠ ɹɹˠ*&Ϣʔβʔ͕ଟ͍ΫϥυαΠϯ ɹɹɹʹͱͬͯΓʹધ Ϋϩεϒϥβςετͷ࣮ߦ͕༰қ ɹɹˠઃఆ͢ΕNBCM͕উखʹ ɹɹɹͬͯ͘ΕΔ ͜ͷ࣌ͰेϖΠͰ͖Δͱஅ
© Bengo4.com, inc. 2020 Α͠ɺ࠾༻
© Bengo4.com, inc. 2020 ͔͜͜Β͕ຊ൪ͩͬͨʜ
NBCMͱ༥ͤ͞Δํ๏
© Bengo4.com, inc. 2020 ಋೖͯ͠ऴΘΓͰͳ͍ Γ͍ͨ͜ͱ NBCMΛಋೖ͢Δ NBCMΛͬͯϥΫΛ͢Δ ৺ཧత
ϋʔυϧͷআڈ ϓϩηεͷ ΈࠐΈ ӡ༻͚ͭͮ͠Δ ͜ͷϓϩηεͰNBCMΛ༥͍ͤͯͬͨ͞
৺ཧతϋʔυϧͷআڈ
© Bengo4.com, inc. 2020 ཱ͔ͪͩΔ৺ཧతϋʔυϧͨͪ қͷϋʔυϧ ใͷ ϋʔυϧ ࣗͷ
ϋʔυϧ ʮͲ͏͍͍͑ͷʁʯʮ͍ͮΒ͍ʯ शಘ·Ͱͷίετ͕͔͔Δ ʮͦΕͬͯԿʁʯʮ˓˓͞Μʹ͓ئ͍͢Ε͍͍Αʯ ϝϯόʔͷΩϟονΞοϓ͢Δใ͕ݮͬͯ͠·͏ ʮͰɺͲ͏͢Ε͍͍ͷʁʯʮԿΛ͢Ε͍͍ͷʯ ํ͕ෆ໌ྎͰಈ͚ͳ͘ͳΔ
© Bengo4.com, inc. 2020 ཱ͔ͪͩΔ৺ཧతϋʔυϧͷରࡦ қͷϋʔυϧ ใͷ ϋʔυϧ ࣗͷ
ϋʔυϧ ͍͍͢πʔϧΛબఆ ࠓճNBCMΛνϣΠε ϋϯζΦϯΛ࣮ࢪ ։ൃϝϯόʔΛר͖ࠐΜͰใڞ༗ FFςετํΛࡦఆ ϝϯόʔ͕ςετΛ࡞͢Δࡍͷิॿʹ
ϓϩηεͷΈࠐΈ
© Bengo4.com, inc. 2020 NBCMಋೖલͷ։ൃϓϩηε #FGPSF ઃܭ σβΠϯ ։ൃ
ςετ ։ൃɾमਖ਼ ςετ ։ൃɾमਖ਼ ςετ ϦϦʔε σΟϨΫλʔ σβΠφʔ ΤϯδχΞ σβΠφʔ ΤϯδχΞ σΟϨΫλʔ σβΠφʔ ΤϯδχΞ ΤϯδχΞ σΟϨΫλʔ σβΠφʔ ΤϯδχΞ ΤϯδχΞ σΟϨΫλʔ σβΠφʔ ΤϯδχΞ
© Bengo4.com, inc. 2020 NBCMಋೖޙͷ։ൃϓϩηε "GUFS ઃܭ σβΠϯ ։ൃ
ςετ ։ൃɾमਖ਼ ςετ ։ൃɾमਖ਼ ςετ ϦϦʔε σΟϨΫλʔ σβΠφʔ ΤϯδχΞ σβΠφʔ ΤϯδχΞ ΤϯδχΞ ΤϯδχΞ NBCM ԾΈ NBCM ຊΈ NBCM ςετ NBCM ςετ σΟϨΫλʔ σβΠφʔ σΟϨΫλʔ ୭Ͱ ୭Ͱ
© Bengo4.com, inc. 2020 NBCMಛ༗ͷϓϩηεʹ͍ͭͯ NBCMԾΈ ςετରͷը໘ͷલޙͷUFTU͚ͩΛ 1MBOͰ࡞͓ͯ͘͠ NBCMຊΈ
ςετରͷUFTUΛ࡞ΓࠐΈɺ ԾΈͯ͋͠Δ1MBOʹͭͳ͗͜Ή ΤϯδχΞҎ֎ͷ৬छ͕༧Ίςετʹඋ͓͑ͯ͘͜ͱ͕Ͱ͖Δ ͋ͱNBCMΛ࣮ߦ͢Δ͚ͩͷঢ়ଶʹ
© Bengo4.com, inc. 2020 NBCMͷ࣮ߦʹ͍ͭͯ NBCMͷQMBOͰϥϕϧΛઃఆ ࠓճͷػೳ։ൃ༻ʹՃͨ͠QMBOʹಉ͡ϥϕϧΛ༩ ˞NBCM"1*ࢦఆͨ͠ϥϕϧΛ·ͱΊ࣮ͯߦ͢Δ͜ͱ͕Ͱ͖Δ NBCMͷ࣮ߦ$IBU0QTԽ
NBCMBQJͱTMBDLCPUΛ࿈ܞ ҾʹϥϕϧΛࢦఆ͠ɺ Ͱઃఆͨ͠ϥϕϧͷQMBOΛҰʹ࣮ߦ ςετͷ࣮ߦίετ৺ཧతෛՙΛݶΓͳ͘θϩʹ
© Bengo4.com, inc. 2020 ։ൃϓϩηεʹΈࠐΜͰײͨ͡ϝϦοτ తͳϝϦοτ ֬ೝ࡞ۀ͕ݮͬͨ ςετʹ͔͚ΔظؒΛॖͰ͖ͨ ࣄલʹςετͷ४උ͕Ͱ͖ΔͨΊ
ςετ͕ۤ௧Ͱͳ͘ͳͬͨ ʮNBCMΛճ͚ͩ͢ʯʹͳΕͨ ෭࣍తͳϝϦοτ NBCMͷQMBO࡞Λ௨ͯ͠৽ͨʹ ༷Λ٧ΊΔՕॴΛൃݟͰ͖ͨ σβΠφʔσΟϨΫλʔ͕վΊͯը໘Λ ၆ᛌͯ͠ݟΔ͜ͱ͕Ͱ͖Δ ˠ࠷ऴతͳΫΦϦςΟΞοϓʹد༩ ମྗԹଘ͕ஈҧ͍ ςετʹ͔͚Δମྗ͕ෆཁʹͳͬͨ ˠࠓ·Ͱ͋Γ͕ͱ͏ͳʜ
ӡ༻͚ͭͮ͠Δ
© Bengo4.com, inc. 2020 ӡ༻໘ʹͯ ఆظతʹNBCMશ݅ςετΛ࣮ߦ NBCM௨νϟϯωϧͰࢹ ΤϥʔΛݟ͚ͭ࣍ୈमਖ਼ ςετέʔεͷ֦ॆ
ϦάϨογϣϯςετͱҰॹʹQMBOΛՃ վળλεΫͷ͍ͭͰʹQMBOΛमਖ਼ ϨΨγʔίʔυͷҠߦલʹ QMBOΛՃͯ͠ਖ਼͍͠ಈ࡞Λอূ͓ͯ͘͠ NBCMͷUFTU࡞Ε͍ճ͕͠ޮ͘ ˠςετͷ࡞εϐʔυ্͕͍ͬͯ͘ ্هͷӡ༻͕ճΓଓ͚Δ͜ͱͰϓϩμΫτͷ࣭Λ্͛ଓ͚Δ͜ͱ͕Ͱ͖Δ
·ͱΊ
© Bengo4.com, inc. 2020 ·ͱΊ NBCM৬छΘͣؾܰʹςετ͕͔͚ΔαʔϏε NBCMϓϩηεʹΈࠐΈ͍͢ϙςϯγϟϧΛ͍ͬͯΔ αʔϏεͷಋೖʹϋʔυϧ͕͋Δ ͦͷ৺ཧతϋʔυϧΛղফ͢Δͷ͕େࣄ ։ൃϓϩηεʹΈࠐΜͰ։ൃϓϩηεશମͷվળʹد༩
ςετ࣌ؒͷॖɺςετظؒͷॖɺ৺ཧతෛՙͷݮ ӡ༻ʹΈࠐΉ͜ͱͰࣗಈతʹ࣭Λ্͛ଓ͚ΔαΠΫϧΛੜΈग़͢͜ͱ͕Ͱ͖Δ NBCM͍͍ͧ 27
5IBOLZPVGPSMJTUFOJOH