Microsoft が無償でデベロッパー向けに提供している Visual Studio Code (以後VS Codeと略記)をセットアップする手順を説明します。
https://code.visualstudio.com/ にアクセスするとダウンロードリンクが見えるでしょう。
クリックするとダウンロードフォルダに VS Code がダウンロードされます。しばらくするとダウンロードフォルダの中(導入一番下、下図の赤枠でマークしたところあたり)にVS Codeのアイコンが見えているはずです。
VS Code には特別なインストール作業はありません。アプリケーションを起動する一般的な方法(Finderでファイルをダブルクリックするなど)で起動できます。しかしダウンロードフォルダはどんどん新しいファイルが追加されていって探すのが面倒になるので、アプリケーションフォルダに移しておきましょう。
ダウンロードフォルダの VS Code アイコンを一度クリックして下さい(ダブルクリックではありません)。
下図のように「ぴょん」とアイコンが飛び出てくるでしょう。この「飛び出た矢印」、つまり「Finderで開く」アイコンをクリックしてください。
すると下図のようにダウンロードフォルダの中身が見えますから(この表示は「リスト」表示です)、この「 Visual Studio Code 」ファイルを、Finder ウィンドウ左側に見えている「アプリケーション」にドラッグ&ドロップします。つまり「 Visual Studio Code 」ファイルを「アプリケーション」フォルダに移動させます。
これで VS Code がダウンロードフォルダからアプリケーションフォルダに移動しました。
アプリケーションフォルダに入れた実行可能ファイルは、Dock にある Launchpad から名前を指定して簡単に起動することができます。Dock の以下のアイコンが Launchpad です。クリックすると Launchpad が起動します。
Launchpad を起動すると以下のような表示になります。ここに見えている VS Code のアイコンをクリックして下さい。画面の上端に見えている検索窓に「 vs 」くらいまでタイプ入力すると表示を絞ってくれて便利です。
ダウンロードして初めて VS Code を起動するとこんな画面になるでしょう。セキュリティ上での警告です。
今回は「信頼できるサイトからダウンロードした」ことが明らかですから、安心して「開く」を選んで下さい。一度これを通過すると、二度目からはもう確認されません。
起動に成功すると以下のような画面表示になるでしょう。
このタイミングで各種の細かい設定を最初にやっておきましょう。以下にざっと書いておきます。
ダウンロードしたままのVS Codeは英語版です。英語の勉強も兼ねてそのまま使い続けてもよいのですが、英語のメニューなどに慣れないのであれば日本語化しておきましょう。初回の起動(上の図)では右下に日本語環境にするか、という問いが出ますから、「インストールして再起動」ボタンを押し、日本語パッケージを入れておくと良いでしょう。
すると自動的に日本語表示に変わるでしょう。
初回の設定を逃した人は後から手作業で日本語環境にすることもできます。以下に手順を示します。留学生が母国語で扱いたい場合や、趣味で使用言語を変えたい場合も同様の手順で言語を選択すれば良いはずです。
VS Codeを起動する。
メニューのView/Command Palette(Viewというメニュー項目の中にあるCommand Paletteという意味)を選択する。
プログラミングをする上で、その言語向けの編集(エディット)支援機能は有り難いので入れておきましょう。
プログラミングを始めると、うっかり全角文字を入力してしまい、それに気づかないままエラーに悩まされる、というトラブルが多発します。とりあえずよくやってしまう全角スペースを表示する機能を入れておく方法を紹介します。
VS Codeの初期状態では文字のサイズが少々小さめかもしれません。目が良い人は問題ないし、将来大きなプログラムを作成するようになる頃にはこの程度の文字サイズが適切かもしれませんが、最初のうちは文字を見間違えないように大きめに設定しておくのも良いでしょう。フォントの変更も可能ですが、プログラミングに適したフォントが選ばれているはずですから、最初のうちはそのまま使うのがよいでしょう。
VS Code の終了はメニューから操作します。VS Code メニューの一番左「Code」の一番下にある「Visual Studio Code を終了」を選択してください。メニューに表示されているように、キーボードショートカットは ⌘Q です。つまり Command キーを押しながらアルファベットの Q キーを押すことでもこのメニューを選択できます。
なお、エディタウィンドウの「赤(閉じる)」ボタンを押しても「ウィンドウが閉じる」だけでアプリケーションは終了しませんので念の為。(すべての)ウィンドウが閉じられると自動的にアプリケーションそのものが終了するものもありますが、VS Code はそうなっていません。
再び Launchpad から、あるいはアプリケーションフォルダを開いて VS Code をダブルクリックすれば起動できます。起動すると、こんな画面表示になるでしょう。
VS Code は今後頻繁に起動するはずですから、そのための環境を整えましょう。
VS Code を起動すると、下図の位置にVS Code のアイコンが現れたはずです。これは「現在実行中のアプリケーション」を示しています。アイコンの下に「・(黒い点)」がついているのが「現在実行中」のマークでもあります。
よく実行するアプリケーションは Dock に置いておくのが便利です。ドック内でドラッグ&ドロップして下図のように「すぐ左」の縦棒を超えたところまで移動させます。(Dock のどの位置に置くかは趣味の問題です)
するとアプリケーションの実行を終わってからも、黒い点が消えるだけでアイコンはずっとこの位置に残ります。そして次回の起動はこの Dock にある VS Code のアイコンをクリック(ダブルクリックではない)をするだけで良いです。