こんにちは、仁木です。
エンジニア・プログラマーのみなさん、エディターは何を使っていますか?
私はここ一年くらいで「Brackets」-> 「Atom」 -> 「Brackets(出戻り)」 -> 「Sublime text3」といった具合に変わり、今は「Visual Studio Code」を使っています。
自分の中でしっくりこなかったり、使い出していくうちにここが気に入らない、みたいな部分が出てきたり、はたまた話題のエディターが気になってちょっと手を出してみたり…
エンジニアにとってエディターとは、かなり重要な商売道具とも言えます。
そこで今回は多くの人に紹介出来そうなオススメエディター4つを紹介したいと思います。
Mac、もしくはWindows専用ではなくどちらのOSでも使えます(Unix系もOK)。
OSが違うとUIやショートカットなどの細かい部分が違ったりしますが、機能は全く同じです。
今回紹介するエディターはそういったOSの制限がないのと、日本ユーザーも多いのでTipsや不具合などの対処も調べやすいです。
ちなみにSublime Text 3を除いて全てElectronフレームワークで開発されており、最近のソースコードエディターらしさがあります。
最近のエディターではパッケージ・プラグイン・拡張機能など、エディターによって呼び方は違いますがコーディングを手助けしてくれる便利な機能を追加してカスタマイズすることが出来ます。
これらの機能は、例えばWordPressのプラグインの様に、世界中のデベロッパーがパッケージを作成して配布しているものです。
有名なものだと、マークアップを効率的にコーディングできる「emmet」や各言語の構文チェックをしてくれる「Lint」などがあります。
またエディター内でGitやターミナル、FTPを使えるようになるものなど、様々なプラグインがあります。
パッケージを使いこなすことでコーディングも早くできるでしょう。
またタブの切り替えや画面分割、ミニマップの表示など最近のエディターだとどれも機能として備わっているので使い勝手が良いです、
PythonやJavaなど、多く言語のシンタックスハイライトに対応しているので複数の言語を使う人にも対応しています。
BracketsはAdobeが提供しているHTML、CSS、Javascriptのコーディングのためのテキストエディタです。
現在のAdobe Dreamweaverのエディタ部分の元になっています。
HTML、CSS、Javascriptに特化していますが、もちろん他のメジャーな言語も使えます。
インストールした時点で日本語化されています。
ライブプレビュー機能がついており、HTMLファイルとCSSファイルを変更するとGoogle Chromeでリアルタイムに確認することが出来ます。
またAdobeの製品だけあって、Photoshopとの連携機能もついています。
Photoshopのカンプデータから画像データやスタイルを抽出することができる拡張機能「Extract for Brackets」があります。
その他Bracketsの特徴に、CSSのクイック編集機能がついておりHTMLファイルのクラス名を右クリックして「クイック編集」を選択すれば直下に編集ウィンドウが開きCSSを編集することが出来ます。
また画像ファイルパスの上にカーソルを合わせると画像のプレビューが小窓に表示されるなど、細かい部分で使い勝手を工夫されています。
デフォルトの機能は他のエディターに比べてシンプルですが、パッケージを追加することで機能を拡張していくこともできます。
シンプルであることと、Adobeの製品であることから、Web業界の初心者のエンジニアさんにもとっつきやすいエディターではないでしょうか。
ちなみにBracketsは以前単体で紹介した記事もあるので興味のある方はこちらもどうぞ。
AtomはGitHubの創業者Chris Wanstrath氏が「Web技術を用いて、Emacsのように自由にカスタマイズできる新世代のエディタを開発する」という思いから始まったGithubが開発したエディタです。
(ロゴのデザインがFB社のReactに似ています)
インストール時は英語ですがパッケージをインストールすることで日本語に出来ます。
Githubが開発しているだけにGit/Githubとの連携も充実しており、Atom内でGit操作が完結させられます。
サイドバーのディレクトリツリーではファイルやディレクトリのドラッグ&ドロップが可能です。
他のブラウザだとFinderから操作しないといけないので、地味な機能ですが効果大の使いやすさです。
また、Atomにはデフォルトでマークダウンのプレビュー機能がついており画面2分割して、片方で文書を書いてもう片方でプレビューするなどといったことも可能です。
Atomは他のエディタよりパッケージでの拡張やキーバインディング(ショートカット)の登録などの環境設定のカスタマイズが自由に行えるのが強い印象です。
自分好みにエディターをカスタマイズし尽くしたい人にオススメです。
Sublime Text 3は今回紹介しているエディターの中では一番歴史の長いエディターです。
「恋に落ちるエディター」ともっぱらネット上で言われている程、たくさんの人に愛されているエディタです。
初心者から熟練のプログラマーまで、幅広い層を受け止められるような懐の深さがあります。
こちらもインストール時は英語ですが、パッケージをインストールして日本語にできます。
Sublime Text 3の特徴は何と言ってもパフォーマンスの高さです。
起動時間や文字検索・置換の速度が他のエディターに比べて圧倒的に早く、ストレスフリーな環境でコーディングに集中できます。
Visua Studio CodeはMicrosoft社が開発したエディターです。
標準でデバッグ、Gitクライアントの統合、ターミナルの操作などの機能が備わっており、インストール段階でかなり充実したエディターとなっています。
またショートカットも多く、画面の切り替えが簡単に行えます。
インストール時は英語ですが、パッケージのインストールとコンフィグファイルの変更で日本語にできます。
※ネットではインストール時から日本語になっているという記事が多くありましたが何故か自分の環境では英語になってしまいました。
Visual Studio CodeもAtomと同じように標準でマークダウンのプレビュー機能がついており、マークアップ の文章を簡単に確認することが出来ます。
HTML、PHP、CSS、Javascriptなどを普段コーディングしているなら、どのエディターも基本的な機能に差はないと思います。
カラースキームも、どのエディターもたくさんのスキンを配布しているので自分好みの見た目にカスタマイズできます。
差が出てくるところだと、「パッケージ」、「パフォーマンス」じゃないかなと。
パッケージはそのエディターでしかないモノもたくさんあるので、このパッケージを使いたいからこのエディターを使うっていうのもあると思います。
Bracketsだと、以前に入力した色コードやクラス名、Javascriptコードの入力補完をしてくれるプラグインなどがあり、HTMLやCSSをがっつりコーディングするのに便利なプラグインが豊富にあります。
また「Brackets」や「Atom」は「Visual Studio Code」や「Sublime Text 3」に比べると起動時間や文字置換の速度が遅く、快適さは少し劣るかなといった印象です。
パフォーマンスは「Sublime Text 3」が圧倒的だと思います。
これだけ充実した機能が組み込まれているエディターですが、無料で利用できるのがすごいです。
ただしSublime Text 3のみライセンス購入するまで、たまにメッセージウィンドウが表示されます。
なので、私みたいに全部試してみると自分に合ったエディターが見つけられると思います。
いかがでしたでしょうか、エディターを変えて快適なエンジニアライフを送りましょう!