今回はそんなSublimeTextの魅惑とWeb制作に役立つ便利なプラグインを導入から順にご紹介していきます!これを読んだら乗り換えたくなるかも!?

" />

CodeIQ MAGAZINECodeIQ MAGAZINE

フロントデベロッパーが幸せになれる”恋に落ちるエディタSublimeText3”導入のススメ #HTML #CSS

2014.04.17 Category:技術コラム Tag:

  • 21
  • このエントリーをはてなブックマークに追加
IMG4

美しいインターフェイスや充実のプラグインラインナップで人気のテキストエディタ"SublimeText"の異名は”恋に落ちるエディタ”!話題で気になってはいるけれど、使い慣れたエディタから乗り換える気にはなれないな、と思っていませんか?

今回はそんなSublimeTextの魅惑とWeb制作に役立つ便利なプラグインを導入から順にご紹介していきます!これを読んだら乗り換えたくなるかも!?
by hibikiYzk

SublimeTextとは?


SublimeTextは多くのエンジニアを虜にし続けている人気のテキストエディタです。
Vimやmi、Notepad++、なんとDreamWeaverからも乗り換えた人が続出しているこのSublimeText。
何がそんなに多くの人達を魅了するのでしょうか?

その秘密は充実の基本機能と豊富なプラグイン&APIです。デフォルトでも使い勝手のいいSublimeText。そこへプラグインやAPIを追加導入することで”最強の開発ツール”に変身するのがSublimeTextの魅力なのです!

それでは今回は最新バージョンであるSublimeText3を例に、その魅力をご紹介しましょう!

SublimeText3の特徴

・動作がサクサク軽い
・Mac,Windows,Linuxなど様々なOSに対応
・豊富なカラースキーム搭載でデフォルトでお洒落
・簡単にメソッドやID、クラスに移動できる
・画面が左右に2分割できて見やすい
・矩形選択や複数選択が可能
・タブ機能実装
・ファイルをツリー形式で管理できる便利なサイトバー実装

プラグイン導入で実現できる便利な機能

・HTML5/CSSやRubyなど様々な強調表示に対応
・タグの開始タグと閉じタグのハイライト表示
・開発が捗る入力補完機能が使用可能に
・FTPが使用可能に

動作がサクサクしている上に、見た目が洗練されていて美しいのは、作業の効率化モチベーションアップに役立ちそうですね。価格は$70ですが評価版として実質無料で使用でき、機能制限は今のところなしという嬉しい一面もあります。(お気に入りになったら是非購入をご検討ください!)

さて、それでは早速SublimeText3を導入してみましょう!

SublimeText3の導入

今回はMacOSXへの導入を例に導入の流れを見ていきましょう。

まずは下記のサイトからパッケージをダウンロードします。

Sublime Text 3 | http://www.sublimetext.com/3

ダウンロードが完了したらdmgからアプリをアプリケーションフォルダにドラッグして、導入は完了。早速アプリを起動してみます。

初期設定

まずはSublime text > Preference > Settings Userを開き設定を記載します。
今回はフォントサイズや行間、不可視文字の表示、選択行のハイライト表示、自動改行をカスタマイズしてみました。

デフォルト設定(Sublime text > Preference > Settings – Defalult)を参考にお好みの設定にカスタマイズしてみて下さい。

初期設定が完了したらお楽しみのプラグイン導入に早速取り掛かりたいところですが、まずは導入直後のSUblimeの様子を見てみましょう。

美しい彩りの様々なカラースキーム

カラースキームはデフォルトでいろいろな種類が用意されています。
SublimeText > Preference > ColorSchmeを見てみましょう。その数なんと22種類!

いろいろ試してみて、お気に入りのカラースキームを見つけるのも楽しいですね!

画面分割機能やタブ機能、サイドバー完備で作業も楽々

・画面分割機能
View > Layoutには様々な画面分割パターンが用意されています。左右上下に2分割から4分割まで、一度に複数のファイルを見ながら作業できるのは嬉しいですね!

・タブ機能
タブ機能は標準で実装されています。タブで纏められると、画面がウィンドウで散らからないので嬉しいポイントです。

・サイドバー機能
サイドバーではプロジェクト単位でファイルの管理ができます。右クリックメニューが少ないのですが、メニュー項目の追加実装ができるプラグインも公開されているので導入するのもいいかもしれません。

もちろんSUblimeTextの便利な初期機能はこれだけはありません。ほかにもいろいろありますので、ぜひ導入して便利さに感動して下さいね!

Package Controlのインストール

それではいよいよSublimeTextの大きな魅力である様々なPackage(プラグイン)をインストールしていきましょう!

まずは準備としてPackage Controlを導入します。View > Consoleに下記のインポートスクリプトを貼り付けEnterを押下するとPackage Controlが使用できるようになります。自動補完機能や拡張機能はこの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をインストールする

Package Controlがインストールできたら個々のプラグイン導入に移ります。command + Shift + pで「Command Palette」が開くので、そこにpackageと入力します。予測変換で出てきた「Package Control:Install Package」でEnter。これでプラグインが導入できるようになりますので、早速導入していきましょう。

フロントデベロッパーが幸せになれるおススメプラグイン5選

①HTML5
このプラグインを導入するとHTML5タグの自動補完をしてくれるようになります。タグを打つ手間が省けて作業効率化に役立ちます。

このプラグインの機能ではありませんが、SUblimeでは構文ミスをチェックすることもできます。画像上部の宣言文の前をご覧下さい。不要なタグの一部が混ざりこむと、このようにお知らせしてくれるので大変助かります。

②CSS Snippets

このプラグインはCSSの自動補完を行ってくれます。
HTMLタグの自動補完も助かりますが、記述が面倒なCSSプロパティの自動補完はとても重宝!
スペルミスの心配もなくサクサク作業が進むのは嬉しいですね!

③Bracket Highlighter
入り組んだソースだとタグの開始と終了を追うのが大変になることはありませんか?このプラグインは開始タグと終了タグをハイライト表示してくれるので、ソースチェックがとても楽になります。ネスト間違いやタグの閉じ忘れなどの初歩的なミスが減るので作業がサクサク進み、嬉しいところです。

④Goto-CSS-Declaration
HTMLからCSSの定義箇所へ移動するのが面倒だと思ったことはありませんか?タグをコピーしてCSS側で検索…ちょっとのことですがそれが結構手間だったりします。そんな手間を省いてくれるのがこのプラグイン!HTML側でクラスやID名にカーソルをあて「Comman+→」を押下するとCSSの定義箇所に自動でジャンプしてくれます。間違いなく便利なこのプラグインは作業の効率を格段にアップしてくれます。

⑤CSScomb
CSScombはCSSプロパティを自動整列してくれるプラグインです。「Command+Shift+c」でバラバラに記載されたCSSプロパティの並び順を綺麗に整えてくれます。

SublimeTextがあれば開発はグンと楽になる!

さて、SublimeTextの魅力をご紹介してきましたが、いかがでしたでしょうか?
今回はフロントデベロッパーの基本的な作業に役立つプラグインを中心にご紹介しましたが、jQuery向けやEmmet向け、Sass向けなど様々な作業に役立つプラグインもたくさん用意されています!

もちろんフロントエンド開発だけでなく、バックエンドの開発にも有用な”恋に落ちるエディタ”SublimeText。ぜひあなたも恋に落ちてみて下さい!

CodeIQコード銀行にあなたのコードを預けてみませんか?

  • CodeIQコード銀行ではあなたのコードを財産と考えます。
  • お預かりいただいたコードは、CodeIQコード銀行がしっかり評価し、フィードバックいたします。
  • 当コード銀行にお預けいただいたコードは、企業がみてスカウトをかける可能性があります。
  • 転職したい方や将来転職することを考えている方で、今の自分のスキルレベルを知りたい方はぜひ挑戦してみてください。
  • 企業からスカウトがきたら困る人は挑戦しないでください。

興味を持った方はこちらからチャレンジを!

  • 21
  • このエントリーをはてなブックマークに追加

■この記事を書いた人

avatar

hibikiYzk

大阪を拠点に活動するwebクリエイター/フリーライター。「やりたいをカタチに」をスローガンにweb制作や記事の執筆活動を行っています。システム開発やweb制作現場での経験を元に、日常の業務でちょっと使えるネタをご紹介していきます。

今週のPickUPレポート

新着記事

週間ランキング

CodeIQとは

CodeIQ(コードアイキュー)とは、自分の実力を知りたいITエンジニア向けの、実務スキル評価サービスです。

CodeIQご利用にあたって
関連サイト
codeiq

リクルートグループサイトへ