前回の道場①はこちら🔽

Webサイト作成に向けての準備

Webサイトを作るにあたって、実際にコードを触ってみてもらいましたが、「じゃあそもそもどこにコードを書いたらいいの？」と思う方もいたんではないでしょうか？

この間は【CodePen】というコードのサンプルを書いたり、実際にどのように反映されるかをテストしたりできるサイトを埋め込んで実際に操作してもらいました。

お試しで書く分にはいいのですが、あの状態では自分独自のカスタマイズがしづらいため、テキストエディタという種類のソフトウェア（PCにダウンロードして使うもの）を使っていきます。

実際にコードを書くにあたって様々なサポート機能などが付いていて、使い勝手の良いソフト【Visual Studio Code（略：VS Code）】がありますので、今回はそちらの準備を進めていきましょう！

※かなり有名なソフトなのでこれを使っていれば間違いないと思います！

VS Codeのダウンロード

では早速、VS Codeをダウンロードしていきましょう！

黒猫（中の人）はMacのため、Windowsの方は参考情報載せておきますが、適宜読み替えてください！

まずは以下のボタンをクリック！

するとVS Codeの公式ページに飛びます。

このようなダウンロードページに飛んだら、自分のPCのOSに合わせてOSアイコンの下のボタンを押してください。

ダウンロードしたらダウンロードフォルダを開き、先程ダウンロードしたファイル（インストーラ）をダブルクリックします。

【Mac】

VS Codeのアイコンが出てきたら、Finderを開いてVS Codeをアプリケーションフォルダへ移動

【Windows】

使用許諾契約書の同意のポップアップが出たら、「同意する」にチェックを入れて「次へ」ボタンをクリック。

インストール先の指定ページでは、インストールするフォルダを選択し、「次へ」をクリック。

追加タスクの選択ページでは、「デスクトップ上にアイコンを作成する」にチェックを入れておくと便利です！

そして「次へ」をクリック。

インストール準備完了ページに到達したら、「インストール」をクリック。

最後のVisual Studio Code セットアップウィザードの完了ページは「完了」をクリック。

VS Codeのおすすめ初期設定

VS Codeは初期設定では英語となっているため、まずは日本語用のプラグイン（拡張機能）を追加しましょう！

左側の赤枠のマークを押してください。

1番上の「Japanese Language Pack for Visual Studio Code」を選択。

※もし表示されていない場合は検索窓に「Japanese」と入れれば出てくると思います！

画像はすでにインストール済みですが、青いインストールボタンをクリック。

インストールが完了すると右下に「Would you like to change Visual Studio Code’s display language to Japanese and restart?（VS Codeの言語表示を日本語に切り替えて再起動しますか？）」というポップアップが出るので、「Change Language and Restart」の青いボタンをクリック。

これでVS Codeが再起動され、言語設定が日本語表示になります！

これで基本の初期設定は完了です！

その他にも便利な拡張機能が色々ありますが、それはまた別の機会に紹介します。

次回から実際にコードを書いて遊んでみましょう！