Life goes on

何かJavaScriptとかVimとかMacとかに関係してそうな深淵から覗かれる者

6年間使っていたVimからEmacs(Spacemacs)に乗りかえた

6年間ずーっとVimを使ってきましたが、今のところ完璧に乗りかえられた。EmacsというよりかはSpacemacsがすごく良い。

発端

Spacemacs自体は2014年にGithubのTrendingで見かけて気にはなってStarはしていたけど、そのまま忘れてた。で、今年のクリスマスイブ(特に関係はない)にQiitaのVimも秘伝のタレも飲み込むEmacsの超強力ディストリビューションSpacemacsまとめ - Qiitaという記事を見かけて「あ、そういえばあったな」って思いだした。これ読んで改めて便利そうだなと思ったので。

感想

Spacemacsのサイトにキャッチコピーがあってそれが

The best editor is neither Emacs nor Vim, it's Emacs and Vim!

って書いてるんだけど、マジでこの通りだなと思った。すごく良い。調べるとわりとみなさん、Emacsとして使ってる人が多数派っぽいんだけどもマジでVimから乗り換えできる感じ。機能的には上記のQiitaの記事などをご覧いただくとして、ここでは自分が良いなーと思った点をいくつか。

Evilが高度に統合されている

実は1年くらい前にもEvil: EmacsをVimのごとく使う - 導入編 - 貳佰伍拾陸夜日記のシリーズを参考にしてEvilを導入したEmacsを使おうとしたことがあった。

最初は「マジでキーバインドVimと遜色ないわこれ…!」と感動したんだけど、それはそもそもテキストの編集だけだったので、例えばEmacsでGitを扱う場合に使うMagitとかを使う場合にはEmacs流のキーバインドで操作しなければいけなかった。これが不満だったので、途中で導入をあきらめた。もちろん、自分でフックを作ったりしてキーバインドを設定したりしてあげれば大丈夫なんだけど、そもそも大昔(7年前くらい?)に3年間使ってたEmacsを使おうとするとまあバージョンも新しいから昔の知識なんぞ役に立たないし、そもそも覚えてないってことで挫折していた。

しかし、Spacemacsのとても優れている点はそこら辺の違和感を無くすような工夫がしてある点だと思う。どういうことかというと、Spacemacsを使う際にはLeaderキーとして<Space>が割り当てられているのだが、この使い勝手がものすごく良いからだ。前述のMagitでいうと、Emacsとしては

  • M-x magit-status

としてまず、magit-statusを呼び出すのだが、これがSpacemacsだと

  • <Space>g g

で呼び出せるようになる。しかもリアルタイムに押したキーに対応してどのキーが何の機能を呼び出すのかを教えてくれるという親切設計。上記のキーバインドGitgとして覚えれば覚えやすい。公式サイトにMnemonicって書いてるけどその通りだと思う。

このEmacsでも(正確に言えば)Vimでも無い独自かつ一貫性のあるコマンド体系で、コマンド入力が全く苦ではなくなるのがすばらしい。しかも大体のコマンドはこの<Space>からのキーを押すだけで使うことが可能。

言語別にプラグインをまとめて設定してくれてる

自分のような門外漢がEmacsで開発しようとしたときの高いハードルとしてこの言語ではどんなモードを組み合わせれば良いのか分からないというのがあった。JavaScriptで具体的に書くと、そもそもEmacsJavaScriptを使おうとすると4つほどメジャーモードがあるっぽいというのがググって出てくる

  • js-mode
  • js2-mode
  • js3-mode
  • web-mode

で、情報の探し方がイマイチ分からなくて何が良いのかちょっと分からん…ってことになる。大体はjs2-modeか、web-modeのどっちかぽいんだけど…ってとこまでは分かるんだけども。これに加えて、auto-completeの設定やsnippetの設定、Tern.js使ったauto-completeとの連携、リアルタイムのエラーチェックなんかをしようと思うともう、ネットの海は広大よ状態。

Spacemacsではこの辺がすごく簡単に設定できる。導入時に勝手に作られる.spacemacsというdotfileがあり、ここで全ての設定を管理するのだが、このファイルで以下のようにするだけで、JavaScriptが簡単便利に使えるようになる。

(dotspacemacs-configuration-layers '(auto-complete javascript))

これだけの設定で以下の機能が設定済みで使えるようになる。

素敵すぎる。他の言語もこんな調子でどんどんとdotspacemacs-configuration-layersに言語名や機能名を追加するだけで使えるようになる。

そして、大体のメジャーモード固有のキーは<Space> mに集約されているので、どの言語を使ってもこれ覚えておけば困らないというおまけ付き。

Vimとほとんど操作感は一緒

一番気になる、操作感だけど現状ではほぼ変わらない…と思う。一番デカい違いがこれくらいかな。

function hoge(fuga, hogera) {
    //処理
} 

みたいなコードのfunctionfにカーソルがあったときにcibのコマンドを打つと、Vimでは

function hoge() {
    //処理
}

と、丸カッコの中が編集可能な状態になるんだけど、Spacemacsでは丸カッコに移動してくれない。

それ以外、ちょっとずつ「あれ、これ違うのか」みたいなとこはあるけども根本の不満ではないんであんまり気にならない。もしかしたら設定あるのかもしれないけども。

最初からテーマがステキ

これも昨今、俺のなかで重要なんですが、Powerlineみたいな拡張を入れているので、Spacemacsの最初からシャレオツな感じでテーマや、ステータスバーが設定されてるのもグッド。

そもそも何で乗りかえようと思ったのか

自分のVimの使いかたって元々気付いてはいたんだけど、俗にいうEmacs的な使い方してたからです。だったらEmacsにしちゃえば良いかーと。

Emacs的な使いかたっていうのはこんな感じです。

  • 朝立ち上げたVimをスプリットやらタブやらでプロジェクトや用途毎に分けて1日終わるまでずーっと立ち上げっぱなし
  • 入れてるプラグインがエラい数になってる(120個くらい?)

この使いかたしてるとたまにVimのUniteとかCtrlPとかがおかしくなってVimの再起動したりとか、Syntastic + neocompleteで入力がすごい重くなったりという現象があったので乗りかえました。

これはVimが悪いんじゃなくって完璧に自分の使い方が間違ってるだけなんですが。

ということで、今はSpacemacsのおかげでかなり快適なエディタ生活を送っています。

自分のSpacemacs導入方法

リポジトリREADMEに書いてるインストール方法でも全然問題ないんですが、自分はdotfilesをGitHubで管理しているのでこんな感じでインストールしてます。

$ cd dotfiles
$ git submodule add git@github.com:syl20bnr/spacemacs.git .emacs.d
$ git submodule sync
$ git sumodule update
$ cd ~
$ ln -s dotfiles/.emacs.d ./
$ mv .spacemacs dotfiles/ # Spacemacsを立ち上げたあとに
$ ln -s dotfiles/.spacemacs ./

あとは、Spacemacsでアップデートがあったときには、submoduleのアップデートを自分のdotfilesにpushしていくだけになります。最初はまんまcloneしてきたんですが、他のMacでの共有とかを考えるとsubmoduleが良いかなあなど。

結論

Vimmerが乗りかえるクォリティをSpacemacsは持ってる。かなり良いです。オススメ。ただし、難点は何か調べものするときにSpacemacsとしての情報がとても少ないということです…。Emacsの情報を調べても自分の頭のなかでコマンドなんかの変換してあげなきゃいけない。あと、日本語の情報も少ないです。が、リポジトリの中のlayersとか見たりしてるとなんとなく分かるので、なんとかなるかなあ。

勉強会でのメモの取り方

Frontrend Advent Calendar 2014 - Qiitaの13日目の記事です。

ネタをどうしようかなーと思ってたのですが、以前のNode学園祭2014でメモ取ってGistに公開してますが、やり方どんな風にしてるのか聞かれた覚えあったので、思いついたとこ書いてきます。

Frontrendも勉強会ですし、この機会に。フロントエンド感はちなみに皆無です。

 入力環境

まずは、メモの入力環境ですが以下の環境になっています。

実際のところこれだけだったりします。まあ、普段からIMはSKKを使ってるんで、特にメモのためだけってわけじゃないですが。

 Vim

Vimでメモ取る一番のメリットは自分のなかではコピペを始めとする編集の速さになります。

例えば、一つ上の行をコピペして現在行に貼り付けする際は、jyypだけでいけます。

もちろん、セッション聞きながらメモを取っていくわけなので、こういった編集作業でいちいちマウスやトラックパッドなど使って範囲選択してコピーとかやってると、大事な発言聞き逃しちゃったりしかねないために、Vimのキーボードでの編集能力の高さは、すごく助かります。

まあ、ショートカットとか使えばブログとか書くのに使ってる、iA Writer for Macなんかで書くのもメモっていうだけであれば良いのですが、やっぱりGistに連携という部分でコピペになってしまうんで、Vimの方が良いです。

vim-markdown

Vimの場合デフォルトでMarkdownシンタックスがありますが、plasticboy/vim-markdownというプラグインを入れてあります。シンタックスがさらに見やすくなり、移動に便利なキーバインドがついてたりで、至れり尽くせりです。

Skk.vim

tyru/skk.vimVimSKK入力できるプラグインです。かれこれ、6年位はSKK使ってるので文章入力はこれないと死ねます。

余談ですが、Vim以外のソフトではAqua SKKでまかなっています。開発停止して悲しみ。

SKKだと他のIMと違ってひらがなやカタカナの入力が直接されるので(確定する必要がない)入力スピードが上がる…気がします。

Gist-vim

次にメモ取るのに個人的にすごく必要なのがmattn/gist-vimです。

これを使うとVimで編集してる文章を:wで保存すると即座にgistに反映してくれるというスグレモノです。

このプラグインがないと「ほぼリアルタイムで更新」とか無理です。自分の場合は大体1スライドで1回保存する感じです。

メモの取り方

環境は上述の通りなんですが、実際にメモを取る時は「スライドが公開されなくても自分がメモを見返して、セッションを思い出せる」ことを基準にしてます。

セッションの始まる前

まず勉強会のタイトルをh1で記入します。自分は基本1つのmdファイルで1つの勉強会という感じです。

次にセッション始まる前にh2でセッションタイトル入れます。講演者の名前は書いたり書かなかったり決まってないです。

このセッションタイトルなんかはイベントの公式サイトからコピペします。自分で書いちゃうとうろ覚えで書いてしまい、あとで、発表スライドを探すとき要らない苦労するので。

 セッション中

基本1つのスライドでh3の見出しつけます。大体スライドにタイトルぽいのあるのでそれを書いてきます。

タイトルぽいのない場合あるんですが、その場合話聞いて次のスライド行く前に適当にタイトルつけます。

その後の話は話題としてグループになりそうなものをリストで概要書きます。書いた概要に関連した話題も箇条書きにして段落下げて書いてきます。

次の話題になったらリストをトップの段落にして同じ繰り返し。

聞いていて、一つ上のグループだなと感じたならh4以下に変更していきます。

スライド変わったらまたh3のタイトル付けからやってきます

メモ取りのコツ?みたいなの

コツじゃなくて、当たり前かもしれないですけど。

話のキーワードをメモする

速記とかできるわけじゃないので、発表する人の話を聞いてキーワードになることをメモしてます。このキーワードは大体スライドに書かれてることが多いので、これをさくっとメモしていきます。

全くの絵だけのスライドとかはそんなに無いので、大体これで上手く行くかと。このキーワードがh3になること多いです。

キーワードに沿って補足を書いていく

話の流れは大体、キーワードに沿って展開されていくことが多いので、これをリストなどでメモしていきます。

これは一段目のリストで補足のタイトル的なの書いていき、補足の内容も一段目のリストとして書いていきます。話が変ったなーと思ったら、それまでの補足の内容をvkヴィジュアルモードで選んで>>で二段目にしていったりしてます。その繰り返し。

参考URLについて

参考として出されるURLについては速攻で、検索しておきます。時間に余裕があれば、そのリンクもメモにその時に貼っていきますが、余裕が無ければブラウザのタブに開きっぱなしにしておいて、後で時間があったときにそのリンクを貼ります。

時間に余裕が無くても、タイトルだけは入れておくようにしておきます。これで後で「どこにURL入れるんだっけ?」みたいな手間がなくなります。

タイトル入れるのとURLは自作のLayzie/make-md-linkっていうクッソ簡単なブックマークレット使ってコピペですぐMarkdownとして使えるようにしています。

発表スライド自体は気が向けば、このメモにまとめていきますが後日公開などのものであれば、Pinboardにブックマークして終わりということが多いです。

まとめ

とまあ、ツールは自分の好きなものを使えばよろしいかと思うんですが、メモは意識的にこう取るみたいなのは決めておいた方が良いかなと思います。

これしていくと、自分で発表する側に回ったときにも構成考えるのに役に立ってる…気がしています。メモ取りやすい構成かどうかっていう視点で考えられるので。

機会があれば、みなさんもガンガンとメモ取って公開していってはいかがでしょうか。違う視点でのメモが多いと勉強会への理解も高まる気がします。

明日はGinpeiさんの番です。楽しみですね。

あるフロントエンドエンジニアの1日

Frontrend Advent Calenderの14日目の記事です。

風邪引いてちょっと遅れました…。

先週ですが、札幌でSaCSS Special4 Frontrend in Sapporoというイベントで講演させていただく機会がありました。 自分は"黒い画面"ことターミナルやコマンドに慣れていない方に興味を持ってもらおうという感じで、お話をさせていただきました。

ターミナルに興味が出てきたところで、「どうやって作業してんだろ?」っていうのが見ないと分からなかったりもすると思います。

自分は日常的にターミナル内で作業してるのですが、こんな感じでフロントエンドに関わる作業するのかなーという一例として書いてみます。あくまで イメージです。

  • 10:00
    • 出社してiTerm2を立ち上げる。
    • tmuxtmuxinatorを使って、その日の作業に対応した、paneとかwindowとか指定してる。
    • メールチェックはVmailAirmailを使い分けしてる。何か返信とかはAirmailで、閲覧はVmailっていうのが多い。
  • 11:00
    • Vimをエディタとして使ってる。
    • 大体tmuxのpaneを1つvim用に開いておいてそこで作業してる。ファイルとかは大体前日の続きというのが多いので、Unite.vimで開いたことあるファイルを検索して開く。
    • 一度ファイル開いたら大体のファイル開いたりという作業はctrlp.vimを使うことが多い。
    • Vimのタブ毎に開いてるプロジェクトが分かれてる感じにしてる。大体1つのタブに4つくらいは画面分割してファイルを並べる。多いと8個とか。
  • 12:00
    • 大体関わってるプロジェクトではSassとかStylus使ってる。
    • 上記のコンパイルとかするのにGrunt使ってるのでこれに専用にtmuxのpane割り当てる。
  • 14:00
    • 一段落してGitを使ってcommitしたりpushしたりmergeしたり。
    • リポジトリの履歴なんかはさくっとtigとかVimの中からgitvを使う。その時の状況により。
  • 15:00
    • GitHubを使用したりすること多いので、hubとかgit-extras使って省力化してる。
    • 途中で「このfunction名どこで使ってるのかいな…」ということでack使って検索かける。検索がもっと速いって言われるSilver Searcherはあんまり好みじゃない。
  • 16:00
    • 「このメソッド何だっけ…」と思ってDashを使って検索。大体GUIの操作というかアプリ開いたりなんだりはAlfredからやってる。
    • ファイル検索もAlfredからやること多い。普通にパスを入れてくと選べるので便利。
    • Alfredの万能感ハンパねえ。
  • 17:00
    • JSONのレスポンスが見にくいので、jqコマンドで整形しておいたり。いらないレスポンスは削ったりする。
    • Wikiのドキュメントを追記するのに自分はWiki形式よりMarkdownが良いので、pandocで変換。ドキュメント関係はこれ1本で済んでる。
    • MarkdownはVimで書いて、vim-quickrun使って、Marked2を使ってプレビュー。
  • 19:00
    • styledoccojsdoc3のドキュメントを更新しておく。
    • この作業もやっぱりGrunt使って作業。インターフェース一緒なので良い。
    • お疲れさまでした。

上記はフィクションですが、大体こんな感じかなと。他にサーバーでの作業が必要ってことで、ssh使ったりとかもありますけど。 慣れると(ほぼ)ターミナルで作業が完結して、キーボードしか使わなくなるので便利に思えます。もちろんブラウザでの作業とかありますけど。

まあ、あんまりフロントエンドっぽくない話だなーって気もしますが、こういう人間もいたりするってことで。

それではみなさま良いCUIライフを送ってください。

hatenablog-vimから投稿テスツ

vimからはてなブログに投稿できるプラグインを作ったよ! - toyamarinyon's diary

という記事を見つけて「ついに来たか(ガタッ」と思いさっそく投稿テストしてみた.

以前はhatena-vimを使って,はてなダイアリーに投稿してたんですがこれが超便利でブログ投稿のモチベーションも上るってもんでしたが(その割に更新してなかったけど) やっとはてなブログでもVimから投稿できるようになるとか胸熱ですね.