SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

開発用エディタのド定番「VSCode」を使いこなそう

開発の定番「VSCode」とは? インストールから使い方までを解説

開発用エディタのド定番「VSCode」を使いこなそう 第1回

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

 連載初回は、Visual Studio Codeのあらましを紹介し、macOSとWindowsを例にしてダウンロードとインストールを行います。日本語化を施したあと、画面構成の簡単な紹介を行い、HTMLファイルを作成する/開く/編集する/保存する/閉じるという一連の流れで基本的な使い方を紹介します。

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

はじめに

 Microsoftの提供するVisual Studio Code(以下、VSCode)は、2015年の最初のリリースから、今では開発用エディタの定番の座を占めるまでになりました。これには、無償で使えることも大きいですが、何よりエディタとしての使いやすさ、そしてさまざまな拡張機能によっていくらでも使い勝手を向上させたり、利用の領域を拡げられたりすることも大きいでしょう。本連載では、このVSCodeにフォーカスし、基本的な使い方から拡張機能の活用、そして本格的な開発現場での利用を想定した高度な機能までを紹介していくことで、読者がVSCodeマスターになるお手伝いをします。

対象読者

  • テキストエディタメインで開発してきた方
  • Visual Studioより軽い環境が欲しいと考えている方
  • Visual Sudio Codeをもっと使いこなしたいという方

必要な環境

 本記事のサンプルコードは、以下の環境で動作を確認しています。

  • macOS Monterey
    • Visual Studio Code 1.69
    • Google Chrome 103

VSCodeの概要

 VSCodeとは、正式にはVisual Studio Codeといい、Microsoft社の提供する無償のコードエディタです(図1)。最初のリリースは2015年なので、まだまだ新しい開発ツールと言えます。

図1:VSCode
図1:VSCode

VSCodeとは?

 コードエディタとは、ソースコードの編集を主な目的としたテキストエディタです。テキストエディタというと、macOSのシンプルテキスト、Windowsのnotepad、あるいはたくさんリリースされているフリーソフトウェア(Atom、mi、サクラエディタなど)を連想されるかもしれません。ですがこのVSCodeは、テキストエディタとしての機能に留まらず、コードエディタとして以下のようなさまざまな特徴を持っています。

  • 「拡張機能」によりさまざまな機能の追加の余地がある
  • macOS、Windows、Linuxといった主要なプラットフォームをサポートする
  • Git連携機能を使える
  • メジャーな多くのプログラミング言語でシンタックスハイライトが使える
  • スニペット機能が利用できる
  • インテリセンス(補完機能)が使える
  • リファクタリングが使える
  • デバッグ機能を備える

 シンタックスハイライト以降の機能は、プログラミング言語によってサポート状況が異なるので、それについては後続の回で随時紹介する予定です。

Visual Studioとの関係

 Visual Studio Codeというと、その名称からVisual Studioを連想される方もいるでしょう。Visual Studioは同じくMicrosoft社の提供する統合開発環境(IDE)です。Visual Studioは、1997年からリリースされている、伝統あるIDEです。2005年から無償のExpress Editionがリリースされて、2014年からは同じく無償のCommunityがリリースされていますが、それらには利用について一定の制限があり、業務で使用するにはライセンスを購入して全ての機能を利用できるようにするのが一般的です。そのため機能も充実しており、プラットフォームもWindowsとmacOSをサポートします。機能が充実している反面、要求されるハードウェアリソースは軽くはありません。

 VSCodeは、Visual Studioからエディタ部分を切り取りスピンアウトしたバージョンと位置付けることができますが、名前が似ているだけで中身はまったくの別物です。Electronという、Web技術を用いてアプリケーションを開発できるフレームワークを用いて開発されています。またVisual Studioと異なり、VSCodeはMITライセンスのもと、オープンソースソフトウェアとして公開されています。2021年に実施された海外のある調査では、VSCodeが最も人気のある開発者環境ツールとして、参加者の70%以上が使用していると回答したほどの人気ぶりです。

[NOTE]Webブラウザ版のVSCode―vscode.dev

 VSCodeには、Webブラウザで利用できるvscode.devがあります。コンパイルやデバッグ、ターミナルでの操作などはできませんが、ローカルのファイルを扱える、見た目も一緒であるなど、テキストエディタとしてはスタンドアロン版と同様の機能を備えるので、外出先や制限のある環境での利用には便利でしょう。一部の拡張機能を利用することもできます。

VSCodeの入手とインストール

 以下が、VSCodeの公式サイトです。必要な情報はここから得られます。

システム要件

 ダウンロードやインストールの前に、システム要件について確認しておきましょう。既述の通り、VSCodeはmacOS、Windows、Linuxの3つのプラットフォームで利用できます。公式サイトでは、クロック周波数が1.6GHz以上のCPU、1GB以上のRAMが推奨されています。現在流通しているPCではまったく問題なく軽快に動作するでしょう。また、OSのサポート状況は以下の表の通りです。こちらも現在流通しているPCではまったく問題ないと思われますが、古いOSを使っているという場合には注意した方がよいでしょう。

表1:サポートされるOS
プラットフォーム バージョン
macOS OS X El Capitan(10.11以降)
Windows Windows 8.0、8.1、10、11(32bitまたは64bit)
Linux(Debian系) Ubuntu Desktop 16.04以降、Debian 9以降
Linux(Red Hat系) Red Hat Enterprise Linux 7以降、CentOS 7以降、Fedora 34以降

 以降、macOSとWindowsについて、ダウンロードとインストール、そして起動方法を紹介します。なお、VSCodeはプラットフォームにかかわらず、下記から入手できます。

macOSでのダウンロードから起動まで

  macOS環境でのダウンロードから起動までを、以下にまとめます。

ダウンロード

 プラットフォームに合ったZipファイルをダウンロードします。

  • Universal…Intelプラットフォーム/Apple M1プラットフォーム
  • Intel…Intelプラットフォーム(x64)
  • Apple-Silicon Apple M1プラットフォーム
インストール

 ダウンロードしたZipファイルを解凍してできる.appファイルを、アプリケーションフォルダにコピーまたは移動します。これでインストールは完了です。macOSの全ユーザで利用可能です。

起動

 インストールによってVSCodeはアプリケーションフォルダに配置されているので、そのままLaunchpadで起動できます。あるいは、Finderでファイル名の上で右クリック→「このアプリケーションから開く」で表示される一覧に「Visual Studio Code.app」があれば、そこから起動してファイルも開けます。

Windowsでのダウンロードから起動まで

  Windows環境でのダウンロードから起動までを、以下にまとめます。

ダウンロード

 Windowsでは、x86(32bit)、x64(64bit)、ARM(64bit)の3つのアーキテクチャ向けにインストーラが用意されています。インストール方法に合わせてファイルをダウンロードしますが、User InstallerかSystem Installerを使うのがお勧めです。

  • User Installer…使うのは自分自身だけ
  • System Installer…PCの全ユーザが使う
  • Zip…解凍したファイル群を適当なフォルダに置いて自分で管理する
インストール

 ダウンロードしたインストーラを実行してインストールします。デフォルトのオプションのまま進めて問題ないので、特に難しいところはありません。

起動

 [スタート]-[Visual Studio Code]-[Visual Studio Code]で起動するか、エクスプローラーでファイル名の上で右クリック→「アプリケーションで開く」で表示される一覧に「Visual Studio Code」があればそこから起動してファイルも開けます。

 プラットフォームにかかわらず、起動するとデフォルトではウェルカムページが表示されます。ウェルカムページには、最近開いたものの一覧、ファイルを開く操作、ちょっとしたTipsなどが表示されます。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
VSCodeを日本語化する

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
この記事の著者

WINGSプロジェクト 山内 直(WINGSプロジェクト ヤマウチ ナオ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook <個人紹介> WINGSプロジェクト所属のテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLDB/PEAR/Smarty)」「独習シリーズ(ASP.NET/PHP)」「10日でおぼえる入門教室シリーズ(ASP.NET/PHP/Jakarta/JSP&サーブレット/XML)」「Pocket詳解辞典シリーズ(ASP.NET/PHP/Perl&CGI)」「今日からつかえるシリーズ(PHP/JSP&サーブレット/XML/ASP)」「書き込み式 SQLのドリル」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/16467 2022/09/15 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング