HTML・CSS・Javascriptのエディタは「Brackets」

お世話になります。林です。
今日は、一番最初にプログラミングをする時に悩むエディタ選びのお話をしたいと思います。

代表的なエディタとしては、Brackets,mi,サクラエディタ,Sublime text,Dreamweaver,Visual Studio Code,Atomなどがありますが、それぞれ一長一短あります。

その中で、私がおすすめするのはBracketsです。今日はその理由も含めてお話したいと思います。

HTML・CSS・Javascriptエディタ選びの基準

まず、私の中でのエディタ選びの基準としては、

  1.  日本語対応がなされていること
  2.  ライブコーディング対応
    (ソースコードを編集しながら仕上がりをリアルタイムで把握できること)
  3.  動作が軽いこと
  4.  ソースコードだけ見ていても仕上がりがイメージしやすいこと

の四点があります。この基準からそれぞれについて比較検討すると、

日本語対応 リアルタイム 動作の軽さ 仕上イメージ
Brackets
Atom
VS Code ○(?)
Sublime text
Dreamweaver
mi
サクラエディタ

という形になります。それぞれについて詳しく見ていきたいと思います。

HTML・CSS・Javascriptエディタの日本語対応

まず、日本語対応についてですが、Bracketsの日本語対応はかなりスムーズで、公式サイトでダウンロードする段階から、こちらが日本語設定のブラウザだと分かったら瞬時に日本語に切り替わり、その後ダウンロードした後も一発で日本語表示になりました。

その点、Atomだと、英語の設定画面から後で日本語化しなければなりませんし、VS Codeも初期設定は日本語環境の場合には日本語ですが、アップデートのたびに英語に切り替わったり、少々日本語の扱いが苦手であることも考えるといまいちでしょう。Sulime textも日本語の扱いはうまくないと言われています。

HTML・CSS・Javascriptのライブコーディング

また、コードを編集した瞬間にサイトが変化していくライブコーディングですが、これは単純にモチベーションの部分からも、自分が編集したコードが実際にサイトに反映されているのを見るとテンションがアガリます。そういう意味から言っても必須の機能ですし、ちょっとしたミスにすぐ気づきやすくなるのも良い点です。

Bracketsだと、もともとのデフォルトの機能としてライブコーディング機能が入っているので、面倒な設定をせずにライブコーディングを最初から行うことが可能です。日本語化の話しにしてもそうですが、素人がプログラミングを始める上で、面倒な設定抜きですぐにこうした機能が試せるのは大事なことです。

HTML・CSS・Javascriptエディタの動作の軽さ

また、エディアは長く使うものですから動作の軽さは重要です。その点で言ってもBracketsはかなり優れています。同じAdobeが開発しているDreamweaverは、その高機能さゆえにしばしば動きが遅いですし、VS codeも気にならない程度ではありますがそういう側面はありそうです。そういう点から考えても、Javascriptベースで作られているBracketsの優位性はゆるぎません。

HTML・CSS・Javascriptエディタの仕上がりイメージ

他にも、Bracketsでは、色指定がある部分や画像がある部分にカーソルを合わせると色がわかり、すぐ編集することもできるなどソースコードを見ているだけでも仕上がりイメージがわかりやすいのも魅力の一つです。他にも、予測変換がよくできていたり、ソースコードの整形がしやすいなど、かなり優れた部分はたくさんあるのですが、プログラミング初学者がBracketsを選ぶ理由としてはこれだけでも十分かなと私は考えています。

プログラミング・ネットビジネスのご相談はこちらから

「ネットビジネスがうまくいかない……」という方は、こちらからご相談ください。
(記事執筆者が相談対応させていただきます!)