【Mac版】Visual Studio Code のインストール【日本語】

年の瀬も押し迫り、今年一年を振り返るこの時期、多くの方が「来年こそは新しいことに挑戦したい」「技術やスキルを身につけて成長したい」と考えているのではないでしょうか。忙しい日々の中で後回しにしてしまった目標や、新しいチャレンジへの思いが、年の切り替わりを前にして改めて湧き上がってくる――そんなタイミングだからこそ、今こそ一歩を踏み出すチャンスです。

特に、プログラミングやITスキルの習得を目指している方にとっては、今が理想的なスタートを切るタイミングです。ただ、新しい技術を学ぶ前に、まずは自分のPC環境を整えることが重要です。効率的な学習には快適な作業環境が欠かせません。

幸いなことに、今では「Java」や「Python」、「Bash」など、さまざまなプログラミング言語に対応した無料の統合開発環境（IDE）である VSCode を手軽に利用することができます。このツールは軽量でありながら高機能で、プラグインを活用することで自分好みの開発環境を構築できる点が大きな魅力です。コードの記述やデバッグ、バージョン管理など、プログラミングに必要なすべてをこの一つでカバーできます。つまり、このVSCodeがインストールされているPCなら、HTMLやCSSを書くためのフロントエンドアプリケーションから、実際に裏方で動作するJavaやPHP、Pythonと言った高級言語を用いたバックエンドプログラム、さらにインフラ構築で必須となる各種シェルまで開発できるのです。

新しい技術に挑戦するための第一歩として、まずはVSCodeを導入し、自分に合った開発環境を整えてみてはいかがでしょうか。この小さな一歩が、大きな成果への道を切り開くはずです。ぜひ、理想の自分に近づくためのチャレンジを始めてみましょう！

VSCodeの導入

筆者の環境がMacBookを使用しているため、Mac版を例にVSCodeの導入を例に記載しています。基本はWindowsでも同じなので、問題なくインストールできると思います。

VSCodeのダウンロード

1. 1. 公式サイトにアクセス
      

      Visual Studio Codeの公式ダウンロードページにアクセスします。

   2. macOS版を選択
      

      ダウンロードページにアクセスすると、自動的にお使いのOSに適したバージョンが表示されます。
      「macOS  10.15+」をクリックしてインストーラ（.dmgファイル）をダウンロードします。

      

インストーラーの実行

1. 1. ダウンロードしたファイルを開く
      Finderで「ダウンロード」フォルダを開き、ダウンロードしたアーカイブ）を展開するとVisual Studio Code(VSCode-darwin-universal.dmg)ファイルが現れます。
      
      
   2. アプリケーションフォルダにドラッグ
      開いたウィンドウで、Visual Studio Codeアイコンを「Applicationsフォルダ」にドラッグ＆ドロップします。これでVSCodeがインストールされます。

      

アプリケーションの起動

1. 1. Applicationsフォルダから起動
      

      Finderの「アプリケーション」フォルダを開き、Visual Studio Codeをダブルクリックして起動します。
      

   2. セキュリティ警告への対応
      

      初回起動時に「インターネットからダウンロードされたアプリケーションです。開いてもよろしいですか？」という警告が表示される場合があります。
      → 「開く」をクリックしてください。

      

   3. VSCodeの起動
      VSCodeが起動します。
      

開発環境の初期設定

VSCodeの導入は完了しましたが、このままではまだアプリケーションが導入されただけです。実際にコーディングを始められるように各種初期設定を行ないます。

環境設定

Visual Studio Code はデフォルトでメニューなどの表示言語が英語になっていますので日本語化設定を行います。また、各種言語の拡張機能（例としてBashの拡張機能）を導入します。

1. 1. 日本語化（オプション）
      VSCodeを日本語で使いたい場合、以下の手順で設定します：

      ① VSCodeのウィンドウ左下の「拡張機能」アイコン（四角形が4つのアイコン）をクリック。

      ② 検索バーに「Japanese Language Pack」と入力。

      ③「Japanese Language Pack for Visual Studio Code」を選択。

      ④「Japanese Language Pack for Visual Studio Code」をインストール。

      ⑤ インストール後、再起動すると日本語化が反映されます。
      
      

   2. Shell(Bash)やJava、Pythonなどの言語サポート追加
      

      使用するプログラミング言語に応じて拡張機能をインストールできますが、ここでは例としてにShellの拡張機能をインストールします。

      1. Bash IDE
         Bash IDEは、Visual Studio Code（VSCode）の拡張機能で、Bashスクリプトの開発環境を強化するためのツールです。
         この拡張機能を使うことで、Bashスクリプトの開発がより効率的かつ快適になります。Bash IDEは、Bashスクリプトを本格的に開発するための必須ツールといえる便利な拡張機能です。スクリプトの品質向上と作業効率化に大いに役立つので、ぜひ活用してみてください！ 
         
         

      2. shell-format
         Shell-Formatは、Visual Studio Code（VSCode）の拡張機能で、シェルスクリプト（BashやShell）を自動的に整形（フォーマット）するツールです。
         この拡張機能を使うことで、スクリプトの見た目を整えて可読性を向上させることができます。Shell-Formatは、シェルスクリプトのコーディング効率を高め、コードを見やすく整理するための便利なツールです。シンプルな操作でスクリプトの品質を向上させられるので、ぜひ活用してみてください！
         
         

      3. ShellCheck
         ShellCheckは、Visual Studio Code（VSCode）の拡張機能で、Bashスクリプトの静的解析を行うツールです。
         この拡張機能を使うことで、スクリプトの構文エラーや潜在的なバグ、コーディングスタイルの問題を簡単に見つけ、修正できます。ShellCheckは、Bashスクリプトを効率的かつ安全に書きたい人にとって、欠かせないツールです！
         
         

      4. Bash Debug
         Bash Debugは、Visual Studio Code（VSCode）の拡張機能の一つで、Bashスクリプトをデバッグするためのツールです。
         Bash Debugは、スクリプト開発者にとって強力なツールであり、手動でデバッグする手間を大幅に省くことができます。
         
         

   3. Java
      後日、別記事で記載します。
      
      
   4. Python
      後日、別記事で記載します。
      
      
   5. Markdown All in One
      

      Markdown All in Oneは、Visual Studio Code（VSCode）用の拡張機能で、Markdownの編集作業を効率化するためのオールインワンツールです。
      

      Markdownを使った文書作成やブログ執筆、ドキュメント管理がより快適になります。Markdown作業を強力にサポートしてくれる便利な拡張機能です。

ターミナルでのコマンド設定（オプション）

可読性を高めるために、保存時にコーディング内容を自動整形する設定や、MacOSのデフォルトシェル（zsh ⇨ bash）の変更を行います。

1. 1. 自動整形の有効化
      1. 設定メニューを開く
         

         メニューバーから「ファイル」→「ユーザー設定」→「設定」を選択。

         
      2. Format On Saveを有効化
         

         「Editor: Format On Save」のチェックボックスを有効にします。

         

   2. Prettier
      

      Visual Studio Code（VSCode）で利用できる拡張機能で、コードのフォーマット（整形）を自動的に行うツールです。JavaScript、TypeScript、HTML、CSSなど、さまざまな言語やファイル形式をサポートしており、開発者が手動でコードのスタイルを整える手間を省き、一貫性のあるコードスタイルを維持します。

      1.拡張機能をインストール
      　VSCodeの「拡張機能」アイコンをクリックし、「Prettier」と検索します。
      「Prettier - Code formatter」 を選択し、インストールします。
      

      2.デフォルトフォーマッタとして設定
      　設定メニュー（Cmd + , / Ctrl + ,）を開き、「default formatter」を検索。
      「Prettier」をデフォルトのフォーマッタとして設定します。
      

   3. MacのデフォルトシェルをBashへ変更する
      MacOSのデフォルトシェルは、Catalina から zsh が採用されているため、bash へ変更します。
      
      1. 現在のシェルを確認する
      
      $ echo $SHELL

      
      2. シェル候補一覧を確認する
      
      $ cat /etc/shell

      
      3. MacのデフォルトシェルをBashへ変更する
      
      $ chsh -s /bin/bash

      
      
      シェル一覧

      $ cat /etc/shells # List of acceptable shells for chpass(1). # Ftpd will not allow users to connect who are not using # one of these shells. /bin/bash /bin/csh /bin/dash /bin/ksh /bin/sh /bin/tcsh /bin/zsh $ chsh -s /bin/bash chsh: changes made $ echo $SHELL /bin/bash

      1 2 3 4 5 6 7 8 9 10 11 12 13 14

      $ cat /etc/shells # List of acceptable shells for chpass(1). # Ftpd will not allow users to connect who are not using # one of these shells. /bin/bash /bin/csh /bin/dash /bin/ksh /bin/sh /bin/tcsh /bin/zsh $ chsh -s /bin/bash chsh: changes made $ echo $SHELL /bin/bash

      上記に一覧表示されたシェルが変更対象シェルです。今回はbashに変更しています。

これでMacBookへのVisual Studio Codeのインストールは完了です。必要に応じて、テーマやショートカットをカスタマイズしながら、自分だけの開発環境を作り上げてください！　お疲れ様でした。