テキストエディタ選びに迷ったらコレ！SublimeTextがすごい

SublimeTextは何ができるの？

”恋に落ちるエディタ”の異名を持つSublimeTextは、初心者からコアユーザーまでたくさんのエンジニアに愛される人気テキストエディタです。開発と言えばVimやmi、Codaなどが有名ですが、一度使うともう離れられなくなると噂になるほどの使い勝手の良さがSublimeTextの魅力！というのもSublimeTextは簡単な基本設定だけで痒い所に手が届く使い勝手の良さに加えて、自分好みにパッケージやAPIを追加してカスタマイズする事が出来ます。このカスタマイズラインナップが心憎い充実ぶりで、一度SublimeTextを使うと他のエディタに戻れなくなると言われるのも納得なのです。

便利な基本仕様＆機能

まず嬉しいのが、HTMLやCSSを見やすく色分けしてくれるカラースキーム22種類が標準搭載されている事！カスタマイズ不要なのが素晴らしいポイントです。また、OSに柔軟性があるのもいいですね。MacでもWindowsでもLinuxでも使用が可能です。そしてSublimeTextの大きな特徴は動作が軽い事。少し年代物でスペックが低めのMacbookAirでも、たまに強制終了されてしまうmiと違って一度も落ちませんでした。これは開発者として非常に助かる！さらに、SublimeTextは痒い所に手が届く色々な機能が充実しているのもポイントです。画面を左右に分割してHTMLとCSSを同時に見たり、タブ機能を基本実装していたり、矩形選択や複数選択が可能だったり、ファイルがワンクリックで開けるサイトバーを標準搭載していたりと開発者が幸せになれる機能が最初からついています。

充実のパッケージ機能で更に快適に

そしてSublimeTextのさらに便利な特徴は、充実のパッケージ機能！タグの開始タグと終了タグを見やすく強調表示してくれたら便利じゃないですか？途中まで入力すると変換候補が出てくれたら便利じゃないですか？FTPをSublimeText上で使用できたら便利じゃないですか？全部出来ます！更に、HTMLのタグからCSSの所定のプロパティに一発移動出来たりタグの開始と終了を強調表示してくれるする機能もパッケージを利用すれば使用可能なので、ストレスなく幸せな開発が出来るのがすごい！

SublimeTextをインストールしてみよう

それでは早速この便利なSublimeTextをインストールしてみましょう。インストールは驚くほど簡単です。まずはSublimeText3|http://www.sublimetext.com/3からパッケージをダウンロードします。

※今回はMac OS 10.9.5へのSublimeText3の導入を例に導入手順を見ていきます。

インストール

OS X向けのdmgファイルがダウンロード出来るので、そちらをアプリケーションフォルダにドラッグしてインストールは完了。これだけだと少々使いにくいので、使いやすいように最初の設定を行っておきます。

基本設定

Sublimetext>Preference>SettingsUserを開きましょう。そして設定をお好みの設定にカスタマイズします。今回カスタマイズ設定したのはフォントサイズや行間の広さ、不可視文字の表示、選択行のハイライト表示、自動改行。設定を変更する時にはデフォルト設定(Sublimetext>Preference>SettingsDefalult)が参考になります。

日本語変換がTabキーで選択できない時の対処法

SublimeTextでGoogle日本語変換使用時に日本語変換がTabキーで切り替えられない事があります。こちらはキーバインドを設定してやると解決します。こちらのサイトに対処法が詳しく解説されているので、ご参考にどうぞ。

・SublimeText3で日本語入力中にTabキーで入力・変換候補を選択できるようにする | R http://beadored.com/sublime-text-3-suggest-tab/

パッケージの導入

インストールと基本設定が完了したら、パッケージの導入です。パッケージの導入にはまず「Package Control」を導入します。View>Consoleに下記のスクリプトを貼り付けEnter。こうする事でPackage Controlがインストールされ、様々なパッケージを使う準備が出来ます。

import urllib.request,os; pf ='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler())); open(os.path.join(ipp, pf),'wb').write(urllib.request.urlopen('http://sublime.wbond.net/'+ pf.replace(' ','%20')).read())

Package Controlが導入出来たら、パッケージを導入します。command+Shift+pで「Command Palette」を開き、そこにinstallと入力。「Package Control:Install Package」が下に予測変換で表示されますのでこれを選んでEnterを押下。これでパッケージの導入準備が整いました。

後はテキストボックスに入れたいパッケージ名を入力して、予測変換で出てきたパッケージ名を選択してEnterを押下すると、SublimeTextにお好みのパッケージがインストールできます。

便利なパッケージ機能の紹介

それでは最後に、WEB開発時にあると助かるおすすめパッケージをご紹介しますね！どれも入れておくと便利なパッケージです。特にコードヒントやスニペット、Goto-CSS-Declarationはこれを入れておくだけで開発の効率がグンと上がる優れものです。

コードヒント/スニペット

例えばCSSのプロパティで「tex」と入力すると「text-align」など続きの文言候補リストを出してくれる機能がコードヒントです。スニペットは例えば「htm」と入力するとお決まりのパターンを入力してくれる機能のこと。コードヒントは「HTML5」「CSS3」、スニペットは「HTMLBoilerplate」が便利！

Goto-CSS-Declaration

パッケージの中でも特に優秀なのがこのGoto-CSS-Declaration。HTMLからCSSを探すのは一苦労ですが、これを入れておけば「Command+→」で一発で所定のCSSにジャンプしてくれます。CSSを探す作業は地味に手間なので、開発効率を高めるにはうってつけのパッケージです。

BracketHighlighter

こちらはタグの開始部分と終了部分をハイライト表示してくれるパッケージ。これを入れておけば、終了タグを目で追わなくてもいいのでストレスフリーな開発ができますね！

さて、今回はSublimeTextの魅力をご紹介しましたが、いかがでしたでしょうか？簡単にインストールできて基本設定後状態から使いやすい上に、パッケージを入れると更に使いやすくなるSublimeText。一度その快適さに慣れると他のエディタに戻れません。しかし、敢えて言うならプログラミング初心者の場合はコードヒントやスニペットは導入しない方がいいかもしれませんね。漢字と一緒で、自動入力が中心になると定着しにくくなります。とは言え、便利な機能がたくさん詰まったSublimeText。エディタ選びの際には是非、候補に入れてみてください。

sublimeテキストのパッケージに関する記事もありますので併せてご覧になってください。
エンジニア御用達！SublimeTextパッケージ活用術10選

またほかのエディタを網羅的に解説した記事もありますので併せてご参考にしてくださいませ。
初心者にオススメ！フリーのテキストエディタ10選