【HTMLコーディング】現役コーダーが厳選！おすすめエディター3つ

この記事では現役のフロントエンジニアである私が、おすすめのエディターを紹介します。
初心者向けに書いていますが、ツール難民の中級以上の方の参考にもなるはずです。

14年前、コーディングを始めたばかりの頃はツールの効率、使いやすさを度外視してひたすらコードを書いていました。

時が経ちスキルが上がってくると、効率や使いやすさを求めていくようになりました。
そうなると使いやすいツールは何か、効率化できる作業を簡単に実行できるツールは何かを探すようになり、いろいろなツールを試しました。
最初から使いやすいエディターを使った方が効率は上がるので、ぜひこの記事を参考にしてください。

初心者に一番おすすめ：【Adobe】Dreamweaver

初心者に一番おすすめなエディターツールはAdobeのDreamweaverです。（ドリームウィーバーと読みます）

最初に言っておきますが、Dreamweaverは有料です。無料ツールをお探しの方はこちら。

Dreamweaverがおすすめな理由

1. ものすごく多機能！コーディングが簡単にできる
2. 使い方の説明がネット上にたくさんあり調べやすい
3. 会社でもDreamweaverを使うところが多い

上記について、ひとつづつ解説していきますね。

1.ものすごく多機能！コーディングが簡単にできる

Dreamweaverはものすごくたくさんの機能がついています。
これは無料で使えるツールとは比べ物になりません。

例えば・・・

などなど。

特に画像やリンクのパスは”../img/img.jpg”なのか”../../img/img.jpg”なのか、初心者がミスしやすい部分でもあります。

Dreamweaverを使えば、そういったミスやつまづきを減らすことができます。

ちなみに・・・私が新卒で入社したときはAdobeではなくMaromedia社製の方を使っていました。（太古の昔ですね・・・）
私の場合、コーディングに慣れるにつれて多機能なのが逆に使いづらくなり、別のツール（Atom）に切り替えました。

2.使い方の説明がネット上にたくさんあり調べやすい

Dreamweaverは使っている人が多いので、ツールの使い方でわからないことがあればすぐにネットで調べることができます。

使いこなすことができれば、初心者にとってDreamwever以上に便利なツールはないです。
手取り足取りなのでコーディングも爆速でできます。

3.会社でもDreamweaverを使っているところが多い

Dreamweaverを採用している会社が多いです。
複数人で作業する場合ファイルの管理がしやすい、Photoshopとセットで買うと安い・・・などが理由です。

なので、これからコーダーとして就職しようという方は、あらかじめ慣れておくためにDreamweaverを選ぶのも手です。

Dreamweaverの金額

以下は月額あたりの価格です。

はっきり言って結構高いです。

コーディングをするだけなら、単体プランで十分です。
ただし、PhotoshopやIllustratorなどwebデザインで使われるツールも練習したい場合はコンプリートプランがおすすめです。

無料体験もあるので、気になる方はまず無料体験をしてから購入しましょう。

Dramweaverの申し込みはこちら

おすすめの無料エディター

Dreamweverはちょっと高い・・・という方は無料ツールを使いましょう。
コーディング用エディターは、無料で高機能なものがたくさんあります。（Dreamweverほど至れり尽くせりという感じではないですが・・・）
無料なので、いくつか試してみて、一番しっくりくるエディターを選ぶのもいいですね。

Atom

現在、私がお仕事で使っているツールです。
現場でも（Dreamweaverを除けば）Atomを使っているコーダーが多い印象です。

メリット

Atomの魅力は何といっても、自分で好きなプラグインを入れ、自分好みのツールに育てることができる点です。
ただし、初心者は経験が少ないため「どのプラグインが自分に必要なのか」の判断が難しいところです。

デメリット

Dreamweaverのようにパスの自動挿入ができないなど、初心者は少しつまづくかもしれません。
しかし、手取り足取りな機能がない分、自分で調べ、試し、失敗と成功を繰り返しながらより早いスピードでコーディングを覚えられるはずです。

タグやcssプロパティの予測候補機能はついているので、タグをすべて覚えていなくても使えます！

Atomのダウンロードはこちら

Sublime Text

次におすすめなのがSublime Textです。
正直、機能面はAtomとほぼ同じなのでこの辺りは好みで選べば問題ないです！

メリット

デメリット

SublimeTextのダウンロードはこちら

「メモ帳」はやめた方がいい！

windowsのパソコンにデフォルトで入っている「メモ帳」でのコーディングはオススメできません。
それはなぜかと言いますと、「文字コード」というものが関係してきます。

「文字コード」がおかしくなると「文字化け」という現象が引き起こされます。

少し詳しく説明します。

文字コードというのは、簡単に言うと「webで使う文字の種類」です。
webで使われる文字コードは主に2種類あります。

主な文字コード

webサイトを作るとき、これらの文字コードのうちいずれかを選択して作成します。（現在はutf-8が主流です）
しかし、メモ帳はshift-jisでしか保存できない場合があります。
utf-8のサイトにshift-jis形式のファイルをアップするとどうなるか？<

文字化けを起こします。

なので、メモ帳はやめましょう。

あと普通にDreamweverやAtomなどのコーディング専用エディターの方が使いやすいです。

※Windows10のメモ帳だと改善できると下記の記事にありました。
「メモ帳」に多数の改善、BOMなしUTF-8がデフォルト保存形式に ～「Windows 10 19H1」

まとめ

たくさんコーディングをするうちに、自分の使いやすいエディターがわかってきます。
合わないな、と思ったら別のエディターに切り替えるのも手ですね。
ではまた。

オススメ記事
未経験からwebコーダーになるために絶対押さえておきたいスキルと勉強法
【htmlコーディング】現役コーダーが選んだ必須ツール11選