プログラマーのためのVisual Studio Codeの教科書【改訂2版】の推しポイント / Visual Studio Code Textbook 2nd Edition Recommended Points

Presentation Slides for VS Code Meetup #30 - Visual Studio Codeの教科書/出版記念!!
Session title: プログラマーのためのVisual Studio Codeの教科書【改訂2版】の推しポイント
Date: 2024/07/30
Youtube link: https://www.youtube.com/watch?v=MiTqD08OQ0w

Transcript

1. プログラマーのための Visual Studio Codeの教科書【改訂2版】 の推しポイント 川崎 庸市 阿佐 志保 VS Code Meetup #30 - Visual Studio Codeの教科書出版記念!
2. 著者紹介 阿佐 志保 （担当: Part1） @_Dr_ASA 平岡 一成 （担当: Part2 ch5,6） @hoisjp 川崎 庸市 （担当: Part2 ch7, Part3） @yokawasa プログラマーのための Visual Studio Codeの教科書【改訂2版】 出版社: マイナビ出版
3. 初版からのアップデート - 初版と同じくプログラマー向けトピックに重きを置きつつ、 幅広い読者層が活用できるように人気かつ最新機能を活 用した開発手法が学べるようにした - 各章最新情報にブラッシュアップし、現在不要なトピックは カット - 主な新規追加トピック - Chapter3「GitHubとの連携」 - Chapter4「GitHub Copilotの活用」 - Chapter6「リモート開発: Dev Containers」 - Chapter7「Webアプリケーション開発」 2020/04/30発売 2024/06/24発売
4. フィードバック https://x.com/74th/status/1805230225250521460 https://x.com/kazu_pon/status/1807604522619158812 https://x.com/shosuz/status/1800886936737046602 https://x.com/kazu_pon/status/1807605409555136778
5. 全体コンテンツ
6. 各担当パートの推しポイントを紹介します
7. Part 1 Visual Studio Codeの基礎
8. 阿佐さんスライド＆デモ
9. Part 2 総合統合環境としてのVisual Studio Code
10. VS Codeでのプログラミングに必要な機能が一通り学べる • 統合ターミナルの使い方・カスタマイズ方法 • IntelliSenseによるクイック情報、パラメータ情 報参照、コード補完、カスタマイズ方法 • CodeLensの使い方 • ナビゲーションの使い方 • LintとFormatの使い方 • リファクタリングの方法 • デバッガーの使い方 • タスクによる自動化設定 • スニペットの使い方、作り方 Part2 Ch5 - プログラミング支援機能 使いこなしていると思って いても、意外と知らなかった 機能があるのではないかと 思います。 ここで学んだいくつかの機能をCh7Webアプリ開発で活 用する構成になってます
11. VS Codeを活用したリモート開発の概要と使い方が学べる ４種類のリモート開発のための拡張機能 • Remote - SSH (SSHで接続) • Remote - Container (コンテナアプリに接続 ) ◦ Dev Containersも含む • Remote - WSL (Win SubsystemのLinuxに接続) • Remote - Tunnels (トンネルを介して接続 ) Part2 Ch6 - リモート開発 Dev Containers をご自身の 環境や条件にあわせて適した 選択をできるようになってほし い、この威力をみんなに知っ てほしい、と思って書きまし た。 プログラマーのための Visual Studio Codeの教科書【改訂 2版】- p210 表 6-2-1 接続形式４種類の違い
12. VS Codeを活用したリモート開発の概要と使い方が学べる Part2 Ch6 - リモート開発 Dev Containers Dev Containers は、具体的なコンテナ設定を定義するための設定ファイル（devcontainer.json）とDockerファイ ル（Dockerfile）を含むディレクトリ（通常、.devcontainer ディレクトリ）のことを指す。この設定ファイルには、使用す るDockerイメージ、必要なVS Code拡張機能、ポートフォワーディングの設定、環境変数など、コンテナ環境に必要 なすべての詳細が記述されている。 プログラマーのための Visual Studio Codeの教科書【改訂 2版】- p228 図 6-7-1 Dev Containers Dev Containersの仕組み自体は、Ch3で紹介 するGitHub Codespacesでも同じ仕組みが 利用されている。GitHub Codespacesで開発 環境を構築した場合、そのままDev Containersで開発を続けることができる
13. 書籍執筆用 Dev Containers 参考情報
14. Web APIを中心としたWebアプリ開発方法が学べる Part2 Ch7 - Webアプリ開発 プログラマーのための Visual Studio Codeの教科書【改訂 2版】- p237 図 7-1-2 アプリ処理フロー
15. VS Codeでの開発手法を実践的に学べる Part2 Ch7 - Webアプリ開発 API設計 バックエンド API開発 フロントエンド 開発 (SPA) REST API仕様をOpenAPI Specで作成 • VS Codeでnpmタスクを実行 • VS CodeでAPIをデバッグ (Launch / Attachモード) • Postman拡張機能でAPIテスト • VS Codeでnpmタスクを実行 • VS Codeでブラウザアプリのデ バッグ (Launchモード)
16. Part 3 拡張機能の作成と公開
17. VS Code 拡張機能の開発〜公開までの一連の流れを学べる 開発 デバッグ テスト バンドル 公開 パッケージ化 マーケットプレース公開 マーケットプレイス公開 Part3 - 拡張機能開発
18. VS Code 拡張機能の仕組みが理解できる プログラマーのための Visual Studio Codeの教科書【改訂 2版】- p329 Part3 - 拡張機能開発
19. 豊富なサンプルを通じて実践的に拡張機能の作り方を学べる https://github.com/vscode-textbook/extensions Part3 - 拡張機能開発
20. One more thing…
21. オンライン付録: おすすめVS Code拡張機能一覧 https://github.com/vscode-textbook/favorite-extensions 著者陣が選んだおすすめのVS Code 拡張機能一覧です 他にも良い拡張機能があれば是非コン トリビュートしてください。PRおまちしてま す