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
kintoneフロントエンド刷新 〜新規参加5ヶ月から見るリアル〜
Search
Hajime Mugishima
October 08, 2021
Technology
3
1.8k
kintoneフロントエンド刷新 〜新規参加5ヶ月から見るリアル〜
2021/10/08
Cybozu Tech Meetup #16
Hajime Mugishima
October 08, 2021
Tweet
Share
More Decks by Hajime Mugishima
See All by Hajime Mugishima
令和7年版 あなたが使ってよいフロントエンド機能とは
mugi_uno
13
6.9k
New Order in Cascade Sorting Order
mugi_uno
3
3.6k
Deep Dive into React Stream/Serialize
mugi_uno
8
2.1k
Next.js App Router での MPA フロントエンド刷新
mugi_uno
41
24k
コロナ禍 Frontend おさらい
mugi_uno
1
450
Toyama.rb
mugi_uno
1
140
Javaを富山でやってたはずがSwiftのためにMacBook買ったらRubyでリモートワーカーになってJSの本を出版するまでを思い返す
mugi_uno
7
2.6k
脱レガシーフロントエンドのために知っておいたほうがいいこと
mugi_uno
20
7.5k
マルチカーソルのLT
mugi_uno
0
290
Other Decks in Technology
See All in Technology
Rubyで作る論理回路シミュレータの設計の話 - Kashiwa.rb #12
kozy4324
1
310
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
12k
doda開発 生成AI元年宣言!自家製AIエージェントから始める生産性改革 / doda Development Declaration of the First Year of Generated AI! Productivity Reforms Starting with Home-grown AI Agents
techtekt
0
160
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
17k
Autonomous Database サービス・アップデート (FY25)
oracle4engineer
PRO
2
770
AIエージェントの継続的改善のためオブザーバビリティ
pharma_x_tech
6
1.2k
SFTPコンテナからファイルをダウンロードする
dip
0
320
Devin(Deep) Wiki/Searchの活用で変わる開発の世界観/devin-wiki-search-impact
tomoki10
0
330
菸酒生在 LINE Taiwan 的後端雙刀流
line_developers_tw
PRO
0
190
(非公式) AWS Summit Japan と 海浜幕張 の歩き方 2025年版
coosuke
PRO
1
270
評価の納得感を2段階高める「構造化フィードバック」
aloerina
1
190
ゆるSRE #11 LT
okaru
1
630
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Done Done
chrislema
184
16k
Six Lessons from altMBA
skipperchong
28
3.8k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Automating Front-end Workflow
addyosmani
1370
200k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
How STYLIGHT went responsive
nonsquared
100
5.6k
Transcript
$ZCP[V5FDI.FFUVQ LJOUPOFϑϩϯτΤϯυ৽ ʙ৽نࢀՃ̑ϲ݄͔ΒݟΔϦΞϧʙ αΠϘζגࣜձࣾ ϑϩϯτΤϯυΤΩεύʔτνʔϜ ഴౡҰ!NVHJ@VOP
ࣗݾհ ഴౡҰ Ή͗͠·͡Ί !NVHJ@VOP ɾத్ೖࣾ ɾϑϩϯτΤϯυΤΩεύʔτνʔϜ ɾϑϧϦϞʔτ ࢁ
͢͜ͱ ˔LJOUPOFͷ͝հ ˔LJOUPOFϑϩϯτΤϯυ৽ ˔ೖࣾ̑ϲ݄͔ΒݟͨϦΞϧ ˔๊͑Δ՝ͱղܾࡦ ˔ΤϯδχΞͱͯ͠ಘΒΕΔͷ
LJOUPOF
LJOUPOF 🔗αΠϘζΤϯδχΞ࠾༻ϐονIUUQTTQFBLFSEFDLDPNDZCP[VJOTJEFPVUDZCP[VFOHJOFFSSFDSVJU
LJOUPOF 🔗αΠϘζΤϯδχΞ࠾༻ϐονIUUQTTQFBLFSEFDLDPNDZCP[VJOTJEFPVUDZCP[VFOHJOFFSSFDSVJU
LJOUPOF 🔗αΠϘζΤϯδχΞ࠾༻ϐονIUUQTTQFBLFSEFDLDPNDZCP[VJOTJEFPVUDZCP[VFOHJOFFSSFDSVJU
LJOUPOFϑϩϯτΤϯυ৽
LJOUPOFϑϩϯτΤϯυ৽ ྺ࢙͕͍αʔϏεˠਐΉϨΨγʔԽ ɾ$MPTVSF5PPMTओମͷίʔυϕʔε ɾओྲྀͳϑϩϯτΤϯυࣄͱͷဃ ɾֶशΛؚΉ։ൃϝϯςφϯείετ ɾ࠾༻ΛؚΉະདྷͷӨڹ
LJOUPOFϑϩϯτΤϯυ৽ ΞʔΩςΫνϟΛ৽த ˣ 5ZQF4DSJQU3FBDUͳͲʹঃʑʹஔ͖͑
ϑϩϯτΤϯυΤΩεύʔτνʔϜ ✕ LJOUPOFϑϩϯτΤϯυ৽
ϑϩϯτΤϯυΤΩεύʔτνʔϜ େ͖̏࣠͘ͰϑϩϯτΤϯυ৽ʹڠྗ ˔3FBDUԽͷ࣮࡞ۀΛਐΊΔνʔϜ ˔қ͕ߴ͍ՕॴͷࣄલݕূΛߦ͏νʔϜ ˔ϚΠΫϩαʔϏεԽͷࢪࡦݕ౼Λߦ͏νʔϜ ˠLJOUPOF։ൃνʔϜͱͷϞϒ ˠϓϩτλΠϓ࡞ͳͲͷઌճΓରԠ ˠະདྷͷཧΛݟਾ͑ͨݕূ
ݱࡏͷਐḿ ཧը໘ 🏁ΰʔϧ ϦεΫΊͷཧը໘Ͱׂ̓΄Ͳྃ
ཧը໘ қ͕ߴ͍ʑͷը໘ ϦεΫΊͷཧը໘Ͱׂ̓΄Ͳྃ ˣ ·ͩઌ͍ 🏁ΰʔϧ ݱࡏͷਐḿ
ͬͱΓ͍ͨํ 🎥IUUQTXXXZPVUVCFDPNXBUDI W;YFK;+6D
🔥ೖࣾ̑ϱ݄ࢹͰͷϦΞϧͳ🔥
ೖࣾલͷؾ࣋ͪ ɾϑϩϯτΤϯυͷϨΨγʔվળͷܦݧ͋ͬͨ ϨΨγʔΛςʔϚʹࣥචͨ͠ ɾͻͱΓͰόϦόϦվળͯ͠Δͧʙ👍👍👍
ݱ࣮ ɾେنϑϩϯτΤϯυͷน ɾίʔυΛ͏͚ͩͰҰۤ࿑ ɾԿ͔ΒखΛ͚Εʜʁʁ
ͳʹ͕ҧ͏ͷ͔ʁ ɾݸਓPSগਓͰΕΔൣғ͕͍ ɾҰਓͷྗͰڧҾʹରॲͰ͖Δ͜ͱ͋Δ ˔খʙதن ˔େن ɾҰఆਓҎ্ͷνʔϜͰͷରॲ͕લఏ ɾݸਓͰΕΔൣғݶք͕͋Δ ˠݸਓͷྗ νʔϜΛՃͤ͞Δɾࢪࡦ͕ඞཁ
LJOUPOFϑϩϯτΤϯυ৽ͷ՝ͱղܾࡦ
🔥ίʔυཧղͷίετͷߴ͞ େͳίʔυྔ ɾສߦΛ͑Δ+4ίʔυ ɾը໘ಡΜͰ͍͚ͩ͘ͰҰۤ࿑
🔥ίʔυཧղͷίετͷߴ͞ $MPTVSF5PPMT ɾੈͷதͰͷใͷগͳ͞ (PPHMFݕࡧΑΓࣾφϨοδͷ΄͏͕๛ ɾ&WFOU1VC4VCʹΑΔδϟϯϓ ɾը໘ͱͷಥ͖߹Θͤͷखؒ
💡ৗతͳϞϒɾϖΞ࡞ۀ جຊతʹϞϒɾϖΞͰ࡞ۀ͢Δ ɾ࡞ۀϓϥϯχϯάͷஈ֊͔ΒෳਓͰ࡞ۀ ɾඇಉظͷίϛϡχέʔγϣϯίετΛ͑Δ ɾ༗ࣝऀ͔ΒμΠϨΫτʹݟΛٵऩ͢Δ
🔥LJOUPOFطଘ։ൃϓϩηεͱͷ૬ੑ ௨ৗͷLJOUPOF։ൃͱಉ͡ϓϩηεͰ࡞ۀ͍ͯͨ͠ ɾεΫϥϜXFFLεϓϦϯτ ɾόοΫϩάˠϦϦʔεՄೳͳҙຯͷ͋Δ୯Ґ ˠܧଓతʹ҆ఆͨ͠ՁΛఏڙͰ͖Δͷ͕ར
🔥LJOUPOFطଘ։ൃϓϩηεͱͷ૬ੑ ϨΨγʔվળͱ૬ੑ͕ѱ͍෦͕͋Δ ɾͦͦϦϦʔεαΠΫϧ͕ҟͳΔ ɾҰ෦εΫϥϜΠϕϯτّ͕ࣜతͳࢀՃʹͳΔ ɾҙࢥܾఆͷ͕ͪൃੜ͢Δ
💡։ൃϓϩηεͷݟ͠ ΑΓਐΊ͍͢ܗʹมߋ ɾΠϕϯτࢀՃඞཁͳͷͷΈʹߜΔ ɾҙࢥܾఆΛLJOUPOF։ൃͱಠཱͯ͠ߦ͏ ɾίϛϡχέʔγϣϯʹ4MBDLΛ׆༻ αΠϘζશମͰLJOUPOF͕ओྲྀ ˠ͍·Ͱʑվળத
৽نϝϯόʔͱͯ͠ײͨ͡՝ͱͬͨ͜ͱ
׳Εͷґଘ ɾ՝ʹରͯ͠׳ΕΕେৎ͕ղܾࡦͳ͜ͱ͕͋Δ ྫ$MPTVSF5PPMTͷίϯϙʔωϯτͱରԠը໘׳ΕΕ֮͑Δ ɾ׳Εʹ࠶ݱੑ͕ͳ͘ݸਓ͕ࠩେ͖͍ ɾେنϑϩϯτΤϯυ৽ରԠظ͍ؒ ؔΘΔϝϯόʔଟ͘ͳΔ ɾ׳ΕΔ·ͰͷίετԿ܁Γฦ͞ΕΔ
ͳʹΛ͖͔͢ʁΛߟ͑Δ🤔
׳ΕͷґଘΛݮΒ͢ ɾ׳Εͯ͠·ͬͨਓʹͱͬͯ՝Ͱͳ͘ͳΔ ˠ৽نϝϯόʔͱͯ͠ײͨ͡՝Λ ɹ͕ࣗ৽نϝϯόʔͷ͏ͪʹղܾ͢Δ ɾ׳ΕଐਓੑͱղऍͰ͖Δ ׳Ε͍ͯͳͯ͘Ͱ͖Δ͕ཧ
ใΛࢹ֮Խ ͕ࣗ٧·ͬͨՕॴΛࢿྉԽͯ͢͠ ܧঝਤ ॳظԽϑϩʔ ίϯϙʔωϯτରԠਤ
$MPTVSF5PPMT%FW5PPMTΛ࡞ 3FBDU%FW5PPMTͷΑ͏ͳ $ISPNF֦ுΛ࡞ 🔗$ZCP[V*OTJEF0VUϑϩϯτΤϯυ৽ͷͨΊʹ%FW5PPMTΛ࡞ͬͯ։ൃΛḿΒͤΔIUUQTCMPHDZCP[VJPFOUSZ ˠίʔυཧղΛՃ
αΠϘζͱ͍͏৫ͷ෩ ɾ໋ྩࢦࣔͳ͍ʢϗϯτʹແ͍ʣ ɾϑϩϯτΤϯυ৽ͱ͍͏ඪʹରͯ͠ ɹ֤͕ࣗʮඞཁͩʂʯͱࢥ͑Δ͜ͱΛΕΔ ɾͦ͜ʹ৽نϝϯόʔ͔Ͳ͏͔ͷڥքແ͍
🎓ΤϯδχΞͱͯ͠ಘΒΕΔͷ ݸਓͷݟղΛؚΈ·͢
ϨΨγʔܦݧࣗମͷՁ ɾϨΨγʔվળಛผͳͷͰͳ͍ ͍·ϞμϯͰ͕࣌ؒܦͯϨΨγʔʹ ɾΤϯδχΞΛଓ͚͍ͯͯආ͚ଓ͚Δͷ͍͠ ɾϨΨγʔࣗମʹৗʹҰఆͷधཁ͕͋Δ ɾܦݧͱ͓ͯ࣋ͬͯ͘͠ϝϦοτ͋Δ
ػձʹόϥ͖͕ͭ͋Δ ɾখ͍͞վળػձଟ͘ɺݸਓɾগਓͰऔΓΊΔ ɾେنͳ৽ػձࣗମ͕͍͠ ˠҙࢥܾఆͷλΠϛϯά͕গͳ͍
େن͔ͩΒͦ͜ಘΒΕΔͷ ɾΞʔΩςΫνϟબఆ ɾσΟϨΫτϦߏ ɾ໋໊نଇ ɾίʔυͷׂ୯Ґ ɾςετཻ ˠେنͳͷͩͱؔΘΔػձࣗମ͕ك ॳظஈ֊͔ΒઃܭʹؔΘΕΔ
େن͔ͩΒͦ͜ಘΒΕΔͷ ٕज़τϨϯυͱҟͳΔֶͼಘΒΕΔ ɾվળʹ͓͚Δ։ൃϓϩηεͷࡦఆ ɾνʔϜ࡞Γ ɾφϨοδӡ༻ ɾ࡞ۀޮ্ͷͨΊͷπʔϧͷબఆ࡞ ˠظతʹ༗༻ͳݟɾεΩϧʹܨ͕Δ
αΠϘζͰͷվળͰಘΒΕΔͷ ɾBZपΓͷݟΛଟֶ͘Δ ɾαΠϘζʹBZͷઐνʔϜ͕ଘࡏ͢Δ ɾBZୡج४Λຬͨ͢6*ίϯϙʔωϯτΛ ɹνʔϜͰڠྗͯ͠࡞
·ͱΊ ˔LJOUPOFϑϩϯτΤϯυ৽·ͩ·ͩଓ͘ ˔՝ଟ͘؆୯ͳͷ͔ΓͰͳ͍͕ɺ վળαΠΫϧΛճ͋͢Δ ˔νʔϜΛՃ͢ΔͨΊͷऔΓΈ͕ඞཁͰɺ ɹͦͷͨΊʹ৽نϝϯόʔͷࢹॏཁ ˔ϨΨγʔͷܦݧΩϟϦΞ্༗༻ ͩͱࢥ͏
͔ͭେنͳΒͰͷֶͼଟ͍
8FBSFIJSJOH
ϑϩϯτΤϯυΤΩεύʔτνʔϜ 8FBSFIJSJOH