## VSCodeのテーマを変更してみよう

VSCodeでは、テーマを変更することができます。開発時により効率的に作業するためにも、テーマの変更方法が知りたい方も多いのではないでしょうか。

*本記事ではVSCodeのテーマの変更方法を、丁寧に図解します。*手順はそれほど難しくないので、ぜひ一緒にテーマを変更してみましょう。

VSCodeのショートカット一覧！開発作業を効率化する秘訣を解説

## VSCodeのテーマは大まかに3種類ある

**VSCodeのテーマは3つあり、それぞれのテーマは変更可能です。** ここからは、それぞれのテーマについて解説しますので、まずは各テーマの違いについて把握しましょう。

まずは、カラーテーマについて説明します。*カラーテーマはエディターエリアに記述するコードの色や、 ハイライトというコードの強調表示の色を管理しているテーマです。*このテーマは拡張機能を使って好みのテーマに適用できます。 

【図】：カラーテーマの例
【参考】：[Visual Studio Code公式 - テーマ](https://code.visualstudio.com/api/extension-capabilities/theming)

次にファイルアイコンテーマについて解説します。*ファイルアイコンテーマは下図の赤枠で囲われているようなファイルのアイコンを管理しているテーマです。 *こちらも新しいファイルアイコンのテーマを自分で追加したりカスタマイズしたりすることができます。

【図】：ファイルアイコンの例
【参考】：[Visual Studio Code公式 -  テーマ](https://code.visualstudio.com/api/extension-capabilities/theming)

最後に解説するのが製品アイコンのテーマです。* 下図の赤枠にあるようなステータスバーやエディターの折りたたみアイコンなどのアイコンが対象です。*こちらも設定をすれば新しく製品アイコンのテーマを追加することができます。

【図】：製品アイコンの例
【参考】：[Visual Studio Code公式 - テーマ](https://code.visualstudio.com/api/extension-capabilities/theming)

**ここからは、それぞれのテーマの追加方法について解説します。**3つのテーマの中から変更したいものを決めたら、記事を参考にして対象のテーマを変更してみましょう。

まずはカラーテーマの変更方法について解説します。*画面上部のメニューバーから「ファイル」を選択し、「ユーザー設定」から「配色テーマ」を選択します。*

【図】：カラーテーマの選択画面

画面上部にいくつか候補が表示されますので、ここからテーマの変更をしましょう。下図の赤枠にあるように、カラーテーマはライトテーマと、ダークテーマがあります。

【図】：カラーテーマの候補が出ている状態

目に優しい、または好みのデザインなど人それぞれ好みがあると思いますので、好みのテーマを選択しましょう。選択すると、すぐに変更が反映されますので色が変わったことが確認できれば変更は完了です。

元のテーマに戻したいときには、変更すれば先ほどの入力窓の「既定」と表示されているテーマを選択すれば元に戻ります。

### ファイルアイコンテーマの追加方法

次にファイルアイコンのテーマの変更方法を紹介します。*カラーテーマと同様に、画面上部のメニューバーから「ファイル」を選択し、「ユーザー設定」から「ファイルアイコンのテーマ」を選択します。*

【図】：ファイルアイコンテーマの選択画面

画面上部に候補が表示されますので、変更したいものをクリックすると、変更が適用されます。またファイルアイコンの表示をなくしたい場合も、こちらから設定が可能です。

また、その他のファイルアイコンのテーマをインストールを選択すると、拡張機能の一覧が表示されます。これらからインストールをしてVSCodeを再読み込みすれば変更完了です。 

### 製品アイコンのテーマの追加方法

*製品アイコンのテーマを変更するには他の2つのテーマと同様に、画面上部のメニューバーから「ファイル」を選択します。*そこから「ユーザー設定」から「製品アイコンのテーマ」を選択します。

【図】：製品アイコンテーマの選択画面

選択すると、画面上部に入力窓が表示されますので、ここからプラスボタンのある「その他のProduct Iconテーマを参照する」を選択しましょう。すると候補が表示されますので、こちらから好みのものを選択してみましょう。

【図】：製品アイコンテーマの候補が表示されている画面

また、製品アイコンを変更後は、VSCodeの再読み込みが必要です。変更が上手く行かない場合には、再読み込みを試してください。

ちなみにご自身で1から新しいアイコンを追加したい場合には、「package.json」ファイルの中の、contributes属性でpathを編集すると追加できます。詳細に関しては、Visual Studio Codeの公式サイトを参考にしてみてください。

【参考】：[Visual Studio Code公式 - 製品アイコンのテーマ](https://code.visualstudio.com/api/extension-guides/product-icon-theme)

## おすすめのカラーテーマを3つご紹介

ここからは、おすすめのカラーテーマを紹介します。**カラーテーマには、背景色が暗い色を使用した「ダークテーマ」と明るい色合いの「ライトテーマ」があります。**今回はどちらも合わせて紹介しますので、テーマ選びの参考にしてください。

### 目にも優しそうなダークテーマ「One Monokai Theme」

*この「One Monokai Theme」は、160万以上もインストールされた人気のダークテーマです。*読みやすい配色で、落ち着いた色合いが特徴的です。

【図】：One Monokai Theme適用時の画面

大切なものは赤字で表示されますので、とてもコードを読みやすく作業もはかどりそうです。

【参考】：[Microsoft公式 - One MonokaiテーマTheme](https://marketplace.visualstudio.com/items?itemName=azemoh.one-monokai)

### GitHubが提供するテーマ「GitHub Theme」

*こちらはその名の通りGitHubが提供しているダークテーマです。*9種類ものテーマが展開されており、拡張機能からインストールすると好きな配色を選べます。

【図】：GitHub Themeの「GitHub Dark Dimmed」適用時の画面

ちなみに現在は9種類のうち2種類は、頻繁に更新されない可能性があり推奨されていません。そのため「Beta」と書かれたものは選択しないことをおすすめします。

【参考】：[Microsoft公式 - GitHub テーマ](https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme)

### 可愛いらしいライトテーマ「Kary Pro Colors」

【図】：「Kary Pro Colors Light」適用時の画面
【参考】：[Microsoft公式 - Kary Pro Colorsテーマ](https://marketplace.visualstudio.com/items?itemName=karyfoundation.theme-karyfoundation-themes)

## カラーテーマはカスタマイズも可能

**カラーテーマは、ワークベンチの色やエディターの構文のハイライトについても自分の好きなカラーコードを設定することができます。**より効率的に開発をするため、好みのVSCodeに変更したい方は、これからご紹介するカスタマイズ方法を参考にしてください。

### ワークベンチのカスタマイズ方法

*まずはワークベンチの色を変更していきましょう。*カラーテーマをカスタマイズする時には 「settings.json」という設定ファイルを編集しますので、まずはそのファイルを開きます。settings.jsonの開き方は 画面上部メニューバーのファイルからユーザー設定を選択し、設定を選択します。

設定の画面上部に検索窓がありますので、こちらに「setting」と入力しましょう。すると「settings.jsonで編集」とリンクが表示されますので、クリックしてファイルを開きます。

またショートカットキーの「Control」＋「P」または「コントロール 」＋「P」を押すと、コマンドパレットが開きます。こちらの検索窓からファイルを検索しても結構です。

【図】：コマンドパレットを開いた状態の画面

「settings.json」のファイルを開いたら、「workbench.colorCustomizations」などのコードを追加します。コードの詳細は、Visual Studio Codeの公式サイトを参考にコードを記述してください。

ここでは例として、アクティビティーバーの中でアクティブになっているアイコンの背景色を変更します。例では、以下のようにコードを記述します。

 "workbench.colorCustomizations": {
  "activityBar.activeBackground": "#ff0000"
  }

【参考】：[Visual Studio Code公式 - カラーテーマ](https://code.visualstudio.com/docs/getstarted/themes)

### ハイライトのカスタマイズ方法

ハイライトを変更する場合にも、ワークベンチと同様に「settings.json」の編集が必要です。*コマンドパレットなどを開いて「settings.json」のファイルを開き、特定の構文を入れる必要があります。*

例えばトークンのハイライトの設定をオーバーライドしたい場合には、以下のように記述します。

 "editor.semanticTokenColorCustomizations": {
        "enabled": true
}

こちらも構文の詳細は、Visual Studio Codeの公式サイトから確認できます。カスタマイズをされる方は構文を追加しましょう。

## VSCodeのテーマを変更すれば作業効率も見込める

**VSCodeは3つのテーマが変更可能でしたが、それぞれのカスタマイズの変更も簡単にできると分かりました。**また、カラーテーマについてはカスタマイズも設定ファイルから簡単に行えますので、設定はそれほど手間ではないでしょう。

開発時により快適に作業を進めるためにも、ぜひ本記事を参考にしつつテーマの変更をしてみてください。

VS Code Serverが登場！インストール方法や使い方・開発方法を解説

VS Codeのプラグインとは？導入方法やおすすめの拡張機能も紹介

VSCodeのテーマの変更をすると、フォント、背景画面の配色、アイコンなどを変更できます。ご自身が開発しやすい見た目に変更することで、作業効率も向上するのではないでしょうか。本記事ではテーマの種類と変更方法を丁寧に解説します。

VSCodeのテーマには、カラー・ファイルアイコン・製品アイコンのテーマがあります

VSCodeのテーマは拡張機能を使用して変更するか、設定ファイルを変更する方法があります

VSCodeのカラーテーマの中から、自分にあったテーマが探せる

[【マイナビITエージェント】](https://mynavi-agent.jp/it/?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv16_2)あなたの転職活動を無料でサポートいたします

VSCodeのテーマの変更方法とおすすめテーマをご紹介！

VSCodeをインストールしたものの、具体的な使い方がまだ分からないという方も多いのではないでしょうか。**VSCodeはさまざまな機能を提供しているエディターではありますが、使い慣れるまでに操作を覚える必要があります。**

そうはいっても、VSCodeの基本的な操作方法はそれほど難しくありません。本記事では画面の説明から、ワークスペースを追加しコードを実行するまでの流れを、図解でまとめました。

これからVSCodeの使い方を身に着けようと検討されている方は、ぜひ一緒に手を動かして使い方を覚えましょう。

では早速、VSCodeの基本操作を確認しましょう。流れとしては、まず画面の中にある各エリアやアイコンの説明をします。**次に実際にワークスペースを追加し、コードを記載し実行するところまで行います。**

### 画面の中のエリアを確認しよう

まずはVSCodeの画面の中のエリアを確認しましょう。 画面左側のアクティビティバーにはアイコンが並んでいることを確認してください。（①）ここには拡張機能の検索・ソースの検索・管理・実行・デバッグなどがあります。

また、アクティビティバーのアイコンの上にカーソルを合わせると、アイコンの意味も表示されますので、時間のあるときに各アイコンを確認してください。

その1つ右隣にはサイドバーがあります。（②）こちらは現在開いているワークスペースやファイルの名前が表示されています。画面の右側は編集エリアで（③）、コードを記述する場所です。

さらに編集エリアの下にあるのが、ターミナルなどを表示するパネルエリアで（④）、タブで切り替えることが可能です。ここではターミナルやデバッグの情報、エラーの確認などができます。

1番下の青い部分はステータスバーといいます。（⑤）ここは現在開いているワークスペースの通知を表示したり、エンコードなどを表示してくれるエリアです。

【参考】：[ユーザーインターフェース](https://code.visualstudio.com/docs/getstarted/userinterface)

### ファイルやフォルダを作成しよう

画面の確認ができたところで、早速ファイルを作成してみましょう。画面左上の「ファイル」から「フォルダを開く」を選択してください。 ここで開くフォルダは任意のもので結構です。

フォルダを開いたら、VSCodeの左側にフォルダ名が表示されます。ちなみに本記事では、「sample」という名前のフォルダを設定しています。 フォルダ名にカーソルを当てると、アイコンがいくつか出てきます。

このアイコンの1番左側にある「新しいファイル」というアイコンをクリックしましょう。そうするとファイル名を入力できますので、好きなファイル名を設定してください。本記事ではファイル名を「test.js」としています。

ここからは、コードを記述してみましょう。*先ほどご紹介したエディタエリアに、コードを記述してください。*本記事では例として以下のコードを記述します。図も参考にしつつ、同様に入力して下さい。

- var msg = "Hello World";
- console.log(msg);

またコードを入力する際は、コードのインテリセンス機能を使うとより簡単に入力ができます。今回は非常に短いコードしか記述しませんが、実際の開発では非常に役に立つ機能です。積極的に使用して、使い慣れていきましょう。

コードを記述した後は、必ず保存をしましょう。ファイル名の右横に、白い丸印（①）が表示されている時は、最後にファイルを保存した時から変更箇所がある状態です。

保存が必要ですので、メニューバーから保存を行うか、「Ctrl」＋「S」キーまたは「Command」＋「S」キーで保存を行いましょう。ファイル名の横の白い丸印が消えれば、保存完了です。

また、VSCodeではソースを自動保存に設定することも可能です。画面左上の「ファイル」から「自動保存」を選択すれば、自動保存ができるようになります。

【参考】：[Visual Studio Code でのコード編集](https://code.visualstudio.com/docs/introvideos/codeediting)

ここからは記述したコードを、実行してみましょう。*ターミナルが表示されていない場合には、画面上部のメニューバーの「ターミナル」を選択しパネルエリアを表示します。*

ちなみにターミナルは、パネルエリア右上のアイコンを使用すれば、ターミナルの分割やターミナルの強制終了が可能です。

また、今回はnode.jsを使用してJavaScriptのコードを実行します。node.jsをインストールしていない場合には、node.jsの公式サイトからダウンロードとインストールをしましょう。

node.jsのインストールが完了した方は、次のステップに進みます。ターミナルに「node --version」（①）と入力し「Enter」キーを押しましょう。バージョンの値が返ってくれば、正しくインストールがされています。

バージョンの確認ができたら、早速コードを実行してみましょう。ターミナルに「node test.js」（②）と入力し、「Enter」キーを押します。ファイル名を違う名称にしている人は「test.js」を任意のファイル名に読み替えてください。

無事「Hello World」がターミナルに表示されたら、実行完了です。この後ターミナルを閉じたい場合は、パネル右上のバツ印を押します。

【参考】：[ダウンロード](https://nodejs.org/ja/download/)
【参考】：[Visual Studio Code でのコード編集](https://code.visualstudio.com/docs/introvideos/codeediting)

Node.jsとは？JavaScriptとの違いや使い所を解説

**ここからは、VSCodeを使う上でよくある疑問やトラブルをまとめました。**こちらもぜひ参考にしてください。

### VSCodeのインストール時にPATHの追加を忘れた

基本的にインストール時に、間違えてPATHの追加を忘れてしまったと言う方もいるのではないでしょうか。本来VSCodeのPATHの設定は、インストール時にチェックを入れておけば設定は必要ありません。*忘れてしまった場合は、手動で環境変数にPATHを追加しましょう。*

### JavaやPythonなどの言語も使用したい

VSCodeがサポートしている言語は、JavaScript・TypeScript・Node.jsです。*しかしJavaやPythonなど他の言語に関しては、拡張機能をインストールすると使うことができます。*

拡張機能をインストールすれば、インテリセンスやワークスペース内の自動インポートも可能です。各言語の詳しい設定方法が気になる方は、公式サイトを参考にしてください。

また拡張機能のインストール方法は非常に簡単なので、下図のように、VSCodeのアクティビティバーから対象の拡張機能を検索し、インストールして下さい。検索窓で言語名を入力（①）すると、候補がでてきますので、そこから簡単にインストールできます。（②）

【図】：拡張機能の検索画面
【参考】：[Visual Studio Code の拡張機能](https://marketplace.visualstudio.com/search?target=VSCode&category=Programming%20Languages&sortBy=Installs)
【参考】：[VS Code での Java 入門](https://code.visualstudio.com/docs/java/java-tutorial)
【参考】：[Visual Studio Code での Python の編集](https://code.visualstudio.com/docs/python/editing)

TypeScriptはJavaScriptの上位互換？違いは開発規模や機能面にアリ

### VSCodeを閉じると画面の設定などは変わるのか

コードを保存して作業完了のタイミングで、そのままVSCodeを閉じていいのか迷うこともあると思います。*VSCodeはアプリケーションを閉じても、再度起動すると最後に閉じた状態で開きます。*

また、前回起動していた時に開いていたファイルや、レイアウトなども同じ状態で起動します。

VSCodeはmacでも使用可能です。*Microfoftの公式サイトからmac版のVSCodeをダウンロードできます。*また、基本的な使い方もWindowsとmacでそれほど変わりませんので、ぜひ本記事を参考にしてVSCodeを使ってみて下さい。

【参考】：[Visual Studio コードをダウンロード](https://code.visualstudio.com/Download)

*VSCodeはマークアップ言語にも対応しているので、HTMLやCSSなどにも対応しています。*

またマークアップ言語を使用されている方の中には、Emmetを使われる方も多いと思いのではないでしょうか。VSCodeはEmmetにも対応しているので、よりスピーディーにコーディング作業も可能です。

ファイルを作成し、コードを編集すると自動的にEmmetの入力候補が表示されますので使うまでに煩雑な設定なども特に必要ありません。詳細が気になる方は、公式サイトを参照してください。

【参考】：[Visual Studio Code での Emmet](https://code.visualstudio.com/docs/editor/emmet)

【初心者必見】HTMLとCSSの違いは？基本知識と学習方法も解説！

## VSCodeを上手に活用して効率的に開発しよう

VSCodeの基本的な使い方を学びましたが、一緒に作業をした方は、比較的簡単に実行までできたのではないでしょうか。またコードの編集を通して、インテリセンス機能をはじめとしたVSCodeの便利な機能を体感いただけたと思います。

**VSCodeはカスタマイズも柔軟にできるツールですので、実際に開発をする中でご自身の使いやすいようにカスタマイズをすることも可能です。**またVSCodeは無料で提供されていますので、個人でも気軽に使えるのが魅力です。

本記事や公式サイトのドキュメントなどを活用し、ぜひVSCodeを使いこなして開発効率の向上を目指しましょう。

VSCodeをインストールした方の中には、使い方が分からずお困りの方もいるのではないでしょうか。本記事ではコードを書いて実行するところまで、図を交えて詳しく解説します。ぜひ記事を読み進めながら、一緒にVSCodeを動かして基本的な操作方法を覚えていきましょう。

VSCodeは大まかに5つのエリアから画面が構成され、画面の切替えをせずにコードの実行が可能です

VSCodeは入力補完機能なども搭載されており、コードの編集も効率的にできます

VSCodeはJavaやPythonなどのプログラミング言語だけでなく、マークアップ言語も編集可能です

VSCodeの使い方を図解！画面説明からよくある質問・操作方法まで解説

VSCodeとは、Microsoftが開発提供するコードエディタを指し、正式名をVisual Studio Codeと呼びます。ソフトウェア開発向けのテキストエディタで、Windowsのほか、Linux・macOSで利用できます。**VSCodeはウェブインターフェースも提供しており、簡単にプログラムコードの作成や編集を始めることができます。**

【参考】：[Visual Studio Code](https://azure.microsoft.com/ja-jp/products/visual-studio-code)

VSCodeの特徴はいくつか挙げられます。

*1つは、VSCodeが開発工程全般のツールと統合できることです。*コード開発からビルド・デバッグ・実行、デプロイまでの流れをサポートします。この一連の流れは統合開発環境（IDE）でサポートされるものです。

VSCodeはコードエディタでありながら、拡張機能を利用することでIDEとそん色ないレベルでの利用を可能にします。

*もう1つには、連携の豊富さが挙げられます。*AzureやGitHubと統合された操作を提供し、ローカルからクラウドまでのユースケースに対応します。多くのプログラミング言語をサポートし、ウェブアプリやデータベース、あるいはコンテナ開発にも利用できます。

IDEとは？詳細やメリット、おすすめのIDEを紹介します！

VSCodeでは、各プログラミング言語の仕様（シンタックス）に基づきハイライト表示する、シンタックスハイライトが実装されます。その他にも多くの機能が実装されており、*メニューにない機能は、コマンドパレットからコマンドを実行したり、.jsonの設定ファイルに記述して使用したりすることができます。*

また拡張機能により、コンテナ開発やリモート開発などに対応するなど、必要な機能を追加で取り込むことができます。メニューの日本語化も、拡張機能で対応します。

*VSCodeは高機能なコードエディタでありながら、無料で利用できます。*バイナリはMicrosoftの独自リリースですが、ソースコードはフリーで、オープンソースとして公開されています。そのため2015年にリリースされて以降、コードエディタとしてVSCodeが開発者の支持を集めています。

*Microsoftが提供する開発環境には、VisualStudioがあります。*VisualStudioは、Windows向けに提供されるIDEです。.NETやC++を中心とした必要ツールとして、エディタ・コンパイラ・デバッガなどが同梱されています。従来はWindows版のみでしたが、現在はmacOS向けに「Visual Studio for Mac」が投入されています。

【参考】：[Visual Studio](https://visualstudio.microsoft.com/ja/)

*テキストエディタとは、文書の原型となるプレーンテキストの作成・編集ツールを指します。*プレーンテキストは、加工無しのテキストファイルで、文章作成やプログラム言語のソースコード作成に用いることができます。

ソースコードの他にマークアップ言語、あるいはJSONのようなデータファイルでも用いることができます。ファイルの作成・編集は、このテキストエディタを用います。

テキストエディタとコードエディタの違いについても触れておきます。メモを残す程度であればどのテキストエディタでも問題ありませんが、プログラム開発ではプログラミング言語固有の文法に応じて、表示を分かりやすくする必要があります。

コードエディタではプログラミング言語に応じて、ハイライト表示などの工夫をしています。構文解釈を言語仕様にしたがって、効率的にコード開発を行うよう工夫がされています。

テキストエディターとは？エンジニア初心者におすすめのエディタも紹介！

コードエディタの解説に、統合開発環境（IDE）が紹介されることが多いです。ここで言うIDEとは、コードエディタや開発工程で使用するコンパイラ・リンカ・デバッガなどをセットで提供する統合ソフトウェアを指します。

*同一ベンダーから提供されるために、開発ソフトウェアのデバッグやビルドがシームレスに連携します。*この開発環境を構築をツール事に行う必要もなく、一体的に動作させることが可能です。

VisualStudioとVSCodeの違いに触れる前に、それぞれの実装形態を整理します。

・*VisualStudioの実装形態*
 VisualStudioは、IDEと呼ばれる開発ツールです。必要なコンパイラやデバッガなどがあらかじめ同梱されています。ツールはプログラミング言語ごとに実装されており、「Visual C++」「Visual C#」「Visual Basic」などが統合されています。拡張機能も豊富です。

・*VSCodeの実装形態*
VSCodeは、コードエディタと呼ばれる開発ツールでメモ帳などと同じくテキストエディタとして使用する軽量なソフトウェアです。スクリプト言語であるJavaScriptやTypeScript、JSON・HTML・CSSなどはすぐにコード開発が可能です。

VSCodeは、機能のプラグインが可能でコンパイラやデバッガなどと連携することもできます。C++（C言語）やJava、PHP・Pythonなど必要なプログラム言語に対応した拡張機能（Extension）をインストールすることで、デバッグや実行が可能になります。

違いをまとめると、VisualStudioは、IDEでありフルバンドルされたツールを一括提供します。VSCodeはコードエディタの位置付けで、軽量でそのまま使用することもでき、さらに拡張機能でIDEのように使用することも可能です。例えると、VisualStudioはフルコース料理、VSCodeはアラカルト料理で追加可能、という具合にとらえると良いでしょう。

TypeScript入門編として利用する際に覚えておくポイント

JSON入門！基本フォーマットからファイルの作り方まで解説

HTML/CSSを費用をかけずに学べるおすすめの入門書15選！

ここではVSCode以外のコードエディタを紹介していきます。*ここで挙げるエディタをVSCodeと比較し、要望に合うソフトウェアを試してみるのが良いでしょう。*コードエディタはテキストエディタを含みますが、プログラム開発を効率的に行うエディタからいくつかをピックアップして解説していきます。

条件は、VSCodeに実装されている「マルチプラットフォームに対応」「複数の汎用プログラム言語に対応」「プログラム言語に基づくシンタックスハイライト表示」「拡張機能に対応」「カスタマイズが可能」とし、おすすめのソフトウェアを解説していきます。

Sublime Textは、Windows・macOS・Linuxに対応するエディタです。*VSCodeでしっくりこない場合は、万能型のSublime Textをおすすめします。*

プロプライエタリのソフトウェアですが、ライセンス版を試用することができます。継続利用ライセンスは99USドルの支払いが必要ですが、試用の期限は設定されていません。C言語やC++・Pythonなど多くのプログラミング言語やマークアップ言語に対応します。

【参考】：[Sublime Text](https://www.sublimetext.com/)

Sublime Text 4の概要からインストール方法・特徴を解説

Vimは、古くからUnix系OSで使用されているviコマンドをビジュアル表示に対応させたもので、CUIでも動作します。LinuxやUnix、Windows・macOSに対応します。*特にLinuxやUnix環境に慣れ親しんだ方におすすめします。*

マクロやスクリプト・プラグインによる拡張機能をサポートします。C言語・C++、Fortran・Java・Pythonなどのプログラム言語、HTMLやXMLなどのマークアップ言語など多くの開発言語に対応します。

【参考】：[Vim](https://www.vim.org/)

作業効率が大幅アップするVimのプラグイン12選！各特徴を詳しく解説

Emacsは、古くからviとならび人気のあるエディタです。LinuxやUnix、Windows・macOSに対応します。*こちらもLinuxやUnix環境をお使いの方におすすめします。*

組み込みコマンドとマクロ機能がサポートされ、Emacs Lispや拡張バンドルが利用できます。C言語・C++、Fortran・Java・JavaScript・Python・Perl・Rubyなどのプログラム言語、HTMLやXMLなどのマークアップ言語など多くの開発言語に対応します。

【参考】：[GNU Emacs](https://www.gnu.org/software/emacs/)

WindowsでEmacsを利用するには？概要から使用方法まで解説！

### 特定プラットフォーム向けエディタ

マルチプラットフォームではありませんが、特定プラットフォームで使われるエディタにも触れておきます。*使用するOSが限定される場合は、選択肢に入れると良いでしょう。*

・*サクラエディタ*
サクラエディタはWindows向けのテキストエディタです。日本製で、JISやEUC・Unicodeなどのコードがサポートされます。C言語・C++、Java・Perlなどのプログラム言語、HTMLなどのマークアップ言語に対応します。マクロ機能が充実しており、Grepやコードアウトライン解析なども可能です。

【参考】：[サクラエディタ](https://sakura-editor.github.io/)

サクラエディタの使い方は？基本設定から便利な使い方まで解説！

・*Notepad++*
Notepad++は、Windows向けフリーソフトウェアのエディタです。Windows搭載のNotepadのようにプログラム開発を行うことができます。マクロとプラグインに対応します。C言語・Java・Perl・Python・PHPなどのプログラム言語、HTMLやXMLなどのマークアップ言語など約80種類の開発言語に対応します。

【参考】：[Notepad++](https://notepad-plus-plus.org/)

・*Xcode*
macOS向けには、エディタの分類から外れますがXcodeを紹介します。こちらはIDEで、macOSやiOSのアプリケーション開発が可能です。macOSで動作し、iOS、iPadOS、macOS、tvOSをターゲットとする開発が可能です。Swift、SwiftUIと連携します。C言語やC++・Java・Swiftなどの開発が可能です。

【参考】：[Xcode](https://developer.apple.com/jp/xcode/)

Xcode 14が提供開始！Xcode 13との違いや新機能を解説

## VSCodeは開発工程をカバーし開発生産性を高めます

VSCodeは、プログラミングのソースコード開発で使用するコードエディタです。単純なコード作成から、開発工程で必要とされるコンパイルやビルド・デバッグなどの機能を組み込むことも可能です。マルチプラットフォームで動作するため、環境を選ばすに使用することができます。

**これらのことからVSCodeは、開発作業全般を意識することなく生産性を高めることが可能であり、おすすめのエディタの1つです。**

初心者におすすめのHTMLエディタ5選！便利な機能で開発効率もアップ

Macで使えるテキストエディタとは？使うメリットとおすすめ11選を紹介！

VSCodeとは、テキストエディタの1つでソフトウェア開発に的を絞ったコードエディタです。マルチプラットフォームで動作し、無料で利用することができます。ここでは、VSCodeの概要から他のエディタの特徴まで比較し、解説していきます。

VSCodeとは、コードエディタと呼ばれるソフトウェア開発向けテキストエディタを指します

マルチプラットフォームで動作し、必要な機能を簡単に拡張導入することができます

他のテキストエディタも多数ありますが、VSCodeが開発者向けに偏りなく支持を集めています

VSCodeとは？定番のコードエディタを他のエディタと比較して解説

## VSCodeは軽量で使いやすいコードエディター

VSCodeは様々な開発で使用されているコードエディターです。**VSCodeは軽量なことで知られ、起動時に使用するメモリが少ない特徴があります。**

またインテリセンスやデバッグ機能など、様々な機能が搭載されています。さらにVSCodeは機能面が充実しているだけでなく、インストールの方法も簡単です。

本記事では、VSCodeのインストールと初期設定までを丁寧に解説します。これからVSCodeを使おうと考えている方は、ぜひ本記事を参考にして一緒に作業をしましょう。

【参考】：[Code editing.Redefined.](https://code.visualstudio.com/#alt-downloads)

## OSごとにダウンロードするVSCodeが異なる

VSCodeの公式サイトでは、OSごとにダウンロードボタンが分かれています。**ダウンロードをする時は、必ずお使いの環境にあったアプリケーションをダウンロードしてください。**

またダウンロードのページには、下図のようにOSのバージョンが表示されています。（①）ダウンロードをする際には、VSCodeが対応しているバージョンかどうかも併せて確認しましょう。

下図の赤枠を押すと、VSCodeがダウンロードされます。バージョンなどの確認ができたら、お使いのOSのボタンを押しましょう。

VSCodeの記事（1ページ目）