初心者向けに現職Webエンジニアがデザイン、コーディング、ディレクションについて解説。

mogaBlog

Web コーディング

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

投稿日:2020年1月2日 更新日:

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

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

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

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

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

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

Dreamweaverがおすすめな理由

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

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

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

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

例えば・・・

  • タグを覚えていなくても、一文字入力すればタグの予測変換がでる
  • 画像のパスなどを手書きしなくても、自動的にパスを記述してくれる
  • ショートカットがとにかく豊富
  • 画像の中身をDreamweaver上で確認できる
  • リアルタイムでプレビューを見ながらコーディングできる

などなど。

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

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

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

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

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

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

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

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

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

Dreamweaverの金額

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

単体プラン コンプリートプラン
Dreamweverのみ PhotoshopなどAdobeソフトすべて
2,480 円(税別)
学生:1,980円(税別)
5,680 円(税別)

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

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

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

Dramweaverの申し込みはこちら

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

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

Atom

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

メリット

  • 動作が軽くストレスフリーで使える
  • 自分の好きな機能(プラグイン)を追加できる
  • 操作がシンプル

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

デメリット

  • 基本設定が英語(プラグインで日本語化できます)
  • 機能カスタマイズが自由すぎて初心者は戸惑いがち

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

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

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

Sublime Text

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

メリット

  • 動作が軽くストレスフリーで使える
  • 自分の好きな機能(プラグイン)を追加できる

デメリット

  • ダウンロードなどが英語(ツール自体は日本語化できます)
  • 機能カスタマイズが自由すぎて初心者は戸惑いがち

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



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

すでに投稿した記事でメモ帳でコーディングはやめたほうがいいと書きましたが、それはなぜかと言いますと、「文字コード」というものが関係してきます。
「文字コード」がおかしくなると「文字化け」という現象が引き起こされます。

少し詳しく説明します。

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

主な文字コード

  • Shift-jis
  • UTF-8

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

文字化けを起こします。

文字化け

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

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

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

まとめ

  • 初心者に一番おすすめなのはDreamwever(有料)
  • 無料エディターならAtomかSublimeTextが使いやすい!

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

この記事を書いた人

moga

moga

歴14年のフロントエンジニア。HTML/CSSはもちろん、JavaScriptも得意。主に初心者コーダー向けに記事を書いています。

Ads



-Web, コーディング

Copyright© mogaBlog , 2021 All Rights Reserved Powered by STINGER.