プログラミングを始めてみようと思ってるんですが、コードを入力する時のエディターってどれを使えばよいのかさっぱり…
そうだよね…、たくさん種類があるしテキストによっても色々使われていて迷っちゃうよね(汗)。でも大丈夫！おすすめのエディターと何故そのエディターが良いのかもしっかり説明してあげよう！
Contents (目次)
エディターとは
プログラミング人気が高まる昨今、「よし、プログラミング始めてみよう！」という方も多いのではないでしょうか？まず、プログラミングを始めるにあたり絶対に必要になるのが、この「エディター」です。
エディターとは、実際にプログラムを作成するためにコードを入力していくツールのことです。
エディターには有料のものから無料なものまで、多種多様なものが存在しており、コードの変更をページに即時反映しながら作成できるものや、ショートカットキーを使えば一連のコードをまとめて入力してくれるものなどもあります。
更に、プログラミング初心者のテキストでは、テキスト毎に使っているエディターが違い、プログラミングを始めたばかりの初心者のデスクトップはエディターが複数インストールされている…、といったことも。
では早速、「実際にどのエディターが一番使い勝手が良いの？」という疑問に、答えていきましょう！
これを使っておけば間違いない、無料エディター
Visual Code Studio – powered by Microsoft
これを使っておけば、まず間違いないというのがこのVisual Code Studio(vscode*省略してこの様に呼ばれてます)、マイクロソフト製のコードエディターになります。というか、もうプログラミング初心者やこれからプログラミングを始めようと考えている方は、これ一択で大丈夫です。
本来エディターを選ぶ際には、自分が良く使う機能があるか、使いやすいか、自分が扱う言語やOSに対応しているか、など選ぶ基準があるのですが、これからプログラミングを始める方はそんなこと言われてもわからない。という感じだと思いますので、その時は迷わずVisual Code Studioを選びましょう。
余談ですが、この他にも、Bracketsなど様々なエディターがあります。
- 豊富なショートカットキーが使える
- 拡張機能が豊富に存在し、便利な機能を増築できる
- vscodeからターミナルを操作できる
- 予測変換機能があり、頭文字を打つと候補が表示される
- 関数やメソッドなどの文法が表示される
- エディターの画面が分かりやすい
- 実際の開発現場でも多く使われている
Visual Code Studioがオススメな理由
まず絶対におすすめな理由は、何はともあれ、これだけの機能が充実していながら、すべて無料で使えるエディターであるということです。有料で月額払って使っても良いくらい全てが充実しています。
では、早速ここからは、何故Visual Code Studioがおすすめで、どんな機能があるのか、というのを紹介していきたいと思います。ただ、Visual Code Studioには様々な機能が増築できたりするので、ここで紹介するのはほんの一部となります。
豊富なショートカットキー
コードを書いていると、いちいちマウスを使ってコピー範囲を選択したり、Ctrl + c（コピー）やCtrl + v （貼り付け）など通常のショートカットキーを使用していると案外労力が取られます。そこで、エディターに付属されているショートカットキーを使用することで、より正確により楽にコードが書けます。
Visual Code Studioはこのショートカットキーが豊富に用意されているため、初心者の方にもストレスなく使うことができるようになっています。
| 操作 | Windows | macOS |
|---|---|---|
| HTMLのテンプレート作成 | Ctrl + 1 | ⌘ + 1 |
| 行を下へ移動 | Alt + ↓ | ⌥↓ |
| 行を上へ移動 | Alt + ↑ | ⌥↑ |
| 行を下にコピー | Shift + Alt + ↓ | ⇧⌥↓ |
| 行を上にコピー | Shift + Alt + ↑ | ⇧⌥↑ |
| インデントを追加 | Ctrl + ] | ⌘] |
| インデントを削除 | Ctrl + [ | ⌘[ |
| コメントアウト | Ctrl + / | ⌘/ |
↓Visual Code Studioのショートカットキーを知りたい方は、こちらの記事をご覧ください。
豊富な拡張機能で必要な機能を増築できる
Visual Code Studioはインストールした時点では、最低限の機能が付いているのですが（最低限と言っても十分な機能が付いています）更に便利に使いたい方には豊富なプラグインが無料で提供されています。
例えば、Live Serverといったコードを編集したら即時にWeb上で確認ができる。といった拡張機能や、indent-rainbowといったインデント見やすくカラーリングしてくれるものも存在します。
機能が最初から豊富にありすぎず、自分に必要な拡張機能だけを増築していけるので、自分にとって使い勝手が良いようにカスタマイズしていくことが可能です。
拡張機能と詳細一覧
| 拡張機能 | 拡張機能の内容 |
|---|---|
| Live Server | 編集と同時に変更を確認することができるため、自分が加えた変更がどのように動作するのかを即時に確認できるので便利です。 |
| Indent-Rainbow | 見やすいコードを書くために、インデントはとても重要です。また、言語によっては、インデントが文章の区切りとなることがあるため、インデントを間違うとBugの原因になったりもします。Indent-Rainbowは、同じインデントのエリアをカラーで見やすくしてくれます。 |
| Todo Tree | コードにコメントアウトする形ではなく、TODOやFIXMEとしてタスクを残していくことが可能になります。また、自動でファイル毎に管理してくれるため、後から修正/追記すべき部分をかなり明確に残すことができます。 |
| Japanese Language Pack | Visual Code Studioを日本語で利用したい場合にまずインストールする拡張機能です。 |
| Code Spell Checker | コード内でスペルが間違っている可能性があるところに波線を引いてくれます。コードを書いていると、気づかないうちによくスペルミスをするため、これがあると便利です。 |
Live Server
Indent-Rainbow
Todo Tree
↓Visual Code Studioに絶対インストールすべきおすすめのプラグインを知りたい方は、こちらの記事をご覧ください。
Visual Code Studioからターミナルを操作できる
Visual Code Studioは、Visual Code Studioないからターミナルをインタラクティブに操作することができます。
最初は、「なんでターミナルをいじる必要あるの？」と思われるかもしれませんが、gitコマンドを入力したり、インタラクティブシェルを使用して簡易的に挙動をチェックしたり、デバッグしてちゃんと自分の意図するように動いているかなど確認したりなど、案外使う頻度は高くなります。
それがいちいちターミナルを自分で開いて入力などしなくても、Visual Code Studio上で完結するため非常に便利です。
予測変換が充実しており、入力ミスが起こりづらい
Visual Code Studioの予測変換機能は、とても優れており自身が定義したClass名や、関数名などもしっかりと候補として表示してくれます。また、最初からプログラムに定義されている組み込み関数は、候補と共に文法や参照元のDocumentのリンクまで出してくれるので驚きです。
もし文法を忘れてしまったり、一度も使ったことのない関数を使用する際も、いちいちググったりせずそのままDocumentに遷移ができます。
最後に
いかがでしょうか？プログラミングを始めてみよう！と思ったは良いものの、なかなか最初の環境設定やエディター選びなどで、色々と準備がありすぎて始める前に挫折してしまいそう…。何てこともあると思います（実際に私は挫折しそうでした(笑)。）
そんな時は、まずは一番ベーシックで人気なものを選んで、とりあえず初めてみる！というのが重要です。もし、エディター選びで迷っている方がいたら、Visual Code Studioを使ってみてください。
また、もしエディターをインストールするのすら面倒くさい。すぐにでもどんな感じか始めてみたい。というかたは、Googleが提供している、ColaboratoryやAmazonが提供しているAWSのCloud9(*AWSに新規登録で1年間無料)というのを使用すれば、ほとんどの言語が環境設定不要でプログラミングすることができます。
ColaboratoryやCloud9が気になる方は、↓下記の記事も是非合わせてご覧ください！
小売販売員からキャリアをスタートし日系＆外資系大手企業と3度の転職を成功させ、超大手外資系IT企業でデジタルマーケティング関連職に従事。WEBコンサルティング会社を起業し、マーケットプレイスを中心とした業務代行とコンサルティング、業務効率化のソフトウェア販売を行っています。
保有資格：3級FP技能士、2種証券外務員、ITパスポート、GAIQ、Goole広告各種プロフェッショナル認定資格
