経緯 先日後輩のJSについての相談を受けていたとき、以下のような書き方をみて「こんな感じに書けるんですねー」と言われました。 window.hoge = default_hoge || {}; 結構、普段から使ったりはしていますが、なぜ、これが「default_hogeがundefinedやnilだったら{}にする」という意味になるのか、明確に答えられなかったので、そのことについて調べてみました。... 続きを読む

経緯 N+1問題が発生しないようにプログラムを書いているはずだけど、どこかで起きてしまっていそうで不安。。。 ということがあって、何か判定してくれるGemないかなーと思ってたら、案の定あったので、ご紹介。 N+1問題とは そもそもN+1問題って何？って人のために。 例えば、Articleに紐づくUserというものがあったとします。Article一覧を出しつつ、著者の名前も表示したいというとき、単純... 続きを読む

経緯 実家にいた時代、クーラーつけてたら「もったいないでしょ！」と怒られていたので、基本、どんなに暑くてもあまりクーラーをつけない生活をしています。 とはいえ、暑い。 今年は特にラニーニャ現象が起きると予想されているので全国的に猛暑になることが予測されています。 電気代を気にする人もいるかと思うので、是非試してみてほしい方法です。 準備するもの タオル 冷凍庫で凍らせておくタイプの保冷剤 やり方 ... 続きを読む

Web デザイン テクノロジー マーケティング 雑記 続きを読む

経緯 キーワード検索するとき、検索ボタンを押さずに、入力された時点で自動的に結果が変わるようにしたい。 でも、changeイベントは一度フォーカスをはずさないといけないから、keyupでやりたい。 そうすると、入力キーが押される度、通信が走って、サーバーに負荷をかけそう。 ってときの対処法。 対処法 ここではjQuery前提で話を進めます。HTMLは次のようなもの。 <input id="k... 続きを読む

経緯 display: inline-block;を指定するとあたかもinlineでの表示のように振る舞いながら、heightや上下のpaddingを指定することができてすごく便利です。 4列のデータ一覧を作りたいとき、これを使うとレイアウトが崩れてしまったので、そのメモ書き。 原因 HTML/CSSは以下のようなもの。 <ul class="column-list"> <li&... 続きを読む

Web デザイン テクノロジー 科学 雑記 続きを読む

経緯 管理画面などを実装しているとき、一覧画面ではテーブルでデータを表示することが多いと思います。 行のどこをクリックしても詳細画面や編集画面にジャンプするような行を実装したいという要望が出ることもあります。 今日はそのシンプルな方法 やり方 jQuery前提で話します。 HTMLは以下のようなもの。 <table class="table-clickable"> <thead&... 続きを読む

Web デザイン テクノロジー 科学 雑記 続きを読む

経緯 iCheck.jsを使うとチェックボックスやラジオボタンをスタイリングできます。 かなり定番のJSライブラリにはなりますが、使ってみると、onchangeイベントが取れなくなってしまいました。 公式ドキュメントみるとちゃんとifChangedを使えよって書いてありました。 サンプルコードは以下のとおり。 $('input').on('ifChanged', function(event){ ... 続きを読む