Visual Studio Code実践ガイド
—最新コードエディタを使い倒すテクニック

[表紙]Visual Studio Code実践ガイド —最新コードエディタを使い倒すテクニック

A5判/416ページ

定価(本体2,780円+税)

ISBN 978-4-297-11201-1

電子版

→学校・法人一括購入ご検討の皆様へ

書籍の概要

この本の概要

近年注目を集めるエディタ「Visual Studio Code」について徹底的に解説。基本はもちろん,意外と知られていないさまざまな機能,TypeScript,Go,Pythonでの開発を通した実践例,そして拡張機能開発までを扱う決定版です!

こんな方におすすめ

  • VSCodeをさらに使いこなしたい人
  • 他のエディタを使っており,VSCode に興味のある人

著者の一言

Visual Studio Codeとは

本書を手にとっていただきありがとうございます。本書はVisual Studio Code(本書では,略して「VSCode」と呼びます)の解説書です。
VSCodeはさまざまなソフトウェアを開発するためのエディターで,マルチプラットフォームに対応しています。Microsoftが開発し,2015年のMicrosoftのデベロッパー向けカンファレンス「Build 2015」にて公開されました。Visual Studioのファミリー製品となっていますが,そのほかの製品とは異なる特徴が2つあります。1つは,GitHub上でコミュニティとともに開発が続けられているオープンソースソフトウェアであることです。もう1つは,特定の環境をターゲットにしたIDE(統合開発環境)ではなく,さまざまなプログラミング言語の開発が「拡張機能」によって可能になる開発ツールであることです。
VSCodeは,純粋なテキストエディターとしての機能はもちろん,複数のファイルをタブで開いたり,プロジェクト全体を全文検索したり,ファイル間の差分を見たりする機能も持っています。さらに,プログラミング言語ごとの開発支援機能を,拡張機能としてマーケットプレイスから簡単にインストールできます。このように機能が拡張できることはVSCodeの特徴の1つである一方,実際に開発支援機能として拡張できる項目は以下に限られています。

  • コード補完
  • デバッグ
  • リント(静的解析)
  • 外見(テーマ)
  • スニペット
  • キーマップ

VimやEmacsといった拡張に優れたエディターと比べると,VSCodeで拡張できる範囲は自由ではありません。しかしその制限のおかげで,特定のプログラミング言語によらず共通のUIでスマートに利用できるようになっています。
また,VSCodeがもつ拡張機能の一部は,Language Server Protocol(以下「LSP」と呼びます)という多種多様なプログラミング言語とエディター間のプロトコルとしてまとめられています。このLSPはVSCode以外のエディターでも使えるソフトウェア開発ツールの共通プロトコルとなりつつあります。VSCodeはLSPによって,まさに現在のソフトウェア開発を再定義したエディタと言えます。
筆者は,ソフトウェア開発の最初の段階である,開発に必要なツールの準備をする仕事に従事していました。その際,他の開発メンバーにはIDEでのセットアップをすすめながらも,自分ではカスタマイズしたVimを使っていました。しかし,VSCodeの登場により,私も開発メンバーと同じツールを使って環境を構築し,それを共有できるようになりました。VSCodeは開発者間で共有する設定とユーザー個人の設定とが分離されているため,開発メンバーで設定を共有しながらも,細かい動作や視覚効果などは各開発者の好きな設定を追加できます。筆者もキーバインドやカラーテーマをカスタマイズしながら,TypeScript,Go,Pythonのチーム開発に使用しています。また,外部のLinuxサーバーやDockerコンテナに接続して開発ができるリモート開発機能は,開発環境をLinux中心にできるため,筆者にとって画期的なものでした。そのため今ではソフトウェア開発のほとんどの場面でVSCodeを使うようになりました。
VSCodeの機能が充実したことで,今後もVSCodeユーザーは増えていくでしょう。本書は,より気軽にVSCodeを使って開発をブーストし,自分好みにカスタマイズして,拡張機能を作って発展させる,そんなVSCodeユーザーを増やしたい気持ちで執筆しました。読者のソフトウェア開発の発展の一助になればと思います。

本書のねらい

VSCode自体は解説書がなくてもユーザーが迷わないように,さまざまな配慮がされています。したがって本書は,VSCodeをより深く知りたい以下のような方々に向けた本となっています。

  • フロントエンド開発やWeb API開発などのために,VSCodeがどのように使えるか知りたい方
  • VSCodeを活用していて,より詳細な機能について知り,開発を効率化させたい方
  • VSCodeをカスタマイズして理想のエディターに近づけたい方
  • 現状のVSCodeでは手の届かないところがあり,VSCodeの拡張機能を作ってみたい方
  • LSPについて知りたい方

本書はVSCodeを基礎から学ぶ読み物としても,欲しい情報を調べるリファレンスとしても使えるようにしています。すでにVSCodeを使用している方は,目次を見て気になるところから読み進めていただければと思います。
第1部では,どのプログラミング言語でも使える基本的な機能のすべてを解説します。具体的には,ファイルエクスプローラーの詳細や,最もよく使うエディター画面の使い方,ソースコントロールビュー,デバッグ,スニペット,リモート開発機能の基本などです。Gitを扱う第4章では,標準のソースコントロールビューでの操作に加えて,コミットログやブランチ差分を確認に使えるGitLens,Git Historyといった定番の拡張機能の使い方も扱います(脚注:ソースコントロールビューではGit以外のソースコードバージョン管理システムを使うことができますが,本書ではGitのみを扱います。)。さらに第1部の最後では,カスタマイズ方法やおすすめの拡張機能の導入について説明します。
続く第2部では,実践的な開発環境の構築方法や,言語特有のテクニックについて紹介します。TypeScript,Go,Pythonの3つの言語を例に,ハンズオンの形でフロントエンド開発,サーバーAPI開発の両方にトライします。3つの言語すべてで開発環境の構築手順,ユニットテストの実装とデバッグ,アプリケーションのデバッグ方法がわかるようになっています。TypeScriptを扱う第10章では,フロントエンドアプリとサーバーサイドのWeb APIアプリ開発の両方を同時にデバッグする方法も紹介します。また,Pythonを扱う第12章では,macOSやWindowsを使いながらDockerコンテナ上で開発ができるDev Containerの活用方法や,データの可視化,解析に使えるJupyter機能についても解説します。
最後の第3部では,拡張機能の作り方について扱います。外部コマンドを実行してソースコードに反映させるコマンドの作成から,リントツールのエラーの表示方法や,カラーテーマの作り方などを解説します。そして,VSCodeの拡張について考える上で切り離せない,LSPの仕様についても第16章で扱い,さらにLSPを使った拡張機能を開発を解説します。
なお,本書では内容をVSCodeの解説に絞るため,Gitコマンドの使い方や,TypeScript,Go,Pythonなどプログラミング言語の仕様,ソフトウェア開発プロセスといった点については取り扱いません。VSCodeは2020年現在も活発に開発が続けられているオープンソースソフトウェアです。そのため,情報は執筆時点(2020年1月)のもので,内容の一部が現行のバージョンに即していない場合があることをご了承ください。

『はじめに』より

この書籍に関連する記事があります!

新世代のコードエディタ「Visual Studio Code」を大活用!
エンジニアにとってのテキストエディタは,料理人にとっての包丁のようなもの。

目次

第1部 Visual Studio Codeの基本
第1章 インストールと初期設定 —— Visual Studio Codeを使いはじめる

  • Visual Studio Codeのインストールとアップデート
  • 表示言語を日本語に設定する
  • codeコマンドのインストール
  • Insider Buildで最新機能を試す

第2章 画面構成と基本機能 —— 直感的な画面に隠された多くの機能たち

  • フォルダーやファイルを開く
  • Visual Studio Codeの画面構成
  • エディターの画面構成
  • ソースコードの編集
  • ソースコードの閲覧
  • 高度な機能たち

第3章 ビューとコマンドパレット —— 多彩な情報を整理し,簡単に呼び出す

  • エクスプローラービュー
  • 検索ビュー
  • コマンドパレット

第4章 Gitとの連携 —— 基本操作から便利な拡張機能まで

  • Gitの基本的な操作
  • diff画面とコンフリクトの解消
  • コンフリクトの解決
  • Gitを強化する拡張機能

第5章 デバッグ機能 —— さまざまな言語のデバッグを直感的なUIで行う

  • Visual Studio Codeのデバッグの仕組み
  • デバッグの流れ
  • デバッグUI
  • デバッグの設定

第6章 そのほかの機能 —— タスク,リント,スニペット,ターミナル

  • タスク機能
  • リント(静的解析)機能
  • スニペット機能
  • ターミナル

第7章 リモート開発機能 —— 開発環境と実行環境の差分を抑える新機能

  • リモート開発機能とは
  • リモートSSH機能の使い方
  • リモートコンテナ機能

第8章 カスタマイズ —— 柔軟な設定項目,ショートカットでより使いやすく

  • Visual Studio Codeのカスタマイズの基本
  • おすすめの設定項目
  • キーボードショートカットの設定

第9章 拡張機能 —— 導入,管理,おすすめの拡張機能

  • 拡張機能のインストールと管理
  • 実装中に便利な機能
  • ソースコードを見やすくする拡張機能
  • ソースコード以外も見やすくする拡張機能
  • Visual Studio Codeをさまざまな開発プラットフォームに押し上げる機能

第2部 実際の開発でVisual Studio Codeを使う
第10章 TypeScriptでの開発 —— デフォルトで使えるフロントエンド/Web APIアプリ開発機能たち

  • TypeScriptとフロントエンドアプリの周辺技術
  • 開発実例「TODOリスト管理Webアプリ」
  • TypeScriptの環境構築
  • ロジックの実装とユニットテスト
  • Web APIの開発とデバッグ
  • フロントエンドアプリの開発とデバッグ
  • TypeScriptの開発支援機能

第11章 Goでの開発 —— 各種の開発支援ツールと連携した拡張機能

  • Goの開発環境の構築
  • Web APIの構成とミドルウェア
  • モデルの実装とユニットテスト
  • Web APIの実装とデバッグ

第12章 Pythonでの開発 —— Web API開発にも,Jupyter機械学習にも活用できる

  • Pythonの開発環境の構築
  • Web APIの実装とユニットテスト,デバッグ
  • JupyterをVisual Studio Codeから使う

第3部 拡張機能の開発とLanguage Server Protocol
第13章 拡張機能開発の基本 —— Visual Studio Codeの拡張ポリシーとひな形の作成

  • Visual Studio Codeの拡張機能のポリシー
  • 拡張機能開発の準備

第14章 実践・拡張機能開発 —— テキスト編集,スニペット,リント,カラーテーマ

  • テキストを編集する拡張機能の開発
  • スニペットの拡張機能の開発
  • リントの拡張機能開発
  • カラーテーマの拡張機能の開発
  • 新しいUIを提供する拡張機能の開発

第15章 自作の拡張機能を公開する —— 広く使ってもらうため必要なさまざまな事項

  • 拡張機能を公開せずに使う
  • 拡張機能を公開する

第16章 Language Server Protocol —— エディター拡張のための次世代プロトコル

  • LSPとは
  • LSPの仕様とVisual Studio Codeの動作
  • コード補完のプロトコル
  • 定義への移動,参照の検索
  • 診断とコードアクション
  • 言語サーバーとしてリントの拡張機能を作成する

著者プロフィール

森下篤(もりもとあつし)

株式会社ディー・エヌ・エー所属のエンジニア。SIのシステムアーキテクトを経て,2018年より現職。技術書典3にて『Visual Studio Codeデバッグ技術』(同人誌,のちにインプレスR&Dより刊行)を頒布してから,技術書典に継続的に参加している。

Twitter:@74th
GitHub:@74th