VS Live Shareを使った 1対多のライブコーディング

VS Live Shareを使って、ライブコーディングでの研修(1対多の形式)をやった時の手順紹介。

Transcript

1. VS Live ShareΛ࢖ͬͨ

   1ରଟͷϥΠϒίʔσΟϯά
   2018/08/28
   @tacck
   VS Live Share͸͍͍͓ͧ͡͞Μ

   ʮVS Live Share͸͍͍ͧʯ
   

   View Slide

2. ୭
   • ໊લ

   @tacck
   • ͓࢓ࣄ

   ࠷ۙAlexa৮Γ࢝Ί·ͨ͠
   • ޷͖ͳϑΟΪϡΞεέʔτͷٕ

   εϓϨουɾΠʔάϧ
   

   View Slide

3. ࠓ೔͓࿩͢͠Δ͜ͱ
   • ࣾ಺ͷݚम(PHP)ͰVisual Studio Codeͷ

   Live ShareΛ࢖͓ͬͨ࿩
   • Live Shareࣗମͷ࢖͍ํ
   • ʮݚमʯͱ͍͏ελΠϧͰͲ͏࢖͔ͬͨ
   

   View Slide

4. ͦ΋ͦ΋
   Visual Studio Code
   ͱ͸
   

   View Slide

5. Visual Studio Code
   Visual Studio Code is a code editor redefined
   and optimized for building and debugging
   modern web and cloud applications. Visual
   Studio Code is free and available on your
   favorite platform - Linux, macOS, and
   Windows.
   • https://code.visualstudio.com/
   

   View Slide

6. ͭ·Γ
   • Microsoft͕࡞͍ͬͯΔOSSͷΤσΟλ
   • ϓϥοτϑΥʔϜ: Linux, macOS, Windows
   • ݴޠ΋ଟ਺ରԠ: C++, C#, Java, Python, PHP,
   Go, etc…
   

   View Slide

7. VS Live Share
   • Visual Studio (Code) ΛϦϞʔτͰڞ༗
   • ը໘Λө૾ͱͯ͠ڞ༗͢ΔͷͰ͸ͳ͘ɺ֤छ
   ૢ࡞ΛϦΞϧλΠϜʹڞ༗Ͱ͖Δɻ
   • ϑΝΠϧૢ࡞ɺλʔϛφϧૢ࡞ɺαʔόϙʔ
   τ
   

   View Slide

8. VS Live Share Λ࢖͏ྫ
   • લهͷػೳ͔ΒɺʮϖΞϓϩʯͰ࢖͍΍͍͢ɻ
   • υϥΠόʔɺφϏήʔλڞʹPCΛ࢖ͬͯɺγʔ
   ϜϨεʹϖΞϓϩͰ͖Δɻ
   • ಉ࣌ฒߦͰίʔσΟϯά΋Մೳɻ
   • https://tech.mercari.com/entry/2018/06/27/100628 

   “Visual Studio Live Share Λ࢖ͬͯϖΞϓϩΛ͍ͯ͠·͢”
   

   View Slide

9. ࢖͏ʹࢸͬͨ
   ܦҢΛ͔͍ͭ·ΜͰ
   

   View Slide

10. ݚमͰ࢖͑ΔαʔϏεΛݕ౼
    • ݚमΛʮϥΠϒίʔσΟϯάܗࣜʯͰ΍Γͨ
    ͍ɻ
    • ߨࢣ͕͓खຊΛϥΠϒίʔσΟϯάɻ
    • डߨऀ͸આ໌Λௌ͖ɺ഑৴͞ΕΔίʔυΛ
    ݟͳ͕Βखݩͷ։ൃ؀ڥͰίʔσΟϯάɻ
    

    View Slide

11. ݚमͷࢀՃର৅ऀ
    • ߨࢣ(ࢲ): 1໊
    • डߨऀ(ฐࣾͷΤϯδχΞ)
    • όοΫΤϯυ: 7໊
    • ϑϩϯτΤϯυ: 3໊
    • ػࡐͷؔ܎͔ΒɺϖΞϓϩͰ࣮ࢪɻ

    (1ͭͷPCʹೋਓͰडߨ)
    

    View Slide

12. ݚमͷਐΊํͷݕ౼
    • ϝΠϯ͸ʮTDDʯͷମݧɻ

    (PHPͰFizzBuzz໰୊Λղ͘ͷʹɺTDDΛ࢖༻
    ͢Δɻ)
    • PHPࣗମ΁ͷཧղͷࠩͳͲݸਓ͕ࠩେ͖͍ͷ
    Ͱɺং൫͸͏·͘༠ಋ͍ͨ͠ɻ
    • ϥΠϒίʔσΟϯάͭͭ͠ɺͦΕΛडߨऀͷ
    खݩͰ֬ೝͰ͖Δ؀ڥʹ͍ͨ͠ɻ
    

    View Slide

13. ݕ౼
    

    View Slide

14. બ୒
    • Visual Studio Code

    +

    VS Live Share
    • ͪΐ͏ͲύϓϦοΫϓϨϏϡʔͱͳͬͨͷ
    Ͱɺ࢖ͬͯΈΔɻ
    • ֬ೝͨ݁͠Ռɺཁ݅Λຬͨͤͦ͏ɻ
    

    View Slide

15. ಋೖΛܾΊͨ఺
    • खܰ
    • MicrosoftΞΧ΢ϯτ
    • GitHubΞΧ΢ϯτ
    • ͲͪΒ͔͋Ε͹ɺ͙͢ʹ࢖͑Δɻ
    

    View Slide

16. ಋೖΛܾΊͨ఺
    • γΣΞͰ͖Δ΋ͷ
    • ϑΝΠϧ / ಛʹฤूதͷ಺༰ΛςΩετͰ
    γΣΞͰ͖Δ
    • λʔϛφϧͱૢ࡞݁Ռ / खݩͰίϚϯυ࣮
    ߦͤͯ͞΋͓खຊͱൺֱͰ͖Δ
    • αʔό(ϙʔτ) / ݚमͰ͸ະ࢖༻
    

    View Slide

17. ಋೖΛܾΊͨ఺
    • ϑΝΠϧ΍λʔϛφϧ͸ɺݟΔଆ΋ૢ࡞Ͱ͖
    Δɻ
    • ং൫ͷ͓·͡ͳ͍తͳهड़ͷ෦෼Λɺίϐϖ
    Ͱ΋ਐΊΒΕΔɻ
    • PHPʹ׳Ε͍ͯͳ͍ਓʹ΋ɺ

    ʮ͜ͷ௨Γʹ΍ͬͯΈͯʯΛ΍Γ΍͍͢ɻ
    

    View Slide

18. खॱΛ͔͍ͭ·ΜͰ
    

    View Slide

19. Πϯετʔϧ
    ͜Ε
    

    View Slide

20. γΣΞ։࢝
    ʮ4IBSFʯΛԡͯ͠ɺʮ-BVODI4JHO*OʯΛԡ͢ɻ
    

    View Slide

21. αΠϯΠϯ
    

    View Slide

22. αΠϯΠϯ׬ྃ
    

    View Slide

23. λʔϛφϧͰ֬ೝ
    

    View Slide

24. λʔϛφϧͰ֬ೝ
    -JWF4IBSFͷαʔό΁઀ଓ͍ͯ͠Δ
    ʮʯ൪ϙʔτͰ଴ͪड͚ɻ
    -JWF4IBSFͷαʔόܦ༝Ͱɺ͜ͷϙʔτ͕ར༻͞
    ΕΔ͜ͱʹͳΔɻ
    

    View Slide

25. ଞͷਓ΁γΣΞ
    • αΠϯΠϯ׬ྃͨ͠ΒɺΫϦοϓϘʔυʹ
    ʮγΣΞ༻ͷURLʯ͕ίϐʔࡁΈͱͳΔͷͰɺ
    ͦΕΛڞ༗͍ͨ͠ਓʹ஌ΒͤΔɻ
    

    View Slide

26. γΣΞ༻ͷURLΛ։͘
    

    View Slide

27. γΣΞ੒ޭ
    

    View Slide

28. γΣΞݩʹ΋௨஌͕ग़Δ
    

    View Slide

29. ಉ͡PCͰ͕͢ฒ΂ͯ֬ೝ
    

    View Slide

30. ݚमͰͷ࢖͍ํ
    

    View Slide

31. ݚमͰͷ࢖͍ํ
    print "Hello Live Share!" . PHP_EOL;
    index.php
    ߨࢣଆ
    ϓϩδΣΫλʔͰөͭͭ͠ɺLive ShareͰڞ༗
    Live Share
    

    View Slide

32. ݚमͰͷ࢖͍ํ
    print "Hello Live Share!" . PHP_EOL;
    index.php
    डߨଆ
    Live ShareͰڞ༗͞ΕͨίʔυΛݟͳ͕Β

    ϩʔΧϧଆͰखΛಈ͔͢(ϖΞϓϩ)
    print "Hello Live Share!" . PHP_EOL;
    index.php
    Live Share local
    

    View Slide

33. ݚमͰͷ࢖͍ํ
    print "Hello Live Share!" . PHP_EOL;
    index.php
    डߨଆ
    Live ShareͰڞ༗͞ΕͨίʔυΛݟͳ͕Β

    ϩʔΧϧଆͰखΛಈ͔͢(ϖΞϓϩ)
    print "Hello Live Share!" . PHP_EOL;
    index.php
    Live Share local
    ͬͪ͜Λݟͳ͕Β
    

    View Slide

34. ݚमͰͷ࢖͍ํ
    print "Hello Live Share!" . PHP_EOL;
    index.php
    डߨଆ
    Live ShareͰڞ༗͞ΕͨίʔυΛݟͳ͕Β

    ϩʔΧϧଆͰखΛಈ͔͢(ϖΞϓϩ)
    print "Hello Live Share!" . PHP_EOL;
    index.php
    Live Share local
    ͬͪ͜ʹίʔσΟϯά͠
    λʔϛφϧͰ࣮ߦ
    

    View Slide

35. डߨऀ͔Βͷײ૝
    • Live ShareʹΑΔίʔυͷڞ༗͸શൠతʹ

    ޷ධՁɻ
    • ϑϩϯτͷਓͳͲɺPHPܦݧ͕গͳ͍ਓ͔Β͸
    ʮTDDʯΛ஌Δ͜ͱʹूதͰ͖ͨͱ͍͏ධՁɻ
    • ͋Δఔ౓ʮͰ͖ΔʯΤϯδχΞ͔Β͸ɺ

    ෺଍Γͳ͍ͱ΋ɻ
    

    View Slide

36. ͕࣌ؒ͋Ε͹σϞ
    

    View Slide

37. ·ͱΊ
    • ʮ1ରଟʯͰͷίʔυڞ༗(ϥΠϒίʔσΟϯ
    ά)ʹ͓͍ͯ΋ɺLive Share͸࢖͍΍͍͢ɻ
    • ಛʹɺݟͤͨίʔυΛखݩͰ֬ೝͯ͠΋Β͏
    ৔߹ʹ͸ɺίϐϖ΋Ͱ͖ΔͷͰɺϨϕϧࠩΛ
    ٵऩ͠΍͍͢ɻ
    

    View Slide

38. VS Live Share͸͍͍͓ͧ͡͞Μ

    ʮVS Live Share͸͍͍ͧʯ
    

    View Slide