こんにちは 菅原です。
HTMLを最初にコーディングする際に使用したエディタはWindowsのメモ帳でした。
今考えるとゾッとします。(((；ﾟДﾟ)))ガクブル
今回はコーディングやプログラミングに使用するツール、テキストエディタを紹介していきます。
Windowsに標準装備のメモ帳やMacに標準装備のテキストエディットでももちろんコーディングは出来ますが、これから紹介するテキストエディタに比べると非常に使いにいです。
使いにくいということは、ミスもしやすいですし、作業効率も悪い。
個人の趣味で行っているものに関しては時間は関係ないかもしれませんが、実務では納期などがありスピードを重視しなければなりません。
普段使用するものですから、快適にコーディングやプログラミングしたいですよね。(^o^)
以下にあげたおすすめのテキストエディタで自分にあったものを探して快適かつ効率よく作業出来る環境をつくってみてはどうでしょうか？
1. 無料テキストエディタ
1-1. ATOM
最初にご紹介するのはGItHub社製オープンソースエディタ「ATOM」です。
パッケージ（追加拡張機能）が非常に充実しており、UIテーマや言語ごとのコード補完機能、またパッケージを入れることにより日本語対応にすることも可能となっています。
用途に合わせて自分好みにカスタマイズすることにより作業も捗ること間違いなしです。
拡張機能でプログラミング学習サイトのドットインストールをテキストエディタ内でブラウザの様に開くことが出来るので、エディタを画面分割して１画面にドットインストール、もう１画面にエディタでコードを自分で書くと言うようなことも出来ますね。
現在も開発が進んでおり、今後も目が離せないエディタの一つです。
1-2. Brackets
こちらはAdobe社製のオープンソースエディタ「Brackets」です。
特長はデフォルトでたくさんの機能が装備されています。もちろん日本語も対応済です。
さらには、拡張機能も備わっていて入手も簡単に行なえます。
その他にも便利な機能として、htmlやcssを修正した瞬間にブラウザに修正内容が反映されるライブリロードは初心者にもやさしく、使っていて気持ちがいいですね。(｀・ω・´)ｼｬｷｰﾝ
htmlタグのclassからcssクイック編集できる機能なども斬新な機能の一つです。
1-3. CotEditor（for mac）
次にご紹介するのはmacOS専用テキストエディタ「CotEditor（for mac）」です。
UIがとてもシンプルで見やすいですね。こう見えて必要な機能は十分揃っています。
なんと言っても動作が軽い！サクサク動きます。
日本製なのでもちろん日本語に対応しているのはもちろん、エンコーディングを変換する際に変換できない文字をリストアップしてくれるところなど、何気なく痒いところにも手が届いています。
HTML、CSS、PHP、JAVASCRIPTなど５０以上の主要な言語にも対応していますので、ウェブサイトを作成するには全然困りません。
シンプルイズベストを表したようなエディタです。
2. 有料テキストエディタ
2-1. Sublime Text
「恋に落ちるテキストエディタ」で有名な「Sublime Text」です。
最近はAtomやBracketsに押されている感もありますが、まだまだ人気があり私の周りでも好んで使用しているエンジニアがたくさんいます。
かくいう私もこのUIやシンタックスハイライトのカラーリングに一目惚れしまして現在も使用しています。
UIは設定のカラースキーマで変更することにより自分の好みに変更も可能です。
2000とも3000とも言われているプラグインを入れて機能を拡張することにより、下記に挙げるIDEにも劣らない最強のテキストエディタに仕上がります。
ライセンス料は2017年3月15日現在でUSD$70となっています。
無料トライアルがなんと機能制限なし、トライアル期間も設けていませんので、
充分に利用して気に入ったらライセンスを購入しましょう。
3. IDE（統合開発環境）
IDEを簡単に説明すると、テキストエディタとしての機能はもちろん、プロジェクト管理やバージョン管理、FTPクライアント、コード補完機能やコンパイル、etc…様々な便利な機能をひとまとめにしたツールです。
3-1. WebStorm
JETBRAINS社製のHTML、CSS、JavaScriptに特化したIDE「WebStorm」です。
リファクタリングに優れており、作業スピードが飛躍的に向上します。diff機能も備わっており、3日程度前のソースコードと現在のソースコードを時系列的に確認し比較もできます。
WebStormには30日間の無料トライアル期間があります。
日本の代理店のサムライズムにてパーソナルライセンスが年間サブスクリプションで￥6,588にて購入できます。
3-2. PhpStorm
先ほど「WebStorm」をご紹介しましたので、関連したIDE「PhpStorm」もご紹介します。
JETBRAINS社製のWebStromの機能にphpとSQLの本格的なサポートが追加されています。
日本の代理店のサムライズムにてパーソナルライセンスが年間サブスクリプションで￥10,044にて購入できます。
3-3. Adobe Dreamweaver CC
adobe社製のIDEです。
イメージとしては同じadobe社製のBracketsにいろいろな機能を追加したものです。
最近のアップデートでUIの変更やSass/LESSに対応。Bracketsよりのエディタになりました。
リアルタイムプレビューでテキストエディタで書いたコードがプレビュー画面に反映されていくには気持ちいですね。またプレビュー無しでひたすらコードを書いていってあとでブラウザで確認といったことも、もちろん可能です。
Dreamweaverの特長は直感的に操作できる点につきます。レスポンシブのサイトを作成する際に設定したブレイクポインでの表示がどのような表示になっているかもプレビューで確認できます。
Bootstrap、Emmetのサポートも便利ですね。
びっくりしたのが、Dreamweaberはhtmlとcssのコードを書かなくてもサイト作れるんですよ。もちろん制約はありますが。
株式会社Ligさんのコラムで発見した記事でDreamweaverでHTML/CSSのコーディングをせずにWebサイトを構築してみたというコラムがありますので是非ご覧下さい。凄いです！
ライセンス価格は2,180 円／月です。
