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

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

Transcript

1. VS Live ShareΛ࢖ͬͨ
 1ରଟͷϥΠϒίʔσΟϯά 2018/08/28 @tacck VS Live Share͸͍͍͓ͧ͡͞Μ
 ʮVS Live Share͸͍͍ͧʯ
2. ୭ • ໊લ
 @tacck • ͓࢓ࣄ
 ࠷ۙAlexa৮Γ࢝Ί·ͨ͠ • ޷͖ͳϑΟΪϡΞεέʔτͷٕ
 εϓϨουɾΠʔάϧ
3. ࠓ೔͓࿩͢͠Δ͜ͱ • ࣾ಺ͷݚम(PHP)ͰVisual Studio Codeͷ
 Live ShareΛ࢖͓ͬͨ࿩ • Live Shareࣗମͷ࢖͍ํ • ʮݚमʯͱ͍͏ελΠϧͰͲ͏࢖͔ͬͨ
4. ͦ΋ͦ΋ Visual Studio Code ͱ͸
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/
6. ͭ·Γ • Microsoft͕࡞͍ͬͯΔOSSͷΤσΟλ • ϓϥοτϑΥʔϜ: Linux, macOS, Windows • ݴޠ΋ଟ਺ରԠ: C++, C#, Java, Python, PHP, Go, etc…
7. VS Live Share • Visual Studio (Code) ΛϦϞʔτͰڞ༗ • ը໘Λө૾ͱͯ͠ڞ༗͢ΔͷͰ͸ͳ͘ɺ֤छ ૢ࡞ΛϦΞϧλΠϜʹڞ༗Ͱ͖Δɻ • ϑΝΠϧૢ࡞ɺλʔϛφϧૢ࡞ɺαʔόϙʔ τ
8. VS Live Share Λ࢖͏ྫ • લهͷػೳ͔ΒɺʮϖΞϓϩʯͰ࢖͍΍͍͢ɻ • υϥΠόʔɺφϏήʔλڞʹPCΛ࢖ͬͯɺγʔ ϜϨεʹϖΞϓϩͰ͖Δɻ • ಉ࣌ฒߦͰίʔσΟϯά΋Մೳɻ • https://tech.mercari.com/entry/2018/06/27/100628 
 “Visual Studio Live Share Λ࢖ͬͯϖΞϓϩΛ͍ͯ͠·͢”
9. ࢖͏ʹࢸͬͨ ܦҢΛ͔͍ͭ·ΜͰ
10. ݚमͰ࢖͑ΔαʔϏεΛݕ౼ • ݚमΛʮϥΠϒίʔσΟϯάܗࣜʯͰ΍Γͨ ͍ɻ • ߨࢣ͕͓खຊΛϥΠϒίʔσΟϯάɻ • डߨऀ͸આ໌Λௌ͖ɺ഑৴͞ΕΔίʔυΛ ݟͳ͕Βखݩͷ։ൃ؀ڥͰίʔσΟϯάɻ
11. ݚमͷࢀՃର৅ऀ • ߨࢣ(ࢲ): 1໊ • डߨऀ(ฐࣾͷΤϯδχΞ) • όοΫΤϯυ: 7໊ • ϑϩϯτΤϯυ: 3໊ • ػࡐͷؔ܎͔ΒɺϖΞϓϩͰ࣮ࢪɻ
 (1ͭͷPCʹೋਓͰडߨ)
12. ݚमͷਐΊํͷݕ౼ • ϝΠϯ͸ʮTDDʯͷମݧɻ
 (PHPͰFizzBuzz໰୊Λղ͘ͷʹɺTDDΛ࢖༻ ͢Δɻ) • PHPࣗମ΁ͷཧղͷࠩͳͲݸਓ͕ࠩେ͖͍ͷ Ͱɺং൫͸͏·͘༠ಋ͍ͨ͠ɻ • ϥΠϒίʔσΟϯάͭͭ͠ɺͦΕΛडߨऀͷ खݩͰ֬ೝͰ͖Δ؀ڥʹ͍ͨ͠ɻ
13. ݕ౼
14. બ୒ • Visual Studio Code
 +
 VS Live Share • ͪΐ͏ͲύϓϦοΫϓϨϏϡʔͱͳͬͨͷ Ͱɺ࢖ͬͯΈΔɻ • ֬ೝͨ݁͠Ռɺཁ݅Λຬͨͤͦ͏ɻ
15. ಋೖΛܾΊͨ఺ • खܰ • MicrosoftΞΧ΢ϯτ • GitHubΞΧ΢ϯτ • ͲͪΒ͔͋Ε͹ɺ͙͢ʹ࢖͑Δɻ
16. ಋೖΛܾΊͨ఺ • γΣΞͰ͖Δ΋ͷ • ϑΝΠϧ / ಛʹฤूதͷ಺༰ΛςΩετͰ γΣΞͰ͖Δ • λʔϛφϧͱૢ࡞݁Ռ / खݩͰίϚϯυ࣮ ߦͤͯ͞΋͓खຊͱൺֱͰ͖Δ • αʔό(ϙʔτ) / ݚमͰ͸ະ࢖༻
17. ಋೖΛܾΊͨ఺ • ϑΝΠϧ΍λʔϛφϧ͸ɺݟΔଆ΋ૢ࡞Ͱ͖ Δɻ • ং൫ͷ͓·͡ͳ͍తͳهड़ͷ෦෼Λɺίϐϖ Ͱ΋ਐΊΒΕΔɻ • PHPʹ׳Ε͍ͯͳ͍ਓʹ΋ɺ
 ʮ͜ͷ௨Γʹ΍ͬͯΈͯʯΛ΍Γ΍͍͢ɻ
18. खॱΛ͔͍ͭ·ΜͰ
19. Πϯετʔϧ ͜Ε
20. γΣΞ։࢝ ʮ4IBSFʯΛԡͯ͠ɺʮ-BVODI
    4JHO
    *OʯΛԡ͢ɻ
21. αΠϯΠϯ
22. αΠϯΠϯ׬ྃ
23. λʔϛφϧͰ֬ೝ
24. λʔϛφϧͰ֬ೝ -JWF
    4IBSFͷαʔό΁઀ଓ͍ͯ͠Δ ʮʯ൪ϙʔτͰ଴ͪड͚ɻ
    -JWF
    4IBSFͷαʔόܦ༝Ͱɺ͜ͷϙʔτ͕ར༻͞ ΕΔ͜ͱʹͳΔɻ
25. ଞͷਓ΁γΣΞ • αΠϯΠϯ׬ྃͨ͠ΒɺΫϦοϓϘʔυʹ ʮγΣΞ༻ͷURLʯ͕ίϐʔࡁΈͱͳΔͷͰɺ ͦΕΛڞ༗͍ͨ͠ਓʹ஌ΒͤΔɻ
26. γΣΞ༻ͷURLΛ։͘
27. γΣΞ੒ޭ
28. γΣΞݩʹ΋௨஌͕ग़Δ
29. ಉ͡PCͰ͕͢ฒ΂ͯ֬ೝ
30. ݚमͰͷ࢖͍ํ
31. ݚमͰͷ࢖͍ํ <?php print "Hello Live Share!" . PHP_EOL; index.php ߨࢣଆ ϓϩδΣΫλʔͰөͭͭ͠ɺLive ShareͰڞ༗ Live Share
32. ݚमͰͷ࢖͍ํ <?php print "Hello Live Share!" . PHP_EOL; index.php डߨଆ Live ShareͰڞ༗͞ΕͨίʔυΛݟͳ͕Β
 ϩʔΧϧଆͰखΛಈ͔͢(ϖΞϓϩ) <?php print "Hello Live Share!" . PHP_EOL; index.php Live Share local
33. ݚमͰͷ࢖͍ํ <?php print "Hello Live Share!" . PHP_EOL; index.php डߨଆ Live ShareͰڞ༗͞ΕͨίʔυΛݟͳ͕Β
 ϩʔΧϧଆͰखΛಈ͔͢(ϖΞϓϩ) <?php print "Hello Live Share!" . PHP_EOL; index.php Live Share local ͬͪ͜Λݟͳ͕Β
34. ݚमͰͷ࢖͍ํ <?php print "Hello Live Share!" . PHP_EOL; index.php डߨଆ Live ShareͰڞ༗͞ΕͨίʔυΛݟͳ͕Β
 ϩʔΧϧଆͰखΛಈ͔͢(ϖΞϓϩ) <?php print "Hello Live Share!" . PHP_EOL; index.php Live Share local ͬͪ͜ʹίʔσΟϯά͠
    λʔϛφϧͰ࣮ߦ
35. डߨऀ͔Βͷײ૝ • Live ShareʹΑΔίʔυͷڞ༗͸શൠతʹ
 ޷ධՁɻ • ϑϩϯτͷਓͳͲɺPHPܦݧ͕গͳ͍ਓ͔Β͸ ʮTDDʯΛ஌Δ͜ͱʹूதͰ͖ͨͱ͍͏ධՁɻ • ͋Δఔ౓ʮͰ͖ΔʯΤϯδχΞ͔Β͸ɺ
 ෺଍Γͳ͍ͱ΋ɻ
36. ͕࣌ؒ͋Ε͹σϞ
37. ·ͱΊ • ʮ1ରଟʯͰͷίʔυڞ༗(ϥΠϒίʔσΟϯ ά)ʹ͓͍ͯ΋ɺLive Share͸࢖͍΍͍͢ɻ • ಛʹɺݟͤͨίʔυΛखݩͰ֬ೝͯ͠΋Β͏ ৔߹ʹ͸ɺίϐϖ΋Ͱ͖ΔͷͰɺϨϕϧࠩΛ ٵऩ͠΍͍͢ɻ
38. VS Live Share͸͍͍͓ͧ͡͞Μ
 ʮVS Live Share͸͍͍ͧʯ