VSCodeとは、Visual Studio Code(ビジュアルスタジオコード)の略称です。
今回はこのVSCodeをMacにインストールしてみました。
VSCodeの詳しい説明はインターネット上にたくさん載っていますので、他のWebサイトをご覧いただけると良いかもしれません。
ダウンロード〜アプリ起動
まずはVSCodeの公式サイトにアクセスします。下記になります。
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
![](https://wakulog.com/wp-content/uploads/2022/10/image-5.png)
下記のMac用のダウンロードボタンをクリックします。
![](https://wakulog.com/wp-content/uploads/2022/10/image-6.png)
次のページに遷移すると自動的にダウンロードされます。
![](https://wakulog.com/wp-content/uploads/2022/10/image-7.png)
その後、ダウンロードフォルダを確認し、「VSCode-darwin-universal.zip」を展開します。
展開すると「Visual Studio Code」というアプリケーションが手に入ります。
おめでとうございます。これだけでインストール完了です。
![](https://wakulog.com/wp-content/uploads/2022/10/image-8.png)
「Visual Studio Code」をダブルクリックするとVSCodeが起動します。
下記のようなポップアップが出ますが、「開く」をクリックしてください。
![](https://wakulog.com/wp-content/uploads/2022/10/image-9.png)
その後、下記のように「VSCode」の画面が開いたら成功です。
![](https://wakulog.com/wp-content/uploads/2022/10/image-10.png)
VSCodeをアプリケーションフォルダにいれる
私含め、PC初心者で忘れがちなのが、インストールしたアプリをそのままダウンロードフォルダに置きっぱなしにしてしまうことです。
どこにアプリを入れたか忘れてしまい、起動できなくなるなんてことがないように、下記の画像のようにアプリケーションフォルダに移動させましょう。
![](https://wakulog.com/wp-content/uploads/2022/10/image-11-1024x565.png)
そうすると下記のようにLaunchpadにアイコンが表示されいつでも起動させることができますね。
![](https://wakulog.com/wp-content/uploads/2022/10/image-13-1024x685.png)
VSCodeを日本語表記にする
VSCodeはデフォルトだと英語表記になっています。日本語が良い方は下記の手順を参考にしてください。
初めに、Command + Shift + P を押すか、 Macの画面左上にある「view」 メニューの中の 「Coomand Palette」 メニューをクリックしてください。
![](https://wakulog.com/wp-content/uploads/2022/10/image-16.png)
![](https://wakulog.com/wp-content/uploads/2022/10/image-17.png)
![](https://wakulog.com/wp-content/uploads/2022/10/image-18.png)
コマンドパレットで display と入力してください。すると Configure Display Language と表示されるのでクリックしてください。
![](https://wakulog.com/wp-content/uploads/2022/10/image-19.png)
言語の選択肢がたくさん出てくるので、日本語をクリックする。
![](https://wakulog.com/wp-content/uploads/2022/10/image-21.png)
すると、「表示言語を変更するには、VSCodeの再起動が必要です。再起動ボタンを押してVSCodeを再起動します。日本語表記にするためにrestartボタンをクリックしてください。」と英語で言われるので、「restart」ボタンをクリックしてください。
![](https://wakulog.com/wp-content/uploads/2022/10/image-22.png)
すると、自動的に下記の画像のようにVSCodeが再起動されます。
![](https://wakulog.com/wp-content/uploads/2022/10/image-23.png)
おめでとうございます。
これで無事にVSCodeを日本語で起動できました。
新規ファイルを作成する
次に新しくファイルを作成したい際には下記のように左上のメニューバーの「ファイル」をクリックします。
![](https://wakulog.com/wp-content/uploads/2022/10/image-25.png)
すると下記のように「Untitled-1」という新規のテキストファイルが作成されました。
![](https://wakulog.com/wp-content/uploads/2022/10/image-26.png)
ここで好きなようにコーディングしてみましょう。
試しに下記のようにコーディングしてみました。
![](https://wakulog.com/wp-content/uploads/2022/10/image-35.png)
保存する際は、command+S で。
そうすると下記のようにファイル名を付けて保存する画面になります。
適当な名前にして保存をクリック。
![](https://wakulog.com/wp-content/uploads/2022/10/image-37.png)
![](https://wakulog.com/wp-content/uploads/2022/10/image-42.png)
先ほど作成したファイルをブラウザで見てみます。
ブラウザで確認するのは至って簡単。
下記のようにHTMLファイルをクリックしてブラウザにドラッグ&ペーストするだけ。
![](https://wakulog.com/wp-content/uploads/2022/10/image-44.png)
そうすると下記のように作成したHTMLファイルをブラウザで確認することができました。
![](https://wakulog.com/wp-content/uploads/2022/10/image-45-1024x646.png)
まとめ
今回は完全初心者向けにVSCodeのインストールから起動、HTMLファイル作成までをご紹介しました。
初心者でも簡単に環境構築できるし、他のプログラミングのツールと違って動作が比較的サクサクなので非常におすすめです。
今度はこのツールを使ってPythonの開発をしてみたいと思います。
下記のProgateさんによるpythonの環境構築の説明が参考になるかなと思っています。
(Progateさんには初心者の頃大変お世話になりました。。)
![](https://wakulog.com/wp-content/uploads/cocoon-resources/blog-card-cache/76d1607f6ef8b31ba7ab0ccb749af654.png)
コメント