きょうは Visual Studio Code （VSC）を学びます。
Visual Studio Code （VSC）はテキストエディタです。
プログラミングをするにはテキストエディタ、VisualStudioCode（VSCode）のダウンロードとインストールです。
では、なぜ、数あるテキストエディタの中で Visual Studio Code（VSC）が人気があるのか、不思議ですね。どうしてでしょうか。
きょうはあなたと、Visual Studio Code について学習します。
１．Visual Studio Codeとは？
エンジニアにとってのテキストエディタは、料理人にとっての包丁のようなもの。
Visual Studio Codeっちゅうのは、マイクロソフトが作った無料で使えるコードエディタやねん。めっちゃ人気で、多機能やからプログラマーにとって便利やで。色んなプログラミング言語に対応しとるし、拡張機能もいっぱいあって、自分好みにカスタマイズできるんや。
たとえば、JavaScriptとかPythonとか、何でもござれで、デバッグもできるし、Gitとの連携もバッチリや。インテリセンスっちゅう機能もあって、コードの補完とか、エラーのチェックも自動でやってくれるから、めっちゃ助かるで。
１．とにかく、コード書くんやったら、Visual Studio Code
ほんまに便利やさかい、一回試してみてや。プログラミングする人らにとっては欠かせんツールやな。
まず、無料やし、どんなパソコンでも動くんや。WindowsでもMacでもLinuxでもOKや。ほんで、いろんなプログラミング言語に対応しとるから、PythonやらJavaScriptやら、何でも書けるんや。
拡張機能っちゅうのがあって、自分の好きな機能をどんどん追加できるんや。例えば、コードを自動で整えてくれたり、エラーをチェックしてくれたりするんやで。Gitとかのバージョン管理システムともバッチリ連携できるしな。
それに、見た目も自分好みにカスタマイズできるんや。テーマを変えたり、フォントを変えたり、自分が使いやすいようにいじれるんやで。
要するに、Visual Studio Codeは、プログラミングするのにめっちゃ便利なエディタやってことやな。ほんま、一回使ってみたら手放されへんようになるで！
２．世の中にはさまざまなエディタがありますが
コーディングはもちろん、設定ファイルやデータを編集したり、人によってはメールや報告書などの文書をエディタ上で書く人もいるかもしれません。
エディタには、秀丸、さくら、メモ帳、他に歴史のある Vim や Emacs もあります。そんな中で新世代のエディタといわれているのが Visual Studio Codeです。Microsoft が提供する IDE「Visual Studio」の関連製品である一方で、GitHub 上で開発が進められているオープンソースソフトウェアであることが大きな特徴です。
GitHub とは、Git の仕組みを利用して、世界中の人々がプログラムコードやデザインデータなどを保存、公開できるようにしたウェブサービスです。プログラムのソースコードの変更履歴を記録します。
つまり、誰でも無料で使えて、自ら開発に参加できる
また、Windows/MacOS/Linux のいずれにも対応していることや、公式の「マーケットプレイス」からインストールできる「拡張機能」によってエディタの機能を強化することもできるのです。Vim や Emacs も使いこなせば強力ではありますが、ちょっと初学者には敷居が高い、習熟に時間がかかるという難点があります。その点、VSCode は操作が簡単で、見た目もモダンです。
特に HTML/CSS や JavaScript などのフロントエンド（WebサービスやWebアプリケーションで直接ユーザーの目に触れる部分）の開発に際しては、十分な機能が初めから揃っており、すぐに現場で使い始めることができます。
見た目以上に機能が豊富なので、意外と知らない機能をこれからプログラミングを始める人におススメします。
２．Visual Studio Code の ダウンロードをクリック
Microsoft が開発のテキストエディタです。
１．Windows、Mac、Linuxで利用することができます
機能が豊富、動作が軽い、デバック機能、コードの自動保管、Git連携機能など、充分な機能です。拡張機能も多い。
他に、Atom や SublimeText などがありますが何と言っても動作の軽さが人気のようです。これをインストールして、わかりやすい PHP に取り組んでみたいと思います。
Visual Studio Code」の「 保存」をクリック
Windows ～ Mac のうち、自分のパソコン OS に合ったものを選び「保存」
- User Installer：インストールを実行したユーザーだけがVSCodeを使えるようになる。
- System Installer：PCを使う全ユーザーがVSCodeを使えるようになる。
- zip：ファイルを解凍して「.exe」ファイルを実行することで、VSCodeを使うことができる。
「Visual Studio Code」の ダウンロードが完了したら「フォルダを開く」をクリック
２．Visual Studio Code のインストール
 |
自分のパソコンから「ダウンロード」を開き「Visual Studio Code～.exe」をクリック
１．ライセンスの同意文書が表示される
一通り目を通してから「同意する(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カ所に表示されています。
先ほど、「追加タスクの選択」で「チェックを全部入れる」といいましたが、このデスクトップで、VSCode を「右クリック」すると、「Code で開く」と出てきます。これができるようにするためでした。
3. Visual Studio Code を立ち上げる
１．Visual Studio Code を起動
拡張機能をインストール、 「View (表示)」→ 「Extensions (拡張機能)」と操作する
２．日本語設定に変換する
検索窓に 「japanese」と入力、 「Japanese Language Pack for Visual Studio Code」が表示されるので、 「インストール」をクリックします。
「Ctrl+shit+P」を押して”コマンドパレット”を表示し、「display」と入力して「Configure Display Language」コマンドをフィルターして表示します。
設定画面がでました。
- Auto Save は afterDelay （ファイル保存後に自動保存）を選びます。
- Tab Size は「４」だと横に広がりすぎるので「２」にします。
- Word Wrap は「on」にしておくと長いコードを折り返してくれます。
「ファイル」から「php」ファイルを作り、「名前を付けて保存」をクリックします。
目的に合わせた開発環境の構築
Visual Studio Code（VS Code）は機能が豊富で、初めて使うときはちょっと戸惑うことも多いかもしれんけど、目的に合った開発環境を構築するには、いくつかのポイントを押さえとけば大丈夫やで。
まずは基本設定やな
- VS Codeをインストールしたら、まず「設定」をいじってみるのがええで。
Ctrl + ,で設定画面を開けるから、フォントサイズやテーマ、エディタの挙動を自分好みにカスタマイズするんや。大阪弁にこだわりたければ、テーマは「Monokai」や「Dracula」みたいなシンプルで見やすいもんがええと思うわ。
拡張機能の選び方
- VS Codeのええとこは、いろんな拡張機能があることやけど、まずは自分が使う言語やフレームワークに対応した拡張機能を入れるのがええで。たとえば、JavaScript使うなら「ESLint」や「Prettier」、Pythonなら「Python」拡張とかやな。
Ctrl + Shift + Xで拡張機能の画面が開けるから、そこで検索してみてや。
ターミナルの活用
- VS Codeには統合ターミナルがあるから、いちいち外部のターミナルを使わんでもええんや。
Ctrl + \でターミナルを開けるし、ターミナルのテーマやフォントも設定でカスタマイズできるんやで。
設定の同期
- 複数のデバイスで同じ設定を使いたい場合は、「Settings Sync」機能を使うとええで。MicrosoftアカウントかGitHubアカウントでサインインしたら、拡張機能とか設定が自動で同期されるんや。
デバッグ設定
- VS Codeはデバッグ機能も強力やから、デバッグ設定をしとくと開発が楽になるで。プロジェクトごとにデバッグ設定ファイル（
.vscode/launch.json）を作成して、ブレークポイントとか設定できるようにしとくとええわ。
プロジェクトの管理
- 複数のプロジェクトを扱う場合は、ワークスペースを活用すると便利や。ワークスペース設定ファイル（
.code-workspace）を作成して、複数のフォルダや設定をまとめて管理できるようにしとくんや。
公式ドキュメントとコミュニティ
- 困ったことがあったら、VS Codeの公式ドキュメントを見るのが一番やで。それと、コミュニティも活発やから、Stack OverflowとかGitHubで質問すると助けてくれる人がたくさんおるで。
自分の開発スタイルに合った環境を構築するのはちょっと手間かもしれんけど、一度設定してしまえば快適に開発できるようになるで。
３．「プログラミング用フォント」は何にしますか？
RictyDiminished/ がいいと思います。
半角・全角を区別してくれるからです。これを検索し、配布されているものをクリックします。いろいろ種類があるのですが、-Regular.ttf（標準）を選んでおきます。
ダウンロードボタンが現れるのでクリックします。インストールのボタンを押します。設定画面に戻って、Editor:Font Family から「Ricty Diminished」と入力します。
それでは、先ほど使った php ファイルを開けてみます。半角・全角がわかりやすくなっていると思います。これでミスを減らすことができます。最後に、「拡張子」の設定が忘れていないか確認しておきます。
Windows 画面で、検索窓に「エクスプローラー」と入力します。ウィンドウが現れるので「表示」タブをクリックすると、右上に、「□ファイル拡張子」があるのでチェックを入れます。これで拡張子が表示されるのでファイルが見分けやすくなります。
多くの言語に対応
C/C++やC#、VisualBasic など Microsoft 社の開発言語はもちろん、Java や Python、SQL、JSONなど多くの言語に対応しています。
言語は「シンタックスハイライト」と呼ばれる機能でプログラム言語の構文がハイライト表示されるため、見やすく、また書きやすくプログラミングできます。
Gitとの連携機能
プログラムのバージョン管理システム、Git リポジトリにプッシュ、プルを行うことが可能です。あらかじめ Git のインストールが必要ですが、Git でバージョン管理を行っていれば作業効率がいいですね。
プログラミング用のフォントは、コードを見やすく表示することが重要です。以下にいくつかの人気のあるプログラミング用フォントをいくつかご紹介します。どのフォントが最適かは、個人の好みにもよるため、いくつか試してみて自分に合うものを選ぶことをおすすめします。
他にもさまざまな選択肢があります
Fira Code
Fira Codeは、等幅フォントでありながら、プログラミングに特化した特徴的な特殊文字（リガチャ）を提供します。例えば、等号と大なり記号を組み合わせると矢印が表示されるなど、可読性を向上させる特徴があります。
JetBrains Mono
JetBrains Monoは、JetBrains社が開発したプログラミング用の等幅フォントです。コードの可読性を高めるために、文字間のスペーシングやアンチエイリアスの設計に工夫が凝らされています。
Consolas
Consolasは、Microsoftによって開発されたプログラミング用のフォントで、Windows環境で幅広く利用されています。文字のクリアさや読みやすさが特徴です。
Inconsolata
Inconsolataは、等幅フォントでありながら、優れた可読性を持つフォントです。特に小さいサイズでも読みやすいと評価されています。
Source Code Pro
Source Code Proは、Adobeによって開発されたプログラミング用の等幅フォントです。明るく均等な文字のバランスがあり、幅広いサイズや解像度で見やすいです。
これらは一部の人気のあるプログラミング用フォントですが、プログラミング用フォントは個人の好みによる部分も大きいため、自分が使いやすいと感じるものを見つけることが重要です。試しにいくつかのフォントをインストールして、コードエディタで表示してみて、
自分にとって最適なフォントを見つけてください。
４．VSCode の拡張機能
いくつかの人気のあるカテゴリと拡張機能をご紹介します。
１．VSCode の拡張機能は
「VS Code Marketplace (以下マーケットプレイス)」と呼ばれるサイトで様々な拡張機能が公開、VSCode から検索するとマーケットプレイスの検索結果が返される仕組みになっています。
Visual Studio Codeは非常に豊富な拡張機能エコシステムを持っており、さまざまな用途に応じた拡張機能が提供されています。
言語サポート
- Visual Studio IntelliCode: AIによるコードの自動補完や予測を提供します。
- Python: Pythonの開発をサポートし、シンタックスハイライトやデバッグなどの機能を提供します。
- JavaScript (ESLint, Prettier): JavaScriptのコードスタイルの検証やフォーマットを行います。
- HTML CSS Support: HTMLやCSSのコーディングをサポートします。
デバッグ
- Debugger for Chrome: ChromeブラウザでのJavaScriptデバッグをサポートします。
- PHP Debug: PHPアプリケーションのデバッグをサポートします。
- Java Debugger: Javaアプリケーションのデバッグをサポートします。
Git
- GitLens: Gitのコード変更履歴を可視化し、コード上で詳細な情報を表示します。
- GitHub Pull Requests: GitHub上のプルリクエストを直接Visual Studio Code内で管理できます。
テーマと外観
- Material Theme: マテリアルデザインをベースにしたカラフルなテーマを提供します。
- Dracula Official: Draculaテーマの公式バージョンで、暗い背景とカラフルなシンタックスハイライトを提供します。
- One Dark Pro: Atomエディタのテーマをベースにした、洗練された暗いテーマです。
プロダクティビティ
- Live Server: ローカル環境でのHTML/CSS/JavaScriptの自動リロードやライブプレビューを提供します。
- ESLint: JavaScriptの構文エラーやコードスタイルの問題を検出します。
- Path Intellisense: ファイルパスの入力を補完してくれる機能を提供します。
これらは一部の人気のある拡張機能の例ですが、Visual Studio Codeのマーケットプレイスにはさまざまな拡張機能があります。必要な機能や用途に応じて、マーケットプレイスで検索して評価やインストール数を確認しながら、自分に最適な拡張機能を見つけることができます。
2．機能を追加できる
Visual Studio Codeは、豊富な拡張機能を提供しており、開発者がエディタをカスタマイズし、機能を追加することができます。
Prettier
コードの自動整形を行うための拡張機能です。異なる言語に対応しており、コードのフォーマットを統一的に整えることができます。
ESLint
JavaScriptやTypeScriptの静的解析ツールであるESLintの統合拡張機能です。コードの品質やエラーをチェックし、一貫性のあるコーディングスタイルを確保します。
GitLens
Gitリポジトリとの統合を強化する拡張機能です。コードの行ごとにGitの履歴や変更を表示し、コードの変更履歴を追跡することができます。
IntelliSense
補完や自動入力を強化する拡張機能です。言語やフレームワークに応じて、コードの予測入力やAPIの情報を提供します。
Debugger for Chrome
Chromeブラウザとのデバッグを可能にする拡張機能です。JavaScriptやTypeScriptのデバッグを行いながら、コードの実行を追跡できます。
Live Server
ローカルサーバーを立ち上げて、静的なHTML/CSS/JavaScriptファイルのライブプレビューを提供する拡張機能です。ファイルの変更を自動的に反映し、ブラウザでリアルタイムに表示します。
Docker
Dockerコンテナの管理や操作を行うための拡張機能です。Dockerfileの作成、コンテナの起動や停止、ログの表示など、Docker関連のタスクを直接Visual Studio Code上で行うことができます。
これらは一部の人気のある拡張機能の例ですが、Visual Studio Codeにはさまざまなカテゴリの拡張機能が存在します。開発言語、フレームワーク、ツールに応じて、さまざまな拡張機能を探索してみてください。
Visual Studio Codeの「Extensions」タブから拡張機能を検索し、インストールすることができます。
３．拡張機能をインストールする手順
- アクティビティバーの拡張機能アイコンを選択する。
- インストールしたい名前を入力する。例えば、アクティビティバーで拡張機能アイコンを選択し、検索覧に「Java」と入力し、「Language Support for Java(TM) by Red Hat」をインストールしてみます。
インストールした拡張機能を確認
サイドバー右上の「…」ボタンからメニューを開いて、「インストール済の拡張機能の表示」を選択すると表示されます。
主にWeb開発やクラウド開発、モバイルアプリ開発などの分野で使われます。
Visual Studio Codeは、Microsoftが開発したオープンソースの統合開発環境（IDE）です。多機能でありながら軽量で使いやすいです。また、プログラミング言語やフレームワークに依存しない汎用的なIDEであるため、様々な開発環境で利用されています。
主な機能として、シンタックスハイライトや自動補完、デバッグ機能、Git統合、タスクランナーなどがあります。また、拡張機能をインストールすることで、言語サポートやコード整形、テストランナー、静的解析ツールなど、さまざまな機能を追加することができます。
Visual Studio Codeは、Windows、macOS、Linuxなどの主要なオペレーティングシステムで利用することができ、無料でダウンロードすることができます。
あとがき
Visual Studio Code は、「エディタ」と呼ばれるソフトウェアのひとつで高機能なメモ帳のようなものです。現在エンジニアの間で最も多く利用されています。略して「VSCode（ブイエスコード）」と呼ばれています。
Visual Studio Code はエディタというだけではなく、プログラミングやシステム開発にかかわる作業を効率的に行える機能が数多く用意されています。
誰でも無償で利用でき、Windows や Mac、Linux などのオペレーティングシステムに対応し、メニュー表記をさまざまな言語に切り替えることができて、プログラミングの目的に合った拡張機能を組み合わせるて最適な開発環境を構築することができます。
あまりにも機能がありすぎて、構成や設定、拡張機能の導入などに戸惑うことも多いと思われますが、自分の目的に合った開発環境を構築する情報を収集しましょう。
コメント