Visual Studio Code（以下VSCodeで統一）はMicrosoft社の提供する無償の「ソースコードエディタ」のソフトウェアです。VSCodeはWindowsのほか、Linux・macOSで利用できます。
このソフトウェアを使用することで、Webプログラム開発を効率的に行うことが出来ます。

VSCodeを使うメリット

正直なところ、このソフトウェアをインストールしなくても、Windows（もしくはMac）で標準搭載されているメモ帳等のテキストエディタでも、Webプログラム開発を行う事は出来ます。
ではテキストエディタを使用すれば良いんじゃないかと言われると、答えはNoです。

何故ならば、テキストエディタに問題集通りのコードを入力し、Webブラウザから問題集に沿った変化があるか確認した際に「あれ？変化していない。。。打ち間違いかな？」といった状態に一度は必ず陥ると思います。
　こういった場合、初学者の方はその原因がどこに存在するのか、またそもそも間違っているのかどうかすら、判断できないと思います。そのような状態で問題集とにらめっこしたり、もう一度コードを書き直してみたりして時間を費やすことはちょっと非効率的ですよね。

そこで、VSCodeが役立ちます。

先ほど例で説明した様な問題点を効率的に解消できるテキストエディタと思ってください。例えばコードの書き間違いに色を付けてユーザーに指摘してくれたりといった、プログラマーに役立つ機能が沢山あります。

また「Web Development Essentials」の試験範囲では、テキストエディタだけでは動作しないコードを書く必要もあります。これもWindows（もしくはMac）に搭載されている機能を用いると動作可能ではあるのですが、VSCodeを使用することでも大体は解決できます。
　これらの理由から、VSCodeを利用するとストレスなくWeb開発が行えるでしょう。

ちなみに、VSCodeはプログラミングの初級者から上級者まで利用されており、かなり実践向きのソースコードエディタです。この機会にソースコードエディタの利便性を学んでみましょう。

VSCodeをインストールしよう

 VSCodeのインストール手順：：（※Windowsのダウンロード手順で説明します。）

①VSCodeのダウンロードはこちらから行います。Windowsを利用している方は左の黄色枠内にある「Windows」を選択します。Macを利用している方は右側の黄色枠内にある「Mac」を選択します。ダウンロードが完了した後、タスクバーにある「エクスプローラー」を選択します。

②選択後にダウンロードフォルダを選択すると、VSCodeの実行ファイル（.exe）が表示されますのでダブルクリックをして、VSCodeのインストールを行います。

③利用契約書の同意に関して、「同意する」を選択し、「次へ」を選択します。

④「デスクトップ上にアイコンを作成する」を選択し、「次へ」を選択します。

⑤「インストール」を選択します。

VSCodeの日本語化

インストール後のVSCodeは初期設定は英語表記になっています。その為、日本語化して使いやすくしましょう。

①画面左にある拡張機能（Extensions）を選択します。また赤線部をドラッグ＆ドロップすることで、拡張機能のメニュー幅が変化する為、見やすい位置に調整してください。

②画面上部に検索フォームが表示される事を確認し、フォーム内に「Japanese」と入力します。検索フォーム下部に「Japanese Language Pack for Visual Studio Code」が表示されることを確認します。

③「Japanese Language Pack for Visual Studio Code」の右下、または詳細説明に表示されている、黄色枠の「install」を選択します。

④インストール完了後、画面右下に表示される「Restart Now」を選択すると、VSCodeが再起動します。
以上で、VSCodeが日本語化することが出来ます。

作業ディレクトリの作成

「ディレクトリ」とは、厳密には異なりますが、パソコン上での「フォルダ」を意味します。Web開発を行う際に、画像ファイルやwebサイトを構成するファイル等を保存先として指定し、操作するフォルダの事を作業ディレクトリと呼びます。

この作業ディレクトリはVSCodeを使用して、作成することが出来ます。
本記事では、「lesson」という名前のフォルダをデスクトップに作成していきます。

作業ディレクトリの作成手順

①画面上のメニューから、表示（V）を選択し、ターミナルを選択します。

②ターミナルを選択後、画面下部にターミナルが表示されることを確認します。

③lessonフォルダを作成する下記コマンドを実行します。（※WindowsとMacOSではコマンドの内容が異なる事に注意しましょう。）

＜Windowsの場合＞

C:\Users\ユーザ名> mkdir  $env:USERPROFILE\Desktop\lesson

※ 「\」はバックスラッシュといって、「￥」キーを使って挿入します。

＜MacOSの場合＞

>mkdir $HOME/Desktop/lesson

④デスクトップ上にlessonフォルダが作成されたことを確認します。
フォルダ作成が完了した後、VSCodeでlessonフォルダの中にファイルを作成します。
画面上にあるファイル（F）を選択し、新しいテキストファイルを選択します。
選択後、画面中央に「Untitled-1」というタイトルのファイルが作成されます。
ファイルの保存はファイル（F）を選択後、保存を選択する方法もありますが、頻繁に使用するため、キーボードのショートカットキーを使用します。

⑤上記ショートカットキーを入力するとポップアップが表示されるので、ファイル名を「index.html」に変更し、保存先を「lesson」に指定します。

以上で、作業ディレクトリの作成は終了です！

VSCodeの使い方は試験範囲ではありませんが、覚えておいて損はありません、この機会に覚えてしまいましょう！

ブラウザの紹介

Web開発において、作成したコードの表示を確認する為にWebブラウザというソフトウェアが必要となります。皆さんがインターネットを介してwebサイトを閲覧する際に使用しているソフトウェアがwebブラウザです。
特にこだわりが無ければ、世界で最も使用されている「Google Chrome」をお勧めします。

WindowsまたはMacでは初期状態でwebブラウザがインストールされています。代表的なwebブラウザには「Google Chrome」、「Microsoft Edge」、「Safari」、「Firefox」があります。
これらのブラウザは次の章、「ウェブアプリケーションとアーキテクチャ」でも紹介しますので、是非ご確認くださいね！

「031.2ウェブアプリケーションとアーキテクチャ」

それでは、今回はここまで～。