dreamweaver使用者の僕が、恋するテキストエディタ「sublime text」に変えたら作業スピードが3倍になった話

dreamweaverを使い始めて2年。

どうしても作業効率を上げたいと考えていた自分、リアルタイムプレビュー的な感じでgoogleデベロッパーツールを見ながら作業が出来る方法がないものか?と考えていました。

そんな時にググって見つけたのが、恋するテキストエディタと称される「sublime text」だった。

sublime textとは?

要はテキストエディタだ。

dreamweaverのような高機能なものではないが、逆に言うとコーディングやマークアップに必要な最低限な機能だけを取り揃えているので軽量。

しかもsublime textの凄いところはその軽さだけではない。

プラグインを使える拡張性にこそ、sublime textの素晴らしさはある。

sublime textを使ってみた所感

  • デフォルトのショートカットキーが便利
  • 入力補完が審美眼過ぎる
  • エディタ自体がかっこいい←
  • kode kitなどのコンパイルソフトをわざわざ用意しなくても、SCSSを書きながらcommand+bなどで瞬時にコンパイルができる。

デフォルトのショートカットキーの便利さは半端ない。

導入してから1週間、筆者がよく使うキーは、command+Dだ。

例えばul内のliのクラス名を変えたい時などに、1個1個選択して修正するのはめんどくさいよね、と思ったりする。

しかし、sublime textならそんな時、command+Dを押す事で、現在選択しているのと同じタグを自動で抽出してくれて、複数選択をしてくれるのだ。しかも5個抽出したうちの3個だけ修正したいと言った場合、command+Dを3回押す事で、その3つだけを抽出してくれるのだ。

もちろん同じタグを全ていっぺんに選んで修正する事も可能だ。

入力補完が審美眼過ぎる

例えば、cssで、text-align:centerを書きたいとする。

そんな時、sublime textなら、「tac」と入力しtabキーを押すだけで、text-align:centerが入力されてしまうのだ。

これだけですでに3分の1は時間が短縮が出来てしまう。

これはsublime textデフォルトの機能ではなく、「hayaku」というプラグインを入れてこそ使える機能だが、このようにsublime textは、必要な機能(=パッケージ)を都度インストールして使うという形だ。

さらに言うと、emmetというパッケージを導入する事でzen-cordingがサラッと行えるのだ。

例えば、zen-cordingとは何かと言うと、例えば、「ul>li.item$*5」と入力し、control+Eを入力すると、

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

と入力できてしまう優れものだ。これだけでも時間が5分の1に短縮されるのが目に見えてしまう。

これはもう、sublime textから離れられない。

エディタ自体がカッコいい

sublime text centurion

あたかもプログラミングやってますよみたいな雰囲気を醸し出せるので、カフェで優越感に浸れるというのがsublime textの強みでもある。

それは自分だけかも知れないが、とにかく、テーマやカラースキームを自分で自由に作れるし、且つすでにたくさん存在するテーマから選ぶ事が出来るのだ。

筆者は、その中二病的な格好良さから「centurion」というテーマを利用している。とにかく格好良過ぎて何時間でも作業に没頭できるというのが最大の強みだ。

プラグインはその他にもたくさん存在しているし、自分が必要なものだけを入れれば良いので、とにかくカスタマイズ性がえげつないのだ。

sublime textのここが凄い

「Hayaku」や「emmet」以外で筆者が一番役に立っているなと感じているものとしては、

SublimeServer、LiveReloadとの併用である。

ブラウザと連携させる事で、ガリガリとscssを書いたものが即座にコンパイルされ、ブラウザで表示される。

自宅で作業する場合は、デュアルディスプレイにし、片方はブラウザで、手元のパソコンはガッツリsublime textを表示させる。そうすれば即座に大きな画面でプレビューが表示されるので作業スピードは格段に上昇する。

次回は、筆者がこれは必要だと思うsublime textのパッケージを紹介します!