最もシンプルなタブの実装
会社でちらりと覗いたデスクトップにvimを見つけました。少しずつですが何故か最近vimユーザが増えている気がしています。
vimは開発の場で見かけるとカッコよく映りますね。vimユーザでない方から見ると「何だか分かんない内にソースコードが出来上がって行く」と神懸り的な物に見えるようです。
今日はこれまでもvimを使って来たけどなかなか上達しない方、またはこれからvimを覚えようとされているvimビギナーの方に送る、vimの使い方を上達させる5つのオキテ。
まずは基本。要はブラインドタッチしろという意味ですが、なぜvimのオキテなのかというと...
vimは頭で考えるテキストエディタです。ブラインドタッチが出来ていないと、vimに命令を与える際に思考を止めてしまい学習出来なくなります。以下のオキテをブラインドタッチよりも先に学習してしまう事は、ある意味無駄な学習ともなり得ます。
vimに限らずU*IX系のテキストエディタでは、マウスを使わず全ての編集が出来る様になっています。
マウスを探す事で思考を止めてしまい、せっかく思いついたかもしれない素晴らしいアイデアを自ら消し去ってしまうかも知れません。
海外の方がvimを触っている動画を幾らか見たことがありますが、彼らは常に喋るようにタイプしコタツの上にあるテレビのチャンネルを探す様な感覚でテキストを検索しています。
vimを上達させる為には見たかったテレビ番組の内容を喋りながらもチャンネルを変えられる...くらいの当たり前さをテキスト編集スキルとして身に着けなければなりません。
vimは基本的にカウント、モーション、オブジェクトという3つの要素を用いてvimに命令することで編集を行います。
例えば行を3行消すのに、SHIFTキーを押しながら3回矢印キーを押してDELキーを押す...という通常のテキストエディタとは違い、「消す ３ 下」と言った少し英語に似た脳内文章を自分で表現しvimに命令しなくてはなりません。この脳内文章を如何に効率良く作れるかがvim上達への近道となるのです。
現在のカーソル位置続く単語3つを消して別の物に置き換えたい場合、vim使いならば脳内で「変える ３ 単語」という文章が出来上がり「c3w」とタイプされるのです。
良く出来たテキストエディタでは、良く登場する入力方法を予め決められたキーボードショートカットとして割り当てられています。
例えばプログラムのソースコードを編集中に、カーソルがある次の行から新たな行として入力を開始したい場合、通常のテキストエディタならば<End>を押して行末まで移動し<Enter>を押して入力を開始しなければなりませんが、vimだとノーマルモードから「o」だけ。
この辺りの気配りさが如何にもコード書き専用エディタと言われる由縁なのかもしれません。
これはテキストエディタに限らず、何にでも言える話ですがオープンソース界隈では自らの設定ファイルまでも公開したがる人がワンサカいます。
まぁ私もその一人ですが...
vimは一人で「:help」から勉強するには多すぎる程のノウハウが詰まったテキストエディタです。自分で思い付かなかった素晴らしいテクニックは、ありがたくら盗んでしまいましょう。
vimはどれ程使い込んでも満足する事が出来ないテキストエディタです。 どんなに上達しても時に人の設定ファイルや編集方法に驚かされたりします。 頭で考えるテキストエディタだからこそ、人それぞれの編集方法が生まれるのでしょうね。
vimを使い始めてみようと思われている方、このどっぷりと深い世界にのめり込んで見ませんか？
$(function () {
var tabContainers = $('div.tabs > div');
$('div.tabs ul.tabs a').click(function () {
tabContainers.hide().filter(this.hash).show();
$('div.tabs ul.tabs a').removeClass('tab-selected');
$(this).addClass('tab-selected');
return false;
}).filter(':first').click();
});
//別法
$(function () {
var tabs = [];
var tabContainers = [];
$('ul.tabs-nav a').each(function () {
if (this.pathname == window.location.pathname) {
tabs.push(this);
tabContainers.push($(this.hash).get(0));
}
});
$(tabs).click(function () {
$(tabContainers).hide().filter(this.hash).show();
$(tabs).removeClass('tab-selected');
$(this).addClass('tab-selected');
return false;
}).filter(':first').click();
});
<div class="tabs">
<ul class="tabs">
<li><a href="#message">Send a message</a></li>
<li><a href="#shareFile">Share a file</a></li>
<li><a href="#arrange">Arrange a meetup</a></li>
</ul>
<div id="message">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div id="shareFile">
<p>Sed do eiusmod tempor incididunt.</p>
</div>
<div id="arrange">
<p>Ut enim ad minim veniam</p>
</div>
</div>