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

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

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

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

Kihara, Takuya

August 28, 2018
Tweet

More Decks by Kihara, Takuya

Other Decks in Technology

Transcript

  1. VS Live ShareΛ࢖ͬͨ

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

    ʮVS Live Share͸͍͍ͧʯ

    View full-size slide


  2. • ໊લ

    @tacck
    • ͓࢓ࣄ

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

    εϓϨουɾΠʔάϧ

    View full-size slide

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

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

    View full-size slide

  4. ͦ΋ͦ΋
    Visual Studio Code
    ͱ͸

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

  13. બ୒
    • Visual Studio Code

    +

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

  17. खॱΛ͔͍ͭ·ΜͰ

    View full-size slide

  18. Πϯετʔϧ
    ͜Ε

    View full-size slide

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

    View full-size slide

  20. αΠϯΠϯ׬ྃ

    View full-size slide

  21. λʔϛφϧͰ֬ೝ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. γΣΞ༻ͷURLΛ։͘

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. ݚमͰͷ࢖͍ํ

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

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

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

    ෺଍Γͳ͍ͱ΋ɻ

    View full-size slide

  33. ͕࣌ؒ͋Ε͹σϞ

    View full-size slide

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

    View full-size slide

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

    ʮVS Live Share͸͍͍ͧʯ

    View full-size slide