【無料】Visual Studio Code 入門使い方文字化けしないテキストエディタ

2022年7月15日
2022年6月16日
Web制作
無料, 業務効率化, web制作, トレンド, プログラミング, マイクロソフト, フリーソフト

無料で使えるテキストエディタ Visual Studio Code とはどんなものか？ Visual Studio Code 入門として Visual Studio Code 使い方などを解説します。文字化けしないテキストエディタとして有名なVisual Studio Codeについてまとめます。

Visual Studio Code は便利なテキストエディタで、マイクロソフト社が開発、提供しているアプリケーションです。入力補完機能もあり、かつ、UIもわかりやすい！ということで、人気のテキストエディタです。

今までは、ATOMや、秀丸などを使っていた！という方も、Visual Studio Codeを使い始めると、その魅力に取りつかれるんだとか（笑）

テキストエディタ何を使おう
コーディングに便利なツールは？
csvファイル、jsonファイルの文字化け防止ツールは？

といった課題・お悩みを解決してくれるツールです。

Visual Studio Codeの使い方、入門の記事なので、Visual Studio Codeの知見が少ない、コーダー、プログラマー、web制作者、広告担当者、アフィリエイター、ブログライター、webディレクター、webプロデューサー、SEの方におすすめの記事ですよ。

Visual Studio Codeは、たくさんあるテキストエディタの中でも、一気にそのシェアを増やしているアプリケーションなので、慣れておくと、転職や、会話がスムーズになるかもですね。

Visual Studio Code とは

Visual Studio Code 公式ホームページ
 https://visualstudio.microsoft.com/ja/

Visual Studio Code とは、windowsで有名なマイクロソフト社が開発、サービス提供しているテキストエディタです。

テキストエディタは、古くから、さまざまなソフトがありますね。しかし、Visual Studio Codeは、新しいながらも、基本を押さえていますし、すでに、多くの開発者の心をとらえています。

Visual Studio Codeは、Windows 環境はもちろん、macOS などのOSでも利用できます。

Visual Studio Code はビジュアルコードエディターと呼びます。VSコードとも呼ばれますね。VScodeという書き方です。

Visual Studio Codeは、

多機能
軽い
使えるプログラミング言語も数百種類

といった部分が大きな魅力といえましょう！！

海外製品らしく、UIもクールです！

国産だと、余白が、今っぽくないんですよね。UIもトレンドを抑えているのが、Visual Studio Codeのいいところですね。

Visual Studio Code できること

Visual Studio Code できることを簡単にまとめます。

多くのOSに対応
オープンソース
多言語対応
シンタックスハイライト対応
配色、テーマ変更可能
拡張機能あり
ターミナルを開ける
デバッグ機能

といったところでしょうか。

個別に解説すると。

多くのOSに対応

Visual Studio Code は

Windows
Mac
Linux

と多くのOSに対応。環境を選びません。

オープンソース

Visual Studio Code は、無料で利用できます。

ソースコードもGitHubで管理されていて、一般的です。

多言語対応

Visual Studio Codeは、多言語対応で

日本語
英語
中国語
フランス語
ドイツ語

などと、非常に多くの言語に対応したソフトで、世界中で利用されています。

シンタックスハイライト対応

シンタックスハイライトとは、ソースコードに色をつけてくれて、見やすくしてくれる機能です。

標準で、Python、PHPといった開発言語に対してのシンタックスハイライト対応がされています。

配色、テーマ変更可能

Visual Studio Codeは、アプリケーションの配色を、利用者が変えられます。要は、カスタマイズ可能なんですよね。

背景色
テキストカラー

など、自分にとって、見やすい画面にできます。

ダークモードなどで、目が疲れにくい背景色に変更できます。

拡張機能あり

Visual Studio Codeには、Google Chrome のように、拡張機能があります。自分で、拡張機能を追加すれば、より、Visual Studio Codeを快適に利用できます。

ターミナルを開ける

Visual Studio Code エディタ内でターミナルを開けて、Visual Studio Code内で、コマンドを打つことができます。

これによって、圧倒的に業務効率があがりますよね。なぜなら、ターミナルソフトを、わざわざ起動しなくていいんですから。メモリも使わなくなるので、PCにも優しいアプリケーションといえましょう。

デバッグ機能

なんと、Visual Studio Codeには、デバッグ機能が標準搭載。デバッグ機能があるので、関数定義のエラーや、コードの閉じ忘れなどをチェック、エラーの原因調査が、とってもスピーディーに行えます。

というかんじで、Visual Studio Codeは、本当に、いろいろできます。

Visual Studio Code メリット

Visual Studio Codeのメリットは、

無料
見やすくなる
使いやすい

といった点ですね。

それは、ソフト開発、プログラミング以外の作業でも、歴然として出てきます。

たとえば、CSVファイルのチェック。

最近では、facebookカタログ、Googleマーチャントセンターなど、商品データを、csvや、tsvファイルで処理することがあります。

こんなときに、Visual Studio Codeがあれば、料金や、サイズなど、各カラム事に、色を変えてくれたりするので、見やすいです。

そのうえ、CSVファイルを編集しても、文字化けしません。これがいいんですよね。

SE向け、プログラマー向けの製品ではないんです！Visual Studio Code。

Visual Studio Code 入門

Visual Studio Code 入門として、インストール方法を解説します。

Visual Studio Code PC インストール方法

Visual Studio Code 公式サイトからダウンロード
OSにあった、適切なインストーラをダウンロード
Windowsなら System Installer が便利！
インストーラをダブルクリック
使用許諾契約書を同意
画面の流れに沿って、チェック
PATHへの追加チェック

というかんじで、ものの数分で、Visual Studio Code 入門のインストールは完了しちゃいます！

Visual Studio Code 日本語化

Visual Studio Code は、デフォルトでは英語のソフトです。そこで、日本語化しておきましょう！

Visual Studio Code 日本語化方法は

Visual Studio Code を起動
「view」メニューへ
「Coomand Palette」メニューをクリック
display と入力
Configure Display Language をクリック
Install additional langages をクリック
「Japanese Language Pack for Visual Studio Code」クリック
install をクリック
画面右下「Restart Now」クリック

これでインストール完了なので、再起動されているはず。再起動すると、自動的に日本語のメニューなどが表示されていると思います！

簡単ですよ。

Visual Studio Code 使い方

Visual Studio Code 使い方をさくっと解説します。

新規ファイル作成

Visual Studio Code で新しいファイルを作成する場合は、
「ファイル」メニューから「新規ファイル」を選んでください。

あとは内容を打ち込んで編集するだけですね。

新規作成したファイルを保存するには、またファイルメニューに戻って、「名前を付けて保存」をクリックしてください。

保存ファイルは、基本「txt」拡張子のテキストファイルです。

上書き保存は ctrl+s のショートカットキーでも動きます！！

ファイルを分割して表示

開いているファイルを分割して、複数のエディタで表示することもできます。

長いテキストで、いろいろと見比べるときに便利ですね。

「表示」メニューにある「エディターレイアウト」にマウスを載せてください。

すると、「分割(上)」「分割(下)」「分割(左)」「分割(右)」というメニューが出てきます。

選択すれば、ファイルの分割表示が可能になります。

もちろん、別のファイルを見比べるように配置することも可能です。

Visual Studio Code 対応開発言語

Visual Studio Code 対応言語の主なところでいうと、

C
C++
C#
Java
JavaScript
Python
Ruby
HTML

といったところで、これらの言語には、入力補助機能などもついているので、めちゃくちゃ便利ですね。

Visual Studio Code 料金

Visual Studio Code 料金は、冒頭で、書いた通り、基本無料です。個人利用は、無料プランを！とマイクロソフトもサイト内で主張していたりします。

法人利用の場合、有料プランも用意されています。

サポートが厚くなっていくかんじですね。

Professional サブスクリプションで、1か月　４５ドル～

になっています。

要するに、だいたい1か月5,500円くらいといったかんじの料金です。

※料金は、2022年6月15日現在

なお料金の詳細は、以下の公式サイトの詳細をご覧ください。

Visual Studio の購入
 https://visualstudio.microsoft.com/ja/vs/pricing/?tab=individual

ライセンスなどについても記載されています。

Visual Studio Code 使い方解説動画

今回は、Visual Studio Code 使い方について解説している動画をご紹介していきます。Visual Studio Code 入門の動画で、わかりやすものを探してきました。

なぜ Visual Studio Code がいいのか？Visual Studio Codeを使うメリット、デメリットから始めて、Visual Studio Codeの使い方をまとめてくれています。

すなわち、この動画を見ることで、Visual Studio Codeについて、まずは、はじめの一歩を踏み出せる！そんなYoutube動画なんです。Visual Studio Codeを使う際には、参考となると思いますよ～

Visual Studio Code 料金 Visual Studio Code 評判なども、まとめていて、Visual Studio Codeを使う方がいいよね！って思えてきますよね。

Visual Studio Code 使い方入門のこちらの動画は、再生回数が24,000回以上と、非常に多くのユーザーの動画視聴がされています。つまり、このVisual Studio Code に関する Youtube動画は、かなり有意義なものなんだと思いますよ。

Visual Studio Codeで、導入しておいた方がいい拡張機能についても解説していて、それでいて、この動画は、わずか10分程度。そんな動画の長さなので、テンポもいいんですよね！便利な拡張機能を活用して、Visual Studio Codeを使いこなしている、そんな未来の自分の未来予想図も描けるはず！