Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Yousan_O
October 28, 2017

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

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

Yousan_O

October 28, 2017
Tweet

More Decks by Yousan_O

Other Decks in Programming

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