Skip to content

74th/vscode-typescript-handson

Repository files navigation

VSCode TypeScript 開発体験 ハンズオン

ゴール

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

解説すること

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

解説しないこと

準備が必要なもの

VSCode で準備が必要なもの

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

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

ご容赦いただきたいこと

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

アジェンダ

  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 で実際のコードを見ながら聞きに行きます

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •