WordFes2017 制作現場のこれから 開発ワークフローとコーディング規約

WordFes2017のスライドです。
実際にコーディング規約を制作現場に導入してみて感じたこと、コーディング規約を導入するメリットについての内容です。

Transcript

1. ੍࡞ݱ৔ͷ͜Ε͔Β
   ։ൃϫʔΫϑϩʔͱίʔσΟϯάن໿
   2017೥10݄28೔ @ WordFes Nagoya 2017
   

   View Slide

2. ૣ଎Ͱ͕͢
   

   View Slide

3. λϒεϖʔε໰୊
   

   View Slide

4. ෆໟͳίϛοτ…
   

   View Slide

5. ໘౗ͳϨϏϡʔ…
   

   View Slide

6. ੍࡞ݱ৔΋ͬͱշదʹ…ʂ
   

   View Slide

7. ࠓ೔͓఻͍͑ͨ͜͠ͱ
   

   View Slide

8. ࠓ೔͓఻͍͑ͨ͜͠ͱ
   • ։ൃϫʔΫϑϩʔͷΩʔϫʔυ
   • πʔϧָ͍͠Ͱ͢
   • λϒεϖʔε໰୊ͷղܾ
   • ݱ৔ಋೖίετ
   

   View Slide

9. ࣗݾ঺հɹ
   

   View Slide

10. ࣗݾ঺հ
    • ਆ֞ɹ૱
    • ϓϩάϥϜɺαʔό
    • Web੍࡞ձࣾ
    • ओʹWordPressͰݱ৔10೥
    

    View Slide

11. ࣗݾ঺հ
    • ෋ࢁݝͷձࣾ
    • ʢ΄΅ʣϑϧϦϞʔτͰ෱ౡݝࡏॅ
    • ͓٬͞Μ΋͋ͪͪ͜ʹ
    

    View Slide

12. ࣭໰͍ͤͯͩ͘͞͞
    

    View Slide

13. օ͞Μ͸Կ԰͞Μʁ
    • σΟϨΫλʔ԰͞ΜʢӦۀɺϚωʔδϟʣ
    • σβΠφʔ԰͞Μ
    • ίʔμʔ԰͞Μʢϑϩϯτ԰͞Μʣ
    • ϓϩάϥϚɺαʔό԰͞Μ
    

    View Slide

14. ΞδΣϯμ
    • ։ൃϫʔΫϑϩʔʹ͍ͭͯ
    • ίʔσΟϯάن໿ʹ͍ͭͯ
    • ಋೖͷίετ࣮ྫ
    

    View Slide

15. ։ൃϫʔΫϑϩʔʹ͍ͭͯ
    

    View Slide

16. ։ൃϫʔΫϑϩʔʹ͍ͭͯ
    • ։ൃͷྲྀΕʢϑϩʔʣ
    • ޻਺࡟ݮ
    • ϛεܰݮ
    • ָ͍͠
    

    View Slide

17. όʔδϣϯ؅ཧ
    CIࣗಈԽ
    ςετ
    πʔϧ
    PHPCS
    

    View Slide

18. ಛʹGit
    

    View Slide

19. ੍࡞ͰGit࢖͍ͬͯ·͔͢ʁ
    • ࢖͍ͬͯΔ
    • ࢖͍ͬͯͳ͍
    

    View Slide

20. GitͱGitͷϫʔΫϑϩʔ
    • Git flow
    • GitHub flow
    

    View Slide

21. ࣗࣾͷGitͷ࢖͍ํ
    • ϒϥϯνͷৼΓํΛܾΊΔ
    • جຊ͸Git flowʹԊ͏
    • master, develop, feature, release
    • Ϛʔδ͸ϓϧϦΫΤετͱϨϏϡʔ
    

    View Slide

22. ։ൃϫʔΫϑϩʔ
    • ϫʔΫϑϩʔ͸։ൃͷྲྀΕ
    • ϫʔΫϑϩʔࢧԉͷπʔϧ͕ͨ͘͞Μ͋Δ
    • शಘʹ͕͔͔࣌ؒΔ
    • शಘ͢ΔͱࣗಈԽͰ͖ͯศར
    

    View Slide

23. ΞδΣϯμ
    • ։ൃϫʔΫϑϩʔʹ͍ͭͯ
    • ίʔσΟϯάن໿ʹ͍ͭͯ
    • ಋೖͷίετ
    

    View Slide

24. ίʔσΟϯάن໿
    

    View Slide

25. ίʔσΟϯάن໿஌ͬͯ·͢ʁ
    • ݱ৔ͰίʔσΟϯάن໿࢖ͬͯ·͢
    • ͳΜͱͳ͘஌͍ͬͯ·͢
    • ࠓճ͸͡Ίͯฉ͖·ͨ͠
    

    View Slide

26. λϒεϖʔε໰୊
    

    View Slide

27. View Slide

28. View Slide

29. ίʔσΟϯάن໿ͱ͸
    • ίʔυΛॻ্͘ͰͷϧʔϧʢStandardsʣ
    • PHPͱ͔WordPressͱ͔Ͱఆٛ
    • CSSͩͱBEMͱ͔
    • Ͱ΋͋Ε͸ݫ֨
    

    View Slide

30. WordPressͷίʔσΟϯάن໿
    • PHP ίʔσΟϯά
    • ΞΫηγϏϦςΟίʔσΟϯά
    • CSS ίʔσΟϯά
    • HTML ίʔσΟϯά
    • JavaScript ίʔσΟϯά
    

    View Slide

31. WordPressίʔσΟϯάن໿
    

    View Slide

32. ίʔσΟϯάن໿ྫ
    

    View Slide

33. ίʔσΟϯάن໿ྫ
    

    View Slide

34. View Slide

35. λϒεϖʔε໰୊
    

    View Slide

36. View Slide

37. View Slide

38. ͪΌΜͱௐ΂·͠ΐ͏ʂ
    

    View Slide

39. ίʔσΟϯάن໿ͷࣗಈνΣο
    Ϋ
    • ΤσΟλ
    • πʔϧ
    • Git࿈ܞ
    

    View Slide

40. ΤσΟλͰͷྫ
    

    View Slide

41. ίʔσΟϯάن໿Λἧ͑Δͱ
    • ଞͷਓ͕ݟͨ࣌ʹ
    • ݟ΍͍͢
    • ϛε͕ݮΔ
    • έϯΧʹͳΒͳ͍
    • ʮଞͷਓʯ === ʮ3೔ޙͷࣗ෼ʯ
    

    View Slide

42. ಋೖͷϝϦοτ
    • ϛεͷܰݮ
    • ೋ౓໨Ҏ߱ͷίετ࡟ݮ
    

    View Slide

43. ΞδΣϯμ
    • ։ൃϫʔΫϑϩʔʹ͍ͭͯ
    • ίʔσΟϯάن໿ʹ͍ͭͯ
    • ಋೖͷίετ
    

    View Slide

44. ݱ৔ಋೖͷίετ
    

    View Slide

45. Έͳ͞Μͷਓ݅අ͍͘ΒͰ͔͢ʁ
    • ෼͔Βͳ͍ɺ಺ॹ
    • ~ 3,000ԁ / ࣌ؒ
    • 3,001ԁ ~ 8,000 ԁ / ࣌ؒ
    • 8,000 ԁ Ҏ্ / ࣌ؒ
    • ਓ݄ܭࢉ͕ྑ͍ͱ͸ݶΒͳ͍͕…
    

    View Slide

46. ਓ݄୯Ձ
    • Ұ೔8࣌ؒ 20೔ => 160࣌ؒ / ݄
    • 3,000ԁ / ࣌ؒ => 48ສ / ݄
    • 5,000ԁ / ࣌ؒ => 80ສ / ݄
    • 8,000ԁ / ࣌ؒ => 128ສ / ݄
    

    View Slide

47. 8,000ԁ…
    

    View Slide

48. ࣮ྫ
    

    View Slide

49. ࣮ྫ
    • WordPressΛ࢖ͬͨγεςϜ։ൃ
    • ςʔϚ͸ࢧڅ
    • ໿2.4ਓ݄
    • ϓϩάϥϚ3ਓ͕ࢀՃ
    

    View Slide

50. ίʔσΟϯάن໿ͷಋೖʹֻ͔
    Δίετ
    • शಘɺಋೖɺઃఆʹ໿80࣌ؒ
    • Ұ೔8࣌ؒ => 10೔ => 0.5ਓ݄
    • Ͱɺ͍͘Βʁ
    

    View Slide

51. ਓ݄୯Ձ
    • Ұ೔8࣌ؒ 20೔ => 160࣌ؒ / ݄
    • 3,000ԁ / ࣌ؒ => 48ສ / ݄
    • 5,000ԁ / ࣌ؒ => 80ສ / ݄
    • 8,000ԁ / ࣌ؒ => 128ສ / ݄
    

    View Slide

52. ࣮ࡍͷඅ༻͸
    ͝૝૾ʹ͓·͔ͤ͠·͢
    

    View Slide

53. ࣮຿΁ಋೖͯ͠
    • ։ൃָ͕͘͠ͳͬͨ
    • Πϯσϯτ໰୊͕ղܾͨ͠
    • ίʔσΟϯάن໿͸౴͕͑͋Δ
    

    View Slide

54. ࠓ೔ͷ·ͱΊ
    • ։ൃϫʔΫϑϩʔͷπʔϧ
    • WordPress༻ͷίʔσΟϯάن໿
    • ϛεܰݮʂೋ౓໨͔Βίετ࡟ݮʂ
    • 2.4ਓ݄Ͱ0.5ਓ݄
    

    View Slide

55. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·͠
    ͨ
    

    View Slide

56. ͔͜͜Β࡟আҊ
    

    View Slide

57. PRͱCI
    

    View Slide

58. ϓϧϦΫΤετ
    

    View Slide

59. ࣗಈςετ
    

    View Slide

60. CI
    • ܧଓతΠϯςάϨʔγϣϯ
    • ιʔείʔυʹΤϥʔ͕ςετΛࣗಈԽ
    • TravisCI
    • CircleCI
    • Jenkins
    

    View Slide

61. CIͰͰ͖Δ͜ͱ
    • PHPίʔυͷ୯ମςετࣗಈԽ
    • ϒϥ΢βͷςετࣗಈԽ
    • ࣗಈσϓϩΠ
    

    View Slide

62. ϓϧϦΫΤετͱCI
    • ϓϧϦΫΤετൃߦ࣌ʹςετ
    • ιʔείʔυͷਖ਼౰ੑςετ
    • ιʔείʔυͷίʔσΟϯάن໿ςετ
    • ςετʹ௨͍ͬͯΕ͹Ϛʔδ
    

    View Slide

63. ࣗࣾͰ࢖͍ͬͯΔπʔϧ
    • Docker (ϩʔΧϧ։ൃ)
    • GitHub (՝ۚͰϓϥΠϕʔτϦϙδτϦ)
    • CircleCI (ແྉͰϓϥΠϕʔτ)
    

    View Slide