テキストエディタ入門Visual Studio Codeの使い方〈VSCode〉

プロダクト開発

あなたは「プログラミングを始めたいけど、何から始めていいかわからない」「プログラミングを学び始めたけど、テキストエディタの使い方がよくわからない」といった悩みを持っていないでしょうか?

プログラミングをする上で大切な要素にテキストエディタがありますが、エディタの使い方を学ぶ機会はなかなかありません。

このコースでは、VSCodeの基本的な使い方を徹底的に学んでいきます。VSCodeのインストール・日本語化から入るので、あなたにまだプログラミングの知識がなくても問題ありません。マルチカーソル・コマンドパレットなど、現場のエンジニアが使いこなしている実践的な機能も学んでいきます。

あなたがこのコースを学ぶことで、エンジニアとして一生使っていく大切な仕事道具であるテキストエディタの基本的な知識が身に付きます。エンジニアとしての学習・仕事の基盤ができ、長期的な収入・セルフブランディングの向上につながります。

私はプログラミングを始めて20年になり、仕事やプライベートでたくさんのテキストエディタを使ってきました。今はもちろんVSCodeを使っています。この経験を元に、このコースを公開しました。

コースの最後にはmacOSとWindows向けのチートシートも付録として配布しています。ぜひこのコースでたのしいプログラミングを始めてくださいね。

この記事は、Udemy上で公開している動画を補足するための教材として書き起こしました。あなたがより深く理解したいなら、動画もあわせてご覧ください。

著者
ぜに/Hiroki Zenigami

Webエンジニア&プロダクトマネージャ←プログラミング教育で起業←東大院←熊本高専。 共著に「現場で使えるRuby on Rails 5」。

目次

はじめに

このコースについて

ここではまずこのコースの全体像について学びます。はじめにこのコースで学ぶこと、次にこのコースの対象者、なぜこのコースを学ぶ必要があるのか、このコースを学んだ結果どうなるのか、そして最後にこのコースの信頼性についてお話しします。

このコースで学ぶこと

このコースで学ぶこと

まずはじめにこのコースで学ぶことですが、なぜVSCodeがいいのか、次にVSCodeのインストールと日本語化の方法について学びます。その後で本題としてVSCodeの画面構成と、プログラミングをする上で重要な使い方の基礎について学びます。

コースの最後で入れるべき拡張機能の解説と、あなたにあった拡張機能の見つけ方について学んでいきます。

このコースの対象者

このコースの対象者はプログラミングが未経験の方、プログラミングを学び始めたばかりの方を主な対象としています。

なのでもしあなたがある程度のプログラミング経験があったり、他のテキストエディタを使い慣れているなら、このコースはもの足りないかもしれません。

また基本的にはOSはMacを対象にしています。Windowsについては文章やチートシートで補足はしていますが、解説ではMacのみを対象にしているので、そこだけはあらかじめご理解ください。

あなたがこのコースの対象になりそうかどうかを確認した上で、ぜひ受講してみてくだください。

このコースを学ぶ必要性

このコースをなぜ学ばなければいけないのかということですが、これはエンジニアにとってもっとも大切な仕事道具である“テキストエディタの基本的な使い方”をきちんと理解するためです。

VSCodeの使い方は、とくに学ばなくても使っていくうちになんとなくは理解できるようになりますが、あらかじめこのコースで全体像を理解した上で実際にVSCodeを使っていくことで、より早く・そして深く使い方を理解することができます。

学んだ結果どうなるか

学んだ結果どうなるか

このコースを学ぶことで、あなたは次のようになります。

まずひとつ目にエンジニアとして一生使っていくことになる“道具の基本的な使い方”が身に付きます。この結果、エンジニアとしてより早く作業ができるようになったり、早く成長できるになります。

これが結果としてエンジニアとしての長期的な収入だったり、セルフブランディングの向上につながります。こういった結果に少しでも魅力を感じたら、ぜひこのコースを受けてみてください。

このコースの信頼性

最後にこのコースが本当に信頼できるのかということですが、私はプログラミングを始めてだいたい20年くらいになって、最初の5年間はWindowsで、それからはずっとMacでプログラミングをしてきました。

社会人としても、上場企業だったりスタートアップでエンジニアとしてやってきて、自分の経験はもちろん同僚とテキストエディタについて雑談したりなど、いろいろ聞いてみたりしてきました。

こういったたくさんの経験をもとにこのコースを作っているので、内容については信頼できると考えています。

前提条件

このコースの内容は、次のそれぞれの環境で動作を確認しています:

  • macOS: 11.4
  • VSCode: 1.59.0

このコースは基本的にMacを対象に解説しています。なので、コースの中で使っているショートカットなどは基本的にMacについて話しています。

もしあなたがWindowsを使っているのであれば、コースのおわりにWindows向けのチートシートを公開していますので、そちらをもとに読み替えながら受講していただければと思います。

また、MacやVSCodeのバージョンによっては細かな違いがあるかもしれませんが、大きな問題というのはないと考えています。もちろん随時コースの内容をアップデートしていきますが、もし内容に問題があればぜひメッセージをください。よりよいコースになるよう改善していきます。

余談ですが、あなたがこれから技術ブログ・ドキュメントを書くときは、このレクチャーのようにまずはじめに動作環境を書くと、内容の信頼性が上がるので、ぜひ参考にしてみてくださいね。

問題が起きたときにやること

ここでは、このコースを学ぶ上で“問題が起きてしまったとき”にやることについて学びます。例えば、このコースを進めるにあたって「VSCodeをインストールできない」や「うまく日本語化できない」みたいな問題が起こるかもしれません。

もちろんコースの内容に問題があれば、私の方でもコースを改善したいと思っているので、問題があればぜひメッセージをください。

ただ、ソフトウェアは日々アップデートされているので、どうしても既存の情報と噛み合わない部分というのも出てきてしまいます。これはプログラミングをやっていく上ではどうしても起きてしまうことなんですね。

ここで大切なのは“問題解決能力”、つまり「自分で調べて問題を解決する能力」になります。この問題解決能力は、エンジニアとしてやっていく上ですごく大切な能力になります。

問題が起きたときは「問題解決能力を身につけるチャンスだ」と思って、ぜひ解決をめざしてみてください。

問題を解決するプロセス

では具体的に「どうやって問題を解決すればいいのか」ということについてお話しします。問題を解決するには、この4つのプロセスで行えばいいです。

問題を解決するプロセス

まず1つ目に「問題を明確にする」。これは例えば「WindowsでVSCodeをインストールできない」などですね。次にその中からキーワードを抽出します。これは例えば「Windows, VSCode, インストール」になります。

3つ目に、このキーワードをインターネットで検索します。この検索結果の中から、いくつかの記事をもとに解決をめざしていきます。

ここで大切なのは「ひとつの情報だけをうのみにしない」ということですね。「記事によっては間違った情報を書いている」ということもよくあることなので、いくつかの情報をもとに正しそうな情報を自分の中で考えてみて、実際にやってみてください。

もし調べ方がわからないときは、メッセージをいただけたら調べ方をお答えします。解決策を教えても成長につながらないので、直接の解決策は教えられませんが、調べ方ならいくらでもお伝えできるので、お気軽にメッセージください。

ということで問題が起きたときは「問題解決能力を鍛える練習」だと思って、ぜひ解決をめざしてみてください。

事前準備

このセクションでは、VSCodeの使い方を学ぶにあたって知っておくべきこと、やっておくべきことを学んでいきます。

このセクションで学ぶこと

具体的には、「まずはじめになぜVSCodeがいいのか?」というのを“ソフトウェアの選定基準”をもとに学びます。次にVSCodeをインストールして日本語化していきます。最後にVSCodeの画面構成を見ていきます。

VSCodeがいい理由

ここではVSCodeがいい理由について、“ソフトウェアの選定基準”を元に学んでいきます。

テキストエディタに限らないことですが、ソフトウェアやライブラリを選ぶときは選定基準を元に選ぶことが大切なんですね。これをしないと、例えばソフトウェアの開発が終了してしまったり、使いづらい、みたいな問題が起きてしまいます。

ここではエンジニアとしてやっていく上で大切な“ソフトウェアの選定基準”を元に、どうしてVSCodeが他のエディタよりもいいのか、ということを見ていきます。

ソフトウェアの選定基準

この“ソフトウェアの選定基準”ですが、次の4つを元に選んでいくといいです。

ソフトウェアの選定基準

まずひとつ目が「開発体制は信頼できるか」、次に「普及しているか」、「ユーザー体験はよいか」、最後に「学習コストは高くないか」です。

VSCodeについて見てみると、開発体制についてはMicrosoftが開発しています。MicrosoftはGitHubも運営しているのですが、エンジニアの開発環境を主要な事業のひとつにしているので、十分信頼できますね。

VSCodeはアップデートも頻繁に行われていて、開発の活発さがよくわかります。実際に使ってみると、すごく安心します。

普及については、2019年にStackoverflowという有名なエンジニア向けの質問サービスが行った調査によると、Webエンジニアの55.6%がVSCodeを使っています。これも十分すぎる数字です。

ユーザー体験は、使ってみるとわかるのですが、動作が軽くて機能も充実しています。足りない機能は拡張機能で追加できるので、本当になんでもできるエディタになっています。

学習コストも、エンジニア向けのエディタの中で、VSCodeよりわかりやすいエディタはないんじゃないのかな、というくらい簡単です。あなたがプログラミングを始めたばかりでも、十分に使えると思います。

こういった理由から、VSCodeがエンジニアのテキストエディタとして選ぶべきエディタといえます。

他の選択肢としては、例えばVimやEmacs、IntelliJ IDEA、XCode、Android Studioなんかは選んでもよさそうですね。逆に、AtomやSublime、TextMateのようなエディタは、この選定基準を元に考えると私は選ぶべきではないと考えています。

実際の現場でも、VSCodeを使っている人はたくさんいるので、VSCodeを選んでおけばまず失敗することはないですね。ということで、ここではVSCodeを例にあげましたが、ソフトウェアとかライブラリを選ぶときは、こういった選定基準をもとに選ぶことをぜひ意識してみてください。

インストール方法

ここではVSCodeをインストールする方法について学んでいきます。VSCodeをインストールするには、まず公式サイトに行きます。公式サイトのトップページにVSCodeをダウンロードするボタンがあるので、それをクリックすればVSCodeをダウンロードできます。

VSCodeのダウンロード

ダウンロードが完了すると、“Visual Studio Code”というファイル名になります。これがVSCodeになります。最後にこのVSCodeをドラッグ&ドロップでApplicationsフォルダに移動すればインストールは完了になります。

このアプリケーションを開くときですが、はじめて開くときだけ「このアプリケーションを開きますか?」という質問が表示されます。これを開くとすることでVSCodeを開くことができます。

VSCodeを開く

Windowsの場合

もしあなたがWindowsを使っている場合は、基本的にはやり方は同じですが、VSCodeをダウンロードしたあとで実行ファイルをダブルクリックして実行してください。

あとは、画面にしたがって進めることで、Macと同じようにVSCodeをインストールすることができます。もしやり方を学びたい場合は、Googleなどで「VSCode Windows インストール」と検索してみてください。

日本語化

ここではVSCodeを日本語化する方法について学んでいきます。初めてVSCodeを起動すると、画面の右下の方に「VSCodeを日本語化しますか?」というメッセージが表示されます。

このメッセージが表示されているときは、ここにある“インストールして再起動”というボタンをクリックするだけで、日本語化をすることができます。

日本語化メッセージ

このボタンをクリックしてみますね。こうすると、日本語化の拡張機能がインストールされて、自動でVSCodeを再起動してくれます。再起動されると、VSCodeが日本語化されていることがわかります。

メッセージが表示されないとき

この右下のメッセージを表示されていないときは、次の手順でVSCodeを日本語化していきます。説明のために、日本語化をリセットした状態にしています。

まず、左側の「拡張機能」を開きます。ここを開くと、拡張機能を検索するボックスにカーソルが当たっているので、ここで「japan」と入力してください。すると日本語化の拡張機能がヒットします。これをインストールするとVSCodeを日本語化することができます。

日本語化の拡張機能

インストールした後は再読み込みが必要なので、VSCodeを再読み込みしてください。これで、メニューなどいろんなところが日本語化されます。

画面構成

ここではVSCodeの画面構成について学んでいきます。VSCodeは、大きく分けて5つのエリアで構成されています。

画面構成

まずひとつ目がいちばん左側にあるアクティビティーバーで、これはエディタやGitのような機能を切り替えたりします。他にも、例えばGitを使っていれば「ファイルがいくつ変更されたか」という数も数字で教えてくれたりします。

次にその隣にあるサイドバーですが、これはファイルの一覧などの情報が表示されるところです。その隣のいちばん広い領域がエディタグループで、ここで実際にコードを書いたりファイルを編集したりしていきます。

その下にあるのがパネルというところで、ここにはエラーや問題があるときに表示してくれたり、あとはコマンドラインを使うときにここを操作したりします。いちばん下の細長い部分がステータスバーといわれるところで、ここには開いているファイルに関する情報などが表示されます。

よく使うのはアクティビティーバーとサイドバー、エディタで、パネルとステータスバーはあんまり使うことはないかな、と思っています。このコースでも、アクティビティーバーとサイドバー、エディタを中心に解説していきます。

基本操作

このセクションでは、プログラミングをするときによく使う「ファイルの操作」や「文字の入力」のような、基本的な操作について学んでいきます。その他にもマルチカーソル・コマンドパレットのような、使いこなせると早くプログラミングができる機能についても学んでいきます。

ファイルの操作

ここではVSCodeのファイル操作について学んでいきます。プログラミングをする上で必ず行うことになるのがファイル操作ですね。つまり、ファイルを新しく作ったり、保存したり、といった操作です。これについて見ていきます。

新規作成

まず、新しくファイルを作ってみます。ファイルの作成は⌘+Nで行います。こうすると、新しくタブが作成されます。ファイルの作成は、メニューの「ファイル > 新しいファイル」でも作れます。

保存

ファイルを作ったら、実際にコードを書いていくことになります。ここでは例として、適当なコードを貼り付けてみますね。コードを書いたら、今度はファイルを保存してみます。ファイルの保存は⌘+Sで行います。

const colors = ['red', 'green', 'blue']

colors.forEach((color) => {
  console.log(color)
})

このとき、保存したことがないファイルを保存するときは、名前をつけることになります。ここでは例としてmain.jsとしておきます。

保存すると、コードに色がつきましたね。これはファイル名の拡張子と呼ばれるところ、ここでいうとjsがJavaScriptと判断してくれて、見やすく表示してくれます。これもVSCodeの機能になります。ファイルの保存は、メニューの「ファイル > 保存」からでも保存できます。

ファイルの保存

閉じる

開いているファイルを閉じるときは、⌘+Wで閉じます。ファイルを閉じると、表示されていたタブがなくなります。これもメニューの「ファイル > エディターを閉じる」で閉じられます。

開く

保存したファイルを開くときは、⌘+Oで開きます。ここではさっき作ったmain.jsを開いてみますね。ファイルを開くと、このようにさっきまで表示されていたファイルが表示されました。ファイルを開くのも、メニューの「ファイル > 開く」から開けます。

その他のやり方としては、サイドバーからファイルを操作することもできます。例えば、ここからファイルを開くこともできます。ファイルを作るときは「新しいファイル」のアイコンをクリックします。ここにファイル名をつければ、ファイルを作れます。

ファイルを削除するときは、サイドバーにある消したいファイルの上で右クリックをします。ここに「削除」というメニューがあるので、これをクリックすることでファイルを削除できます。

ファイルの削除

ファイルの操作はこれからよく使っていくので、ショートカットキーの方を使いこなせるように、ぜひ練習してみてください。

文字編集

ここでは文字を編集する基本的なやり方について学んでいきます。ここでは文字の「コピー」「ペースト」「もとに戻す」「やり直し」の4つの操作について、ショートカットを見ていきます。この4つの操作はとてもよく使うので、ぜひショートカットを使えるようにしておいてください。

コピー・ペースト

ではまずコピーですが、これは文字をコピーします。やり方は、コピーしたい文字を選択して⌘+Cで、文字をコピーできます。

次にペーストですが、これはコピーした文字を貼りつけます。やり方は、貼りつけたい場所にカーソルを移動して⌘+Vです。これで文字をペーストできます。

元に戻す・やり直し

このペーストした内容をもとに戻したいときは、⌘+Zで元に戻せます。このように、ペーストする前に戻すことができます。この元に戻す処理は、ペースト以外にもいろんな処理を戻すことができるので、何か間違ってしまったら⌘+Zで戻す、というクセをつけるといいですね。

⌘+Zで元に戻したけど、やっぱりやり直したい、というときは⌘+Shift+Zでやり直せます。このように、⌘+Zで元に戻した内容をやり直すことができます。

この4つの操作はこれからよく使うことになるので、ぜひ使えるようになっておいてください。

文字検索

ここでは文字の検索と置き換えについて学んでいきます。

検索

まず検索ですが、これはファイルの中の文字を検索します。⌘+Fで検索ボックスが表示されるので、検索したい文字を入力します。するとこのように文字をハイライトしてくれます。

この状態でReturnを押すか、検索ボックスの矢印でハイライトを移動できます。この検索は、プログラミングをするときに関数名とか変数名で検索することがよくあるので、ぜひ使えるようになっておいてください。

置き換え

次に置き換えですが、これは検索した文字を別の文字に置き換えることができます。これは⌘+Option+Fでフォームが表示されます。あるいは、検索ボックスの左の矢印を押しても表示できます。

文字の置き換え

この「置換」のところに置き換えたい文字を入力して、Returnを押すと文字を置き換えてくれます。あとは、右のアイコンをクリックしても置き換えられます。左のアイコンはハイライトしている文字を置き換えてくれて、右のアイコンはマッチするすべての文字を置き換えてくれます。

置き換えは、例えば関数名や変数名を変更するときによく使うので、これも使えるようになっておくと役に立ちます。どちらもメニューの「編集」からも操作できるので、ショートカットキーを忘れたときはここから操作してみてください。

マルチカーソル

ここではマルチカーソルという機能について学びます。マルチカーソルは「文字を同時に編集する」というとても便利な機能です。実際に見てみた方が早いと思うので、実際にやってみますね。

ひとつずつ選択

ここに日曜日から土曜日まで、7つの曜日があります。ここで例えば、曜日の形式をカッコで表したくなったとします。このとき、「曜日」を選択して、⌘+Dを押します。こうすると、次の「曜日」を選択してくれます。

マルチカーソル

すべての「曜日」を選択するまで⌘+Dを押します。これで、すべての「曜日」を選択してくれました。ここで、「曜日」を削除して、矢印キーで移動しつつ、カッコを追加します。こうすることで、簡単に曜日の形式を変えることができました。

すべてを選択

他にも、今は⌘+Dを何回も押しましたが、一気にすべてを選択するショートカットもあります。ちょっと戻して、今度は「曜日」を選択しつつ、⌘+Shift+Lを押してみます。こうすると、すべての「曜日」を選択してくれます。あとはさっきと同じように編集するだけですね。

このマルチカーソルは使用頻度がとっても高いので、ぜひ使えるようにしておいてください。

コマンドパレット

ここではコマンドパレットについて学んでいきます。VSCodeにはいろんな便利な機能があって、例えば編集中のプログラミング言語を切り替えたり、みたいなことができます。こういった機能を呼び出すときにコマンドパレットを使います。

コマンドパレットは⌘+Shift+Pで表示できます。コマンドパレットを表示すると、検索ボックスとコマンドの一覧が表示されます。ここでコマンドを検索して実行していきます。

コマンドパレット

試しにプログラミング言語を切り替えてみますね。まず新しいファイルを作って、JavaScriptのコードを貼り付けてみます。この状態では、まだこのファイルがJavaScriptであると認識してくれていません。

ここで、検索ボックスに「言語」と入力します。すると「言語モードの変更」という機能があるので、これを選択します。ここでJavaScriptを選択すると、ファイルの内容をJavaScriptとして認識してくれるようになります。

他にも、ファイルの保存などもコマンドパレットからできます。いろんな機能を実行できるので、ぜひ使えるようになっておいてください。

補完 / IntelliSense

ここではコードの補完について学びます。VSCodeではIntelliSenseといわれている機能ですね。補完は、コードを入力しているときに関数や変数を補完してくれる機能のことをいいます。

実際に見てみた方が早いと思うので、例としてJavaScriptのコードを書いてみますね。

const colors = ['red', 'green', 'blue']

colors.forEach((color) => {
  console.log(color)
})

例えばこのコードのcolorsは配列という型になっていて、配列だけが使える関数というものがたくさんあります。ここでcolors.と入力してみると、colorsが使える関数の候補がたくさん出てきます。

この中から選ぶときは、矢印で移動しつつ、Tabで選択します。すると関数を自動で入力してくれました。これが補完という機能になります。

補完

もう少しコードを書いてみますね。このように、書いているときに随時関数や変数の候補が表示されていると思います。コードの補完は、使いこなすことでプログラミングのスピードが格段に上がっていくので、ぜひ使いこなせるようになってみてください。

コメントアウト

ここではコメントアウトについて学んでいきます。コメントアウトとは「コードにコメントをつけること」で、わかりやすいコードを書くためによく使う機能のひとつです。

このコメントアウトには⌘+/がショートカットとして割り当てられています。試しにJavaScriptのコードでコメントアウトをしてみますね。このように、コードがグレーで表示されました。これでコメントアウトされた、ということになります。

コメントアウト

もしショートカットを忘れてしまっても、コマンドパレットからも実行できます。⌘+Shift+Pでコマンドパレットを呼び出して、「行コメントの切り替え」を選択すればコメントアウトできます。

プログラミング言語によってコメントアウトの記号は違いますが、ショートカットキーを覚えておけば自動でコメントアウトしてくれるので、わざわざコメントの書き方を覚えておく必要がなくなります。コメントアウトはよく使うので、ぜひ覚えておいてください。

タブ

ここではタブについて学んでいきます。タブはファイルを切り替えるための機能で、エディタの上のところに表示されています。まず、例としてVSCodeのソースコードを適当に開いてみますね。

このタブを切り替えるには、⌘+Shift+]で次のタブに切り替わります。逆に、⌘+Shift+[で前のタブに切り替わります。もちろん、タブを直接クリックしても切り替えることができます。

タブ

タブを閉じるのはファイルと同じで⌘+Wですね。あとは、タブにある×アイコンをクリックしても閉じられます。このタブの切り替えもよく使うことになるので、ショートカットをぜひ使えるようになっておいてください。

ファイルの検索

ここでは編集するファイルを検索するやり方について学んでいきます。基本的には、ファイルの検索はサイドバーのエクスプローラーから探していきます。

ただファイルがたくさんあったりすると、なかなかファイルが見つからなかったりしますし、どうしてもエクスプローラーからファイルを探すと時間がかかってしまうんですね。

ここで役に立つのが⌘+Pというショートカットキーで、これを押すとファイルの検索ボックスを開くことができます。今は例として、たくさんのファイルがあるVSCodeのソースコードを開いてみています。

ファイルの検索

ここにファイル名を入力すると、ファイルを絞り込みながら検索することができます。ファイルを開くときは、ファイルを矢印で選択しつつReturnを押します。

プログラミングの作業を早くするためには、この機能に慣れることが必須になってくるので、ぜひ使えるようになってみてください。

エディタ分割

ここではエディタを分割するやり方について学んでいきます。実際に例を見てみた方が早いので、やってみますね。エディタの分割は、横に並べたいタブをドラッグ&ドロップします。するとこのように横にエディタを分割することができます。

エディタ分割

他にはアイコンをクリックすることでも分割することができます。このタブは縦にも分割することができるので、見やすい位置に分割してみてください。一応ショートカットキーもありますが、とても長いので覚えなくていいのかなと思っています。

他のやり方としては、タブを右クリックしてメニューから選ぶこともできますし、後はサイドバーのファイル名を右クリックして、メニューから選ぶこともできます。

他のファイルを見ながらコードを書くという作業するときにとても便利な機能なので、ぜひ使えるようになっておいてください。

このセクションのまとめ

以上でVSCodeの基本操作を学び終えました。おつかれさまでした。このセクションの内容をPDFでまとめているので、学習にお役立てください。

アクティビティーバー

このセクションでは、VSCodeの画面の左端にあるアクティビティーバーについて、概要を学んでいきます。アクティビティーバーについては、はじめのうちは深く学ぶ必要はないので、ここでは基本的な使い方だけにとどめています。

プログラミングを学んでいく上で、それぞれの機能について詳しく知りたくなったときに深掘りできるような、そのための基本知識について学んでいきます。

エクスプローラー

ここではエクスプローラーについて学びます。エクスプローラーはファイルを見つけるための機能で、ファイルの一覧をサイドバーに表示してくれます。

それ以外にも変数や関数を探すといった目的にも使えます。エクスプローラーにはアウトラインというところがあって、ここにはファイルの変数名や関数名を表示してくれます。

エクスプローラー

あとはGitを使っているときは、このファイルを変更した履歴も表示できます。プログラミングをするときは、基本的にこのエクスプローラーをサイドバーに表示しておくと、効率的にプログラミングができるようになります。

検索

ここでは検索機能について学んでいきます。ファイルの中を検索するときは⌘+Fでしたが、⌘+Fはひとつのファイルのみが検索の対象でした。一方でこの検索機能では、すべてのファイルを対象に文字を検索していきます。

ここでは例としてVSCodeのソースコードを開いてみています。ここで検索ボックスに検索したい文字を入力します。ヒットしたファイルはサイドバーに一覧で表示されるので、ここをクリックするとファイルの中のヒットした位置で開いてくれます。

あとは検索ボックスの下矢印を押すと、文字列を置き換えることができます。置き換え後の文字を入力すると、置き換えたときの内容を確認することができます。

検索

文字を置き換えるときは置き換えアイコンをクリックして、ヒットしたすべての文字を置き換えるときは「すべてを置き換えるアイコン」をクリックします。

このように、すべてのファイルを対象に検索や置き換えができます。この検索機能はアクティビティーバーの中でもとてもよく使うので、ぜひ使い方を覚えておいてください。

ソース管理

ここではソース管理について学んでいきます。ソースコードを管理するのはGitというツールが一般的で、このGitを操作する機能がソース管理になります。

あなたはまだGitについて学んでないかもしれませんが、どういうことができるかだけでも見ておくとあとで役に立つので、ここで基本的な使い方を見ていきます。

まずGitというのは、簡単にいうとソースコードの変更を管理してくれるツールです。今はサイドバーでソース管理を開いていますが、ここで例えば適当に文字を追加してみますね。

ソース管理

変更したファイルがあると、このようにサイドバーに変更した内容が表示されます。ファイルをクリックすると、「どこを変更したのか?」をわかりやすく表示してくれます。

変更したファイルはまず「ステージ」という処理をして、次にメッセージを書いて、「コミット」という処理を行います。最後にリポジトリにプッシュします。こうすることでファイルを変更した内容を履歴として残したり、あとは他の開発メンバーに共有したりすることができます。

VSCodeでは、こういったGitの基本的な操作をするための機能をもっています。Gitについてはたいていのことはここで完結するので、もしあなたがGitを使うときが来たらぜひここを使ってみてください。

また詳しい使い方については、例えば検索エンジンで「VSCode Git 使い方」とかで検索すると、より詳しく学べます。

実行とデバッグ

ここではVSCodeの機能である「実行とデバッグ」について学んでいきます。この機能を使いこなすのはなかなか難しいので、ここでは使っている例を示しています。「こういうものがあるんだ」ということを知っておくと、必要なときに使い方を調べられるので、ぜひ頭に入れておいてください。

まずデバッグとは「ソースコードの問題を修正する作業のこと」で、実行とデバッグという機能は「編集中のファイルをその場で実行して、プログラムの挙動を確認しながらコードを編集できる機能」のことをいいます。

ここではJavaScriptのコードを見ながら学んでいきます。まずはじめに、リンクをクリックしてlaunch.jsonという設定ファイルを作成します。これは実行とデバッグを行うために必要なファイルになります。環境は、ここでは例としてNode.jsを選択してみます。

これでデバッグが可能になりました。例えばこのコードを実行してみると、このようにコンソールに実行結果が表示されました。

実行とデバッグ

ブレークポイント

また、好きなところでブレークポイントというものを設定できます。これはプログラムを中断する場所を設定できる機能です。例えばここにブレークポイントを設置してみて、プログラムを実行してみます。すると、実行の途中でプログラムが止まりました。

ブレークポイント

ここで例えばcolorsと入力してみると、変数の中身を表示してくれます。このように、「変数の中身は何だろう?」みたいな確認ができて、結果としてソースコードの修正にとても役に立ちます。

以上が実行とデバッグの簡単な使い方ですが、詳しくは「VSCode 実行とデバッグ 使い方」などで検索すると、もっと詳しく学べます。ここではVSCodeの実行とデバッグの概要だけは頭に入れておいて、必要なときにこの機能について詳しく学べるようにぜひしておいてください。

拡張機能

ここではVSCodeの拡張機能について学んでいきます。VSCodeをインストールした後は、基本的な機能しか入っていません。この機能を拡張するものが拡張機能で、拡張機能を入れることでいろんな機能を追加することができます。

例えばVSCodeを日本語化するときにも拡張機能を入れます。ここでは拡張機能の基本的な使い方について見てみますね。

まず拡張機能の画面を開くと、インストール済みの拡張機能が一覧で表示されます。拡張機能を探すときは、この検索ボックスに文字を入れます。例えばtrailingと入力すると、このように拡張機能がヒットします。

拡張機能

これをクリックして、まず概要を確認します。これを見てみて、問題なさそうであればインストールをクリックします。するとVSCodeに拡張機能が追加されます。

拡張機能によっては再読み込みが必要なものがありますが、そのときはボタンが表示されるのでそれをクリックすれば大丈夫です。

拡張機能を削除したいときは、アンインストールを選ぶことで削除することができます。拡張機能はいつでも削除できるので、気になった拡張機能をどんどんインストールして、試してみてください。

管理

ここではVSCodeの管理メニューについて学びます。管理メニューでは、VSCodeのいろんな機能にアクセスすることができます。この中でもよく使うのが「設定」で、この設定で文字の見た目とか大きさみたいな、いろんな項目を変更することができます。

管理

基本的には標準の設定でまったく問題はないので、最初は触ることはないかもしれないですが、こだわりたくなったときには設定で変更してみるといいですね。

あとは設定については、例えばGoogleとかで「VSCode 設定 おすすめ」などで検索すると、もっと使いやすくなる設定が見つかります。

他にも管理メニューからはコマンドパレットを表示したり、VSCodeの本体の更新を確認したりもできます。今の段階では、とりあえずここにどういうメニューがあるかだけでも押さえておいてください。

このセクションのまとめ

アクティビティーバーについては以上になります。このセクションをPDFでまとめました。学習にお役立てください。

その他の操作

このセクションでは、ワークスペースやターミナルのような「いつか使うことになる機能」について、概要を学んでいきます。今はまだよくわからなくても、必要になったときに使えるようにぜひ頭に入れておいてください。

ワークスペース

ここではVSCodeのワークスペースについて学んでいきます。ワークスペースは複数のフォルダを同時に開くための機能で、例えばある開発でいくつかのフォルダを同時に編集しないといけないときなどにとても役に立つ機能です。

使い方としては、まずファイルを編集している状態でメニューバーから「名前をつけてワークスペースを保存」というメニューを選びます。ここで名前を入力すると、このフォルダをワークスペースとして保存できます。

ワークスペース

別のフォルダをワークスペースに追加するときは、メニューバーから「フォルダをワークスペースに追加」というメニューを選んで、追加したいフォルダを選びます。すると、ワークスペースにフォルダを追加することができました。

このワークスペースは、例えばひとつのWebアプリケーションでサーバー側とフロント側でフォルダを分けているときに、それぞれのフォルダをひとつのワークスペースとして管理することで、すごく便利にファイルを編集することができます。

個人ではあんまり使わないかもしれませんが、例えば会社とかでチーム開発をするときは使うこともあるかもしれないので、ぜひ頭に入れておいてください。

ターミナル

ここではVSCodeのターミナルという機能について学んでいきます。このターミナルはコマンドを実行できる画面ですが、まだコマンドのことを学んでいない方は頭に入れておく程度で問題ありません。

コマンドというのは、例えばcdという「ディレクトリを変えるコマンド」やlsという「ファイルの一覧を表示したりするコマンド」が有名だと思います。

こういったコマンドは基本的にはTerminal.appやiTermのようなターミナルソフトを使うのが一般的ですが、VSCodeの中からでも使うことができます。

ターミナルの使い方

この使い方ですが、メニューバーのターミナルのところに「新しいターミナル」というメニューがあるので、これをクリックします。ここで例えばlsというコマンドを実行すると、ファイルとディレクトリの一覧が表示されていると思います。

ターミナル

これはよく見てみると、サイドバーにあるエクスプローラーと中身が同じなんですね。ターミナルを起動すると、このエクスプローラーと同じ場所でターミナルが開かれます。例えばこのフォルダーの中でサーバーを起動したり、自動テストを実行したりするときなどにすごく役に立つ機能です。

サーバーを立ち上げたり、テストを実行するようになったときにこのターミナルを使う機会があると思うので、ぜひ概要だけでも頭に入れておいてください。

コマンドラインから開く

ここではコマンドラインからVSCodeを開くやり方について学びます。

例えばWebアプリケーションを開発するときはこのTerminal.appとかiTermのようなターミナルソフトでコマンドラインを操作するのが一般的なんですが、コマンドラインで作業しているときに「このフォルダをVSCodeで開きたい」というときが出てきます。

これはコマンドラインでcode .というコマンドを実行することで開けます。codeというのがVSCodeのことで、これに.という引数を渡してあげることで、VSCodeでこのフォルダを開くことができます。

コマンドラインから開く

今VSCodeの本体があるディレクトリにいますが、ここでコマンドを実行してみますね。するとVSCodeでフォルダを開くことができました。

これはよく使う機能なので、今はまだターミナルのことがよくわからない方でも、いつか使うことになると思います。なので今はわからなくても「こういう機能があるんだ」ということだけはぜひ頭に入れておいてください。

拡張機能

このセクションでは次の3つについて学んでいきます。まずひとつ目は、あなたがVSCodeに入れるべき拡張機能を3つ解説します。次にプログラミング言語それぞれに合った拡張機能の見つけ方を学びます。

最後にVSCodeの見た目を変えるテーマの見つけ方・変え方について学んでいきます。

入れるべき拡張機能

ここではVSCodeに入れるべき拡張機能について学んでいきます。VSCodeはデフォルトでも十分すぎる機能があるので、あまり入れるべきものはありませんが、それでもあなたが入れるべき拡張機能を3つ解説します。

Trailing Spaces

まずひとつ目がTrailing Spacesという拡張機能で、これはアイコンにもあるとおり「行の終わりのスペースを見えるようにしてくれる機能」です。

Trailing Spaces

基本的にプログラミングをするときに行の最後の空白は必要なく、むしろ邪魔になるものですが、スペースがあることに気づかないとそのまま保存してしまって、後から問題になってしまうことがあります。

この拡張機能を入れるとこの問題が解消されて、それだけでなく設定をすれば「ファイルを保存するときに自動でこの行の終わりのスペースを削除」してくれたりもします。

とくにチーム開発をするときには、行の終わりにスペースが残っていると他のエンジニアの方にも迷惑をかけることになってしまうので、この拡張機能を入れておいて「スペースを消す」習慣をつけておくといいですね。

Duplicate action

次に入れるべきなのはDuplicate actionという拡張機能です。これはエクスプローラーのファイルを右クリックしたときのメニューに「ファイルを複製する」というメニューを追加できる拡張機能です。

Duplicate action

ファイルの複製はよく使うのですが、標準機能にはメニューになく、この機能を入れるとすごく便利なので、入れておくことをおすすめします。

Bracket Pair Colorizer 2

最後がBracket Pair Colorizer 2という拡張機能です。これはプログラミングをするときによくカッコを使うと思いますが、「このカッコがどのカッコに対応してるか」というものを色分けして教えてくれる拡張機能です。

Bracket Pair Colorizer 2

複雑なコードを書くときはカッコをいくつも書くことがあって、「このカッコはどのカッコの対応してるんだろう」というのがよくわからなくなります。この拡張機能を入れておくと色分けして表示してくれるのですごくわかりやすくなって、プログラミングがはかどるようになります。

この拡張機能はメンテナンス終了のお知らせがありますが、すごくシンプルな拡張機能で、万が一で使えなくなってしまったとしてもおそらく他の開発者の方が引き継いでメンテナンスをするだろうというくらいよく使われているものなので、あまり心配しなくてもいいのかなと考えています。

ということで今回はVSCodeに入れるべき拡張機能を3つ解説しました。どれも入れるべきだと考えているので、ぜひ入れてみてください。

拡張機能の見つけ方

ここではあなたにあった拡張機能の見つけ方について学んでいきます。プログラミング言語はたくさんありますが、拡張機能にも例えばJavaScriptとかRubyとかPythonみたいな、それぞれの言語に特化した拡張機能があります。

これをひとつひとつ解説するとキリがないので、ここでは本質的な「見つけ方」について解説しますね。見つけ方を知っておけば、基本的にはどんな拡張機能でも見つけられます。

拡張機能を見つけるときは、Googleなどの検索エンジンで例えば「VSCode JavaScript 拡張機能」のように検索すると、ブログの記事などでいろんな拡張機能が紹介されています。こういった記事を見ながら、あなたが今からやろうとしているプログラミング言語に合った拡張機能を見つけてみてください。

拡張機能の見つけ方

ここで、ポイントとしては「ひとつの記事だけを鵜呑みにしない」ということですね。検索でヒットした記事を3件とか5件くらい見つつ、共通で紹介されている拡張機能を入れると、拡張機能自体の信頼性が担保されるので、安心して使えます。

テーマ

ここではVSCodeのテーマについて学んでいきます。テーマはVSCodeの見た目を変えるもので、テーマも拡張機能として提供されています。VSCodeの標準のテーマも十分見やすいと思いますが、もっと見やすいものもあります。

テーマを変えると気分転換にもなるので、ぜひいろいろ見てみてください。テーマについては完全にあなたの好みで選べばいいです。

見つけた方はいろいろありますが、いちばんわかりやすいのはVSCodeの公式サイトだと思います。VSCodeの公式サイトのメニューのExtensionsを選んで、一番下のThemesを選ぶとテーマの一覧を見ることができます。

GitHub themes

個人的におすすめしているのはGitHubが公式で提供しているテーマです。インストール方法は拡張機能の検索ボックスに「github」と入力して、「GitHub Theme」をインストールしてみてください。インストールすると、このようにGitHubのテーマを設定することができます。

このテーマの選択画面は、左側のアクティビティーバーの設定メニューの「配色テーマ」から選ぶことができます。ぜひいろいろ試してみてください。

おわりに

これからの学び方

お疲れさまでした。以上でVSCodeのコースは完了となります。最後に、これからのVSCodeに関しての学び方についてお話ししますね。

これからの学び方

これからはふだんのプログラミングなんかの作業を通して「もっと効率化できることはないのかな」というのを考える時間をぜひとってみてください。例えばRubyを書いていて「なんかコードを書くのが遅いな」とか「もっと早く書けるようになりたいな」と思ったら、例えば「VSCode Ruby 拡張機能」などで拡張機能を見つけてみてください。

こういった「自分で問題を見つけて解決する」ということの積み重ねが、VSCodeの使い方だったり、ひいてはエンジニアとしての成長にもつながっていきます。ただ、何よりもこれからあなたが楽しくプログラミングを続けられるようになったら私もすごくうれしいと思っています。

よかったらUdemyのコースの方も受講いただけるとうれしいです。なにかコースの中で問題などあれば、ぜひメッセージの方でご連絡いただければ改善したいと思います。それでは、ここまでコースを受講していただいて本当にありがとうございました。

付録:チートシート

最後に、付録としてmacOSとWindows用のショートカットをまとめたチートシートを作成したので公開します。VSCodeの公式サイトで公開されているチートシートを元に、使用頻度の高いものだけをまとめました。ぜひ学習にお役立てください。

applis
エンジニアとしてのんびり暮らす
お問い合わせ
ご意見・ご質問やお仕事のご依頼などは下記よりお願いいたします
お問い合わせ
© applis