ページ刷新を誰でも簡単にできるようにするためにやったこと

kintoneのフロントエンド刷新を手がける私のチームのプログラマは、新入社員や夜間稼働の業務委託社員など様々な人によって構成されていて、それぞれが1画面を担当しながら刷新を進めています。
チームメンバーの多くがkintoneのドメイン知識をよく知らない状態で参加したのですが、
それでも現在まで大きな困難なく刷新作業を進めることができています。

この発表では、私のチームにおける開発を誰でも簡単にできるようにするために講じた主な取り組みをご紹介します。
多くがフロントエンド刷新以外の現場でも適用できる普遍的なものなので、誰でも必見の内容ですよ！👀👍

※本資料は、2023年10月31日にサイボウズで開催されたイベント「BARフロントえんどう #1 「フロントエンドリアーキテクト」」における登壇資料です。
https://cybozu.connpass.com/event/297123/

Transcript

1. ϖʔδ࡮৽Λ୭Ͱ΋؆୯ʹ Ͱ͖ΔΑ͏ʹ͢ΔͨΊʹ΍ͬͨ͜ͱ α Π Ϙ ΢ ζ ג ࣜ ձ ࣾ ։ ൃ ຊ ෦ ͓͙͑΋Μʢ খ ૔ ׌ ໵ ʣ
2. ࣗݾ঺հ  • αΠϘ΢ζגࣜձࣾ ։ൃຊ෦ʢ೥݄ೖࣾʣ • LJOUPOFϑϩϯτΤϯυ࡮৽1+Λखֻ͚ΔϓϩάϥϚʔ ͓͙͑΋Μʢখ૔ ׌໵ʣ IUUQTPHVFNPODPN PHVFNPO@DPN
3. ͸͡Ίʹ  • গͳ͔Β͵ϖʔδ࡮৽1+ʹ͸ɺ தখن໛ͷࣅͨϖʔδΛ࣍ʑͱ࡮৽͢ΔϑΣʔζ͕͋Δ ਌ϖʔδ ϖʔδ" ϖʔδ# ϖʔδ$ ʜ v ࣍ ʑ ͱ ࡮ ৽ ͢ Δ ͧ ʙ ϖʔδ%
4. ͸͡Ίʹ  • ࢲͷνʔϜͰ͸ɺ͜͏ͨ͠ϖʔδ܈ʹରͯ͠ ਓͷϓϩάϥϚ͕ը໘Λ୲ͬͯ࡮৽͍ͯ͠Δ ਌ϖʔδ ϖʔδ" ϖʔδ# ϖʔδ$ ʜ v ͕ Μ ͹ Δ ͧ ʙ ϖʔδ% ϓϩάϥϚͨͪ 💻 💻 💻 💻 ˞
   ίʔυϨϏϡʔ͸૬ޓʹߦ͏
5. ͸͡Ίʹ  • νʔϜʹ༷ʑͳλΠϓͷਓΛܴ͍͑ͯΔ • ৽ೖࣾһʢ৽ଔத్ʣɺඇಉظՔಇͷۀ຿ҕୗࣾһͳͲ • ΠϯλʔϯʗνʔϜମݧͰ΋ը໘ͷ࡮৽ΛਐΊ͍͍ͯͨͩͨ v ͜ ͷ ϖ ʔ δ ͸ Θ ͠ ͕ ࡞ ͬ ͨ ৽ଔࣾһ ˞
   νʔϜମݧ ʜ
   ഑ଐر๬ௐࠪʹઌཱͬͯ౰ࣾ৽ଔࣾһΛ ༷ʑͳνʔϜʹԾ഑ଐͤ͞ΔऔΓ૊Έʢिؒºճʣ ϖʔδ" v ͜ ͷ ϖ ʔ δ ͸ Θ ͠ ͕ ࡞ ͬ ͨ த్৽ೖࣾһ ϖʔδ# v ͜ ͷ ϖ ʔ δ ͸ Θ ͠ ͕ ࡞ ͬ ͨ Πϯλʔϯֶੜ ϖʔδ$ v ͜ ͷ ϖ ʔ δ ͸ Θ ͠ ͕ ࡞ ͬ ͨ ۀ຿ҕୗࣾһ ϖʔδ%
6. ࠓճͷςʔϚ  தখن໛ͷࣅͨϖʔδͷ࡮৽Λ ୭Ͱ΋؆୯ʹͰ͖ΔΑ͏ʹ͢ΔͨΊʹ΍ͬͨ͜ͱΛ͝঺հ
7. z୭Ͱ΋؆୯ʹzͰ͖ΔΑ͏ʹ͢ΔϝϦοτ  • Ұ෦ͷڧ͍৬ਓ͚ͩͷ࢓ࣄʹ͠ͳ͍͜ͱͰ࣍ͷརӹ͕ಘΒΕΔ • ΦϯϘʔσΟϯάͳͲͷڭҭίετ͕গͳ͍ ‎ϝϯόʔΛ૿΍ͯ͠΋ޮ཰͕མͪͳ͍ • ࢲͷνʔϜͰ͸ϓϩάϥϚ͕ਓˠਓʹ૿͕͑ͨ ໰୊ͳ͘ճ͓ͬͯΓɺ࣮૷଎౓্͕͕͍ͬͯΔ 🌊🏄 ਓւઓज़͕࢖͑Δ
8. z୭Ͱ΋؆୯ʹzͰ͖ΔΑ͏ʹ͢ΔϝϦοτ  • Ұ෦ͷڧ͍৬ਓ͚ͩͷ࢓ࣄʹ͠ͳ͍͜ͱͰ࣍ͷརӹ͕ಘΒΕΔ 🧑🏫📚 ࡮৽࡞ۀ͕ڭࡐʹͳΔ • ࡮৽࡞ۀͰ͸͔Β·Ͱશ෦࣮૷͢Δ ‎γεςϜͷ࢓༷ઃܭΛਂֶ͘ͿΩοΧέʹͳΔ • ͜ͷ࡞ۀ͕৽ϝϯόʔͰ΋؆୯ʹͰ͖ΔͳΒ͹ɺ ࡮৽࡞ۀ͸΋͸΍ڭҭͷ୊ࡐ
9. ओͳऔΓ૊Έ  ୭Ͱ΋؆୯ʹͰ͖ΔΑ͏ʹ͢ΔͨΊʹ΍ͬͨओͳ͜ͱͭ ౷Ұతͳܾ·Γ࡞Γ ⚖ υΩϡϝϯτ੔උ 📄 ϖʔδͷணखॱͷ޻෉ 🚧 Ή͔͍ͣ͠ ;ͭ͏ ͔ΜͨΜ ͓ʹ ʁ
10. ओͳऔΓ૊Έᶃ ⚖౷Ұతͳܾ·Γ࡞Γ  Ͳͷϖʔδʹ΋௨͡Δ࣮૷ͷܾ·ΓΛܾΊΔ 3PVUJOHઃఆ ਽ܗ࡞੒ ॳग़$PNQPOFOU࣮૷ ʜ Ͳͷϖʔδ΋ ͜ͷΑ͏ͳ࡞ۀ୯Ґ 
    ྲྀΕͰ࡞ۀ͢Δʂ "1*௨৴ॲཧ࣮૷ ϖʔδ΁ͷ $PNQPOFOU഑ஔ Ͳͷϖʔδ΋ ͜ͷΑ͏ͳϑΥϧμߏ੒Ͱ࣮૷͢Δʂ Ͳͷϖʔδ΋ ͜ͷΑ͏ͳ༷ࣜͰϓϧϦΫΤετΛ࡞੒͢Δʂ
11. ओͳऔΓ૊Έᶃ ⚖౷Ұతͳܾ·Γ࡞Γ  • ೰Έ΍໎͍ΛੜΉ෦෼ʹରͯ͠ɺܾ·ΓΛࢥ͍੾ͬͯ࡞͓ͬͯ͘ͱޮՌత • ং൫ʹେ͖Ίͷը໘ʹணख͢ΔͱɺܾΊ͓ͯ͘΂͖͜ͱΛચ͍ग़͠΍͘͢ͳΔ ᶃ ೰Έɾ໎͍͕ݮΔ ᶄ ϚχϡΞϧԽ͠΍͍͢ ᶅ ୭Ͱ΋ϨϏϡʔͰ͖Δ ܾ·ΓΛ࡞Δͱ ΍Δ͜ͱ΍લఏ͕ ໌֬ʹͳΔ ܾ·ΓΛ࡞Δίπ💪
12. ओͳऔΓ૊Έᶄ 📃υΩϡϝϯτ࡞Γ  લड़ͷܾ·ΓΛத৺ʹจॻԽ͢Δ • ؀ڥߏஙखॱ • ϑΥϧμߏ੒ • ࡮৽࡞ۀͷखॱ • 1#*ͷਐΊํ ʜ ˞
    1#*
    ϓϩμΫτόοΫϩάΞΠςϜ ͜ΕΛ࡞ΓࠐΊ͹ɺ ΍Δ΂͖࢓ࣄ͕໌Β͔ʹͳΔͷͰ ৽ਓͷํʹΑΔ࡞ۀͷ೉қ౓͕Լ͕Δ ʮ࡮৽ͷྲྀΕʯυΩϡϝϯτͷ๯಄໨࣍⾣ ϙΠϯτ👍
13. ओͳऔΓ૊Έᶄ 📃υΩϡϝϯτ࡞Γ  l୭Ͱ΋؆୯zࢤ޲ͷυΩϡϝϯτΛ࡞Δίπ💪 • ໨తܦҢΑΓԿΛ΍Δͷ͔ʹॏ͖Λஔ͘ • ͋ͪͪ͜ʹখ෼͚͢ΔΑΓ จॻͰ໢ཏͨ͠ํ͕ಡΈख͸ָ ᶃ ΍Δ͜ͱΛ໢ཏతʹॻ͘ • ۩ମྫΛࣔͯ͜͠ΕΛਅࣅͨ͠ΒԿͱ͔ͳΔঢ়ଶΛ࡞Δ • աڈͷϓϧϦΫΤετ͕ྑ͍खຊʹͳΔ • ϓϧϦΫΤετपΓͷܾ·ΓΛ࡞Δͷ͕ྑ͍ཧ༝͸ίϨ ᶄ ͓खຊΛ༻ҙ͢Δ ΍Δ͜ͱΛ ۩ମతʹॻ͘⾣ ˛͓खຊ 13 Λࣔ͢
14. ओͳऔΓ૊Έᶅ 🚧ணखॱͷ޻෉  ؆୯ɾগྔͳϖʔδ͸zདྷͨΔ৽ਓzʹඋ͑ͯετοΫ͢Δ Ή͔͍ͣ͠ ;ͭ͏ϖʔδ ͔ΜͨΜϖʔδ ͓ʹ ͔ΜͨΜ ͔ΜͨΜ ʜ ;ͭ͏ ;ͭ͏ ετοΫ v ख औ Γ ૣ ͘ ਐ ௙ ͕ ཉ ͠ ͍ ͚ Ͳ Ψ Ϛ ϯ ͩ ʙ ✅ ීஈ͸;ͭ͏Ҏ্ͷϖʔδΛ࡮৽͢Δ Ή͔͍ͣ͠ ;ͭ͏ϖʔδ ͔ΜͨΜϖʔδ ͔ΜͨΜ ͔ΜͨΜ ʜ ;ͭ͏ ;ͭ͏ ετοΫ ͔ΜͨΜϖʔδ ✅ ֶੜʗ৽ਓͷํΛܴ͑Δͱ͖ʹ ͔ΜͨΜͳϖʔδΛखֻ͚ͯ΋Β͏
15. ·ͱΊ  • ࡮৽࡞ۀΛ୭Ͱ΋؆୯ʹͰ͖ΔΑ͏ʹ͢Δͱɺ ਓһΛ૿΍ͯ͠Ͳͬͱ։ൃͰ͖Δଞɺ৽ਓڭҭʹ΋׆༻Ͱ͖Δ • ࣍ͷऔΓ૊ΈͰɺ୭Ͱ΋؆୯ʹͰ͖ΔΑ͏ʹͳΓ·ͨ͠ • ϖʔδΛ௒͑ͨڞ௨ϧʔϧ࡞Γ • ୭Ͱ΋؆୯ʹΘ͔ΔυΩϡϝϯτͷ੔උ • ৽ਓͷํʹ؆୯ͳϖʔδ͕ߦ͖ΘͨΔΑ͏ͳணखॱͷ޻෉ v Έ Μ ͳ ΋ ϖʔ δ ࡮ ৽ Λ ͕ Μ ͹ͬͯ Ͷ ʙ ʂ