並び替えてスッキリさせる
CSSのような項目がいろいろある定義ファイルを書いている時、項目を規則的に並び替えたいときってありますよね。
一定の規則に従っているコードは見やすいですし、修正もしやすいのでは無いかと思います。
Vimにはglobalコマンドという機能があり、その中にsortという並び替えを行ってくれるコマンドがあります。sortをつかってCSSを並べ替える様子をまとめてみました。
ちょっとした予備知識
範囲を決めてsortするというのが基本的な使い方になると思います。範囲を明示しない場合には全行がsort対象になります。
範囲を決めるのに便利なのがビジュアルモード。今回ではvi{にて波括弧内のCSS項目を選択する方法をとっています。
これであるセレクターの項目だけをsortするということができます。
並べ替えの方法
通常の並び替え（アルファベット順）
通常の並び替えは
:sort
です。
vi{ を実行後には範囲を表す
'<,'>がコマンドラインに自動的に挿入されますので、この後に続いてsortを打ちます。
'<,'>sortこのコマンドを実行することでアルファベット順の並べ替えができます。
逆順の並べ替え（アルファベット逆順）
通常の並び替えは
:sort!
です。
範囲指定の場合は範囲の後にsort!を打ちます。
'<,'>sort!このコマンドを実行することでアルファベット逆順の並べ替えができます。
重複行削除並べ替え
重複してい行を削除したうえで並べ替えすることができます。
重複行削除並べ替えは
:sort u
です。
範囲指定の場合は範囲の後にsort uを打ちます。
'<,'>sort uこのコマンドを実行することで重複行削除 をした上でアルファベット順の並べ替えができます。
また逆順にしたい場合は
'<,'>sort! uで重複行削除 をした上でアルファベット逆順にすることが可能です。
数字で並び替え
2進数、8進数、10進数、16進数、小数点を条件にして並び替えることが可能です。これらは排他的で組み合わせることはできません。
デフォルトでは行に最初にあらわれる数字によって並び替えが行われます。
2進数
:sort b
'<,'>sort b //範囲
'<,'>sort! b //範囲逆順
8進数
:sort o
'<,'>sort o //範囲
'<,'>sort! o //範囲逆順10進数
:sort n
'<,'>sort n //範囲
'<,'>sort! n //範囲逆順
16進数
:sort x
'<,'>sort x //範囲
'<,'>sort! x //範囲逆順
小数点
:sort f
'<,'>sort f //範囲
'<,'>sort! f //範囲逆順正規表現でマッチした行を並び替え
正規表現でマッチした行のみ並べ替えすることができます。
正規表現での並べ替えは
:sort /pattern/ rです。
範囲指定の場合は範囲の後にsort /pattern/ rを打ちます。
'<,'>sort /pattern/ rこのコマンドを実行することで正規表現でマッチした行のみアルファベット順の並べ替えができます。
例えばこんなCSSがあったとしてmarginだけを並び替えたいとします。
div{
width:100%;
margin-top:5px;
background-color:#dddddd;
padding:5px;
margin-bottom:5px;
float:left;
z-index:2;
margin-left:5px;
border:1px solid #aaaaaa;
margin-right:5px;
}この場合は
'<,'>sort! /mar/ rで以下の様に並び替えがされます。
div{
width:100%;
background-color:#dddddd;
padding:5px;
float:left;
z-index:2;
border:1px solid #aaaaaa;
margin-top:5px;
margin-bottom:5px;
margin-left:5px;
margin-right:5px;
}marginのみ並び替えがされていることがわかるかと思います。
また逆順にしたい場合は
'<,'>sort! /pattern/ rで重複行削除 をした上でアルファベット逆順にすることが可能です。
パターンマッチ
sortコマンドでは正規表現での並び替えとは別にパターンを使った並び替えが可能です。
'<,'>sort! /pattern/ こんなCSSがあったとして（なんじゃこりゃ）ふたつ目の数字で並び替えを行いたいとします。
div{
margin:4px 2px;
margin:2px 4px;
margin:3px 3px;
margin:1px 5px;
}正規表現での並び替えとは違いパターンの場合はマッチした部分をスキップして、その次の部分以降によって並び替えを行ってくれます。
一番目の数字の部分をパターンで特定することで、2番めの数字の部分で並び替えができます。
例としては以下のような感じになります。
:'<,'>sort /[1-9]px\s/ 
2つ目の数字で並び替えがされていることがわかるかと思います。
まとめ
今回はCSSでの例でしたが、もちろん他の状況でもsortは使えます。並べ替えが自由にできると、プログラミングも捗るに違いありません。
- Vimでは
sortで並び替えができる - 正順、逆順、数字、正規表現をつかった並び替えが行える。
- 範囲選択と合わせると非常に強力な機能
