【js】Backbonejsでeventsを継承させる方法

こんばんは。
たかきです。

Backbonejsって便利ですけどeventsは継承してくれなくて困りますよね。
昨日仕事でeventsをなんとか継承させることはできないかあれこれやっていたらできたので披露します。

まず、こんな継承元のViewがあったとします。

var dadView = Backbone.view.extend({
  events: {
    'tap .hoge': 'hoge',
    'tap .foo': 'foo',
  }
});

なんて感じの。

そしてこれを継承します。
(requirejsとかで、上記親Viewが DadViewと定義されているとして、)
続きを読む

カテゴリー: front-end, JavaScript, エンジニア | コメントする

【js】モンティ・ホール問題

モンティ・ホール問題って知ってますか?

ドアが3枚あります。
どれか1つのドアの後ろにはアタリの高級車が、残りの2枚のドアの向こうにはハズレを意味するヤギが控えています。
挑戦者がどれか一つのドアを選ぶと(まだ開けない)、司会者がハズレのドアを一つ開けてくれます。
ここで挑戦者には、回答を変更する権利が与えられます。

さて、挑戦者はドアを変更するべきでしょうか、せざるべきでしょうか、あるいはどちらでも変わらないでしょうか。

この問題を知らなければ、変えても変えなくても正解する確率は変わらないと思うでしょう。
僕もそうでしたし、この問題が提起されたときには数学者たちも確率は変わらないと言い張ったそうです。

ま、このすったもんだのストーリーだけでも面白いので、興味がある人はwikipediaなどをご覧ください。

答えは、ドアを変えるべきなんですね。
変える前は1/3の確率で当たるんですけど、変えると当たる確率が3/2に変わるんです。
それをJavascriptで試してみたのでご覧ください。

10,000回試した結果です。
きっと66%前後を示しているのではないでしょうか(リロードのたびに実験しますので、65~67%を示すと思います)。

See the Pen zoRJzB by Takaki Hiemno (@takaki1216) on CodePen.

カテゴリー: front-end, JavaScript, jQuery | コメントする

【jQuery】遅れてfade in/outさせる

【要件】
ボタンをクリックしたら500ms遅れて何か要素(今日はクリックされたボタン)を$.fadeOut()させよ

はい。普通にjQueryで書くとこんな感じ。

$('ぼたん').click(function() {
  setTimeout(function() {
    $(this).fadeOut();
  }.bind(this), 500);
});

そうです。遅れて何かをするときには setTimeout() です。これでOKです。
でも、もう一個function() が出てくるので this を bind しなきゃいけないし(functionの外側で var self = this; とかして、 $(self).fadeOut() しても同じです。)、なかなか煩わしいですよね。

そこで、せっかくjQueryなので .delay() を使うと楽だよ、可読性も上がるよ、という紹介です。
まあ、こんな書き方もあるんだよ、程度に。よかったら使ってみてくださいね。

$('ぼたん').click(function() {
    $(this).delay(500).fadeOut();
});

これで同じ動作をします。
ほら、読みやすくなったでしょう?
実物は下記をご覧ください!

See the Pen kkgwBL by Takaki Hiemno (@takaki1216) on CodePen.

カテゴリー: front-end, JavaScript, jQuery, エンジニア | コメントする

前職の友達に子供が産まれたぞ

こんばんは。

先々月6月、前の会社の友達に子供が産まれました。
と言っても僕はもちろん彼ももうその会社は辞めてしまっているのですが。

でも二人共その会社にいた時に彼が結婚して、別の時には向こうの奥さん(当時彼女)と一緒にうちの子とCOSTCOに行ったりと、何かと親密な人なんですね。
そんな彼の家に今週末お邪魔してきます。

育児に何がほしいか聞いたら粉ミルクだというので、

これを持って行こうと思います。
銘柄も指定してくれたのでとても楽です。

うちの子は「はいはい」しか飲まなかったなぁ。

赤ちゃんにもいろんな好みがあるのですね。

いやー会いに行くの楽しみです。

カテゴリー: blog, 生活 | コメントする

バールのようなもの

こんばんは。
バールを買ったんです。
よくニュースとかで「バールのようなものでこじ開けられ…」なんて聞くあのバールです。

IMG_8929
↑じゃん。
これ。
390mm のバール。

実は家の前の側溝の網の蓋の中に息子が僕の自転車の鍵を落としてしまいまして。
鍵を取るべく蓋を素手で引っ張ってみるもびくともしない。
で、家にあった道具で挑んだんですがカナヅチの釘抜きなんてこのザマですよ。↓
IMG_8855

金属でもこんなに簡単にひん曲がるとは恐るべし側溝の蓋…一体どんな力で埋まってるんだ。
もうだめなのか、鍵は諦めるしかないのか?と思っていたんですが、この前ジャージを買いに行ったドンキホーテでバールを見つけまして。
「これだ!」と。
「近所のくろがねやならもっと安く買えるだろう」と。

そして今日買ってきたのが最初に紹介した青いバール。

バールすごいっす。
どんなに力を加えても撓(しな)ったりしない。
むしろ網の横のコンクリートが凹んでいく!

IMG_8928
↑そしてバールを駆使してめでたく開けることができた図がこちら。

網こんな形してたのか!
そりゃ簡単に開かないわけだ。
平らな板状のものが乗ってるのかと思ってたよ。

てかこれを無理やり開けても折れたり曲がったりしないバールすげえ。
そりゃあ金庫とかも破られるわけだ。

35歳にして初めてバールを使って興奮しているのでした。
これ、人んちのドアとか車とか開くんじゃね?
こんなのが1000円で買えていいんかね?
(※いいんです)

というわけで欲しくなった人はこちらからどうぞ。

カテゴリー: 生活 | コメントする

【javascript】ifにするぅ?switchにするぅ?そ・れ・と・も

【要件】
受け取った animal_id に応じて、以下のとおり表示したい。

animal_id 表示名
1 cat
2 dog
3 lion
4 panda
5 giraffe

はい。きっと最初に思いつくのがif文による分岐ですよね。
続きを読む

カテゴリー: JavaScript | コメントする

アプリのバッジ数などに使える小技

今日はアプリのバッジ数をつける時なんかに使うであろう小技を紹介。

何かから未読数とかを受け取って表示するケースを考えますが、
「100以上なら99と表示したい」なんてこと、よくありますよね?

真面目な皆さんはこんなコードを書くかもしれません。


console.log(num);  // 120

if(num > 99) {
  num = 99;
}

console.log(num)  // 99

はい、これでOKです。
期待通りに動きます。

でも今日頭のいい人のコードを読んでて感動したので紹介します。

console.log(num);  // 120

Math.min(num, 99)

console.log(num)  // 99

はいこれだけ。

Math.min()は、引数の中から最小のものを返してくれる関数ですね。
言われてみれば当たり前なんですが、こういうところでコーディングのセンスの差がでますよね〜。

(まあ、実用上は100以上の時は 「99+」 なんて表記するために+をつけなきゃいけないから、結局どこかでif文書いたりすることが多いんでしょうけどね。)

カテゴリー: JavaScript | コメントする

【Javascrip】配列の .reverse() に気をつけろ!

こんばんは。
たかきです。

今日もjavascriptを書いております。
みなさんも書いてますか?

配列、使ってますか?
使ってますよね。

array に .reverse() って使ったことありますか?
そう、配列を逆順にするあれですね。

var arr = [0, 1, 2, 3, 4];
var arrRev = arr.reverse();
console.log(arrRev); // [4, 3, 2, 1, 0]

そう、こんな関数ですね。
続きを読む

カテゴリー: JavaScript | コメントする

jQueryでセレクタに属性を指定するときに気をつけること

自分がはまったのでメモを兼ねての投稿。

<div class="fade-in slide-in diary">
  なんか文章なんか文章なんか文章
</div>

<div class="fade-out diary">
  なんか文章なんか文章なんか文章
</div>

こんなhtmlがあったとして、jQueryで fade-in クラスを選択したいとします。

$(".fade-in");

はい、もちろんこうですね。
そうです、class属性は “.”(ドット)で指定できます。

じゃあ、今度は fade- で始まるクラスをすべて選択したくなったとして、一旦属性を指定する方法で、class=”fade-in”を指定してみましょう。
以下が自分が犯したミス。

$("[class='fade-in']") // 返り値なし 

一見同ものが返りそうですが、違います。
[class=””] は完全一致したものが返ります。
つまり、この一個目の div は、

$("[class='fade-in slide-in diary']") // ヒットする
$("[class='fade-in']") // ヒットしない

なのです。

カテゴリー: JavaScript | コメントする

macでgulp-ruby-sass が動かない時に読んでみる記事

こんばんは。gulp-ruby-sass、使ってますか?
便利ですよね。
自宅mac(10.9)でgulp-ruby-sassを走らせようとしたら、

OptionParser::NeedlessArgument: needless argument: –sourcemap=none

と表示されてしまってエラーになってしまいました。

gulpfile.jsのsassに関係するところはこんな感じ。

gulp.task('sass', function() {
  return sass('gulp/sass/**/*.scss')
    .pipe(plumber())
    .pipe(pleeease({
        autoprefixer: {
            browsers: ['last 2 versions']
        },
        minifier: true
    }))
    .pipe(gulp.dest('www/htdocs/css'));
});

…なにもおかしくない。

なぜだ。

はい、実はgulp-ruby-sassは sass のバージョンが 3.4 以上でないと動かないようです。

この記事を読んでいる方はきっとgulp-ruby-sassで困っているでしょうから、一緒に調べてみましょう。

$ sass -v
Sass 3.2.19 (Media Mark)

はい古いですね。

では、アップデートしましょう。

$ sudo gem update --system

これでgemが最新化されます。

Latest version currently installed. Aborting.

と表示された場合は既に最新です。このままでOK。

からの、

sudo gem uninstall sass

そして

$ sudo gem i sass
Fetching: sass-3.4.21.gem (100%)
Successfully installed sass-3.4.21
Parsing documentation for sass-3.4.21
Installing ri documentation for sass-3.4.21
1 gem installed

どうだ、うまく行ったか!?

$ gulp sass
[00:07:05] Using gulpfile ~/Documents/test/npm_lesson/gulpfile.js
[00:07:05] Starting 'sass'...
[00:07:05] Finished 'sass' after 250 ms

やった!うまく行った!
今日これにハマったので忘備録を兼ねて。

stack overflowに感謝。
stackoverflow.com/questions/28683069/new-gulp-ruby-sass-alpha-task-failing

カテゴリー: front-end, JavaScript, Work | コメントする