Visual Studio Code はテキストエディタの中で最も人気がある

VSCode Code
VSCode

きょうは Visual Studio Code (VSC)を学びます。

Visual Studio Code (VSC)はテキストエディタです。

プログラミングをするにはテキストエディタ、VisualStudioCode(VSCode)のダウンロードとインストールです。

では、なぜ、数あるテキストエディタの中で Visual Studio Code(VSC)が人気があるのか、不思議ですね。どうしてでしょうか。

きょうはあなたと、Visual Studio Code について学習します。

今や ChatGPT でプログラム作成までできてしまう時代になり、プログラミングをとことんやらなくて良かったのか?悪かったのか?いろいろ考えこんでいます。三重県津市在住者です。

1.Visual Studio Codeとは?

VSCode
VSCode
taka
taka

エンジニアにとってのテキストエディタは、料理人にとっての包丁のようなもの。

1.世の中にはさまざまなエディタがあります

コーディングはもちろん、設定ファイルやデータを編集したり、人によってはメールや報告書などの文書をエディタ上で書く人もいるかもしれません。

エディタには、秀丸、さくら、メモ帳、他に歴史のある Vim や Emacs もあります。そんな中で新世代のエディタといわれているのが Visual Studio Codeです。Microsoft が提供する IDE「Visual Studio」の関連製品である一方で、GitHub 上で開発が進められているオープンソースソフトウェアであることが大きな特徴です。

GitHub とは、Git の仕組みを利用して、世界中の人々がプログラムコードやデザインデータなどを保存、公開できるようにしたウェブサービスです。プログラムのソースコードの変更履歴を記録します。

つまり、誰でも無料で使えて、自ら開発に参加できるということです。

また、Windows/MacOS/Linux のいずれにも対応していることや、公式の「マーケットプレイス」からインストールできる「拡張機能」によってエディタの機能を強化することもできるのです。Vim や Emacs も使いこなせば強力ではありますが、ちょっと初学者には敷居が高い、習熟に時間がかかるという難点があります。その点、VSCode は操作が簡単で、見た目もモダンです。

特に HTML/CSS や JavaScript などのフロントエンド(WebサービスやWebアプリケーションで直接ユーザーの目に触れる部分)の開発に際しては、十分な機能が初めから揃っており、すぐに現場で使い始めることができます。

見た目以上に機能が豊富なので、意外と知らない機能をこれからプログラミングを始める人におススメします。

2.Visual Studio Code の ダウンロードをクリック

Visual Studio Code の保存
Visual Studio Code の保存
taka
taka

Microsoft が開発のテキストエディタです。

1.Windows、Mac、Linuxで利用することができます

機能が豊富、動作が軽い、デバック機能、コードの自動保管、Git連携機能など、充分な機能です。拡張機能も多い。

他に、Atom や SublimeText などがありますが何と言っても動作の軽さが人気のようです。これをインストールして、わかりやすい PHP に取り組んでみたいと思います。

Visual Studio Code」の「 保存」をクリック

Windows か.deb か Mac のどれかを選ぶ
Windows か.deb か Mac のどれかを選ぶ

Windows ~ Mac のうち、自分のパソコン OS に合ったものを選び「保存」

  • User Installer:インストールを実行したユーザーだけがVSCodeを使えるようになる。
  • System Installer:PCを使う全ユーザーがVSCodeを使えるようになる。
  • zip:ファイルを解凍して「.exe」ファイルを実行することで、VSCodeを使うことができる。
ダウンロードが完了しました。フォルダーを選ぶ
ダウンロードが完了しました。フォルダーを選ぶ

「Visual Studio Code」の ダウンロードが完了したら「フォルダを開く」をクリック

Windows→ダウンロード→アプリケーションを選択
Windows→ダウンロード→アプリケーションを選択

2.Visual Studio Code のインストール

使用許諾契約書の同意のラジオボタン「同意する」にチェックをいれる
使用許諾契約書の同意のラジオボタン「同意する」にチェックをいれる
使用許諾契約書の同意のラジオボタン「同意する」にチェックをいれる

自分のパソコンから「ダウンロード」を開き「Visual Studio Code~.exe」をクリック

インストール先の指定
インストール先の指定

1.ライセンスの同意文書が表示される

一通り目を通してから「同意する(A)」を選択して「次へ(N)」ボタンをクリック。VSCodeのインストール先の指定。特に指定する必要のない場合はそのまま「次へ(N)」ボタンをクリック。フォルダを指定したい場合は「参照(R)」ボタンをクリックしてインストールするフォルダを指定。

プログラムグループの指定
プログラムグループの指定

Visual Studio Code(VS Code)は、プログラミング言語の開発やデバッグをサポートする機能が豊富に備わっています。

VS Codeでは、エディタ上で複数のファイルをまとめて扱うことができる「ワークスペース」という概念があります。ワークスペースでは、関連するファイルやフォルダーをグループ化し、一括で管理することができます。ワークスペースを開くと、サイドバーにファイルやフォルダーのツリービューが表示され、タブやウィンドウの切り替えを容易にすることができます。

追加タスクの選択
追加タスクの選択 

プログラムグループの指定は,既定(デフォルト)のまま「次へ」をクリック。右クリックメニューから VSCode を使いたい場合はコンテキストメニューに関する項目にチェックを入れる。ついでに全部入れておく。

インストール時にシェルコマンド(ターミナルで code コマンドを使って VS Code を起動するためのコマンド)を追加します。

 システムの環境変数にパスを追加して、VS Codeをコマンドラインから直接起動できるようにします。

 特定のファイルタイプをVS Codeで開くように関連付けます。例えば、.txt ファイルや .html ファイルをVS Codeで開く設定を追加します。

 インストール時に指定した拡張機能を自動的に追加します。これにより、インストール後に拡張機能を手動で検索して追加する手間を省くことができます。

これらの追加タスクは、VS Codeのインストールプロセス中にユーザーが選択できる場合があります。ただし、具体的なオプションやタスクは、使用するインストーラーのバージョンやプラットフォームによって異なる場合があります。

なお、追加タスクの選択や設定は、インストール後にもVS Codeの設定メニューから変更することができます。

インストール準備完了
インストール準備完了

2.インストール準備完了

Visual Studio Code セットアップ・インストール状況
Visual Studio Code セットアップ・インストール状況

インストールが始まる

Visual Studio Code セットアップウィザードの完了
Visual Studio Code セットアップウィザードの完了

インストールの終了を確認し「完了」をクリック。やっと済みました。デスクトップにアイコンができているかどうか見てみます。

バッチリ、2カ所に表示されています。

Windows 画面に表示されます
チェックを全部入れたら

先ほど、「追加タスクの選択」で「チェックを全部入れる」といいましたが、このデスクトップで、VSCode を「右クリック」すると、「Code で開く」と出てきます。これができるようにするためでした。

404 NOT FOUND | 副業NET PCKATADA
すぐに実践できる Web でアフィリエイト副業、収益化

3. Visual Studio Code を立ち上げる

1.Visual Studio Code を起動

拡張機能をインストール、 「View (表示)」→ 「Extensions (拡張機能)」と操作する

File→「Japanese」と入力→右下の「Now」をクリック
File→「Japanese」と入力→右下の「Now」をクリック

2.日本語設定に変換する

検索窓に 「japanese」と入力、 「Japanese Language Pack for Visual Studio Code」が表示されるので、 「インストール」をクリックします。

「Ctrl+shit+P」を押して”コマンドパレット”を表示し、「display」と入力して「Configure Display Language」コマンドをフィルターして表示します。

日本語に変換されたコード
日本語に変換された

設定画面がでました。

ファイル→ユーザー設定→Font Size を14から18に変える
ファイル→ユーザー設定→Font Size を14から18に変える
  • Auto Save は afterDelay (ファイル保存後に自動保存)を選びます。
  • Tab Size は「4」だと横に広がりすぎるので「2」にします。
  • Word Wrap は「on」にしておくと長いコードを折り返してくれます。
ファイル→新規作成
ファイル→新規作成
Ctrl+Shift+S で保存します。
Ctrl+Shift+S で保存します。とりあえずどこでも保存できます
ファイル→「名前を付けて保存」
ファイル→「名前を付けて保存」をクリック

「ファイル」から「php」ファイルを作り、「名前を付けて保存」をクリックします。

「hazimete.php」で保存
「hazimete.php」で保存

3.「プログラミング用フォント」は何にしますか?

RictyDiminished/ がいいと思います。

半角・全角を区別してくれるからです。これを検索し、配布されているものをクリックします。いろいろ種類があるのですが、-Regular.ttf(標準)を選んでおきます。

ダウンロードボタンが現れるのでクリックします。インストールのボタンを押します。設定画面に戻って、Editor:Font Family から「Ricty Diminished」と入力します。

それでは、先ほど使った php ファイルを開けてみます。半角・全角がわかりやすくなっていると思います。これでミスを減らすことができます。最後に、「拡張子」の設定が忘れていないか確認しておきます。

Windows 画面で、検索窓に「エクスプローラー」と入力します。ウィンドウが現れるので「表示」タブをクリックすると、右上に、「□ファイル拡張子」があるのでチェックを入れます。これで拡張子が表示されるのでファイルが見分けやすくなります。

多くの言語に対応

C/C++やC#、VisualBasic など Microsoft 社の開発言語はもちろん、Java や Python、SQL、JSONなど多くの言語に対応しています。

言語は「シンタックスハイライト」と呼ばれる機能でプログラム言語の構文がハイライト表示されるため、見やすく、また書きやすくプログラミングできます。

Gitとの連携機能

プログラムのバージョン管理システム、Git リポジトリにプッシュ、プルを行うことが可能です。あらかじめ Git のインストールが必要ですが、Git でバージョン管理を行っていれば作業効率がいいですね。

プログラミング用のフォントは、コードを見やすく表示することが重要です。以下にいくつかの人気のあるプログラミング用フォントをいくつかご紹介します。どのフォントが最適かは、個人の好みにもよるため、いくつか試してみて自分に合うものを選ぶことをおすすめします。

他にもさまざまな選択肢があります

  1. Fira Code: Fira Codeは、等幅フォントでありながら、プログラミングに特化した特徴的な特殊文字(リガチャ)を提供します。例えば、等号と大なり記号を組み合わせると矢印が表示されるなど、可読性を向上させる特徴があります。
  2. JetBrains Mono: JetBrains Monoは、JetBrains社が開発したプログラミング用の等幅フォントです。コードの可読性を高めるために、文字間のスペーシングやアンチエイリアスの設計に工夫が凝らされています。
  3. Consolas: Consolasは、Microsoftによって開発されたプログラミング用のフォントで、Windows環境で幅広く利用されています。文字のクリアさや読みやすさが特徴です。
  4. Inconsolata: Inconsolataは、等幅フォントでありながら、優れた可読性を持つフォントです。特に小さいサイズでも読みやすいと評価されています。
  5. Source Code Pro: Source Code Proは、Adobeによって開発されたプログラミング用の等幅フォントです。明るく均等な文字のバランスがあり、幅広いサイズや解像度で見やすいです。

これらは一部の人気のあるプログラミング用フォントですが、プログラミング用フォントは個人の好みによる部分も大きいため、自分が使いやすいと感じるものを見つけることが重要です。試しにいくつかのフォントをインストールして、コードエディタで表示してみて、

自分にとって最適なフォントを見つけてください。

4.VSCode の拡張機能

Language Support for Java のインストール
Language Support for Java のインストール
taka
taka

いくつかの人気のあるカテゴリと拡張機能をご紹介します。

1.VSCode の拡張機能は

VS Code Marketplace (以下マーケットプレイス)」と呼ばれるサイトで様々な拡張機能が公開、VSCode から検索するとマーケットプレイスの検索結果が返される仕組みになっています。

Visual Studio Codeは非常に豊富な拡張機能エコシステムを持っており、さまざまな用途に応じた拡張機能が提供されています。

  1. 言語サポート:
    • Visual Studio IntelliCode: AIによるコードの自動補完や予測を提供します。
    • Python: Pythonの開発をサポートし、シンタックスハイライトやデバッグなどの機能を提供します。
    • JavaScript (ESLint, Prettier): JavaScriptのコードスタイルの検証やフォーマットを行います。
    • HTML CSS Support: HTMLやCSSのコーディングをサポートします。
  2. デバッグ:
    • Debugger for Chrome: ChromeブラウザでのJavaScriptデバッグをサポートします。
    • PHP Debug: PHPアプリケーションのデバッグをサポートします。
    • Java Debugger: Javaアプリケーションのデバッグをサポートします。
  3. Git:
    • GitLens: Gitのコード変更履歴を可視化し、コード上で詳細な情報を表示します。
    • GitHub Pull Requests: GitHub上のプルリクエストを直接Visual Studio Code内で管理できます。
  4. テーマと外観:
    • Material Theme: マテリアルデザインをベースにしたカラフルなテーマを提供します。
    • Dracula Official: Draculaテーマの公式バージョンで、暗い背景とカラフルなシンタックスハイライトを提供します。
    • One Dark Pro: Atomエディタのテーマをベースにした、洗練された暗いテーマです。
  5. プロダクティビティ:
    • Live Server: ローカル環境でのHTML/CSS/JavaScriptの自動リロードやライブプレビューを提供します。
    • ESLint: JavaScriptの構文エラーやコードスタイルの問題を検出します。
    • Path Intellisense: ファイルパスの入力を補完してくれる機能を提供します。

これらは一部の人気のある拡張機能の例ですが、Visual Studio Codeのマーケットプレイスにはさまざまな拡張機能があります。必要な機能や用途に応じて、マーケットプレイスで検索して評価やインストール数を確認しながら、自分に最適な拡張機能を見つけることができます。

2.機能を追加できる

Visual Studio Codeは、豊富な拡張機能を提供しており、開発者がエディタをカスタマイズし、機能を追加することができます。

  1. Prettier: コードの自動整形を行うための拡張機能です。異なる言語に対応しており、コードのフォーマットを統一的に整えることができます。
  2. ESLint: JavaScriptやTypeScriptの静的解析ツールであるESLintの統合拡張機能です。コードの品質やエラーをチェックし、一貫性のあるコーディングスタイルを確保します。
  3. GitLens: Gitリポジトリとの統合を強化する拡張機能です。コードの行ごとにGitの履歴や変更を表示し、コードの変更履歴を追跡することができます。
  4. IntelliSense: 補完や自動入力を強化する拡張機能です。言語やフレームワークに応じて、コードの予測入力やAPIの情報を提供します。
  5. Debugger for Chrome: Chromeブラウザとのデバッグを可能にする拡張機能です。JavaScriptやTypeScriptのデバッグを行いながら、コードの実行を追跡できます。
  6. Live Server: ローカルサーバーを立ち上げて、静的なHTML/CSS/JavaScriptファイルのライブプレビューを提供する拡張機能です。ファイルの変更を自動的に反映し、ブラウザでリアルタイムに表示します。
  7. Docker: Dockerコンテナの管理や操作を行うための拡張機能です。Dockerfileの作成、コンテナの起動や停止、ログの表示など、Docker関連のタスクを直接Visual Studio Code上で行うことができます。

これらは一部の人気のある拡張機能の例ですが、Visual Studio Codeにはさまざまなカテゴリの拡張機能が存在します。開発言語、フレームワーク、ツールに応じて、さまざまな拡張機能を探索してみてください。

mika
mika

Visual Studio Codeの「Extensions」タブから拡張機能を検索し、インストールすることができます。

3.拡張機能をインストールする手順

  1. アクティビティバーの拡張機能アイコンを選択する。
  2. インストールしたい名前を入力する。例えば、アクティビティバーで拡張機能アイコンを選択し、検索覧に「Java」と入力し、「Language Support for Java(TM) by Red Hat」をインストールしてみます。
拡張機能
拡張機能

インストールした拡張機能を確認

サイドバー右上の「…」ボタンからメニューを開いて、「インストール済の拡張機能の表示」を選択すると表示されます。

インストール済みの拡張機能
インストール済みの拡張機能
taka
taka

主にWeb開発やクラウド開発、モバイルアプリ開発などの分野で使われます。

Visual Studio Codeは、Microsoftが開発したオープンソースの統合開発環境(IDE)です。多機能でありながら軽量で使いやすいです。また、プログラミング言語やフレームワークに依存しない汎用的なIDEであるため、様々な開発環境で利用されています。

主な機能として、シンタックスハイライトや自動補完、デバッグ機能、Git統合、タスクランナーなどがあります。また、拡張機能をインストールすることで、言語サポートやコード整形、テストランナー、静的解析ツールなど、さまざまな機能を追加することができます。

Visual Studio Codeは、Windows、macOS、Linuxなどの主要なオペレーティングシステムで利用することができ、無料でダウンロードすることができます。

あとがき

Visual Studio Code は、「エディタ」と呼ばれるソフトウェアのひとつで高機能なメモ帳のようなものです。現在エンジニアの間で最も多く利用されています。略して「VSCode(ブイエスコード)」と呼ばれています。

Visual Studio Code はエディタというだけではなく、プログラミングやシステム開発にかかわる作業を効率的に行える機能が数多く用意されています。

誰でも無償で利用でき、Windows や Mac、Linux などのオペレーティングシステムに対応し、メニュー表記をさまざまな言語に切り替えることができて、プログラミングの目的に合った拡張機能を組み合わせるて最適な開発環境を構築することができます。

あまりにも機能がありすぎて、構成や設定、拡張機能の導入などに戸惑うことも多いと思われますが、自分の目的に合った開発環境を構築する情報を収集しましょう。

Visual Studio Code について、悩みや疑問がありましたらご自由にコメント欄に投稿してください。(コメント欄はこの記事の最下部です)。いただいたコメントはすべて拝見し、真剣に回答させていただきます。

コメント

何なりとお申し付けください。