続いては…Frontrend第5弾のお知らせです！
http://frontrend.github.io/events/05/
こちらは来たる5/25と結構間近になっております。 内容は見ていただくと分かりますが、JavaScript関係の結構バラエティに富んだものになってるんじゃないかなーと思います。
自分は登壇はせずに、お手伝いで参加になると思いますが、こちらもぜひ興味ある方は参加していただければと！
空席は残り40席に現段階ではなっているようですので、登録はお早めにどうぞー。
TalkNote vol.8に登壇させていただくことになりました
ブログに色々書きたいことがありながら、あまりに久々なので書き方を忘れてしまい更新できませんでした。
ということで、いきなりの宣伝になるのですが今度静岡で開催されるTalkNoteという勉強会でFrontrend出張版として 登壇させていただくことになりました！
題材は前回からそれでも4ヶ月ほど経ちまして、紹介したいなーというプロダクトなんかも変わったりそもそも アップデートされていたりするので、大幅に内容は変更する予定です。
有料ではありますが、あと1ヶ月ということで、まだまだ空席があるということですのでお近くの方はぜひご参加いただけると嬉しいです。
JavaScript書くときに便利なVimプラギン集
この記事はVim Advent Calendar 2012の52日目の記事です。 前回の記事はasion_mさんのフロントエンジニアがちょっと幸せになるかもしれないプラグイン作ってます。でした。
良い具合に、フロントエンドのお話続きになっており「流れがキタ！」などと浮かれていたところ、はてなブログが0時から8時まで長時間のメンテに入っており泣きたい気分で一杯になっています。
気を取り直して、エントリを書いていきたいと思います。
さて、自分は一応JavaScriptを書くことで(または書かない事で)オマンマを食べさせていただいてる訳ですが、そういえばあんまりJavaScript書く環境についてブログに書いてないなーと思い、自分が使ってるJavaScript関連のプラギンと設定なんかを紹介していこうと思います。
もちろん、「これは常識でしょpgr」などというものが多数含まれていることは予想されますが、気にしないでください。ということで早速始めていきたいと思います。何だかんだと1年くらいはメインの環境が変わっていないようにも思えるので、ブコメやコメントでおすすめなどありましたら、教えてください。プラギンのURLはあんまり更新されていないものはVim公式、結構な頻度で更新されているものはGitHubの方で書いてる…つもり。ではサクっといきましょー。
あ、インストール自体は、VundleとかNeoBundleとかPathgenとか好きなのでどうぞ。(投げっぱ)
Simple-Javascript-Indenter
VimのJavaScriptのインデントはデフォルトでもそこそこ優秀な部類だと思うのですが、やっぱり複雑なオブジェクトやjQueryなんかでの書き方のときに「いや、このインデントはちょっとねーわ…」みたいな事があると思います。そんな時はこのプラギンを導入してください。劇的にストレスフリーなインデントがお楽しみいただけると思います。
1点だけ、作者も注意書きしてるんですが、switch文は上手くインデントができないようで、こんな感じになってしまうのはご愛嬌です。許してあげてください。ここに目をつぶれば大変に満足がいくインデントになるかと思います。
switch(hoge) { case 1: break; case 2: break; default: break; }
設定例：
" この設定入れるとshiftwidthを1にしてインデントしてくれる let g:SimpleJsIndenter_BriefMode = 1 " この設定入れるとswitchのインデントがいくらかマシに let g:SimpleJsIndenter_CaseIndentLevel = -1
Syntax file for jQuery
jQueryのシンタックスです。これの良いところはjQueryのメソッドやjQueryオブジェクトのIDとクラスを色分けしてくれるところです。特にIDとクラスは「いやいや、いくら何でも間違えないでしょう…」と思ってても似たような名前のものだと、たまにIDをいじってたと思ってたら、クラスの方だった…みたいなことが起きて、何を言ってるか分からねーと思うが俺も何を(ry ということになります。
そんな時はこのシンタックスがあると色分けされるので間違えにくくなる気がします。デフォルトではファイル名がjQueryプラグインじゃないとこのシンタックスを適用してくれないので、むりやり:setl syntax=jqueryとかにすると普通のJavaScriptファイルでも色分けしてくれます。
ただ残念なことにjQueryのv1.5.1以降更新がされていないんですよね…。実用上はあんまり問題ないんですが、forkしてあるんで時間あるときに更新しようかと考えています。いつになるんだろうか。 設定例：
au BufRead,BufNewFile jquery.*.js set ft=javascript syntax=jquery
vim-javascript-syntax
VimのJavaScriptのシンタックスはデフォルトでもそこそこ優秀な部類だと思うのですが、やっぱり複雑なオブジェクトなんかや細かい部分の色もつけてみたいところです。
このシンタックス入れると例えばfunctionの後の関数名や無名関数や、等価演算子やら細かいところまで行き届いたシンタックスカラーが堪能できることでしょう。
詳しくは、GitHubレポジトリのスクショ見てください。
ここまでは、まあ基本の基本っすよね。ここだけでもデフォルトのVimよりも使いやすくなっていると思いますが、以下のプラギンを目的に応じて入れるともっとステキング。
neocomplcache
説明不要でしょうが、necoです。これを入れるとまあ補完が捗る捗る。自分はJavaScriptのスニペット用としてhonza/snipmate-snippetsを入れてたりします。本当はnecoのバージョンアップに合わせて、こちらのスニペットもneco仕様にしたいんですが、面倒なんでやってないっす…。
設定例は長いので省略。
jscomplete-vim
JavaScriptのメソッド補完を可能にしてくれるプラギンです。ES.nextとかVimperatorで有名なteramakoさん作のステキプラギンです。これは自動で上で紹介してるneocomplcacheと連動してくれます。これがあるのと無いとでは、補完自体の賢さが違ってきます。メソッドを書くのに.なんかを入れただけで、空気を読んだ補完候補を出してくれます。
設定例：
" DOMとMozilla関連とES6のメソッドを補完 let g:jscomplete_use = ['dom', 'moz', 'es6th']
syntastic
これもnecoと同じで特にJavaScript専用ということはないですが、Vimのもはやデファクトなシンタックスチェッカーになった感のあるプラギンです。これの良いところは、jslintやjshintやClosure Compilerなど環境に入ってさえいれば勝手にそれを使ってシンタックスチェックしてくれるというところです。大体JavaScript書く人でVimとか使ってる人の環境にはどれかは入ってると見越してるんでしょうか。自分は保存のタイミングでチェック走らせてますが、任意のタイミングでチェックもできるし、エラー内容はquickfixに出たりするので大変に修正がしやすいです。
設定例：
" このようにするとjshintを必ず使ってチェックしてくれるようになる let g:syntastic_javascript_checker = "jshint"
ここまで揃えるともはや、JavaScript書くのには完成系だと思います。が、こっからはさらに目的を絞ったプラギンを導入していくと、毎回使うことはなくても「かゆい所に手が届く」環境になっていきます。
tagbar
ctagsなどで生成したタグファイルを表示してくれるプラギンです。これを入れるとctagsなどのパスさえ設定しておけば、ファイル内の関数や変数なんかが一覧で見られて定義場所に簡単にジャンプできるようになります。
規模が大きいソースになると「これどこで定義してるんだよ…」ということが起こりがちですが、このプラギンのおかげでIDEのように簡単に目的の関数なんかが探せるようになります。
自分は以前に紹介したDoctor.jsと組み合わせてJavaScript用のタグを表示しています。また今回紹介してませんが、CoffeeScriptのタグ生成の設定なんかもしてます。
設定例：
nnoremap <silent> <F9> :TagbarToggle<CR> " ctagsはMacVim-kaoriyaの使ってる let g:tagbar_ctags_bin = '/Applications/MacVim.app/Contents/MacOS/ctags' " JavaScriptにはjsctagsを使用 let g:tagbar_type_javascript = { \ 'ctagsbin' : '/usr/local/share/npm/bin/jsctags' \ }
vim-buster
知ってる人は知ってると思いますが、Buster.jsというテスティングフレームワークがあります。個人的にはJasminとかよりも好きなので、個人のプロジェクトに使ったりしてますが、その導入を助けてくれる、Vimプラギンです。
*-test.jsなどのファイルタイプでフックするようにすると、テストファイルを開いておいて:makeとするとbuster testが走ったりしてくれます。あとassertなんかもnecoを導入してると補完してくれるように(なぜか)なります。実は以前にJasminも使わなければならなくなってjasmin.vimという同じようなプラギンを入れたら、ばっちりとバッティングしてしまい、「まあbusterの方入れててもBDDっぽい補完してくれるし」という理由で、jasmin.vimの方は外してしまいました。
好みに応じて、テスティングフレームワークも、Vimプラギンも使い分けが必要なようです。 特に設定はしていなくても使えると思います。
vim-handlebars
知ってる人は知ってると思いますが、Handlebars.jsというJavaScriptテンプレートエンジンがあります。個人的にはejsとかよりも好きなので、業務でも使ったりしてましたが、そのシンタックスハイライトしてくれる、Vimプラギンです。
拡張子が.hbや.handlebarsなんかのものは勝手にシンタックスハイライトしてくれます。自分はしてませんが、普通のHTMLにscriptタグとしてテンプレート書いてる場合なんかは、ファイルタイプをもごもごすると良いんじゃないでしょうか。(やったことない)
これも設定は特にしていなくても使えると思います。
と、自分のVim + JavaScriptの環境はこんな感じになっております。他にもVim自体を便利にするプラギンなどはもちろん多数ありますが、JavaScriptに焦点を絞ると上記のような環境です。
この環境で満足度が非常に高いために、あまりJavaScript関連で他のプラギンなんかを積極的に探すという機会が減っているのですが、もちろん良いプラギンがあれば使っていきたいと思います。
何だかデジャブのように似たような文章を繰り返してしまいましたが、これで今回のエントリは終了としたいと思います。
明日のAdvent Calendarはaespinosaさんのエントリーになります。楽しみですね。
z.shが便利なんだけど、なぜかTab補完しなかったので対応した
naoyaさんのこのエントリで遅まきながらzをHomeBrewで入れてみました
最初は「わー！一回行ったディレクトリにさくっと移動できるー」と思って感動してたんですが、どうも変な事に気付いた。
Tab補完が出来ない！naoyaさんのエントリでもGitHubのREADMEにもTabで補完効くぜ！って書いてあるのに、俺の環境だと出来ない…。zshが5.0.2とか新しいからか…と思ってちょっとzの内容を読んでみた。
まあShellスクリプトは、ほとんど分からんちなのですが…。zのv1.4ではL208でこんな感じだったんですが
compctl -U -K _z_zsh_tab_completion _z
をこう変えてみたら、補完ができた。
compctl -U -K _z_zsh_tab_completion ${_Z_CMD:-z}
今のmasterの方だともっと違う処理してるから直ってるっぽいんですが、確かめてないので分からん。
HomeBrewで補完直ったのを使いたいなーと思って、issueで一応報告しておいた。他の人はこんな事しなくてもちゃんと使えるのかな…。
Frontrend Vol.4 powered by CyberAgentの告知のはずでした
サイバーエージェント主催の、フロントエンドエンジニア勉強会 Frontrend の4回目の開催が決定しましたー！
何で自分がこんな事書いてるか？というと、モヒカンの方々に脅迫縁合って登壇させていただく事になったからです。
はい、CAで働いてたりしました。
そして、タイトルの"告知のはずでした"というのは、「まあちょっと遅れたけど、今日あたり自分のブログに書いても問題ないかー」とか 甘い事考えてたら、24時間で定員オーバーになったので、告知か？という状態になってしまったからです。すいません。
どう見ても、登壇者は自分よりも数段上な感じだし、しかも客層もどう見ても、自分より数段上の人達が多いので、吐きそうです。 という事で自分は開発に便利なツール系の話するんですが、レベル的には「脱初心者」レベルがターゲットかなーと思ってたんで、トマトとか腐った卵とか投げないでください。以下概要！
Frontrend（フロントレンド） Vol.4 powered by CyberAgent
- 日時
- 013年2月9日（土） 14:00 – 18:00（開場13:30）
- 会場
- 定員
- 200名(現在補欠の募集になっています)
- 参加費
- 無料
詳しくはリンク先まで！
参考URL
gatekeeper.jsなるものを作った
https://github.com/Layzie/gatekeeper.js
これだけ見ると何のこっちゃ？と思いますが。Vanilla.js用かつスマホブラウザ用のevent delegate専用ライブラリです。
今の案件で必要なんでCoffeeScriptで作ってみました。と、言っても一からオリジナルという訳ではなくVimeoの中の人が作ったgator.jsというライブラリのソースを参考に、モバイルブラウザにいらなそうな部分削ったり、趣味に合わない部分を変更したり…という事してます。READMEにも書いてますが。
一番悩んだ点は…これライセンス表記とかどうすんの？って所でした。ここに一応gator.jsをベースにしてるっていうの書いて、元がApache ライセンスだったんで踏襲してたりしますが。
最終的には、CoffeeScriptからの派生プロジェクトのLiveScriptとかを参考にしました。
forkしちゃえばまあ…という感じでしょうけど、コードは参考にしつつ、別言語(？)に移植して名前が違うとかいう場合はこれで良いんだろうか。ちょっと心配ですな。
使い方自体はほとんどjQueryとかと変わらずに
Gk(document).on('click', '.hoge a', function(e) { console.log(e.innerHTML); });
みたいな感じです。gator.jsのドキュメントとほぼ変わらないです。(GatorがGkになってるくらい) 一応、スマホで見れるデモはついてます。カッコ悪いけど。あと、テスト作りたいけど、どうしよう。ブランチは作ってあるけど何もしてないわ…。
名前の由来は、まあ親のDOMでイベントの門番みたいなもんだなーといって安易に付けました。S○NYの工作員とは関係がな…うわなにをするやめろ。
リポジトリ作った後にググってみたんですが、どうやらパスワードフォーム関係のJavaScriptのライブラリが既にあったりして、名前決める前に調べりゃ良かった…と若干の後悔をしたまま公開しました。
ニーズとしては非常にニッチなんじゃないかと思うのですが、ご紹介まで。(jQueryとかzepto.jsとかあれば、delegate付いてくるし)
Doctor JSがとても良い件
新年明けましておめでとうございました。今年もゆるくお願いします。
全然正月とか新年に関係無いのですが。 何だかググってもあんまり情報が出てこないので。
Vimだけじゃないですが、ctagというコマンドがあります。これはソースコードの関数やら変数やらをインデックスしておくファイルを作ってくれるという便利コマンドでして、これを使ってVimから関数呼び出ししている部分でC-[を押すと、定義部分に飛んでくれてC-tで元の場所に戻るというとてもIDEライクに動かす事ができるものです。
で、これはずっと使っていたんですが、自分の専門(なはず)のJavaScriptの場合は、どうもあんまり上手く解析してくれない…。ちょっと不便ではあるんだけどまあ使えてはいたんで良かったんですが。現在、MozillaがDoctor JSというプロジェクトでJavaScript用のctagを作ってくれています。GitHubのREADMEを読む限りBespinで使うという事で作ってるのかな？
元々Mozillaの中の人がjsctagsというプロダクトを作ってたらしいのが、正式にMozillaのプロジェクトになって名前が変わったらしいです。(コマンド自体はjsctagsですけども)
気になるインストール方法は、実は超絶簡単です。
$ brew install jsctags
終わり。一応node.jsに依存してるらしいので、使用前には入れないとですが、大体最近の良い子はnode.jsを入れてるはずなので、割愛。
1/3追記：
gyaaaaaaaa！新年早々嘘書きました、すいません。 正しくは、Homebrewじゃなくってnpmでのインストールです…。
$ npm install -g jsctags
上記のコマンドでした。なので、npmが入ってるなら、node.jsも入ってるわけで…。大変失礼しました。下でTagbarの設定でもnpm指定してるのに何でこんな間違いを…。穴があったら埋めたい。
追記終わり
使い方自体は
$ cd project
$ jsctags lib
プロジェクトのトップで、解析したいディレクトリを引数にjsctagsコマンドを入れるだけです。
tagsというファイルがトップディレクトリに出来ると思うので、そちらを各エディタで使用する形になります。
で、VimではTagbarというプラギンと一緒に使うと非常に使いやすいものになります。元々TagbarはctagをVimで一覧できるというようなプラギンなのですが、これでjsctagsの設定をしておくと大変に幸せになります。.vimrcの設定はこんな感じで。
let g:tagbar_type_javascript = { \ 'ctagsbin' : '/usr/local/share/npm/bin/jsctags' \ }
g:tagbar_type_javascriptにjsctagsのパスを渡すと使えるようになります。Tagbarを使う場合は上記のtagsを作成しなくても勝手に解析してくれるので、面倒がありません。
見た目はこんな感じで、ちゃんとjsdocsの情報とかも出てて非常に見やすくなります。
