Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
Sublime Text入門(2)

Sublime Text入門(2)

プログラミングやマークアップで特に役立つ、Sublime Textの標準機能

2014年8月4日

Sublime Textでは、一般的なテキストエディター機能に加えて、プログラミングやマークアップに有効な機能も提供されている。その中でも特に便利な機能をピックアップして紹介する。

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

 今回は、前回で導入したSublime Textの基本的な利用方法について解説する。

テキストエディターとしての機能

 Sublime Textは、アプリケーションのカテゴリとしてはテキストエディターなので、基本的な機能はテキストエディターが備えているものを提供している。ショートカットなども特に癖が強いというわけではないので、基本的な機能については一般的なテキストエディターと同様に利用できると考えておおむね差し支えない。

Sublime Textが提供している機能

 以下では、Sublime Textが提供している機能について解説する。もちろん他のエディターでも同様の機能が存在している場合もあるので、Sublime Textでしか提供していない機能というわけではないが、比較的特徴的で、プログラミングやマークアップに有効と思われる機能をピックアップして紹介する。

 ちなみに、筆者が執筆で参加した『Web制作者のためのSublime Textの教科書』のWebページで無料サンプルとして第一章までがPDFダウンロードできるが、その中にSublime Textの初期状態のメニューの日本語解説が掲載されているので、メニューの全ての項目について把握したい人はそちらを参考にするとよい。メニューに全ての機能が存在するということではないが、主な機能については知ることができるだろう。

選択の拡張(Expand Selection)

 Sublime Textについて触れる際に、必ずと言っていいほど特徴として挙げられるのが、Expand Selectionである。Sublime Textのサイトの動画でも紹介されているように、同じ文字列を素早く複数選択し、同時に編集が行える(図1.1~1.4)。これは正確にはExpand Selection to Wordという機能名称が与えられている(ショートカットはCtrl(Win)Command(Mac)Dキー)。

画像
図1.1 文字を選択した状態でショートカットを入力すると
画像
図1.2 同じ文字列が選択された状態になる
画像
図1.3 入力した回数だけ選択肢が増える(画像は4回入力した状態)
画像
図1.4 その状態で同時にテキストの編集が行える

 Expand Selection to WordでのTipsをいくつか紹介する。

 例えば1つおきに編集したい場合などは、Ctrl(Win)Command(Mac)Kキーで選択がスキップできる(図2.1)。また、Ctrl(Win)Command(Mac)Dキーを入力しすぎて、想定よりも多く選択してしまった場合は、Ctrl(Win)Command(Mac)Uキーで、選択をUndoできる。ちなみに、Ctrl(Win)Command(Mac)Uキーは、Ctrl(Win)Command(Mac)ZキーではUndoできないものをサポートしているので、ここで解説している例だけでなく、例えば複数行選択でキーを押しすぎた場合などでも利用できる。

画像
図2.1 奇数回数のみ選択した例

 また、同じ文字列を一気に複数選択する場合は、AltF3キー(Win)/CtrlCommandGキー(Mac)で行える。

 Expand Selection to Wordという名称が付いているように、選択の拡張にはさまざまな機能が存在する。詳細な解説は行わないが、以下に箇条書きで簡単に紹介する。

  • Expand Selection to Line:Ctrl(Win)Command(Mac)Lキー)行の選択
  • Expand Selection to Paragraph: 段落の選択
  • Expand Selection to Scope:Ctrl(Win)Command(Mac)ShiftSpaceキー)スコープの選択。クオートやタグ、ブラケット(=かっこ)などの単位で選択する。この拡大範囲がやや使いづらい場合は、sublime-expand-regionを利用すると、より細かいステップでの選択範囲拡張が行える
  • Expand Selection to Brackets:Ctrl(Win)Control(Mac)ShiftMキー)ブラケット単位で選択
  • Expand Selection to Indentation:連続した同じレベルのインデントを選択
  • Expand Selection to Tag:HTMLのタグの単位で選択

マウスを利用した選択

 キーボード操作だけでなく、マウスを利用した選択の拡張も行える。

  • Ctrl(Win)Command(Mac)キーを押しながら文字列をドラッグ:複数の選択範囲を指定できる(図3.1)。同時編集も可能
  • Shift+右クリックドラッグ(Win)/Option(Mac)キーを押しながら文字列をドラッグ:矩形選択(図3.2)。行ごとにキャレットが存在するので同時に複数行の変数が行える
画像
図3.1 複数の選択を行った状態
画像
図3.2 矩形選択を行った状態

複数行の選択

 Split into LinesCtrl(Win)Command(Mac)ShiftLキー)という機能を利用すると、複数行を選択した状態から各行を複数選択した状態に切り替えることができる(図4.1~4.3)。

画像
図4.1 複数の行を選択した状態
画像
図4.2 Split into Linesを行い、行ごとの選択に切り替えた状態
画像
図4.3 その状態でシングルクオートを入力する

検索・置換

 Sublime Textの検索機能について解説する。ファイル内や複数ファイルをまたいだ検索も可能だ。

ファイル内の検索機能

 Ctrl(Win)Command(Mac)Fキーで、ウィンドウの下部に検索のボックスが表示される(図5.1)。検索ボックス内のボタンは左から、

  • 正規表現を利用する
  • 大文字・小文字を区別する
  • 完全一致のみを検索する
  • 最後まで検索した場合、ファイルの先頭から検索する
  • 選択範囲内を検索する
  • 検索文字列にマッチした箇所をハイライトする

という機能を有している。また、検索ボックス右のFind Allはマッチする文字列を全て複数選択した状態にする。これは拡張選択と同様に同時編集ができる。

図5.1 検索ボックス

複数ファイルを対象にした検索

 複数ファイルからの検索機能も備えているので解説する。Find in Filesという機能名で提供されており、Ctrl(Win)Command(Mac)ShiftFキーで、先ほどと同様に、ウィンドウの下部に検索ボックスが表示される(図5.2)。

 表示されるボタンの機能は左から、

  • 正規表現を利用する
  • 大文字小文字を区別する
  • 完全一致のみを検索する
  • 合致部分の前後の行を表示する
  • 検索結果を別ファイルで表示する

 縦に3つ存在する入力フィールドのうち、2段目のWhereが、検索対象の指定箇所になる。複数のフォルダーの指定など、詳細な指定が可能。置換を行う場合は3段目のReplaceに語句を入力する。

図5.2 複数ファイルの検索ボックス

 また、機能拡張パッケージの「SideBarEnhancements」を利用していると、サイドバーで右クリックすることで複数ファイルの検索が行える。

Goto

 ソースコードや文書が長くなると、編集対象や参照にする部分へのアクセスがやりにくくなる。Sublime Textでは、その辺りのサポートをGotoという名称で提供している。

Goto Line

 指定した行数に移動する(Ctrl(Win)Command(Mac)Gキー)。

図6.1 Goto Line

Goto Symbol

 プログラムのソースコードでの(JavaScriptなどの)functionや、CSSのセレクターなどをシンボルとして検索し、指定した箇所まで移動する。

 そのシンボルは、言語によってさまざまなものをピックアップする。例えばMarkdown文書では見出しのリストが対象となる(Ctrl(Win)Command(Mac)Rキー)。

図6.2 Goto Symbol

Goto Anything

 開いているフォルダーからファイルを検索する(Ctrl(Win)Command(Mac)Pキー)それだけではなく、先頭に記号を入力すると下記の機能が利用できるようになる。

  • : → Goto Lineを利用する
  • @ → Goto Symbolを利用する
  • # → ファイル内検索が利用できる。他の検索機能とは違い、入力に対する候補一覧が表示される(図6.3はその例)
図6.3 Goto Anything

プロジェクト管理

 Sublime Textには[Project]というメニューがあり、いわゆるIDE的なプロジェクト管理機能を提供している。ただし、一般的なIDEと違い、いわゆるワークスペース的なアプローチではなく、関連するソースコードが内包されているフォルダー群を「プロジェクト」として扱うというアプローチを採っている(図7.1)。

図7.1 プロジェクトを開いた状態

プロジェクトの作成

 プロジェクトの作成は下記の手順で行う。

  1. Windowsエクスプローラーやファインダーでプロジェクトに設定したいフォルダーをSublime Textにドラッグ&ドロップする
  2. メニューバーの[Project]メニューから[Save Project As]を選択する
  3. 任意の名前で保存する

 1つのプロジェクトとして複数のフォルダーを登録することも可能だ(図7.2)。

画像
図7.2 複数のフォルダーをプロジェクトとして利用している状態

 プロジェクトの保存時に生成される*.sublime-projectファイルは、プロジェクトの設定ファイルとして編集も行える。プロジェクト内のみの環境設定の上書きや、表示するフォルダーの名称などが設定できる。詳しくは公式ドキュメント(英語)Project Formatの項目やWeb上の情報、書籍などを参考のこと。

プロジェクト内のGoto

 Sublime Text 3より、プロジェクトで利用できるGotoの機能が強化されたので、ここで紹介する。

  • Goto Symbol in Project:個々のファイルを開かずに、プロジェクト内のファイルを対象にGoto Symbolが行える
  • Goto Definition:関数やクラス名などの文字列を選択した状態でGoto Definitionを行うと、プロジェクト内の定義部分を呼び出すことができる(図7.3~7.4)
画像
図7.3 WordPressのテンプレート内で関数名を選択する
図7.4 Goto Definitionで関数の定義を表示する

 次回はSublime Textの多彩なパッケージを紹介する。

Sublime Text入門(2)
1. テキストエディター「Sublime Text」の導入

Sublime Textが選ばれている理由とは? バージョン2と3はどちらを使えばよいかや、インストール方法、お勧めの環境設定など、Sublime Textの導入に関するポイントをまとめる。Windows&Mac対応。

Sublime Text入門(2)
2. 【現在、表示中】≫ プログラミングやマークアップで特に役立つ、Sublime Textの標準機能

Sublime Textでは、一般的なテキストエディター機能に加えて、プログラミングやマークアップに有効な機能も提供されている。その中でも特に便利な機能をピックアップして紹介する。

Sublime Text入門(2)
3. 特におすすめしたい、Sublime Textのパッケージ

Sublime Textのさまざまなパッケージの中から、利用シーン別におすすめのものを紹介。また、Sublime Textのパッケージの基本的な使い方として導入方法や有効化/無効化、削除の方法も説明する。

サイトからのお知らせ

Twitterでつぶやこう!