Save 37% off PRO during our Black Friday Sale! »

kintoneのフロントエンド刷新に向けた取り組み

0e9f351dd1bafda75da78e326e93141b?s=47 Atsusuke Murata
September 29, 2021

 kintoneのフロントエンド刷新に向けた取り組み

「Cybozu Tech Meetup [9/29]kintoneのフロントエンド刷新に向けた取り組み」の発表資料です。

https://cybozu.connpass.com/event/225411/

0e9f351dd1bafda75da78e326e93141b?s=128

Atsusuke Murata

September 29, 2021
Tweet

Transcript

  1. LJOUPOFͷϑϩϯτΤϯυ ࡮৽ʹ޲͚ͨऔΓ૊Έ $ZCP[V 5FDI.FFUVQ ଜా ಞ྄

  2. "CPVU NF • ೥౓৽ଔೖࣾ • LJOUPOF։ൃνʔϜॴଐ ଜా ಞ྄ LVSPQQF !NZT@Y

    αΠϘ΢ζʹ৽ଔೖࣾͯ͠LJOUPOF։ൃνʔϜ ʹ഑ଐ͞Ε͔ͯΒ೥ܦͬͨͷͰ;Γ͔͑Δ kintone開発チーム 検索
  3. • LJOUPOFͱ͸ • ΞʔΫςΫνϟ࡮৽1+ͷ֓ཁ • ϨΨγʔίʔυվળͷي੻ Cybozu Inside Out ‒

    kintoneのフロントエンド刷新に向けた取り組み ࠓ೔͓࿩͢͠Δ͜ͱ
  4. LJOUPOFͱ͸

  5. ։ൃͷ஌͕ࣝͳͯ͘΋ ۀ຿ʹ߹ΘͤͨγεςϜΛ ͔ΜͨΜʹ࡞੒Ͱ͖Δ Ϋϥ΢υαʔϏε Ҿ༻αΠϘ΢ζ ΤϯδχΞ࠾༻ϐον

  6. ౦ূҰ෦্৔اۀͷ ࣾʹ͕ࣾ LJOUPOFΛར༻த 🏢 🏢 🏢 🏢 ※2021年6⽉末時点 Ҿ༻αΠϘ΢ζ ΤϯδχΞ࠾༻ϐον

  7. ੈքதͷνʔϜΛࢧ͑Δ ϓϩμΫτΛ࡞͍ͬͯ·͢ 社数: 1,130 社数: 860 顧客数: 600 中華圏 ASIA

    US ※2021年6⽉末時点 Ҿ༻αΠϘ΢ζ ΤϯδχΞ࠾༻ϐον
  8. ΞʔΩςΫνϟ࡮৽1+ͷ֓ཁ

  9. ΞʔΩςΫνϟ࡮৽1+ͱ͸ • LJOUPOFͷϑϩϯτΤϯυ࠶ઃܭ͢ΔϓϩδΣΫτ • ࠷ॳ͸LJOUPOFͷ؅ཧը໘Λ৽͍͠ϑϩϯτΤϯυͷ ٕज़ελοΫʹஔ͖׵͍͑ͯΔ • ٕज़࡮৽ʹՃ͑ͯσβΠϯͷ࡮৽΋ಉ࣌ʹਐΊ͍ͯΔ

  10. 2ͳͥϑϩϯτΤϯυΛ࡮৽͢Δͷ͔ʁ ੈքத

  11. ͳͥϑϩϯτΤϯυΛ࡮৽͢Δͷ͔ʁ • LJOUPOF͸೥લ͔Β $MPTVSF5PPMT Λ༻͍ͨ։ൃΛ ଓ͚͍ͯΔ • ॏްͳϑϨʔϜϫʔΫނʹɺݱ୅ͷϑϩϯτΤϯυ ΤίγεςϜͱ࿈ܞ͢Δʹ͸Ұ޻෉͢Δඞཁ͕͋Δ

  12. ͳͥϑϩϯτΤϯυΛ࡮৽͢Δͷ͔ʁ • ࣮ࡍͷ։ൃʹ໾ཱͭૉ੖Β͍͠੒Ռ • ҰํͰɺࠓޙ΋ $MPTVSF5PPMTʹରԠͨ͠πʔϧͷ։ൃɺ ϝϯςφϯεΛܧଓ͍ͯ͘͜͠ͱΛڧ͍ΒΕΔ େن໛ Closure Tools

    ϓϩδΣΫτʹPrettier Λಋೖ͢Δ·ͰͷಓͷΓ フロントエンド刷新のために DevTools を作って開発を捗らせる
  13. ͳͥϑϩϯτΤϯυΛ࡮৽͢Δͷ͔ʁ • ΤϯδχΞΛ૿΍͠ʹ͍͘ • ΦϯϘʔσΟϯάίετ͕ߴ͍ • ϓϩδΣΫτͷܧଓੑʹର͢ΔϦεΫ͕͋Δ

  14. ٕज़ελοΫ Closure Tools Ҡߦલ Ҡߦޙ

  15. ։ൃମ੍ 管理画⾯ の刷新 (8名) kintone開発チーム フロントエンド エキスパート ⽣産性向上 アクセシビリティ 開発⽀援チーム

    ٕज़બఆɺٕज़ݕূɺઃܭ౳ͷࢧԉ ۀ຿ͷࣗಈԽ΍ޮ཰Խͷࢧԉ BZ ద੾ͳϚʔΫΞοϓͳͲͷࢧԉ フロントエンド 刷新PJ 検証 (3名) デザイナー PM QA ライター
  16. ໨ࢦ͢νʔϜ૾ • LJOUPOFͷϑϩϯτΤϯυΛνʔϜ୯ҐͰ෼ׂͯ͠ɺӨڹൣғΛ ݶఆͯ͠ಠཱٕͨ͠ज़બఆɺϝϯςφϯε͕Ͱ͖Δମ੍Λ໨ࢦ͢ • কདྷతʹ͸ಠཱͨ͠νʔϜΛ࡞ͬͯࣗ཯తʹ։ൃͰ͖ΔΑ͏ʹ͢Δ

  17. LJOUPOF ͷϑϩϯτΤϯυΛνʔϜ୯ҐͰ෼ׂ͢Δ • OQN XPSLTQBDFTΛ࢖༻ͯ͠ɺ νʔϜ୯ҐͰ .POPSFQP Λ࡞Δ • νʔϜؒͰͷύοέʔδ͸

    OQN ύοέʔδͱͯ͠ར༻͢Δ • ໌ࣔతʹར༻͢ΔόʔδϣϯΛ ࢦఆͰ͖ΔΑ͏ʹ͢Δ͜ͱͰɺ νʔϜͷಠཱੑΛ୲อ͢Δ σΟϨΫτϦߏ੒ͷΠϝʔδ
  18. ϨΨγʔίʔυվળͷي੻

  19. ٕज़બఆ • ෳࡶੑ΁ͷରԠ • ܕνΣοΫ΍ίʔυิ׬ɺෳࡶੑΛੜΈʹ͍͘ઃܭʹಋͨ͘Ίͷࢥ૝ ΍"1*ઃܭʹͳ͍ͬͯΔ͔ • ΤίγεςϜͷॆ࣮౓ • ར༻ऀͷଟ͞ɺؔ࿈ϥΠϒϥϦ΍πʔϧͷॆ࣮౓ɺاۀʹΑΔར༻ɺ

    पลπʔϧͰαϙʔτ͞Ε͍ͯΔ͔ ˠ 3FBDU 5ZQF4DSJQU 3FEVYΛ࠾༻ͨ͠ ˞೥தࠒ
  20. 1SPPGPG$PODFQU • ༗ࢤϝϯόʔͰिd࣌ؒ΄Ͳ࣌ؒΛ֬อͯ͠ 1P$ Λ࣮ࢪͨ͠ • 1P$ ͷ؍఺ • طଘͷٕज़Ͱ࣮ݱͰ͖͍ͯΔ͜ͱ͕Ҡߦޙͷٕज़ελοΫͰ࣮ݱͰ͖Δͷ͔ʁ

    • ৽نػೳͷ։ൃͱฒߦٕͯ͠ज़ͷҠߦΛߦ͏࢓૊ΈΛ࡞ΕΔͷ͔ʁ • طଘࢿ࢈ΛͲ͜·Ͱ࢖͍ճ͢͜ͱ͕Ͱ͖Δͷ͔ʁ • ݕূͨ͜͠ͱ • 3FBDUͱ $MPTVSF-JCSBSZͷڞଘ • 3FBDU͔Β $MPTVSF-JCSBSZͷίϯϙʔωϯτΛར༻͢Δ • $MPTVSF-JCSBSZͷίʔυΛ "45ϕʔεͰࣗಈͰ 5ZQF4DSJQUʹม׵
  21. طଘࢿ࢈ͷ࠶ར༻ • $MPTVSF-JCSBSZ੡ͷෳࡶͳίϯϙʔωϯτΛ 3FBDUͰϥοϓͯ͠࠶ར༻͢Δ • ϦϦʔεΛ༏ઌͨ͠Ұ࣌తͳରԠ • কདྷతʹ͸͢΂ͯ 3FBDUͰஔ͖׵͑Δ •

    &&ςετΛ࠶ར༻͢Δ • ผͷςετπʔϧ΋ݕ౼͕ͨ͠ɺ%#ΛॳظԽͨ͠ΓϢʔβʔΛ࡞੒ͨ͠ΓͳͲͷ 6*Λૢ࡞͢Δલஈ֊ͷॲཧ΋࠶౓࣮૷͢Δඞཁ͕͋ΓɺͦΕΒͷ࠶࣮૷ίετʹݟ ߹͏ϝϦοτ͕ͳ͔ͬͨɻ • ελΠϧΛ࠶ར༻͠ͳ͍ • طଘͷ 4DTT ͕!NJYJO΍!FYUFOEΛଟ༻͍ͯͯ͠ɺ͔ͳΓෳࡶͳঢ়ଶʹͳ͍ͬͯͨ • 4BTTͰ࡞Γ௚͢ͷ͸ίϯϙʔωϯτԽͷԸܙΛड͚ͮΒ͘ɺ$44.PEVMFT ͸ কདྷ EFQSFDBUF ʹͳΔՄೳੑ͕ߴ͘࠾༻ʹϦεΫ͕͋ͬͨͷͰɺ$44JO+4 ϥΠϒϥϦͷ TUZMFEDPNQPOFOUTͰ࡞Γ௚͢
  22. ϦϦʔεઓུΛߟ͑Δ • 1.ͱ૬ஊͯ͠ҰॹʹϦϦʔεઓུΛߟ͑ͨ • ஔ͖׵͑ର৅ͷը໘ΛબͿ • LJOUPOF ΧελϚΠζ΁ͷӨڹ͕খ͍͞ • ࡮৽ͱಉ࣌ʹϢʔβʔʹ෇ՃՁ஋ΛఏڙͰ͖Δ

    FYσβΠϯͷ࡮৽ɺύϑΥʔϚϯεվળ • ࠓޙ΋ػೳ௥Ճ΍मਖ਼͕ߦΘΕΔը໘ ˠ؅ཧը໘
  23. طଘͷը໘Λஈ֊తʹஔ͖׵͑Δ • ؅ཧը໘͸41"Ͱ͸ͳ͘ɺ̍ը໘͝ͱʹϨϯμϦϯά͢ΔͷͰ ը໘୯ҐͰ 3FBDU 5ZQF4DSJQU Խ͍ͯ͠Δ

  24. ਐ௙ঢ়گ • ·ͣ͸؅ཧը໘ͷϑϩϯτΤϯυ࡮৽ΛऴΘΒͤΔ • ؅ཧը໘ͷஔ͖׵͑͸ׂऴΘ͍ͬͯΔ • LJOUPOF ͷϑϩϯτΤϯυશମͩͱ·ͩ·ͩ࢒͍ͬͯΔ • νʔϜ୯ҐͰͷϑϩϯτΤϯυ෼ׂ΍ɺLJOUPOFΧελϚΠζ

    ͕ద༻͞ΕΔը໘ͷ࡮৽ͷݕূ΋ਐΊ͍ͯΔ • ໨ඪ͸d೥Ͱ୤$MPTVSF5PPMTɻ͚ͩͲ͜ͷϖʔεͩͱd೥ ͸͔͔Γͦ͏ʜɻڠྗऀΛื͍ͬͯ·͢ʂ
  25. ։ൃϝϯόʔืूதͰ͢ʂʂʂ フロントエンドエンジニア (kintoneアーキテクチャ刷新PJ) kintone フロントエンド 採⽤ 検索