会社の合宿で、何をつくろうかと考えたときに、最近、音楽ばっかりやってるから音楽系のツールを作ろうと思った。コード進行のパターンの辞書を増やしていってるタイミングだったので、ベースのコード進行を作って、リハーモナイズ(メロディーはそのままにコード進行だけをアレンジしていくこと)をできるようにしたかった。前、Node.jsを使っていろいろ作ってましたが、RailsとかFuelPHPとかのFrameworkの知識がついた今、Expressをもうちょっとちゃんと理解できるような気がしたので、勉強してみた。JavaScriptはいろいろおもしろいことができるので、好きなんですが、ただ唯一嫌いなのは、JavaScriptであることです。先日後輩のJSについての相談を受けていたとき、以下のような書き方をみて「こんな感じに書けるんですねー」と言われました。普段から使ったりはしていますが、なぜ、これが「default_hogeがundefinedやnilだったら{}にする」という意味になるのか、明確に答えられなかったので、そのことについて調べてみました。N+1問題が発生しないようにプログラムを書いているはずだけど、どこかで起きてしまっていそうで不安。いうことがあって、何か判定してくれるGemないかなーと思ってたら、案の定あったので、ご紹介。そもそもN+1問題って何?って人のために。Articleに紐づくUserというものがあったとします。キーワード検索するとき、検索ボタンを押さずに、入力された時点で自動的に結果が変わるようにしたい。changeイベントは一度フォーカスをはずさないといけないから、keyupでやりたい。すると、入力キーが押される度、通信が走って、サーバーに負荷をかけそう。ここではjQuery前提で話を進めます。HTMLは次のようなもの。inline-block;を指定するとあたかもinlineでの表示のように振る舞いながら、heightや上下のpaddingを指定することができてすごく便利です。4列のデータ一覧を作りたいとき、これを使うとレイアウトが崩れてしまったので、そのメモ書き。HTML/CSSは以下のようなもの。管理画面などを実装しているとき、一覧画面ではテーブルでデータを表示することが多いと思います。行のどこをクリックしても詳細画面や編集画面にジャンプするような行を実装したいという要望が出ることもあります。jQuery前提で話します。HTMLは以下のようなもの。iCheck.jsを使うとチェックボックスやラジオボタンをスタイリングできます。定番のJSライブラリにはなりますが、使ってみると、onchangeイベントが取れなくなってしまいました。公式ドキュメントみるとちゃんとifChangedを使えよって書いてありました。サンプルコードは以下のとおり。ユーザの手によって<div>タグの大きさや位置を、ドラッグして移動や拡大させたいということは意外とあるなー、と思います。それを簡単に実装できるInteract.jsのご紹介。スマホでも動作するのでかなり使い勝手がいいと思います。'よろしいですか?'}のように書くと、リンクをクリックしたときに確認のアラートが出るようにできます。いつもどこでも、ajaxを飛ばすなど、リンク先に遷移するわけではありません。いうときに、confirmでOKされたときにだけ実行するJSの書き方。ここではCoffeeScriptを利用します。Nambu1988年京都生。メディアコンテンツクリエイタ。おもしろいことが大好物。