自分に合ったエディターを使おう！

#### プログラムやHTML、何で書いていますか？

皆さんはプログラミングをしたりHTMLを使ってwebページを作ったりする際に、どんなツールを使っているでしょうか？

これらは基本的にはテキストが書ければよいので、Windowsならメモ帳、MacならテキストエディットがあればプログラムもHTMLも書くことができます。初心者向けのプログラミング入門の書籍でも「このページに載っているプログラムを実際に入力してみよう。エディタはOS付属のメモ帳など何でもいい・・・」という記述があったりします。

しかし、少しプログラミングを続けていくとわかりますが、OSに標準で付属しているエディタで複雑なプログラムを書くことはなかなか大変です。

上の例はインデント（プログラムの内容に合わせて行の先頭に空白をいれること）がついているのでまだましですが、変数がどれなのか、if文やfor文のオプションがどれなのか一見して非常にわかりにくいですね。

おそらく、どのような天才的なプログラマであってもこの状態だと多くのバグを作り込んでしまうでしょう（90年代以前のプログラマたちにとってはこれが普通だったのかもしれませんが・・・）。

もっと視認性を良くして実際のプログラムの動作を作ることに専念したいものです。そこで、プログラミング用のエディタで上のプログラムを表示してみましょう。

だいぶ視認性が良くなりました。専用のエディタで表示することで変わった部分は以下の部分です。

変数、関数、if文などの構文の始まり、文字列などが色分けされてわかりやすくなった
コメント部分も灰色でわかりやすくなった
行数表示があるのでデバッグなどの時に役に立つ

これだけでも十分に専用エディタを使う価値はあるのですが、最近のエディタは便利な機能を多く搭載しています。

専用エディタの便利機能

補完

多くのエディタには補完機能がついています。これはプログラムを書いていて、よく使う関数名などを書きかけたときにtabキーを押すと勝手に関数名や構文を入力してくれる、というものです。以下の例はAdobe BracketsでJavaScriptを書いているときの例です。「doc」まで入力すると使いそうな候補を勝手に出してくれるので、それを選択すれば勝手に入力される、というものです。

スニペット

スニペットとは、よく使う構文や単語などを登録しておいて短いキーワードを入力すると、登録しておいた構文などに勝手に変換してくれる機能です。

上の例ではJQueryでよく使う$(document).ready()に「ddr」というスニペットを登録しています。「ddr」と入力してリターンキーを押すと右側の構文が展開されます。この機能を使うことで素早い入力だけでなく、よく使う構文のスペルミスなども防げます。

これと似た機能として、いくつかのエディタでプラグインとして使えるEmmetという機能があります。これはHTMLを簡単に入力するための構文のようなものです。例えば、id名が「ID」でクラス名が「CRASS」のdivを入力する際に「div#ID.CRASS」と入力してリターンキーを押すと以下の写真のように展開される、というものです。

これもめんどくさがりな人にはなかなかうれしい機能です。

複数選択、一括編集

最近のエディタではプログラム中の同じ単語を任意に選択して、一括で編集できる機能があったりします。以下のアニメGIFはAdobe Bracketsの公式のものです。

矩形編集

矩形編集もあると便利な機能です。これはプログラムの内容を四角く（矩形）選択し、その範囲内のそれぞれの行を一括で編集する方法です。

これもAdobe BracketsのアニメGIFがありました。行頭に一括で文字を追加する、という使い方をしています。

他にも多くの機能がありますが、挙げていくとキリがないのでひとまずこれくらいにしておきましょう。

いろいろなエディタがあるけどどれがいいの？

世の中には多くのエディタがあります。古くからある2つのエディタのVi(m)とEmacsそれぞれのユーザ間で「Vimのほうが優れているぜ」「絶対emacsのほうが使いやすい」など論争が起きていたりするほどです。これらのエディタはカスタマイズ性が非常に高く、ユーザの好みの環境が作れるので多くのエンジニアに使われているのですが、制作された時期が古いため、制作者の一人が「もっとモダンないいエディタがあるはずだ」という趣旨のことを言っています。

また、iPhoneやiPad、Apple WatchなどのiOSの開発にはObjective-CやSwiftなどの言語が使われますが、この場合はAppleが公式に提供しているXcodeを使うのが良いと思います。Xcodeは単なるエディタではなくIDE（統合開発環境）なので起動や動作は重いのですが、公式のものだけあって優秀な補完をしてくれたり、iOS開発の役に立つ機能が詰まっています。同じようにAndroidの開発の場合はAndroid Studioを使うといいと思います。こちらもXcodeと同じくIDEですが、以前から使われていたEclipseというIDEに変わる新しい公式推奨の開発環境です。Android開発ではまずその開発環境を構築する、という部分で挫折してしまったりするのですが、Android Studioだとインストールと同時にほぼ必要な開発環境が出来上がる、という印象です。

その他国産の秀丸エディタ、サクラエディタなどが使われていたりもしますが、最近になってモダンで機能が豊富なエディタがいくつか出てきました。これらをそれぞれ紹介したいと思います。

Sublime Text 3

sublimetext.com

数年前にSublime Text 2が出た頃から様々なところで紹介され、爆発的にユーザ数が増えたエディタです。有料のシェアウェアなのですが、有料版を購入していない場合は保存時に「買ってね」という内容のダイアログが表示される、というだけなので一応無料で使うことができます。気に入ったら購入するのもいいと思います。

特徴はかなり豊富なプラグインを使って様々な機能を追加できることです。少し検索するとおすすめのプラグインを紹介するサイトがたくさん見つかります。プラグインを導入していくことでどんどんかゆいところに手の届くエディタになっていく、という最近のモダンなエディタのはしりだと思います。

筆者が使用してみての感想は

起動が速い、動作が速い
プラグインが豊富で、どんな言語を書いていてもそれを補助するためのプラグインがある印象
文書内検索ボックスに日本語を入力すると消えてしまう、など日本語入力に少し難があり
しかしこの辺りもユーザ数の多さで解決されていくのかも

とりあえず便利なエディタを使ってみたい、という人におすすめです。インストール方法なども少し検索すると山のように出てきます。

Adobe Brackets

Brackets.io

PhotoshopやIllustratorで有名なAdobeがオープンソースのフリーソフトウェアとして開発しているエディタです。このBracketsを元に製品化したものがAdobe Edge Code CCのようです。こちらもSublime Textと同様に様々なプラグインを追加して自分好みにカスタマイズしていくことができます。

Sublime Textよりも後から出てきたエディタなので、以前は「Sublime Textならあれができるのに」などと思う部分が多々あったのですが、最近はそのような部分もかなり減ってきて使いやすくなっています。筆者は現在HTML、JavaScript、CSSを書く際はこのBracketsを使っています。このエディタはweb開発に関するコーディングをメインターゲットとしているようでなかなか便利な機能が揃っています。

例えば、「#ffffff」などと色番号を指定している部分にカーソルをあわせてcommand+E（WindowsだとCtrl+E）でカラーピッカーから色を選択できたり

Brackets内でpsdを開いてそこから情報を取得できたり

といったかなり便利な機能がプラグインを導入しなくても標準で入っています。この辺りはさすがAdobeという感じですね。

こちらもおすすめプラグインを紹介するサイトがたくさん出てきます。

特徴としては

web開発に特化している印象
Adobeならではの機能（psdを開く、Creative Cloudと連携する）などを搭載
Sublime Textに比べると若干動作が重い（が、Dreamweaverよりだいぶ軽い）
まだ欠けている機能がある（画面を2分割以上にできない、検索ボックスに入力した文字が保存されない、など）

もう少し開発が進めばさらに良くなると思います。

Atom

Atom.io

おそらく今回紹介するエディタの中で一番新しいものです。開発しているのはGitHubということで、いかにもエンジニア向けのエディタ、という印象ですね。今回紹介するエディタの中では筆者はまだ唯一本格的に使用したことがないものでもあります。Atomがまだリリースされた直後の頃にインストールしてみて、その当時メインで使用していたSublime Textと比較してまだまだ、という印象でそれから触っていませんでした。

しかし、最近になって安定板のバージョン1.0がリリースされた、ということで調べてみると、世間での評判がなかなか上がっているようです。また、「Ask Stack」というプラグインを導入すると、Atom内の検索ボックスに知りたい内容を入れるとStack Overflow（プログラミングQ&Aサイト）が表示されるという面白い機能もあるようです。その他いろいろと面白そうな機能があるようなので、これを機にもう一度触ってみようかと思っています。