HYPの勝手に語ろうか

よく使われているタグ

どうもこんばんは!部屋にクモが出たらまず視認する前に、その場を離れることを最優先するHYPのこうじです。

会社勤めの時は基本一番下っぱだったので、こういう害虫駆除が間違いなく自分に回ってくる社会の闇には悩まされたものです。

さて今回はSublimeTextで僕がよく使うショートカットをご紹介します。

ショートカット慣れしていない人は、どうしても便利なはずのショートカットが逆に面倒で時間がかかるという事になりがち。
ですが、意識して使い慣れる事で、今まで超えられなかった効率の壁を越えられるのは事実。
そんな存在がショートカットなんです!多分!

これは使える!ショートカット一覧

使える!というより使ってもらいたい!ほんとに便利なショートカットがSublimeText3には備わっています。
まぁ他のテキストエディタにもそこそこありますけどね(笑)

でもかゆいトコロに手が届く!そんな風に思わされたテキストエディタはやはりSublimeTextです!
まさに恋に落ちるエディタです!

今回は、『SublimeText独自のショートカット』ではなく、『SublimeText上で使えるショートカット』をご紹介します。
もちろんみんな大好きWindows向けです!

コピー&ペースト

テキストをコピー: CTRLC

テキストをペースト: CTRLV

これはもう言わずもがな!ショートカットをいつも使っていない人でも使っている人はいるのではないでしょうか。

ちなみに、コピーする際はテキストを選択した状態だとその選択範囲をコピーしますが、選択しない状態でコピーすると、カーソルがある行をコピーします。

行単位でコピーしたい場合はいちいち、端から端まで選択する必要が無いので便利ですね!

切り取り

CTRLX

こちらはコピー機能は同じですが、コピーしたテキストを削除してくれます。
コピー元を移動したい場合なんて時はこちらの方が一手間で済むので便利ですね!

ちなみにコピー同様、選択しない状態で切り取りすると、カーソルがある行を切り取りします。

僕は、ただ文字消したいなーなんて時は大抵この切り取りで消す事が多いです。
何でって?大抵右手マウス、左手削除キーなのでDELETEが遠いからです(笑)

行を削除

CTRLSHIFTK

カーソルがある行を削除します。
テキストを選択しない切り取りと動作は一緒ですが、もちろん切り取りではないので、クリップボードには入りません。

クリップボードを触らずただ行を消したいという場合はこちらの手法が便利ですね!

カーソル行を選択

CTRLL

カーソルのある行を選択状態にします。

選択行にカーソルを配置

CTRLSHIFTL

選択した行全ての末尾にカーソルを配置します。
その状態で編集すれば、一度に同じ反映が可能です!

sublimetext-shortcut-10

複数のカーソルを配置

CTRL左クリック

カーソル位置を複数配置して、さらに配置した場所全ての編集が可能です。
複数の場所に同じ文字を入れたい等の編集が必要な時はこれが便利ですね!

sublimetext-shortcut-1

行を移動

上に移動: CTRLSHIFT

下に移動: CTRLSHIFT

これもかなり便利!
今までは、行ごと切り取りして移動したい場所に貼り付けとかしていたのですが、何行か上に移動したいとかそういうレベルだとちょっと面倒だったんですよね。
このコマンドを使えば、そういったちょっとした移動がとってもラクに行えます!
主にスタイルシートとかタグの移動にも重宝します。

sublimetext-shortcut-2

単語ごとにカーソルを移動

CTRL矢印キー

カーソルがあるところから、SublimeTextで定められた区切り毎に移動が出来ます。
半角スペースやカンマ区切り(半角)、アンパサンド(半角)等の区切りに対応してカーソルを移動できます。
全角の『。』だったり『、』だったりにも対応してくれるといいなぁとは思いつつ、対応してくれてない方が助かる時もあるので悩ましいトコロ。
まぁ、日本語対応じゃないしね。。。

単語ごとにテキストを選択

CTRLSHIFT矢印キー

SHIFT矢印キーで、文字列を1文字ずつ選択していく事が出来るのですが、先ほどご紹介した単語ごとにカーソルを移動と合わせて使う事で単語毎に選択可能です。

ちなみに選択したい範囲で左ダブルクリックでも同じ事が出来ます。

改行を追加

上にに改行を追加CTRLSHIFTENTER

下に改行を追加CTRLENTER

普通にエンターでよくね?
いやいや違うんですよ奥さん。このコマンドのいいトコロは文字の途中からでも次の行に改行して移行します。

通常でしたら一旦行の最後にカーソルを持っていくかENDを押すなりして、最後にカーソルが無いと次の行に移行しておかないと、文字を途中でぶった切って改行されてしまいますが、こちらのコマンドの場合は、文字の中でもお構いなしに上か下に改行して移行出来ます。
慣れると非常に便利です。マウスでいちいちカチカチする手間が省けますよ!

sublimetext-shortcut-3

矩形選択

SHIFTマウス選択

秀丸やVisualStudioで驚愕した矩形選択ですが、もちろんSublimeTextにも備わっています。

例えば同じ桁数の縦に並んだ数字を一気に選択して変更したいとか、そういった場合この矩形選択がめちゃくちゃ活躍します!
普通にNotepadとかには無い、一度使うと癖になる選択です!

sublimetext-shortcut-4

一つずつ選択

CTRLD

これめちゃくちゃ使えます。
まず選択していきたいテキストを選択し、そのまま上記のコマンドを押していくだけです。
押す度にどんどん同じものがあれば選択されていきます。
選択するテキストがなくなったらその他は何も起こりません。

普通にCTRLFの検索でもいいですが、選択される場所等を一つ一つ確認しながらやりたい場合はこちらがオススメです。

ちなみに選択状態でそのまま入力や削除すれば選択されている部分すべてに反映出来ます。
これもSublimeTextの醍醐味ですね!

sublimetext-shortcut-8

選択テキストを複製

CTRLSHIFTD

これもよく使うショートカットの一つです。
簡単に言うと、コピー&ペーストを一回で行ってくれるという感じです。
ひとまとまりのタグを量産する時とかもオススメ!

sublimetext-shortcut-9

検索文字の次or前の文字を選択

次の文字に移動: F3

前の文字に移動: SHIFTF3

検索文字を一つずつ選択していくCTRLDでもいいけど、選択したいわけじゃなくてどこにあるのかを確認したい!なんて時はこちらが使えます。

sublimetext-shortcut-5

検索

CTRLF

テキストを選択した状態でALTF3

タグとかの検索に便利ですね!探したい文字列をファイル内から検索できます。
さらに便利なのが、正規表現を使った検索も可能なトコロです!

正規表現とは、例えば郵便番号を検索したい時等、文字の並びにルールはあるけど、文字の中身は何かわからないと言った場合に、プログラミング系でよく使われる手法です。

通常の検索だと『078-8321』で検索すると、もちろんこれしか検索できませんが、正規表現の『d{3}-d{4}』で検索すると、3桁の数字の後ろにハイフンが入って4桁の数字が入るすべての文字を検索してくれます。
便利ですね!
正規表現については、いずれ機会があったらご紹介します。

置き換え

CTRLH

置き換え(拡張版)

CTRLSHIFTF

上記で紹介した置き換えと仕組みは一緒ですが、一つ便利なのがそれ以外のファイルの置き換えも行える!
これはマジで便利!

例えばURLが変わって、100ファイルのhtmlデータのリンク先を変更しないといけない…なんて事があっても、これでまとめて変更すれば一個一個ファイルを開いて置き換えとかしなくても、まとめて全て一回の作業で置き換えが可能です。

ただし、プロジェクトを作成している必要があります。
プロジェクトについてはまた後日ご紹介します!

リストから文字を検索

テキストをコピー: CTRL:

今あるファイル内の文字列リストから検索して検索して選択する事が可能です。
そのままALTF3で、全て選択して、編集する事も可能です!

sublimetext-shortcut-6

指定行へ移動

CTRLG

よくChromeのデバッグ機能を利用していると、エラー行が分かっているけど何のエラーが分からないなんて時は行移動がラク。
移動したい行番号を入力するだけでその行へ飛ぶことが出来ます。

コードを書いているとなんだかんだで何百何千行になる時もあるので、そういう時はとりあえず行で飛んどけばOK。便利!

sublimetext-shortcut-7

指定ファイルを開く

CTRLP

プロジェクトの作成が必要ですが、プロジェクト内のファイルを頭出し検索で開くことが出来ます。
もうこれなくして生きていけないです。そのくらい便利。

行をソート

F9

行ごとにソートしてくれます。
一回だけ役に立ったことがあります(笑)

例えば頭に数字があるようなリストのテキストとかがあると、1から順番に行を並び変えてくれます。

sublimetext-shortcut-11

まとめ

いかがですか?ちなみに、ショートカットで検索したらもっといろいろなものが出てきますが、僕が制作でよく使うショートカットを今回ご紹介させていただきました。
多分僕が知らないけど、あったら便利なものがもっとあるような気がします!

最近ほんとに思うのが、知らなければそもそも選択肢にも上がらないけど、知っていればどちらを選ぶかの選択が可能になるというのをよく実感します。

ページ作成もアプリ開発も、知っていればこういうこういう作りは使いやすいだろうかとか見やすいだろうかとか、色々検証出来るけど、結局知らないと『あ、それ無理っすね!』で済んじゃう事ってよくあります。知らないだけで、可能性が一つ無くなるのはやっぱり勿体ないですね。

そんなわけで制作側としては、もっといろいろと情報を取り入れて様々なパターンを検証できるようになると、より良いものをユーザーに提供できるようになるかもしれませんね!

話が逸れましたが、とりあえずショートカット便利だよ。
Photoshopのショートカットはかなこがそのうち書いてくれると思います!

TIPS

アプリケーション

観光

ハードウェア

生活&ダイエット