WEBサイトを作ってみたい!【第2回 おすすめテキストエディタ 厳選7選 】

  • このエントリーをはてなブックマークに追加
HTMLを最初にコーディングする際に使用したエディタはWindowsのメモ帳でした。 今考えるとゾッとします。(((;゚Д゚)))ガクブル こんにちは 菅原です。 今回はコーディングやプログラミングに使用するツール、テキストエディタを紹介していきます。 Windowsに標準装備のメモ帳やMacに標準装備のテキストエディットでももちろんコーディングは出来ますが、これから紹介するテキストエディタに比べると非常に使いにいです。 使いにくいということは、ミスもしやすいですし、作業効率も悪い。 個人の趣味で行っているものに関しては時間は関係ないかもしれませんが、実務では納期などがありスピードを重視しなければなりません。 普段使用するものですから、快適にコーディングやプログラミングしたいですよね。(^o^) 以下にあげたおすすめのテキストエディタで自分にあったものを探して快適かつ効率よく作業出来る環境をつくってみてはどうでしょうか? 目次 1.無料テキストエディタ  ・ATOM  ・Brackets  ・CotEditor(for mac) 2.有料テキストエディタ  ・Sublime Text 3.IDE(総合環境開発ツール)  ・Adobe Dreamweaver CC  ・WebStorm  ・PhpStorm まとめ

1.無料テキストエディタ

ATOM

https://atom.io/

GItHub社製オープンソースエディタです。
パッケージ(追加拡張機能)が非常に充実しており、UIテーマや言語ごとのコード補完機能、またパッケージを入れることにより日本語対応にすることも可能となっています。
用途に合わせて自分好みにカスタマイズすることにより作業も捗ること間違いなしです。
拡張機能でプログラミング学習サイトのドットインストールをテキストエディタ内でブラウザの様に開くことが出来るので、エディタを画面分割して1画面にドットインストール、もう1画面にエディタでコードを自分で書くと言うようなことも出来ますね。

現在も開発が進んでおり、今後も目が離せないエディタの一つです。

Brackets

http://brackets.io/

Adobe社製のオープンソースエディタです。
特長はデフォルトでたくさんの機能が装備されています。もちろん日本語も対応済です。
さらには、拡張機能も備わっていて入手も簡単に行なえます。
その他にも便利な機能として、htmlやcssを修正した瞬間にブラウザに修正内容が反映されるライブリロードは初心者にもやさしく、使っていて気持ちがいいですね。(`・ω・´)シャキーン
htmlタグのclassからcssクイック編集できる機能なども斬新な機能の一つです。

CotEditor(for mac)

macOS専用 テキストエディタです。
UIがとてもシンプルで見やすいですね。こう見えて必要な機能は十分揃っています。
なんと言っても動作が軽い!サクサク動きます。
日本製なのでもちろん日本語に対応しているのはもちろん、エンコーディングを変換する際に変換できない文字をリストアップしてくれるところなど、何気なく痒いところにも手が届いています。

HTML、CSS、PHP、JAVASCRIPTなど50以上の主要な言語にも対応していますので、ウェブサイトを作成するには全然困りません。
シンプルイズベストを表したようなエディタです。

2.有料テキストエディタ

Sublime Text

「恋に落ちるテキストエディタ」Sublime Text

最近はAtomやBracketsに押されている感もありますが、まだまだ人気があり私の周りでも好んで使用しているエンジニアがたくさんいます。
かくいう私もこのUIやシンタックスハイライトのカラーリングに一目惚れしまして現在も使用しています。
UIは設定のカラースキーマで変更することにより自分の好みに変更も可能です。
2000とも3000とも言われているプラグインを入れて機能を拡張することにより、下記に挙げるIDEにも劣らない最強のテキストエディタに仕上がります。

ライセンス料は2017年3月15日現在でUSD$70となっています。
無料トライアルがなんと機能制限なし、トライアル期間も設けていませんので、
充分に利用して気に入ったらライセンスを購入しましょう。

3.IDE(統合開発環境)

IDEを簡単に説明すると、テキストエディタとしての機能はもちろん、プロジェクト管理やバージョン管理、FTPクライアント、コード補完機能やコンパイル、etc...様々な便利な機能をひとまとめにしたツールです。

WebStorm

https://www.jetbrains.com/webstorm/

JETBRAINS社製のHTML、CSS、JavaScriptに特化したIDEです。

リファクタリングに優れており、作業スピードが飛躍的に向上します。diff機能も備わっており、3日程度前のソースコードと現在のソースコードを時系列的に確認し比較もできます。

30日間の無料トライアルがあります。

日本の代理店のサムライズムにてパーソナルライセンスが年間サブスクリプションで¥6,588にて購入できます。

PhpStorm

https://www.jetbrains.com/phpstorm/

JETBRAINS社製のWebStromの機能にphpとSQLの本格的なサポートが追加されています。

日本の代理店のサムライズムにてパーソナルライセンスが年間サブスクリプションで¥10,044にて購入できます。

Adobe Dreamweaver CC

http://www.adobe.com/jp/products/dreamweaver.html

adobe社製のIDEです。

イメージとしては同じadobe社製のBracketsにいろいろな機能を追加したものです。
最近のアップデートでUIの変更やSass/LESSに対応。Bracketsよりのエディタになりました。

リアルタイムプレビューでテキストエディタで書いたコードがプレビュー画面に反映されていくには気持ちいですね。またプレビュー無しでひたすらコードを書いていってあとでブラウザで確認といったことも、もちろん可能です。
Dreamweaverの特長は直感的に操作できる点につきます。レスポンシブのサイトを作成する際に設定したブレイクポインでの表示がどのような表示になっているかもプレビューで確認できます。
Bootstrap、Emmetのサポートも便利ですね。

びっくりしたのが、Dreamweaberはhtmlとcssのコードを書かなくてもサイト作れるんですよ。もちろん制約はありますが。
株式会社Ligさんのコラムで発見した記事でDreamweaverでHTML/CSSのコーディングをせずにWebサイトを構築してみたというコラムがありますので是非ご覧下さい。凄いです!

ライセンス価格は2,180 円/月です。

体験版もあります。詳しくはコチラ

まとめ

テキストエディタ

  • 動きが軽い
  • 標準でいろいろな機能が備わっていないので、自分の望むような拡張機能でカスタムしていくことが出来る。必要のない機能は入れなくて良い。
  • プラグインを入れすぎるとやはり動きがもっさりしてくる。しかも標準の機能ではないのでショートカットキーが被ってしまい設定し直さないとならない羽目になることも。

IDE

  • これ1台でOK的な!
  • IDEにもプラグインは存在します。
  • 機能が多すぎて使いこなせられないかも。
  • アップデートで改善されてきたとはいえ、動きは重くなりがち。

各個人で好みが別れると思いますが
「エディタの名前がいい」、「UIが気に入ってる」、「機能がすごい」など
自分が気にいったものを使うのが1番ですよね。その上でカスタマイズしていくのが自然流れですね。
参考にして頂いて、作業効率のUPを目指しましょう!

SNSでもご購読できます。

コメントを残す

*