HikoPro Blog

IT・テクノロジーで生活と仕事をもっと豊かに

最強エディタVSCodeとは?特徴からインストール、使い方まで解説!

約8分
About|HikoPro

About|HikoPro

1998年生まれ|ITライフクリエイター
Webクリエイター|YouTuber|Blogger

学生時代は、タイピングのテストでクラス最下位レベルのパソコン音痴。
もっと自分の市場価値を高めたいと思い、、、
▷バンコク不動産▷インドIT留学▷ベトナムIT企業エンジニアを経て
Web系のフリーランスとして独立。

その後もっと大きい市場でインパクトのあることをしたいと思い、
ITメガベンチャーに就職。

#GoProAwards受賞 #14ヵ国渡航 #Z大学創業者 #ネコ好き

YouTube

I make videos of computer hack information and useful applications that
enrich people's work and life.


PC Hack

Web Create

Life Style

最強エディタVSCodeとは?特徴からインストール、使い方まで解説!
HikoPro
HikoPro

こんにちは!大学生クリエイターでWebライター|エンジニア|YouTuberとして活動していますHikoProです! 最近は「若者のチャレンジを後押しするメディア」Z大学の編集長をしています!

  • プログラミング学習をこれから始めようと思っているが、エディタ選びに迷っている。。。
  • エンジニアがオススメするエディタの特徴やメリットを教えて欲しい!

今回の記事では、プログラミング学習をこれから始めようと思っている方に向けて、現役エンジニアの僕が愛してやまない最強のプログラミングエディタ「Visual Studio Code」(通称:VSCode)の良さを語り尽くそうと思います!

Hiko
Hiko

この記事を読めば、もうVSCodeを使いたくてしかたなくなりますよ!笑

プログラミング用のエディタは数多くの種類が沢山あり、「エディタ おすすめ」とかで検索しても「本当におすすめのエディタ15選」とか候補が多すぎて、エディタ選びに悩まれる方も多いでしょう!

そんな方は、僕がオススメするエディタを3つに絞って紹介する記事をどうぞ!

✔︎こんな方におすすめ

  • プログラミングのエディタ選びに迷っている方
  • VSCodeの特徴やメリットについて知りたい方
  • エディタ選びに迷っていて、後押しして欲しい方
  • 長年愛用できて、実務でも使えるエディタが欲しい方

そもそもエディタとは?

エディタとは、コンピュータ上でソースコードやテキストを編集するソフトウェアの事をいます。

エディタにも様々な種類があり、テキストエディタやプログラミング言語に特化したエディタなど様々なエディタが存在します!

✔︎プログラミングエディタの特徴

  • ソースコードがハイライト表示される
  • 様々なプログラミング言語に対応している
  • ファイルやフォルダの管理が簡単
  • 便利な拡張機能がある
  • 2つのファイルを同時に開いて作業できる
  • コードを自動補完してくれる機能がある

このようにソースコード(プログラム処理)を書きやすい機能が沢山備わっており、効率よく開発を行うことができます。

これからご紹介するエディタ「Visual Studio Code」(VSCode)をお見せすると、こんな感じで、「これぞ!プログラマー!!」という雰囲気が感じれるかと思います。

このように、プログラミング専用のエディタを使うことで、写真でも見て取れるように、文字が色分けされていたり、ファイル管理がしやすかったりします。

Visual Studio Code(VSCode)とは?

Visual Studio Code(通称VS Code)は、あの天下のMicrosoft社が提供する、ソースコード専用のエディタです。

Visual Studio Codeインストール・公式ページ

エディタ選びで迷っている方はとりあえずVSCodeを選んでおけば間違いありません!

✔︎対応OS

WindowsLinuxmacOSで使うことができます!

今もなおアップデート中のエディタで(最新版:1.35.1 / 2019年6月12日現在)、月に1回程度進化する今人気爆発中のエディタです!

Microsoftが開発している安心感と、有料級の機能が全て完全無料で使えるので、最近ではAtomやSublimeTextを使っていた方がVSCodeに乗り換えることも少なくはありません。

Visual Studio Code(VSCode)の特徴・メリット

では早速、Visual Studio Code(VSCode)の何が凄いのか?どんな機能があるのか?使うメリットなどをご紹介していきます!

(※初心者向けの紹介なので、高度な機能の説明は省略します。)

超軽量エディタで、サックサック動く

まず、VSCodeは軽量エディタで、余計な機能が初めから省かれているので重たい処理のコーディングをしてもサクサク動きます。

僕もいろんなエディタを試してきましたが、体感的にはVSCodeが一番軽い印象でした。

プログラミングのエディタは重くなりがちですが、ストレスなくコーディングすることが可能です。

拡張機能がとても豊富

VSCodeには拡張機能と呼ばれる、必要な機能をインストールして使用することができます。

✔︎拡張機能の例

  • 色コードを視覚的に見れるようにする
  • Sassの自動コンパイル(CSSに変換)
  • ファイルの保存と同時に、ブラウザも自動更新

←このように、カラーコードを視覚的に見れる拡張機能などがたくさんあります!

このように便利な機能を追加することにより、コーディングをより効率的にすることができます。

エディタの中でターミナルを開ける

←このようにVSCodeの中でターミナルを動かすことができます!

Laravelなどのターミナルコマンドが多い、プログラミング言語を扱う際には、わざわざターミナル画面に移動しなくても、画面1つで完結するので非常に便利です!

入力候補を自動で表示

bacと入力すれば、「background」や「background-image」など入力候補を自動で出力してくれます!

「あれ?これなんて書けばいいか忘れたー!」など、初心者の方は忘れることが多いのでこの入力候補はとても便利です!

Emmet機能でHTML爆速コーディング

Emmetとは、コードを省略して記述することができます!

1行でまとめてかけるので、HTMLコーディングが爆速化します!

.main>p>a

こう書くと →→→→

<div class="main">
      <p><a href=""></a></p>
    </div>

このHTMLに変換される!

Emmetの構文は他にもまだまだあるので、興味がある方はこちらの記事をどうぞ!

便利なショートカットキーが豊富

  • Ctrl + F : エディタ内検索
  • Ctrl + D:複数選択
  • Ctrl + N:新規ファイルを開く
  • Ctrl + S:上書き保存

これはほんの一部ですが、他にも沢山の便利なショートカットキーが用意されています。

ショートカットキーを使いこなせるようになれば、かなり効率的にコーディングすることが可能です。

デバック機能が標準装備

VSCodeにはデバッグ機能(エラーの際に知らせてくれる)が標準装備されています。(言語によってはインストール必要)

例えば、PHPで間違った記述をしたとして、どこが間違っているかを教えてくれるのがデバッグです。

デバッグを使うことにより、エラー解消が早くできたり、どこの行がエラーの原因かを発見することができます。

Hiko
Hiko

これらの特徴はほんの一部に過ぎません!他にも魅力的な機能をVSCodeはまだまだ持っています!

ネコ君
ネコ君

VSCode凄い!早速使ってみたい!

インストールや基本的な使い方を教えて〜!

Visual Studio Code(VSCode)の使い方

では早速Visual Studio Code(VSCode)を使ってプログラムを書いてみましょう!

インストールから基本的な画面の味方、基礎的な使い方を解説していきます!

インストール

まずは、Visual Studio Code(VSCode)の公式ホームページから、ソフトウェアをインストールします。

→ Visual Studio Code(VSCode)ダウンロードページ

WindowsLinuxmacOS のみつのOSがダウンロード可能なので、適した物をダウンロードしましょう!

基本的な画面の見方

VSCodeの基本的な画面の味方はこの画像の通りです。

無駄な表示が一切なく、非常にシンプルで見やすいです!

個人的に好きなのが、標準で右端にソースコードの全体像を確認できることです。

ソースコードが長くなると、スクロールで移動するのは大変なので、よく全体像をクリックしてジャンプするようにしています!

✔︎VSCodeを動画で学ぼう!

ドットインストールのVisual Studio Code入門コースでは、無料の動画コンテンツで、30分程度でVSCodeの基本的な使い方をマスターできます!

ドットインストール

Hiko
Hiko

記事で学ぶより、動画の方が分かりやすいので、サクッと習得しちゃいましょう!

VSCodeとは?特徴からインストール・使い方 まとめ

いかがでしたでしょうか!

VSCodeはプログラミング初心者でも、プロの現場でもよく使用されているとても優秀なエディタなので、エディタ選びに迷っている方はまずVSCodeを使ってみるべきです!

VSCodeがあなたのプログラミング人生を豊かにしてくれることでしょう!

最後までご覧いただきありがとうございました!

Leave A Reply

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)