Vue.js で「東京大学のアルバート・アイラー」を並べ替える

JavaScript, Vue.js

趣味として東京大学のアルバート・アイラー 東大ジャズ講義録・歴史編 使用楽曲一覧というサイトを作成したので、そのお話をば。

きっかけ

先日、というにはもう三ヶ月経ってしまいましたが、ものんくるというグループのアルバム「世界はここにしかないって上手に言って」を購入しました。店頭で視聴をして気に入ったこと、ゲストミュージシャンが素敵な人ばかりだったこと、そしてなにより “菊地成孔プロデュース” だったことに導かれその場で買って帰りました。家でしっかり聴いても格好よく、お気に入りのアルバムになっています。アルバムから「ここにしかないって言って」のビデオが YouTube で公開されているので是非。 SoundCloud でも全曲ちょっとずつ聴けるようです。

それをきっかけに、お気に入りの本「菊地成孔, 大谷能生 著/東京大学のアルバート・アイラー」を読み返しました。 2004年に東京大学で行われた Jazz の歴史の授業を、歴史編とキーワード編の2冊にまとめた本です。単行本は2005年、文庫は2009年の発売。

私が初めて読んだのは大学生のころで、父と友人からの勧めで読んだ記憶があります。以来「よく読む本」としてよく読んでいます。今回は何度目でしょう。ちなみに、面白いから読み返すのももちろんですが、記憶力がアレですぐ忘れてしまうから読み返す、という理由の方が大きい気がします。

さて、読むたびに強く強く思うのですが、なぜこの本は音がでないのでしょう。 Jazz の歴史を、沢山の音源とともに振り返っているにも関わらず聴けないなんて!

決意

ついに我慢が限界を超えたため、本の中で使用されている楽曲をまとめたサイトを作ることを決意しました。そして完成しました!

東京大学のアルバート・アイラー 東大ジャズ講義録・歴史編 使用楽曲一覧

是非、使ってみてください!

ぼんやり仕様

制作にあたって、次の機能が欲しいなと考えていました。

  • 聴ける。連続だと尚良し。
  • アルバムカバーが見える
  • 並べ替えできる
  • 絞り込みできる

これらの機能をサーバーサイドで処理すると使い勝手がとても悪くなりそうなので、ページ遷移することなくクライアントサイドで行えた方が良いですよね。積ん読ならぬ “積んフレームワーク” だった Vue.js の練習にも向いていそうで JS メインに作ることを決めました。

音源は YouTube を、楽曲情報は Discogs を使いましょうかね。

あとは作りながら考えましょう。

Vue.js ことはじめ

サイトには主に2つの機能があります。1) 楽曲を探す、2) 楽曲を再生する、です。ここからは、サンプルコードを見ながら「楽曲を探す」ための Vue.js の使い方をまとめていきます。

Vue に対する事前知識は2つだけでした。

そんな状態からでも、とても簡単に扱え、とにかく何か表示するまでに1時間もかかりませんでした。例えば次のようなコードを用意します。

var app = {
	data   : {}
};

app.el = '#js-vue';
app.data.items = [
	{
		"leader": "Charlie Parker",
		"title" : "Ko-Ko",
	},
	{
		"leader": "John Coltrane",
		"title" : "Giant Steps",
	},
	{
		"leader": "Miles Davis",
		"title" : "So What",
	}
];

new Vue(app);

まず、引数に与えるオブジェクト app を用意します。続けて app.elapp.data が必要なのでそれぞれ指定すれば完成です。

  • {{item.title}}, {{item.leader}}

HTML 側では、繰り返ししたい要素に v-for を、表示したいテキストに {{item.hogehoge}} を使ってあげます。

すると、ブラウザで実行された結果は次のとおり。

  • Ko-Ko, Charlie Parker
  • Giant Steps, John Coltrane
  • So What, Miles Davis

あとは app.data.items の内容を充実させて、マークアップすれば一覧を作成することができます。とっつきやすくて嬉しいですよね。詳細はテンプレート構文リストレンダリングのページにあります。

データに変更を加える

次は並べ替え。ただ表示するだけなら、HTMLにベタ書きしても良いくらいですもんね。 Vue なら簡単に並べ替えもできます。配列の変化を検出してくれるので app.data.items.reverse() などとすれば逆順に並べ替えてくれます!

var app = {
	data   : {},
	methods: {}
};

app.el = '#js-vue';
app.data.items = [
	{
		"leader": "Charlie Parker",
		"title" : "Ko-Ko",
	},
	{
		"leader": "John Coltrane",
		"title" : "Giant Steps",
	},
	{
		"leader": "Miles Davis",
		"title" : "So What",
	}
];

app.methods.onClickReverse = function(){
	app.data.items.reverse();
}

new Vue(app);
  • {{item.title}}, {{item.leader}}

reverse! というボタンを追加した例です。データの昇順/降順が切り替わる。ボタンに v-on:click="onClickReverse" を指定すると app.methods.onClickReverse が実行されるわけです。

app.data.items を煮るなり焼くなりすれば、それに応じて Vue が表示を変更してくれるので、あとは並べ替えでも絞り込みでもなんでも構わないと思います。

なお、各種イベントについてはイベントハンドリングのページに明るいです。

input タグの入力を受け取る

制作開始時には予定していませんでしたが、最終的にキーワードでの検索機能もつけて楽曲を探せるようにしました。

var app = {
	data   : {},
	watch  : {}
};

app.el = '#js-vue';
app.data.items = originalItems = [
	{
		"leader": "Charlie Parker",
		"title" : "Ko-Ko",
	},
	{
		"leader": "John Coltrane",
		"title" : "Giant Steps",
	},
	{
		"leader": "Miles Davis",
		"title" : "So What",
	}
];
app.data.onChangeInput = '';

app.watch.onChangeInput = function( value ){
	var regexp = new RegExp(value, 'i');
	app.data.items = originalItems.filter(function( item ) {
		if ( item.leader.match(regexp) || item.title.match(regexp) )
			return item;
	});
}

new Vue(app);
  • {{item.title}}, {{item.leader}}

これまでと変わり watchv-model を用います。

まず app.data.onChangeInputv-model="onChangeInput" が Vue によってマッピングされ、 <input> にテキストが放り込まれます。そして <input> が変わるたびに app.watch.onChangeInput が実行される仕組みです。 app.watch.onChangeInput の中で app.data.items を操作してあげれば表示が変わる、と。1文字打ち込むごとにバシバシ表示が変わるのがとても気に入っています。

詳細は算出プロパティとウォッチャをご参照。

あっという間に並べ替えや検索、絞り込みが作れてしまいました!!

おわりに

「菊地成孔, 大谷能生 著/東京大学のアルバート・アイラー」を題材に、Vue.js を使って楽曲を検索できるサイトを作成しました。一覧表示や並べ替え程度ならば他の方法でも大差なく作れたかもしれませんが、バシバシ動く検索機能は Vue でなければ難しかったかもしれません。

繰り返しになりますが、

  • ファイルを1つ読み込めばもう使える
  • 公式ドキュメントが、日本語で!充実している
  • 簡単!わかりやすい!

といった点がお気に入りました。ちなみに、よく比較される React や Angular は使ったこともないです。

Vue はまだまだ沢山の機能が用意されているようで、アニメーションをつけたい実行のタイミングをコントロールしたい、といったことも考えましたがよくわかりませんでした。 app.data.items が数千、数万の場合はもっと考えないといけないことがありそうですね。

今後も機会を見つけてまた Vue.js を使ってみたいです。

サイトについては、なかなかよくできた、との自己評価ですがどうでしょうか。「東京大学のアルバート・アイラー」を楽しむ助けになれば嬉しいです。

ちなみに、制作時は菊地成孔の「ルペ・べレスの葬儀」をリピート再生していました。

おわり。