はじめに
この記事は2024年GDGoC Aizu Beginner's Hackathon の参加者に向けて書いたものになります。
2025/05/31追記: 想定より学内での需要が増えたため、恥ずかしながら一般公開させていただきました。何らかの会津大学内で行われたイベントにてVSCodeをインストールする必要が出た場合にこの記事を利用してくださると幸いです。また、間違いや不確かな点あればX:@Aizu_AizuAizuまでご連絡ください。速攻で直します。
この記事で扱う内容として、
①VSCodeとは何か
②VSCodeのインストール方法、
③VSCodeの基本操作
④書いたHTMLのプレビュー方法
を取り扱います。
VSCodeって何？
Visual Studio Code（以下、VSCode）は、無料で利用できるコードエディタです。
特徴として、無料でありつつも、コード補完機能等の機能が豊富であり、使いやすいことが挙げられます。
また、拡張機能などの追加機能によって、より便利な環境を作ることが可能です。
VSCodeをインストールする
-
https://code.visualstudio.com/download
をクリックし、自分のPCのOSのロゴの下のボタンを押してください。するとVSCodeをインストールするために必要なVSCodeのインストーラのダウンロードが開始されます。
ページがダウンロード後画面に切り替わってもダウンロードが開始されない場合、ページ上部にある「direct download link.」をクリックしてダウンロードしてください。
2.ダウンロードしたファイルをダブルクリック等で実行すると、インストーラが起動します。その際に使用許諾契約書の同意画面が出ます。
説明文下の「同意する」を選択して「次へ」をクリックして下さい。
Mac版の場合はインストーラを捨てますか？(Yes/No)という選択肢が出ることがあります。これはYesを押して捨てても大丈夫です。（Windowsの場合はインストーラが残りますが使わないためゴミ箱にすててもOKです）
次へを押すと追加タスクの選択と称した設定画面が表示されます。基本的には画像の通りにチェックマークを付ければ問題ないですが、気になる方は変えても問題ないです。
最後に、設定内容を確認し、「インストール」ボタンを押せば設定完了です。
VSCodeの基本操作
操作は様々なものがありますが、ここでは以下の点を紹介します。
- 拡張機能の追加方法
- ファイルの参照
- HTMLファイルの作成方法
拡張機能の追加方法
インストールが終わってからVSCodeを開くとまずこのような画面になっていると思います。
英語ばかりで操作がままならないため、ここではまずVSCodeを日本語にする拡張機能を入れましょう。
- 左側のメニューバーから「拡張機能アイコン（四角形が積み重なっているマーク）」をクリック。
- 検索バーに「Japanese」と入力し、「Japanese Language Pack for Visual Studio Code」をインストールします。
3 . インストール後、VSCodeを再起動すると日本語表示になります。
この拡張機能以外にも、VSCodeにはさまざまな拡張機能があるため、気になるのがあればダウンロードしてみても良いかもしれません。（中には情報を漏洩させる等の悪意のあるプログラムも含まれているため、ダウンロードする拡張機能には注意して選んでください。）
ファイルの参照
-
フォルダを開く：メニューバーの「ファイル」→「フォルダを開く」を選択します。
-
作業したいフォルダを選択することで、そのフォルダ内のファイルがエクスプローラーに表示されます。
3.環境によっては以下のような警告画面が出てきますが、気にせず「はい」を押してください。
HTMLファイルを作る
-
新しいファイルを作成：指定したフォルダーにカーソルが触れると、4つアイコンが出てきます。今回はその一番左の紙に+が書かれたアイコンをクリックし、ファイルを追加してください。
-
ファイルを追加すると名前の入力が求められるため、そこで名前の末尾に.htmlを入力してください。
保存し、VSCodeにHTMLを書く準備が整いました！
作ったHTMLファイルをWebでプレビューする
htmlファイルを書いた後のプレビュー方法について紹介します。
といってもシンプルで、Windowsだったらエクスプローラー上、Macの場合はFinder上からhtmlファイルを実行してください。
このようにWeb上でhtmlファイルを確認することができます！
おわりに
ここまで読んでくださり誠にありがとうございます。ここまでやり終えたあなたはエンジニアとしての第一歩を踏み出すことに成功しました。いい話！
そして、よりHTMLやVSCodeについて興味がある人は、VSCodeやHTML(MDN)の公式リファレンス( https://developer.mozilla.org/ja/docs/Web )や、その他のWebサイトや技術書等を見て下さい。
ではでは〜