【無料エディタ 7選】初心者でも使いやすいテキストエディタ/コードエディタのおすすめを紹介

｜ 21421 PV ｜ 2024.08.23

favorite_border

【SkillhubAIリリース記念無料キャンペーン、限定100名】 Skillhubが生まれ変わりました！AIを使った最先端の学習環境を使って無料から学習できます。
» 今すぐキャンペーンをチェックする

HTMLやCSSなどのコードを勉強する際に必要なのが、コードを書く為のテキストエディタです。エディタは色々な種類があるので、どれを選んでいいか分からないと悩む人も多いかと思います。

自分にぴったり合ったエディタを選べれば、作業効率はグンと上がりますよ。初心者でも使いやすい無料のエディタを集めましたので、ぜひ試してみてください！

初心者におすすめはSublimeText
エディタとは？
エディタを選ぶ際のポイント
Visual Studio Code
Sublime Text
ATOM
Brackets
Cloud9
liveweave
サクラエディタ

初心者におすすめはSublimeText

私は職業柄、ほんとーに多くの初心者を指導します（年間1000人以上）。
初心者はHTML/CSSを書くのも大変ですよね。
なのであんまり複雑なエディタは使うべきではないです。なるべくシンプルで動作が軽いもの、それがベストです。（指導する場合にもエディターでつっかえたりするのは避けたい）

そういう意味ではSublimeTextがベストです。
最近はVScodeを最初から使う人も多いですが、ちょっと機能がありすぎかもしれませんね。

最初はSublimeTextを使って、少しコーディングの腕が上がったらVScodeを含めた他のエディタを試してみると良いです。無料のものが多いので、気軽に試せますし、ある程度慣れていると自分に合う・合わないも判定しやすいです。

ちなみに私はTextmateというエディタを今でも使っています。
今回の特集では紹介していないですが、とても良いエディタですよ。

私は、Textmateを使う場合と他のエディタを使う場合では、生産性の高さがまったく違います。
ストレス無く使えるのでコーディングに集中できるんですよね。

みなさんもそんなお気に入りのエディタを見つけて、幸せなコーディングが出来るようにしましょう！

まずは無料の7講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする

エディタとは？

エディタとは何かを編集する際に使うソフトの事をいいます。
原稿や小説などのライティングや、プログラミングでソースコード書く時に使用されます。

実はパソコンに入っている「メモ帳」のソフトでもＨＴＭＬが書けますし、「.txt」の拡張子を「html」に変えればブラウザで表示する事も出来ます。ですが専用のエディタを使うメリットは、編集に特化した機能が付いているので作業効率が上がる事です。

通常のライティングに使用するエディタでしたら、文字数のチェックや縦書き、横書きの切り替え機能が付いています。これはビジネス文書などには良いですよね。

プログラミングに使用するエディタの場合は、コードのエラーチェックや入力の自動補完などの機能が付いています。ほんとにコードを書きやすく設計されているわけです。プラグインなどを使用して自分が欲しい機能を追加出来るのも、コードエディタでは良くある機能です。

ちなみにワードとエディタの違いですが、ワードはエディタではなくワープロソフトに分類されます。ワードは画像の挿入やフォントの変更、書式の変更など装飾する事が出来ますし、印刷の設定も出来ます。エディタはコードがいかに速く打てる事を目的としていますので、装飾は出来ません。ワードなどのワープロソフトとエディタは、目的が全く違うソフトになりますので使用目的に応じて使い分けましょう。

エディタを選ぶ際のポイント

エディタを選ぶ時のポイントで一番重要なのは、自分が直感的に使いやすいかです。
後は動作の軽さや、拡張機能も含めて欲しい機能が使えるかどうかも大切です。エディタにもよりますが、今のエディタは拡張機能が豊富にあります。例えば、英語が苦手な人だったら日本語のメニューに出来るか重要ですし、ライブプレビューや閉じタグや改行の自動入力もあると便利ですよね。

HTML、CSS、JavaScriptだけでなく、後々他の言語も勉強する予定のある人はエディタが対応しているかも確認しましょう。

しばらく使っていると「動作がおかしい」「使い方が分からない」という事が発生する時もあるかと思います。そんな時に使っているエディタについて解説しているサイトが多いかも選ぶポイントになります。

どのエディタが自分に合っているかは、使ってみないと分からないと思います。
エディタはどれも同じと思うかもしれませんが、他のエディタを使ってみると以外に使い勝手がどれも違います。試しに２，３個エディタをダウンロードしてみて使ってみると、自分の合ったエディタが見つかりやすいです。今回ご紹介しているエディタは、どれも無料で使える物ですのでどんどん試してみましょう。

Visual Studio Code

https://code.visualstudio.com

特徴 :　軽量、多機能、対応言語が豊富

Visual Studio Code（通称VS Code）は、Microsoft社が開発したオープンソースのエディタです。歴史は長くないですが、高機能で人気の高いエディタです。

Visual Studio Codeは、歴史が浅いながらも多機能、軽量で、ATOMやSublime Textに並ぶ人気エディタです。Microsoftが開発したエディタですが、windowsだけでなくMacでもLinuxでも使用出来ます。

初期状態で使える機能が充実しており、Emmet、ミニマップやMarkdown（簡単な記述で、HTMLを生成）なども使えます。初期状態からの機能が充実していますので、拡張機能が少なくてすむのも特徴です。
Visual Studio Codeは、主要なプログラミング言語（数百種類！）に対応していますので、色々な言語を勉強したいと考えている人には、特におススメのエディタです。

メリット

初期機能が豊富なので、設定に時間がかからない

入力補完機能が優れている

拡張機能が豊富

デメリット

検索する時に注意が必要（頻繁アップデートがあり、進化しているため）

データ

操作性：☆☆☆☆☆

プラグインの多さ:　☆☆☆☆☆

人気度：☆☆☆☆☆

VScodeのインストール、基本的な使い方は下記記事で紹介しています。

Skillhubブログ

【アニメ図解たっぷり】VSCodeの使い方入門！～基本からWeb制作まで

Sublime Text

https://www.sublimetext.com

特徴 :　軽い！サクサク動く

Sublime Textはキャッチコピー「恋に落ちるテキストエディタ」のいう通り、軽く使いやすいと日本でも人気のエディタです。インストールもとても簡単で、初期状態では無駄な機能がなく動作がとても軽いです。

Sublime Textは拡張機能が豊富ですので、無駄のない状態から自分好みにカスタマイズする事が出来ます。ショートカットキーも多いですし、初期状態から全体図（ミニマップ）表示されますし、矩形選択出来るのも嬉しいです。

Sublime Textは、無料版と有料版があります。無料でも、機能をフルで使う事が出来ます。無料版でずっと作業していると、「有料版を買って」とメッセージが時々表示されますが、メッセージをキャンセルすれば、無料版のまま問題なく使えます。

メリット

拡張機能が豊富

保存を忘れても、復元してくれる

初期状態で、ミニマップ、矩形選択が使える

デメリット

初期状態がシンプルなので、カスタマイズに迷う

日本語が少し苦手

「寄付して？」のメッセージが出る

データ

操作性：☆☆☆☆

プラグインの多さ: ☆☆☆☆☆

人気度：☆☆☆☆

ATOM

https://atom.io/

特徴 :　かゆい所に手が届く、エンジニア目線のエディタ

ATOMはGitHub上で開発された、無料かつ拡張機能も豊富な人気のエディタです。GitHubとは、世界中のプログラマーが自分の作品を公開するweb上のサービスです。そのGitHubで開発されたエディタなので、開発者目線の機能がどんどん開発されています。

また、テーマで見た目の変更も出来るので、目の疲れの軽減や気分転換も出来ます。
ドットインストールで勉強する人は、ATOM上で動画が再生できるdotinstall-paneをインストールしておくと便利です。
人気のエディタなので、使い方を解説しているサイトが多いのもありがたいです。

メリット

拡張機能が豊富
UIがキレイで、直感的に使いやすい

デメリット

拡張機能が豊富で、カスタマイズに迷う
メモリ消費量がやや多い

データ

操作性：☆☆☆☆☆

プラグインの多さ: ☆☆☆☆☆

人気度：☆☆☆☆☆

Brackets

http://brackets.io

特徴 :　初期状態から便利な機能が使える。

Bracketsは、Adobe社が提供しているオープンソースのテキスエディタです。インストールした初期状態で日本語に対応していますので、わざわざ設定しなくてもすぐに使用する事が出来ます。拡張機能も豊富にありますが、初期状態から便利な機能が使えます。

初期状態から使える便利な機能の一つがクイック編集です。HTML編集画面のクラス、IDで右クリック→「クイック編集」（ショートカットはCtrl-E）を選ぶと下にｃｓｓ編集画面が出てきます。タブを行ったり来たりしなくていいので、かなり便利です。ｃｓｓ編集画面のカラーの場所でクイック編集を出すと、カラーピッカーが出てきてくれます。
ライブプレビューも初期状態から使えますし、画像やｃｓｓのカラーの記載にカーソル合わせるとサムネイルが表示されるホバービューもすぐに使えます。
Bracketsの魅力の一つにエディタ上でpsdファイルを読み込んで、直接必要なデータを取得出来る機能があったのですが、今は開発終了で使えないようです。

先ほど書いたように拡張機能も豊富ですので自分好みにカスタマイズも出来ますが、初期状態からうれしい機能が付いていますのでお試しで使いやすいです。

メリット

ライブプレビュー、ホバービュー、クイック編集が便利

設定しなくても、日本語メニューになっている

デメリット

javaやPHPに対する機能は少ないという声もある

psdファイルが使える「Extract for Brackets」がなくなった

データ

操作性：☆☆☆☆

プラグインの多さ: ☆☆☆☆☆

人気度：☆☆☆☆

Cloud9

https://aws.amazon.com/jp/cloud9

特徴 :　様々な開発環境が使える

Cloud9は、ブラウザ上で利用出来る開発環境のサービスです。2016年にamazonに買収されてからは、AWS Cloud9とも呼ばれています。WordPressのテーマを自作したいと考えている人におすすめのサービスです。

開発環境？プログラミング？web制作だけだったら関係ないと思いますよね。しかし、例えばWordPressでWebサイトを作りたい、テーマを自作したいと思った場合、PHP、MySQLが動く環境を用意しないといけません。テスト環境を作る方法は色々ありますが、個人的にはCloud9が一番簡単なのではないかなと思います。

Cloud9は、PHP、Python、Ruby、C++など色々なプログラム言語に対応しているので、他の言語も勉強したいと思った時にも使えます。共同作業も簡単に出来るのもメリットです。

メリット

共同作業が簡単に出来る

利用環境を選ばず、作業が出来る

様々な開発環境が、一気に用意できる

デメリット

登録が面倒（基本無料ですが、クレジットカードが必要）

データ

操作性：☆☆☆☆
プラグインの多さ:　－
人気度：☆☆☆

liveweave

https://liveweave.com/

特徴 :　インストール不要、手軽に使える

Liveweaveダウンロードではなく、ネット上で使うタイプのエディタです。公式サイトにアクセスするとすぐに編集画面になっています。ダウンロードや設定の手間がないので、思い立ったらすぐに試す事が出来ます。

画面は4分割されていて、左上がHTML、左下がCSS、右上がJavaScript、右下がライブプレビューになっています。JavaScriptの画面が必要ない場合は、右下のライブプレビューの画面をググっと上に伸ばして隠せば３画面で作業が出来ます。

CSSに自信がない人は左のメニューにある「css explorer」を使えば、パラメーターで数値を決めるだけで、装飾されたボックスを作る事が出来ます。プレビュー画面の下にCSSが表示されますので、出来上がったらコピーして元の編集画面に張り付けましょう。グラデーションや傾きなど色々な項目がありますので、cssの記述の確認でcss explorerだけ使うというのも一つの手ですね。
「css explorer」の他に「color explorer」で色を選んだり、「Vector Editor」で絵が描けたり入力の補助もあり、気軽に使える割に機能が豊富です。

デメリットは完全に英語で日本語に出来ない事ですが、アイコンを見れば何となく使い方が分かりますのであまり困らないと思います。後は、コードがすごく長くなると若干重くなるようです。