はじめに
「初心者におすすめのHTMLエディタを教えて欲しい。」
「エディタはどうやって選べばいいの？」
はじめたての方は、特に多い悩みですね。
今回は、おすすめのテキストエディタ「VS Code」を紹介します。
ちょっと自己紹介
髭猿（ひげざる）@webディレクター
未経験から独学でwebデザイナーに転身、現在はwebディレクター。
前職はアパレル店員をやっていました。
未経験ならではの視点で使いやすかったツールなどを紹介しています。
記事を読むメリット
「テキストエディタ、何を使えばいいか分からない」という初心者の方向けの内容です。
この記事を読むことで、「VScode」のメリットと、実際の導入までできるようになります。
テキストエディタとは
テキストエディタは、テキストを書くことに特化したソフトウェアです。
主に、文字の補完やショートカットが優れており、プログラミングの世界でも非常に重宝されています。
皆さんに馴染みのあるもので言えば「Word」もテキストエディタの一種です。
勝手に日本語を添削してくれますよね？
あのイメージです。
VS Codeがオススメな理由
さっそく「VS Code」を紹介していきます。
VS Code（Visual Studio Code）はMicrosoft社が中心となって開発している無償のエディタです。
すぐ導入したい！という方は、VS Codeの導入手順へどうぞ。
VS Codeの特徴は次のとおり。
- 入力補完がすごい
- 「拡張機能」が豊富
- シェア率が高く問題解決しやすい
特徴①：入力補完がすごい
ざっくり説明すると、入力を補助してくれる機能です。
特に初心者のうちは、入力補完は必須。
間違えた入力をしてしまうと修正するのも時間を取られますしね。
さて、ここで補完機能の一部をご紹介します。
いまやり方を覚える必要はないので流し見でOKです。
補完その１：タグの予測変換を表示する
タグを入力中に予測変換が出てきます。
十分優秀ですが、予測変換の機能は他のエディタでもついていることが多いです。
補完その２：雛形を補完する
上の画像は「HTMLの雛形」を自動補完したものです。
入力したのは「！」＋「tab」のだけ。
コードを動かすために最低限の雛形は必要なので、これは地味にありがたい。
開発者向けのエディタならではの補完機能です。
補完（応用編）：「タグ＋クラス」をまとめて補完する
最後は応用編。
タグ＋クラス名を一気にまとめて出すこともできます。
かなり上級者向けですが、効率アップ間違いなしです。
いかがだったでしょうか？
とにかくVS Codeの入力補完すげえ、と思ってもらえればOKです。
特徴②：「拡張機能」が豊富
２つ目の特徴は、拡張機能が豊富なこと。
拡張機能というのは、機能を追加するアプリのようなイメージ。
例えばカラーコードに色をつけたり、パスを補完したり…ということが可能です。
オススメの拡張機能についてはまた記事にします。
特徴③：シェア率が高く問題解決しやすい
３つ目の特徴は、シェア率が高く問題解決しやすいこと。
シェア率が高いので問題が発生しても、解決策がネットに落ちていることが非常に多いです。
誰も使ってないツールは、調べてもほとんど何も出てきませんよね？
シェア率の高さは、こういったツールを選ぶ結構重要なポイントです。
例えば『VS Code HTML 雛形 出ない』と検索すると、上記の画像のように何かしら出てきます。
こんな簡単な問題であれば無視しても問題ありませんが、
複雑なエラーが起こって解決できなかった場合、致命傷になりかねませんよね。
エディタに限りませんが、シェア率は高いに越したことはありません。
シェア率が低い＝問題解決しにくいと頭に入れておきましょう。
VS Codeの導入手順
1. VS Codeをダウンロードする
まずはVS Codeのダウンロードページを開き、Mac用のリンクをクリックします。
2.「アプリケーション」へ移動
Finderの「ダウンロードフォルダ」から「アプリケーションフォルダ」へドラッグ＆ドロップ。
これでインストール完了です。
まとめ
いかがだったでしょうか。
今回はVS Codeについて紹介しました。
VS Codeの特徴は以下のとおり。
- 入力補完がすごい
- 「拡張機能」が豊富
- シェア率が高く問題解決しやすい
個人的にはかなり使いやすいのでこれを超えるエディタはないと思っています。
エディタを迷われている方は、一度使ってみることをオススメします。
それではよきコーディングライフを！
コメント