【無料エディタ】初心者でも使いやすいテキストエディタおすすめ7選

21日 9月

HTMLやCSSなどのコードを勉強する際に必要なのが、コードを書く為のテキストエディタです。エディタは色々な種類があるので、どれを選んでいいか分からないと悩む人も多いかと思います。自分にぴったり合ったエディタを選べれば、作業効率はグンと上がりますよ。初心者でも使いやすい無料のエディタを集めましたので、ぜひ試してみてください!

エディタとは?

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

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

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

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

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

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

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

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

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

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

ATOM

https://atom.io/

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

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

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

メリット

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

デメリット

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

データ

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

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は、主要なプログラミング言語(数百種類!)に対応していますので、色々な言語を勉強したいと考えている人には、特におススメのエディタです。

メリット

初期機能が豊富なので、設定に時間がかからない
入力補完機能が優れている
拡張機能が豊富

デメリット

検索する時に注意が必要(毎月アップデートされて進化しているので)

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

Sublime Text

https://www.sublimetext.com

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

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

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

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

メリット

拡張機能が豊富
保存を忘れても、復元してくれる
初期状態で、ミニマップ、矩形選択が使える

デメリット

初期状態がシンプルなので、カスタマイズに迷う
日本語が少し苦手
「寄付して?」のメッセージが出る

データ

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

Brackets

http://brackets.io

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

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

初期状態から使える便利な機能の一つがクイック編集です。HTML編集画面のクラス、IDで右クリック→「クイック編集」(ショートカットはCtrl-E)を選ぶと下にcss編集画面が出てきます。タブを行ったり来たりしなくていいので、かなり便利です。css編集画面のカラーの場所でクイック編集を出すと、カラーピッカーが出てきてくれます。 ライブプレビューも初期状態から使えますし、画像やcssのカラーの記載にカーソル合わせるとサムネイルが表示されるホバービューもすぐに使えます。 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の画面が必要ない場合は、右下のライブプレビューの画面をググっと上に伸ばして隠せば3画面で作業が出来ます。 cssに自信がない人は左のメニューにある「css explorer」を使えば、パラメーターで数値を決めるだけで、装飾されたボックスを作る事が出来ます。プレビュー画面の下にcssが表示されますので、出来上がったらコピーして元の編集画面に張り付けましょう。グラデーションや傾きなど色々な項目がありますので、cssの記述の確認でcss explorerだけ使うというのも一つの手ですね。 「css explorer」の他に「color explorer」で色を選んだり、「Vector Editor」で絵が描けたり入力の補助もあり、気軽に使える割に機能が豊富です。 デメリットは完全に英語で日本語に出来ない事ですが、アイコンを見れば何となく使い方が分かりますのであまり困らないと思います。後は、コードがすごく長くなると若干重くなるようです。

メリット

インストール、設定が不要
直感的に使いやすい
「css explorer」「color explorer」が便利

デメリット

完全、英語メニュー
機能を追加出来ない

データ

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

サクラエディタ

https://sakura-editor.github.io/download.html

特徴 : 長年愛される、国産高機能エディタ

純国産のエディタで、メニューも公式サイトも全て日本語です。全て日本語ですので初心者でも取っ付きやすく、多機能、高機能で長年愛されているエディタです。

入力補完、マクロの登録、整形機能で空行、インデントの削除、矩形選択やソート、grep機能(複数のファイルから検索)を使えたりと他にも沢山の機能があります。高機能すぎて最初は戸惑うかもしれませんが、慣れれば作業を高速化する事が出来ます。

プログラムのプロジェクトによってはセキュリティを意識して、使用不可なエディタを指定する企業もあるそうです。サクラエディタはその中でも使用OKな場合が多いので、今後そういった仕事に就きたいと考えている人は使い方に慣れておくといいと思います。

メリット

特定のキーワードの自動的に色分けができる
見出しのツリー表示が出来る
grapが使える

デメリット

見た目がイマイチ
使う前に、機能の使い方を確認した方がいい

データ

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

以上、これらはなんとすべて無料のエディタなので、ぜひ全部試してみていただきたいと思います。きっと自分にあったエディタが見つかると思います。

Web制作のプロになろう!スキルハブの無料ビデオ

無料ビデオ15講座/105レッスンが受け放題!

わかりやすい動画レッスンHTML/CSS, JS, デザイン, WordPress, Railsなどがなんと無料。 募集人数には制限があります。サインアップはお早めに。

無料申し込み期限: 12月15日 まで
募集人数: 100名(残りわずか)

今すぐ15講座を受講する(無料)