Tweet
Tweet

Slide 1

Slide 1 text

プログラマーのための Visual Studio Codeの教科書【改訂2版】 の推しポイント 川崎 庸市 阿佐 志保 VS Code Meetup #30 - Visual Studio Codeの教科書出版記念!

Slide 2

Slide 2 text

著者紹介 阿佐 志保 （担当: Part1） @_Dr_ASA 平岡 一成 （担当: Part2 ch5,6） @hoisjp 川崎 庸市 （担当: Part2 ch7, Part3） @yokawasa プログラマーのための Visual Studio Codeの教科書【改訂2版】 出版社: マイナビ出版

Slide 3

Slide 3 text

初版からのアップデート - 初版と同じくプログラマー向けトピックに重きを置きつつ、 幅広い読者層が活用できるように人気かつ最新機能を活 用した開発手法が学べるようにした - 各章最新情報にブラッシュアップし、現在不要なトピックは カット - 主な新規追加トピック - Chapter3「GitHubとの連携」 - Chapter4「GitHub Copilotの活用」 - Chapter6「リモート開発: Dev Containers」 - Chapter7「Webアプリケーション開発」 2020/04/30発売 2024/06/24発売

Slide 4

Slide 4 text

フィードバック 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

Slide 5

Slide 5 text

全体コンテンツ

Slide 6

Slide 6 text

各担当パートの推しポイントを紹介します

Slide 7

Slide 7 text

Part 1 Visual Studio Codeの基礎

Slide 8

Slide 8 text

阿佐さんスライド＆デモ

Slide 9

Slide 9 text

Part 2 総合統合環境としてのVisual Studio Code

Slide 10

Slide 10 text

VS Codeでのプログラミングに必要な機能が一通り学べる ● 統合ターミナルの使い方・カスタマイズ方法 ● IntelliSenseによるクイック情報、パラメータ情 報参照、コード補完、カスタマイズ方法 ● CodeLensの使い方 ● ナビゲーションの使い方 ● LintとFormatの使い方 ● リファクタリングの方法 ● デバッガーの使い方 ● タスクによる自動化設定 ● スニペットの使い方、作り方 Part2 Ch5 - プログラミング支援機能 使いこなしていると思って いても、意外と知らなかった 機能があるのではないかと 思います。 ここで学んだいくつかの機能をCh7Webアプリ開発で活 用する構成になってます

Slide 11

Slide 11 text

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 接続形式４種類の違い

Slide 12

Slide 12 text

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で開発を続けることができる

Slide 13

Slide 13 text

書籍執筆用 Dev Containers 参考情報

Slide 14

Slide 14 text

Web APIを中心としたWebアプリ開発方法が学べる Part2 Ch7 - Webアプリ開発 プログラマーのための Visual Studio Codeの教科書【改訂 2版】- p237 図 7-1-2 アプリ処理フロー

Slide 15

Slide 15 text

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モード)

Slide 16

Slide 16 text

Part 3 拡張機能の作成と公開

Slide 17

Slide 17 text

VS Code 拡張機能の開発〜公開までの一連の流れを学べる 開発 デバッグ テスト バンドル 公開 パッケージ化 マーケットプレース公開 マーケットプレイス公開 Part3 - 拡張機能開発

Slide 18

Slide 18 text

VS Code 拡張機能の仕組みが理解できる プログラマーのための Visual Studio Codeの教科書【改訂 2版】- p329 Part3 - 拡張機能開発

Slide 19

Slide 19 text

豊富なサンプルを通じて実践的に拡張機能の作り方を学べる https://github.com/vscode-textbook/extensions Part3 - 拡張機能開発

Slide 20

Slide 20 text

One more thing…

Slide 21

Slide 21 text

オンライン付録: おすすめVS Code拡張機能一覧 https://github.com/vscode-textbook/favorite-extensions 著者陣が選んだおすすめのVS Code 拡張機能一覧です 他にも良い拡張機能があれば是非コン トリビュートしてください。PRおまちしてま す

Slide 22

Slide 22 text

No content