こんにちは！侍エンジニアブログ編集部のシホです！これからWebデザインを始めるみなさん！
エディタの種類がたくさんあって選べない
結局自分にあうエディタってどれ？
と、つまいづいてませんか？
そこで今回は、エディタを選ぶポイントをふまえ、HTML/CSS、JavaScriptでお仕事をする人が多く使っている便利で人気なものだけを厳選しました！
初心者の方でもこの中から選べば間違いなしの内容になっております。ぜひ参考にしてみてください！
この記事の目次
エディタとは？
エディタとは、テキストを編集するソフトウェアのことです。
Windowsの場合はメモ帳、Macの場合Text Editというものがパソコンに最初から入っていますが、これがエディタにあたります。
エディタにはパソコンに最初から入っているモノの他に、簡単な機能のみ使えるエディタや、複雑なこともできる高機能のなエディタがあり、自分の好みにカスタマイズできるものもあります。
文章を作成したいのか、プログラミングをしたいのかなど、自分の目的やレベルに合わせたエディタを選ぶことをオススメします。
なぜHTMLエディタが必要なのか
HTMLエディタとは、HTMLファイルやタグの編集に特化した機能が付いているエディタのことをいいます。普通のエディタやメモ帳でもHTMLタグの入力はできてしまうのですが、HTMLを記述する際、誰でも効率よく書きたいと思いますよね。
それを叶えてくれるのが、HTMLエディタです。
HTMLエディタの主な機能は、
- HTMLタグの入力補助機能
- HTMLタグの校正機能
- HTMLタグごとの色分け
で、視覚的に記述の効率をあげてくれます。
また、高機能なHTMLエディタを使うと、
- 拡張機能を使って自分専用にカスタマイズできる
- プレビューできる
- CSSやJavaScriptを同時に画面表示できる
など、より自分の目的にあったHTMLエディタにカスタマイズしていくことができます。つまり、効率的に作業したい場合にはこのHTMLエディタは欠かせないものなのです。
選ぶポイントは？
HTMLエディタは種類はたくさんあって選ぶのが大変だと思います。
そこで最低限おさえておきたいポイントを4つ紹介したいと思います。
自分が欲しい機能があるか
自分が書いたコードの結果をすぐ見たい場合は「プレビュー機能」、段落を勝手に補正してくれる「校正機能」、自動的にタグたコードに色付けしてくれる「ハイライト機能」など、作業がはかどる機能があるかどうかを確認しましょう。
また、自分が欲しい機能をカスタマイズできるのかどうかもポイントになります。今後長期的にHTMLエディタを使う場合、やっているうちにあれもこれも追加したい機能がでてくるかもしれません。そういった場合はカスタマイズできるHTMLエディタがおすすめです。
使用言語
HTMLエディタそのものが英語対応なのか、日本語対応なのかも使用するうえで重要なポイントになります。
無料のものには海外製のものが多く、英語しか対応していないものがあります。拡張機能を使って日本語に変更できる場合もありますが、英語が苦手な人はまず日本語対応のHTMLエディタかどうかを確認しましょう。
無料？有料？
価格面においては、無料で提供されているもの、一部有料のもの、すべて有料のものなどさまざまです。初回は無料でも、一定の期間をすぎると有料になるHTMLエディタも存在するのであらかじめ価格をチェックしておきましょう。
対応しているOS
使用するパソコンのOSに対応しているHTMLエディタを選びましょう。
OSは基本的に、「MacOSX」、「Windows」、「Linux」の３種類になります。対応していないHTMLエディタはダウンロードできないので、気をつけましょう。
HTMLエディタおすすめ5選
Atom
Atomダウンロードはこちら
Atomとは、2015年に正式バージョン1.0.0がリリースされたばかりの比較的新しいHTMLエディタです。「GitHub」というソフトウェア開発のためのウェブサービスで開発されたものです。
予測機能やプレビュー機能などの基本的な機能を始め、パッケージと呼ばれる拡張機能を追加することで、ユーザーの目的にあわせてカスタマイズできるのが特徴です。
このような拡張性の高さが評価され、Web界隈であっという間に浸透していきました。
今後もWeb業界で多く使われていく、期待のHTMLエディタです。
特長
- 拡張機能が豊富で自分好みにカスタマイズできる
- ショートカットが使いやすい
- javaScript,PHP,Rubyなど主要な言語にも対応
- ダウンロード時に日本語に切り替えられる
- すべて無料で使える
- 対応OS：MacOSX、Windows、Linux
Visual Studio Code
Visual Studio Codeダウンロードはこちら
Visual Studio Codeとは、2015年にリリースされたばかりの比較的新しいエディタです。Visual Studio Codeは、マイクロソフトによって開発されているソースコードエディタです。
マイクロソフトが開発しているからWindowsでしか動かないと思っていませんか？
Windowsのほかに、Mac OS、Linux上でも動作する優れたエディタです。ハイライト機能や拡張機能、インテリセンス（自動補完システム）やデバッグ機能が用意されています。
特長
- 拡張機能が豊富で自分好みにカスタマイズできる
- ショートカットが使いやすい
- javaScript,PHP,Rubyなど主要な言語にも対応
- 日本語で使える
- すべて無料で使える
- 対応OS：MacOSX、Windows、Linux
Sublime Text
Sublime Text3ダウンロードはこちら
SublimeTextは、世界中のWeb製作者たちに愛用されているテキストエディタです。
日本では最初に2011年にリリースされましたが、2013年にリリースされたバージョン3であるSublimeText3以降、Web業界だけではなく、多くのエンジニアに愛されています。
「恋に落ちるエディタ(The text editor you'll fall in love with)」というキャッチフレーズがあるように、SublimeTextは多くのユーザーを魅了しているテキストエディタです。
特長
- 日本語化が可能
- 動作が高速
- 無料で制限なく使用できるが、ライセンス購入は有料である（70ドル→約7000円）
- 対応OS：MacOSX、Windows
Brackets
Bracketsダウンロードはこちら
BracketsはIllustratorやPhotoshopなどを開発している「Adobe」が提供しているHTMLエディタです。テーマで見た目を簡単に変えたり、拡張機能も追加できるので、Web初心者から上級者まで幅広くカバーできるエディタです。
また、HTMLのタグの直下にCSSの編集ウィンドウを開くことができるので、CSSファイルを同時に編集したい人に重宝されます。
特長
- テーマで見た目を変えられる
- HTMLとCSSの同時編集に優れている
- デフォルトで日本語に対応している
- 無料で使える
- 対応OS：MacOSX、Windows
Liveweave
Liveweaveを使う
Liveweaveはオンライン上でHTML、CSS、JavaScriptの挙動（実際に画面上に表示される見た目）を確認できるという優れたエディタです。上の画像のように、４分割された画面が表示されます。
左上にHTML,左下にCSS、右上にJavaScriptを記入し、結果は、右下の画面に表示されます。ダウンロードをする必要がないため、すぐにHTMLを始めたいという方にはもってこいのエディタです。
特長
- オンライン上で手軽にすぐに始められる
- 挙動を確認しながら記述できる
- 拡張機能はないがデフォルトで基本的な便利な機能は備わっている
- 英語のみ対応
- 無料で使える
- 対応OS：オンライン上のため、MacOSX、Windowで利用可能
最短でプログラミング学習を進めるには
使いやすいエディタが決まると、これからプログラミングを爆速で覚えるぞ！ととても前向きな気持ちになれますよね。
しかし、
と、あなたの転職やフリーランスになるという目標に対して、何の言語をどう学んでいけば最短でなれるのかをイメージできてる人は少ないと思います。
正しい方法で学習が継続できているなら問題ありませんが、方向性がずれたま継続して時間がもったいないですよね。
そんなあなたはまずは弊社「侍エンジニア」の無料体験レッスンを受けてみてはいかがでしょうか？
無料体験では、あなたの目標から逆算して理想の生活を叶えるために最適な言語や学習方法のご提案をいたします。
これとこれとこれを学べば目標に近づけるんだ！と自信を持って学ぶことができるので、マラソンでいうゴールまでの残り何キロという道のりがわかり学習効率は圧倒的に高まります。
無料体験レッスンはオンラインでも受講可能なため、全国各地より受けていただけます。
プログラミングで人生を変えたいというあなたのを私たちは全力で応援いたしますので、下記のカレンダーよりお気軽にお申し込みください。
まとめ
いかがでしたでしょうか。
HTMLテキストエディタはたくさんあるので選ぶのに迷うと思いますが、選ぶポイントをおさえておけば、自分にあったエディタを選ぶことができると思います。
是非この記事を参考にして、お気に入りのHTMLエディタを見つけてみてください！
