今回は、VS Codeをもっと使いやすくする「拡張機能」についてご紹介させて頂きます。

デフォルトのままでも十分に使いやすいのですが、簡単にタグの変更をしたり、入力のミスを減らしてくれる機能が色々とありますので、ぜひインストールして使ってみてください。

また以前は拡張機能で使用していたブラケットに色を付ける機能は、VS Codeのデフォルトの機能として提供されています。

こちらの設定方法についてもご紹介させて頂きます。

Auto Rename Tag

インストール

拡張機能の検索ボックスに、「Auto Rename Tag」と入力します。

一番上に出てくる「Auto Rename Tag」をクリックします。

「インストール」ボタンをクリックします。

使い方

矢印の先にある「ol」タグを「ul」タグに変更してみます。

通常は、開始タグと終了タグの「ol」をそれぞれ変更しなくてはなりませんが、こちらの拡張機能をインストールしておくと開始タグの「ol」だけを変更すれば、終了タグは自動的に変更されます。

終了タグも「ul」タグに変更されました。

似たような使い方として、Ctrl+Dを使う方法もあります。

ショートカットキーを複数回、押す必要がないので、「Auto Rename Tag」の方が使い勝手が良いと感じることもあると思いますが、Ctrl+Dであれば、複数のタグを一気に変更することが出来ます。

どちらが良いかは一概にいえないので、実際に作業してみて使い分けるのが良いかもしれません。

indent rainbow

インストール

拡張機能の検索ボックスに、「indent rainbow」と入力します。

一番上に表示された「indent rainbow」を選択して、インストールボタンをクリックします。

使い方

特に説明することはないのですが、インデントの部分に色がついています。

見やすくなったと感じる方もいれば、見えにくくなったと感じる方もいらっしゃると思います。

Path Intellisense

インストール

拡張機能の検索ボックスに、「Path Intellisense」と入力してください。

一番上に表示された、「Path Intellisense」をクリックしてインストールしてください。

使い方

パスを補完してくれる機能になります。

Prettier（フォーマット）

インストール

拡張機能の検索ボックスに、「Prettier」と入力してインストールします。

使い方

まずは通常の状態で、「フォーマット（コード整形）」してみましょう。

操作は、Shift+Alt+Fを押します。

フォーマット前に比べて、スッキリ見やすくなりました。

続いて、「Prettier」をインストールしてフォーマットを行ってみます。

なお、「Prettier」を使用するには、事前に設定を変更する必要があります。

Ctrl+,で設定画面を開きます。

検索ボックスに「formatter」と入力します。

「Default Formatter」の部分でプルダウンメニューから、「Prettier」を選択してください。

これで設定は完了です。

こちらが、「Prettier」でフォーマットした状態です。

それぞれを比較して、その違いを確認してみてください。

Beautify （フォーマット）

拡張機能の検索ボックスに、「Beautify 」と入力してインストールします。

基本的な操作は「Prettier」と同じになります。

お勧めのフォーマッターが２つあるのですが、どちらかと言うと「Beautify 」の方がお勧めです。

「Prettier」は多くのクリエイターが使っていると言われますが、HTMLに関してはちょっと問題があるので、初心者の方は、「Beautify 」の方が良いと思います。

Code Spell Checker

インストール

拡張機能の検索ボックスに、「Code Spell Checker」と入力してインストールします。

使い方

単語のスペルを間違うと電球アイコンで知らせてくれます。

Bracket Pair Colorization　（デフォルト機能）

設定

Ctrl+,を押して設定画面を開きます。

画面上部にある検索ボックスに、「bracket」と入力します。

「Bracket Pair Colorization」にチェックを入れます。

「 Guides: Bracket Pairs」を「true」に変更します。

以上で設定は完了です。

HTMLやCSSの学習ではほとんど効果がありませんが、Java Scriptを学習していくと効果が出てきます。

まとめ

VS Codeを快適に使う5つの拡張機能についてご紹介させて頂きました。

どの機能も最初はあまり効果がありませんが、学習を進めていくうちにその魅力に気がついて頂けると思います。

但し、どの拡張機能にも言えることですが、実際にご自身が使用してみて、あまり効果がないようであれば無理に使用する必要はありませんので、ご自身の環境に合わせて調整してください。

今回も最後までお読み頂きありがとうございました。

VS Codeを無事にパソコンにインストールすることが出来たら、早速使ってみましょう。

と言いたいところですが、まずは「事前準備」が必要になります。

事前準備と言っても簡単ですので、すぐに終了します。

（すでに事前準備が済んでいる方は、読み飛ばしてください。）

そして準備が出来たら、早速ファイルを作成してみましょう。

事前準備　拡張子の表示

拡張子とは

「拡張子」とは、簡単に説明すると、ファイルの末尾、「.」で区切られた末尾に書かれている文字列のことになります。

皆様も一度は目にしたことのある、「.jpeg」や「.txt」、「.html」などが拡張子になります。

事前準備

「拡張子」の意味がわかったところで、なぜ事前準備が必要かというと、WindowsやMacの初期設定は、「拡張子」を表示しないようになっているのです。

プログラミングにおいて、この「拡張子」はとても大切な項目の一つですので、常に表示されるように設定を変更していきましょう。

コントロールパネルを開いて、右上の検索ボックスに「フォルダ」と入力してください。

「エクスプローラーのオプション」から「すべてのファイルとフォルダーを表示」をクリックします。

「エクスプローラーオプション」が表示されたら、最初に、「登録されている拡張子は表示しない」のチェックを外します。

「ファイルとフォルダーの表示」から「隠しファイル、隠しフォルダー、および隠しドライブを表示する」にチェックを入れます。

最後に「適用」をクリックすれば、「事前準備」は完了です。

フォルダーの作成

まずはフォルダーを作成します。

名前は何でも良いので、分かりやすいものにしておきましょう。

フォルダーを開く

「エクスプローラー」から、サイドバーに表示されている「フォルダーを開く」をクリックして、先程作成した「VS code sample」というフォルダを選択します。

フォルダを選択したら、矢印の先にある「フォルダーの選択」をクリックします。

初回はこのような画面が表示されると思いますので、「親フォルダー｀デスクトップ｀内のすべてのファイルの作成を信頼します。」にチェックを入れて、「はい、作成者を信頼します」をクリックします。

フォルダー名が表示された、このような画面が表示されていれば完了です。

まだファイルを作成していませんので、何も表示されていない状態です。

ファイルを作成する

「VS CODE SAMPLE」と表示されている辺りにマウスを移動すると、アイコンが４つ表示されますので、一番左にあるアイコン（新しいファイルの作成）をクリックします。

ボックスが表示されますので、「index.html」と入力してください。

入力が完了したら、画面のどこかをクリックするか、Enterを押してください。

このように新しいHTMLファイルが作成されました。

同様の手順で、CSSファイルやJSファイルを作成していきます。

まとめ

VS Codeを始める前の「事前準備」は以上で完了です。

あとはVS Codeの基本的な使い方をマスターして、プログラミングの学習を始めていきしょう。

今回も最後までお読み頂きありがとうございました。

ここではVS Codeの便利な使い方、「マルチカーソル機能」と「検索・置換」を中心にご紹介させて頂きます。

どの機能も覚えておくと大変便利ですし、作業の効率化にも繋がります。

しっかり覚えて積極的に日常の作業に取り入れてみてください。

マルチカーソル機能

「マルチカーソル機能」は簡単に言うと、カーソルを増やすことが出来る機能です。

他のエディタにはあまりない機能ですが、とても便利なものなので、ぜひ使いこなしてみてください。

画面に1週間の曜日を記入してみました。

これらにまとめて、「liタグ」を付けてみます。

月曜日の前にカーソルを置いて、Ctrl+Altを押しながら、↓を日曜日まで6回押します。

少し分かりにくいですが、カーソルが月曜日から日曜日まで縦に増えています。

続いてこの状態で「liタグ」を入力していきます。

すると、1行分の入力で、すべての行に「liタグ」が挿入されました。

画面上では閉じタグも自動で入力されてしまっているので、閉じタグを曜日の後ろに移動させます。

Shiftを押しながら→を5回押して画像のように閉じタグを選択します。

あとは「切り取り」を選択して、Ctrlを押しながら→を押してカーソルを曜日のあとに移動させます。

そして最後に「貼り付け」をすれば完了です。

Endを押して、カーソルを行の最後に移動させることも出来ます。

検索

一般検索

Ctrl+Fを押すと画面上部に「検索ボックス」が表示されます。

検索ボックスに「li」と入力すると、赤い枠線の部分にある「li」がすべて選択されました。

画像では一番最初の「li」が選択されていますので、移動させるには画面右上にある矢印キーをクリックするか、Enterを押して移動させてください。

大文字と小文字を区別する

通常の検索では、「LI」と大文字で検索しても、小文字の「li」を検索してくれます。

大文字と小文字を区別して検索するには、矢印の先にある、「Aa」ボタンをクリックして検索します。

（検索した後にクリックしても大丈夫です）

すると先程まで選択していた「li」が解除され、検索ボックスの後ろに「結果はありません」と表示されました。

このように大文字と小文字の区別が必要な場合は、「Aa」ボタンをクリックして検索してください。

単語単位で検索する

通常の検索では、入力した文字に該当するすべての場所を選択してくれます。

この場合は、「li」タグを検索するために、「li」と入力したのですが、５行目の「link」の「li」も選択されています。

このように本来検索する必要のない部分が選択されないようにするには、矢印の先にある、「ab」の下にラインが引かれたボタンをクリックして検索します。

（検索した後にクリックしても大丈夫です）

先程の選択が解除されました。

これで探していた「li」タグのみが選択されるようになりました。

正規表現を利用する

しばらくは使用することはありませんが、「.」と「*」が合わさってボタンをクリックすると「正規表現」を利用して検索することが出来ます。

「正規表現」については別の記事にてご紹介させて頂く予定です。

横断検索

Ctrl+Shift+Fで「横断検索」をすることが出来ます。

「横断検索」とは複数のファイルを同時に検索することが出来る機能です。

ここでは、「li」を検索した場合を表示していますが、「index.html」と「style.css」の２つにある「li」を表示しています。

通常の検索と同じように、大文字と小文字の区別や、単語ごとなど条件を付けて検索することも可能です。

ショートカットキーを使わなくても、アクティビティバーの検索からも同様の結果を得ることが出来ます。

置換

Ctrl+Hを押すと画面右上に検索の時と同様にボックスが表示されます。

先程は検索ボックスだけでしたが、その下に「置換」と書かれたボックスも表示されています。

使い方はとても簡単で、検索ボックスに検索したいテキスト等を入力して変更したいテキスト等を置換ボックスに入力します。

ここでは検索ボックスに「ul」と入力して、置換ボックスに「ol」と入力してみます。

10行目と20行目が「ul」になっているのを確認してください。

この状態で①をクリックすると上から順番に「ul」が「ol」に置き換わります。

②をクリックすると、「ul」すべてが同時に「ol」に置き換わります。

「ul」が「ol」に置き換わりました。

なお、ボックスの左にある矢印をクリックすると、検索ボックスのみにすることが出来ます。

続いて、月曜日を検索してみます。

赤い枠線の中にある月曜日がすべて選択されました。

この状態で置換ボックスを空欄のままにして、「すべて置換」をクリックします。

月曜日がすべて削除されました。

クイックフィックス

「クイックフィックス」はコードに問題があるときに、解決策を表示してくれる機能です。

ここでは本来、「color」と書かなくてはならないのですが、「clor」と書いてしまっています。

電球アイコンが表示されているので、間違いはすぐに気がつきます。

このようなときに、「clor」のどかかにカーソルを置いた状態で、Ctrl+.を押すと解決策が表示されます。

幾つかの候補が表示されますので、入力すべき単語をクリックします。

ここでは、「Rename to `color`」をクリックします。

無事に「color」に修正されました。

まとめ

いかがでしたか。

すでにご存知の方も多かったと思います。

今回ご紹介させて頂いた中では、特に「検索・置換」は便利でよく使う機能になります。

内容は随時更新していきますので、お時間があるときにぜひまたお立ち寄りください。

今回も最後までお読み頂きありがとうございました。

今回は、VS Codeの基本的な操作、「ショートカット」についてご紹介させて頂きます。

プログラミングを行う上でとても重要になるのが、「正確性」と「作業効率」です。

これらを確実なものにするためにショートカットを使うことは大変重要ですので、ぜひこの機会に覚えてみてください。

これからプログラミングを始めようとしている方は、画面に記載されているHTMLについて理解する必要はありません。

ショートカットキーを使うと何が出来るのかだけを理解して、あとは実際の操作に合わせて覚えていってください。

学習をしながら操作をしていれば、自然と身についてしまうと思います。

ショートカットキーを覚えよう

VS Codeに限ったことではありませんが、ソフトを使って作業をするときに、絶対に覚えておいて欲しいのが「ショートカットキー」での操作です。

普段Macを使っている方は、比較的ショートカットキーに慣れている方が多いのですが、Windowsを使っている方は、エクセルやワードを使いこなせるような方でも、ショートカットキーをあまり使用されない方が多い印象です。

プログラミングにおいて、作業の効率化、コードを書くときの作業時間の短縮（時短）はとても重要な要素ですので、ぜひこの機会に覚えてしまいましょう。

ショートカットキー一覧

基本操作

カーソル関連

検索関連

修正関連

フォーマットは個人的に、最もお勧めのショートカットキーの一つです。

新規ファイルと保存

Ctrl+Nで新規ファイルを作成します。

Ctrl+Sでファイルを保存します。

新規ファイルに対して操作したので「名前を付けて保存」画面が表示されていますが、すでに作成したファイルに対して操作を行うと上書き保存されます。

すでに作成したファイルに対して、別の名前で保存したい時は、Ctrl+Shift+Sを押してください。

タブの移動

Ctrl+Tabでタブを移動します。

画面上部に現在開いているタブが表示されますので、移動したいタブを選択します。

サイドバーの表示・非表示

Ctrl+Bでサイドバーの開閉をすることが出来ます。

Ctrl+Zで元に戻ります。

タイプミスをしたときや間違って入力したときに有効です。

Ctrl+Shift+Zで元に戻したものを取りやめます。

Ctrl+Zで戻ったけどやっぱり止めたいときなどに活躍します。

カーソルの移動方法

カーソルの移動方法です。

画面では少し分かりにくいと思いますので、実際に操作して確認してください。

• ①Ctrl+Home：ファイル内の最上部に移動します。
• ②Ctrl+End：ファイル内の最下部に移動します。
• ③Home：テキストの先頭に移動します。
• ④End：テキストの最後に移動します。

上記の操作にShiftを加えるとカーソルのある位置から移動場所までの範囲を選択することが出来ます。

こちらも実際に操作して確認しておいてください。

選択しながらカーソルを移動する

画像では少し分かりにくいのですが、</head>の後ろにカーソルがある状態で、shiftを押しながらカーソルを動かすと動かした範囲を選択してくれます。

文字では伝わりにくいので、実際に操作してみてください。

行のコピーアンドペースト

Ctrl+Cで行をコピーします。

通常、ワードやエクセル、ブラウザでキーワードなどをコピーする時は、コピーしたい範囲を選択して、Ctrl+Cを押しますが、VS Codeの場合は範囲を選択する必要がありません。

但し、行にある個別の単語や範囲をコピーしたい場合は選択する必要があります。

Ctrl+Vでペーストします。

1行まるごとコピー＆ペーストされました。

Ctrl+Xを押すと、切り取って貼り付けることが出来ます。

行の移動

Alt+↑↓を押すと行を上下に移動することが出来ます。

9行目の<title>Document</title>を12行目までに移動させるには、カーソルを9行目のどこかに置いて、Altを押しながら↓を3回押せば移動出来ます。

また同時にAltを押しながら操作すると移動した分だけ行がコピーされます。

こちらは実際に操作して確認してください。

改行

Ctrl+Enterを押すと改行します。

特徴的なのは、文の途中にカーソルがある場合でも改行することが出来ます。

画面では、contentの前にカーソルがありますが、この状態でCtrl+Enterを押すと下に新しく1行追加されます。

また同時にShiftを押すと上に改行（1行追加）することが出来ます。

コメントアウト

Ctrl+/を押すとコメントアウトすることが出来ます。

<!–  –>と自動で入力されます。

ここではHTMLファイルを使用していますが、他の形式であれば、それぞれに沿ったコメントアウトが表示されます。

もう一度、Ctrl+/を押すとコメントアウトが外れます。

複数範囲選択

Ctrl+Dで複数範囲選択をすることが出来ます。

「color」の前後でCtrl+Dを押すと、まず最初の「color」を選択します。

この時点では下の「color」は候補になっている状態です。

続けてもう一度、Ctrl+Dを押すと下の「color」も選択されるようになります。

複数範囲選択 2

先程は同じテキストを複数選択する方法をご紹介させて頂きましたが、こちらは違うテキストを複数選択する方法になります。

「section」内のすべての「id」を選択したい場合、Altキーを押しながら、それぞれの「id」を選択していきます。

すべての「id」を選択したら、コピーして、他のファイルに貼り付けます。

JavaScriptで変数や定数を定義する時に活躍します。

まとめ

実際のコーディング作業で必要となるショートカットキーは概ねご紹介させて頂いておりますが、最初からすべてを覚えようとする必要はありません。

実際の作業の中で使ってみれば、自然と覚えてしまうと思います。

またすべての作業をショートカットを使うのが良いと言うわけでもありません。

作業によってはマウスを使った方が良い場面もあると思いますので、まずは色々と試して頂いてご自身のあった方法を見つけ出してください。

今回も最後までお読み頂きありがとうございました。

今回はVS Codeの基本的な操作についてご紹介させて頂きます。

画面上部にあるメニューバーは、一般的なソフトウェアと同じような仕様になっていますが、画面左側にある「アクティビティバー」と画面下にある「ステータスバー」はVS Codeならではの場所になりますので、この2つを中心にご説明させて頂きます。

最初のうちは聞き慣れない言葉もあると思いますが、実際に使っていればすぐに慣れてしまいますので、一通りの操作を確認してみてください。

アクティビティ バー

画面の左側にあるのが「アクティビティ バー」になります。

表示されているアイコンは人によって違う場合がありますが、この5つがデフォルトになっています。

エクスプローラー

一番上のアイコンは「エクスプローラー」になっています。

画面ではまだ何も開いていないので、表示されていませんが、フォルダを開くと作成されたファイルに簡単にアクセスすることが出来ます。

検索

虫眼鏡アイコンは「検索」になっています。

一般的な検索よりも大変便利な機能になっています。

また「置換」ボックスも一緒に表示されています。

ソース管理

3番めのアイコンは、「ソース管理」になっています。

「Git」機能に関連する場所になりますので、しばらくは無視して頂いて問題ありません。

詳しい内容は別記事にてご紹介させて頂く予定です。

実行とデバッグ

再生ボタンに虫がついたようなアイコンは、「実行とデバッグ」アイコンになります。

プログラムのソースコードのバグを取り除いたりするときに使用します。

こちらもしばらくは気にする必要はありません。

拡張機能

一番最後のアイコンは、「拡張機能」のアイコンになります。

VS Codeを日本語化するときにすでに使用しています。

デフォルトではサイドバーの中に、「インストール済み」の拡張機能が表示されています。

またその下には、「推奨」の拡張機能も表示されています。

サイドバーの上にある3点リーダーをクリックして、「表示」をクリックすると、「インストール済み」、「推奨」以外にも、「有効」、「無効」という項目が用意されています。

これらはインストール済みの拡張機能が「有効」になっているものと「無効」になっているものに分けて表示させることが出来ます。

どれを表示させて、どれを表示させないかは実際に利用してみて、好みで選択してください。

アカウント

アクティビティバーの下には、「アカウント」アイコンが表示されています。

「アカウント」に関しては、いずれ作成したほうが良いですが、しばらくはこのまま利用しても問題はありません。

作成するメリットとしては、複数のPCで利用するときに同じ設定で利用できることなどが挙げられます。

管理

一番下にあるアイコンは「管理」になっています。

「管理」では幾つかの操作をすることが出来ますが、とりあえず最初に行えることは、「VS Codeの画面の配色を変更すること」になると思います。

配色テーマの変更

「管理」をクリックして、「配色テーマ」をクリックします。

画面上部に選択出来るテーマが表示されています。

↑、↓キーでプレビューを見ながら選択することが出来ます。

VS Codeのデフォルトは、「既定のDark」になっていますので、気になるテーマがなければ、デフォルトで利用するのが良いかと思います。

アクティビティ バーの表示設定

アイコンの表示・非表示

アクティビティバー上で右クリックするとメニューが表示されます。

バーに表示させたいアイコン、表示させたくないアイコンを選択することが出来ます。

チェックが付いているものが表示されています。

サイドバーの移動

アクティビティバーを右へ移動させることも出来ます。

「サイドバーを右へ移動」をクリックしてください。

アクティビティバーとサイドバーが右へ移動しました。

元に戻すには、同じ手順で「サイドバーを左へ移動」をクリックしてください。

バーを非表示にする

VS Codeに慣れてきたり、画面が小さい方は、アクティビティバーが邪魔に感じる場合もあるかと思います。

そんな時は、「アクティビティ バーを非表示にする」をクリックしてください。

アクティビティバーが表示されなくなりました。

サイドバーも隠してしまえば、エディタのみを表示させることも可能です。

アクティビティバーを再度表示させるには、メニューバーの「表示」→「外観」→「アクティビティバーを表示する」をクリックしてください。

ステータスバー

画面の一番下にあるのが、「ステータスバー」と呼ばれる部分になります。

ここからはこちらのご説明をさせて頂きます。

まず一番左にある、丸に☓が書かれている部分をクリックしてください。

問題

画面に、「問題、出力、デバッグコンソール、ターミナル」の4つの項目が表示されました。

それぞれ学習を進めていくと使用する機会があると思いますが、しばらく頻繁に使用するのが「問題」になります。

こちらは入力内容に問題があったときに、問題のある部分と解決方法を表示してくれる便利な機能になります。

この画面では、「font-size : 16px;」と入力しなくてはならない場所で、「size」を「sie」と入力してしまっています。

そのため4行目に電球アイコンがついて、下の「問題」部分にどこが問題であるかの説明が記載されています。

このように問題を知らせてくれるのは、学習を始めたばかりの時は大変ありがたい機能です。

カーソルの位置

「行１、列１」と書かれた部分は、「カーソルの位置」を表示しています。

長いコードを書いているとカーソルがどこにあるのか分からなくなってしまうときがありますので、そんなときに役立ちます。

インデント

「スペース４」と書かれた部分は「インデント」と呼ばれる部分になります。

「インデント」とは、「字下げ」のことであり、矢印の先にあるスペースの数が表示されています。

「インデント」の数は変更することが可能です。

ステータスバーの「スペース４」の部分をクリックすると、画面上部にメニューが表示されますので、「スペースによるインデント」をクリックします。

1から8まで表示されますので、変更したい数をクリックすれば、スペースの数が変更されます。

文字コード

「UTF-8」と書かれた部分は「文字コード」になります。

これから学習される方は、とりあえず気にしなくて良い部分です。

HTMLを書く時は必ず文字コードを「UTF-8」にして書くようにしましょう。

改行コード

「LF」と書かれた部分は、「改行コード」になります。

「改行コード」とは、改行を表す特殊文字のことになります。

macOS、Linuxの場合は、「LF」、Windowsの場合は「CRLF」になります。

デフォルトでは設定が「Auto」になっていますので、ご利用の開発環境によって自動的にどちらかが表示されていると思います。

これから学習を始める方はこちらも気にしなくて大丈夫です。

言語モード

「HTML」と書かれた部分は、「文字コード」になります。

現在開いているファイルが、「HTMLファイル」なので、「HTML」と表示されていますが、「CSSファイル」を開いていれば、「CSS」と表示されます。

VS Codeがファイルの拡張子をみて、自動で文字コードを指定しているので、新しくファイルを作成する場合は、拡張子を間違わないように作成しましょう。

文字コードは手動で変更することも出来ますが、基本的には使用することはないと思います。

フィードバックと通知

一番右端にあるのが、「フィードバック」と「通知」になります。

「フィードバック」はVS Codeに対して何か意見があったり、バグがあったりした場合に連絡する場所になっています。

「通知」は何かお知らせがあるときはベルマークに、「●」が付いて知らせてくれます。

まとめ

沢山の用語と沢山の項目が出てきましたが、実際のコーディングでは使用する部分は限られています。

一つ一つの項目をあまり詳しく掘り下げてしまうと、プログラミングを始める前に嫌になってしまいますので、実際の作業で分からない場合にその都度確認してみるのが良いと思います。

今回も最後までお読み頂きありがとうございました。

HTML、CSS、Javascriptのどれを始めるにしても、まず必要になるのが「テキストエディタ」。

これからプログラミングを始める方には、聞き慣れない言葉かもしれませんが、いわゆるプログラムを書くためのソフトです。

少し前までは、いろいろなソフトがあり、どれを使うか迷うことがあったのですが、現在では今回ご紹介させて頂く、「Visual Stuido Code」一択と言っても過言ではありません。

（もちろん今後新しいソフトが出てくることがあるかもしれませんが、、、）

その魅力をここで挙げるにはキリがないのでやめますが、無料で使えて、MacでもWindowsでも使えて、初めての方から中上級者まで使える魅力的なソフトです。

特にこれからプログラミングを始めようとする方であれば、無料で利用できるのは大きな魅力です。

さて、「Visual Stuido Code（略してVS Code）」のインストール方法ですが、すでに数多くの記事がネットで紹介されていますが、一応当記事でも簡単にご紹介させて頂きます。

ダウンロード

出典：Visual Studio Code

まずはVSCodeの公式サイトにアクセスします。

画面中央に「Download for Windows」と書かれた場所がありますので、こちらをクリックしてください。

クリックすると直ぐにインストールが始まります。

インストール

パソコンのダウンロードフォルダに、「VSCodeUserSetup-～.exe」という名前のファイルがありますのでこちらをダブルクリックしてください。

（Chromeをお使いであれば、ブラウザの左下にファイルが表示されていると思いますのでそちらをダブルクリックしても構いません）

使用許諾契約書の同意画面が表示されますので、「同意する」にチェックを入れて、「次へ」をクリックしてください。

インストール先の指定画面が表示されますので、「次へ」をクリックします。

インストール先はデフォルトで問題ありませんが、ご希望の場所があれば、そちらを指定してください。

スタートメニューフォルダの指定画面が表示されますので、「次へ」をクリックします。

名前を変更したい場合はお好きな名前に変更してください。

またスタートメニューフォルダを作成しない場合はチェックを入れて進んでください。

追加タスクの選択画面が表示されました。

デスクトップ上にアイコンはあった方が良いと思いますので、「作成する」にチェックを入れて「次へ」をクリックします。

（不要な方はチェックを入れなくても大丈夫です）

インストールの準備完了画面が表示されますので、「インストール」をクリックしてください。

完了画面が表示されたら、インストールは終了です。

「完了」ボタンをクリックするとVS Codeが自動的に起動します。

無事VS Codeが起動しました。

日本語化

続いてVSCodeを日本語の環境で利用できるように、「日本語化」していきます。

画面一番左にあるメニューから「Extensions（拡張機能）」をクリックします。

（ショートカットキー、Ctrl+Shift+Xでも表示されます。）

表示された部分の一番上にあるボックスの中に、「japanese」と入力します。

一番上に、「Japanese Language Pack for Visual Studio Code」というExtensionが表示されますので、こちらをクリックします。

画面右側に詳細が表示されますので、「Install」ボタンをクリックします。

画面右下に、「In order to use VS Code in Japanese, VS Code needs to restart.（日本語でVS Codeを使うにはリスタートが必要です）」と表示されますので、「Restart」をクリックします。

このように日本語化されたページが表示されれば、拡張機能のインストールは完了です。

まとめ

いかがでしたか。

インストールに関しては特に難しい場所はなかったと思います。

次回以降は実際にどのように使って行くのかについてご紹介させて頂きます。

なお、拡張機能のインストール方法は使用する言語や環境によって今後も必要となることがありますので、しっかりと覚えておいてください。

最後までお読み頂きありがとうございました。