VSCodeでTypeScript開発体験ハンズオン

5月

4
VSCodeでTypeScript開発体験ハンズオン
Live Shareも活用して、サーバサイドとフロントエンドを開発、デバッグしよう！

主催 : 74th(Atsushi Morimoto)

募集内容	一般参加無料先着順 26/10人ハンズオンお手伝い無料先着順 1/1人
申込者	申込者一覧を見る
開催日時	2020/05/04(月) 13:30 ～ 17:00 Googleカレンダー icsファイル
募集期間	2020/04/29(水) 19:26 〜 2020/05/04(月) 17:00まで
会場	オンラインオンライン

イベントの説明

当日参加の方へ

ConnpassのメッセージでZoomのURL等お送りしています。メールで転送されてきていると思います。確認下さい。また、VS Code Meetup Slackにて参加者の方をプライベートチャネルに招待しています(VS Code MeetupのSlackはこちらのページに案内リンクがあります)](https://vscode.connpass.com/)。まだ招待されていない方（SlackのIDがわかりませんでした、すみません、、、）Slack内にて @Morimoto(74th) にDMをお願いします。

概要

『Visual Studio Code 実践ガイド（技術評論社）』の著者による、VS Code の Type Script ハンズオン企画です。本でも紹介しているType Scriptを使ったサーバサイド、フロントエンドの開発を体験してみましょう！

実際に、TODOリスト管理Webサービスの、サーバサイドとフロントエンドを開発します。開発する対象は、書籍第2部10章と同一です。（参考：書籍のサンプルコード→ https://github.com/74th/vscode-book-typescript ）

本ハンズオンの参加に書籍の購入は必要ありません。資料を用意します。参加に当たり、VSCodeを動かす開発マシンの準備と、開発環境の準備をお願いします。 Node.jsの環境構築が難しい場合、VSCodeのリモートSSH機能を使ってアクセスできる開発環境を用意しますので、お伝え下さい！

ハンズオン資料リポジトリ（前日までに資料を追加します） : https://github.com/74th/vscode-typescript-handson

日程

2020/5/4 14:00 - 17:00 3時間

ゴール

Type Script の役割を理解し、VSCode で開発ができるようになること
VSCode で Type Script でサーバアプリケーションをコンパイル、デバッグができる
VSCode で Type Script で Web フロントエンドのアプリケーションをコンパイル、デバッグできる

解説すること

Type Script とは何をするコンパイラであるか
VSCode で Node.js 上で動作する Type Script の開発環境の構築方法、開発方法、デバッグ方法
VSCode で Chrome 上で動作する Type Script の開発環境の構築方法、開発方法、デバッグ方法

解説しないこと

Node.js 、 npm のインストール方法、及び使い方（コマンドで紹介します）
Vue.js の使い方（完成品ソースコードを提供します）
VSCode のインストール方法（公式ドキュメント(英語)、KC さんの記事、もしくは書籍Visual Studio Code 実践ガイドを参照下さい）

アジェンダ

Live Share 機能を使って、環境を公開してみよう
Type Script のプロジェクトをセットアップしよう
Type Script の Node.js アプリケーションをデバッグしよう
Type Script の Vue.js アプリケーションをセットアップしよう
フロントエンドとサーバサイドを同時にデバッグしよう

コミュニケーションのとり方

ハンズオン中は Zoom を繋ぎっぱなしにしてください。morimoto さんと呼んでいただければ、応答します！
VSCode Meetup Slack にチャンネルを開設して、筆談が良い場合、
Live Share を活用しましょう！ Live Share で "Start collaboration session..." をクリックすると、クリップボードに Live Share のリンクが作成されます。これを Slack に共有して下さい。Live Share で実際のコードを見ながら聞きに行きます

準備が必要なもの

VSCodeが動作する開発用 PC（Linuxの場合は、Snap版の Zoom をインストールして下さい。リモートSSH機能、リモートコンテナ機能の使用は可）
Windows の場合、Git のインストール
VS Code Meetup Slack への参加(こちらのページに案内リンクがあります)
Zoom クライアントのインストール、及び音声、画面共有のテスト
Visual Studio Code のインストール（公式ドキュメント(英語)、KC さんの記事、もしくは書籍Visual Studio Code 実践ガイドを参照下さい）
Node.js のインストール
Chrome ブラウザのインストール

VSCode で準備が必要なもの

以下の拡張機能を、事前にインストールして下さい

Live Share
事前に、"Start collaboration session..." をクリックし、Microsoft アカウント、Github アカウントとリンクさせておいて下さい
Debugger for Chrome

ご容赦いただきたいこと

このハンズオンは有志の実験的取り組みです。至らない点など多数あるかと思いますが、参加者同士でコミュニケーションをとっていただき、一緒に解決できればと思います。
Live Share を使ってのハンズオンなど、主催者としても初めての取り組みを行っています。ご不便をおかけする点も多いと思いますが、ご協力いただければと思います。
Live Share は、Share の仕方を誤ると、ターミナルを横取りできたり、ターミナルやプログラムを介して、個人の機密情報にアクセスすることができうるプロダクトです。自己責任の上、注意して使用して下さい。また、もしアクセス可能だとしても他人の情報にはアクセスしないようにして下さい。
このハンズオンの内容には、書籍Visual Studio Code 実践ガイドの内容が含まれます。資料は用意するため、購入は必須はありませんが、購入を検討いただければ幸いです。
本ハンズオンの内容を、de:code などカンファレンスで紹介することがあります。