コードエディターとは何か

コードエディターとは

コードエディターは、プログラムのソースコードを書くための専用テキストエディタです。

Windows等の標準メモ帳でもコードを書くことは可能ですが、コードエディターには開発を効率化する様々な機能が備わっています。

例えばエディターにはテキストのハイライト機能があります。機能や役割ごとに文字の色が自動でつくようになっているので、構造を理解しやすくなります。 下画像は、現在のガイドページのメタ情報を定義している、_meta.tsというファイルです。 このくらいのコード量だと全部同じ色でも問題ないですが、規模が大きくなるとハイライトはとてもありがたい存在になります。

下表にメモ帳とコードエディターとの違いをまとめました。
ブラウザ(chromeなど)でコーディングできる場合もありますが、 本格的に開発するならエディターは必須です。

代表的なコードエディター

エディターにはたくさんの種類があります。どれを使っても開発はできますが、 VSCodeをお勧めします。 VSCodeは利用者が多く、情報がたくさんあるため問題解決が比較的行いやすいです。

なぜコードエディターを使うのか

Progateやドットインストールではブラウザ上でコードを書きますが、実際の開発ではローカル環境（自分のPC）でコードを書きます。

1. プロジェクト全体を見渡せる

実際の開発では、1つのファイルではなく複数のファイルを組み合わせてアプリを作ります。 コードエディターを使うと、プロジェクト全体のファイル構成を把握しながら作業できます。

今この記事は BLOG/content/guides/editor-basicsという場所で書いています。 contentフォルダにはこのブログの全ての文章が集まっています。そしてこのブログは Learn,Guides,Blog,Dictionaryという4つのコンテンツに分かれています。

このように各ファイルは似たような役割や意味を持つものを一か所に集めて管理しています。 フォルダー名を読むとどこに何があるか大体分かるようになってます。

2. 効率的にコードが書ける

エディターはコーディングに特化しているのでメモ帳と比べて補完機能などが強化されています。 ただし、コーディングに関しては既存コードからコピーするかAIに任せて完結する場面も多く、補完のありがたみを感じる機会は少ないかもしれません。

• 自動補完: 途中まで入力すると候補が表示される
• スニペット: よく使うコードパターンを一発で入力
• マルチカーソル: 複数箇所を同時に編集

3. エラーをすぐに発見できる

コードを書いている最中に、文法エラーやタイポを検出してくれます。
実行する前に問題に気づけるので、デバッグの時間が短縮されます。

実際に不正なコーディングをして確認してみましょう。(JavaScript)

画像の2行目を確認すると、numberの下に赤い波線が走っていますね。
constは再代入を禁止するキーワードです。
numberという名前で値1を定義しており、後から別の値を代入できないことを意味しています。 画像の2行目では変更できないのに、後からnumberに2を代入しようとしたのでエラーになりました。

赤い波線にマウスカーソルを合わせると、下画像のようにメッセージが表示されます。

読んで理解できる場合はそのまま直せばよいですし、分からなければエラーメッセージをそのままコピーして検索したり、 AIに投げて解説してもらうこともできます。

IDE との違い

似たようなツールに IDE（統合開発環境） があります。

VSCode は「コードエディター」に分類されますが、拡張機能を追加することで IDE に近い機能を持たせることができます。 この柔軟性が VSCode の人気の理由の一つです。

エディターは高機能化が進んでいて、IDEと区別がつきにくくなっています。 意識して言い分けている人も少ない印象です。

便利なツールがあるんだな、くらいの認識で大丈夫です。

セクションまとめ