このエントリーをはてなブックマークに追加

May

4

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

Live Shareも活用して、サーバサイドとフロントエンドを開発、デバッグしよう!

Organizing : 74th(Atsushi Morimoto)

Registration info

一般参加

Free

FCFS
26/10

ハンズオンお手伝い

Free

FCFS
1/1

Description

当日参加の方へ

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 の開発環境の構築方法、開発方法、デバッグ方法

解説しないこと

アジェンダ

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

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

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

準備が必要なもの

VSCode で準備が必要なもの

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

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

ご容赦いただきたいこと

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

発表者

Media View all Media

If you add event media, up to 3 items will be shown here.

Feed

Atsushi Morimoto(@74th)

Atsushi Morimoto(@74th) published VSCodeでTypeScript開発体験ハンズオン.

04/29/2020 19:27

VSCodeでTypeScript開発体験ハンズオン を公開しました!

Ended

2020/05/04(Mon)

13:30
17:00

You cannot RSVP if you are already participating in another event at the same date.

Registration Period
2020/04/29(Wed) 19:26 〜
2020/05/04(Mon) 17:00

Location

オンライン

オンライン

オンライン

Attendees(11)

dafujii

dafujii

VSCodeでTypeScript開発体験ハンズオン に参加を申し込みました!

makky12

makky12

VSCodeでTypeScript開発体験ハンズオンに参加を申し込みました!

kazuemasaki

kazuemasaki

VSCodeでTypeScript開発体験ハンズオン に参加を申し込みました!

ayatokura

ayatokura

VSCodeでTypeScript開発体験ハンズオン に参加を申し込みました!

@fumiyakk

@fumiyakk

VSCodeでTypeScript開発体験ハンズオンに参加を申し込みました!

(退会ユーザー)

(退会ユーザー)

I joined VSCodeでTypeScript開発体験ハンズオン!

pinetail63

pinetail63

VSCodeでTypeScript開発体験ハンズオン に参加を申し込みました!

hyukawa

hyukawa

VSCodeでTypeScript開発体験ハンズオンに参加を申し込みました!

Arakun

Arakun

VSCodeでTypeScript開発体験ハンズオンに参加を申し込みました!

HASHIMOTO Takuya

HASHIMOTO Takuya

VSCodeでTypeScript開発体験ハンズオン に参加を申し込みました!

Attendees (11)

Waitlist (16)

setoazusa

setoazusa

VSCodeでTypeScript開発体験ハンズオン に参加を申し込みました!

mjima

mjima

VSCodeでTypeScript開発体験ハンズオンに参加を申し込みました!

mitsuoka0423

mitsuoka0423

VSCodeでTypeScript開発体験ハンズオンに参加を申し込みました!

yas123

yas123

VSCodeでTypeScript開発体験ハンズオン に参加を申し込みました!

zaki_hmkc

zaki_hmkc

VSCodeでTypeScript開発体験ハンズオン に参加を申し込みました!

YuiAbe

YuiAbe

VSCodeでTypeScript開発体験ハンズオンに参加を申し込みました!

mela_ksk

mela_ksk

VSCodeでTypeScript開発体験ハンズオン に参加を申し込みました!

XiangYu

XiangYu

VSCodeでTypeScript開発体験ハンズオン に参加を申し込みました!

dicek88

dicek88

VSCodeでTypeScript開発体験ハンズオン に参加を申し込みました!

yukichi

yukichi

VSCodeでTypeScript開発体験ハンズオンに参加を申し込みました!

Waitlist (16)

Canceled (3)