読者です 読者をやめる 読者になる 読者になる

console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

JavaScript

0からはじめるpower-assert

テスト書いてないとかお前そ(ry すみません、言ってみたかっただけです。そして本記事は、巷で話題のAdvent Calendarとも何の関係もありません。 来年こそは書いてみたい!

LocalStorageに関する覚書

忘れちゃうと困るからメモ。

HTML Audioの使い方のまとめ

掘り出し物のメモを記事化して公開していく試み。今回はいわゆるaudioタグです。 いまブラウザで音を出すならどうするのって時の候補ですね。いまさらです。

ブラウザかWebViewか、どちらで開かれたのかを判別するには

あると思った? 残念、そんなものはない!とはいえそれは"厳密に"やる場合の話で、今現在はなんとか・・なんとか・・・。 これを良しとするかはあなたのココロ次第です。以下、奮闘記をお送りいたします。 20150813: 更新 ‘fullscreenEnabled’ in documentっ…

compareDocumentPositionとビットマスクとビット演算

部屋とYシャツと私みたいなタイトルになった・・。わかったのかわかってないのか、とりあえず調べたことをメモっておくための記事。

jQuery, GSAP, Velocity.jsのfadeIn/fadeOutの記法を比べる

fadeInって聞くと、あぁjQueryねってなるくらいには浸透してると思うのですが、 あれはパフォーマンスがよろしくないとのこと。であれば代替に何があるの?ってことで、 その代替ライブラリたちとその書き方のご紹介。

OSCON 2014: How Instagram.com Works; Pete Huntの要点まとめ

なんか最近こんな記事ばっかですが、まぁええよね!w今回はこちら。 OSCON 2014: How Instagram.com Works; Pete Hunt - YouTube Instagramがどうやって作られてるか、です。 Pete Huntさんは、FacebookでInstagramのエンジニアやってて、いま噂のReact.js…

JavaScript Memory Management Masterclass with Addy Osmaniの要点まとめ

最近こういうことよくやらなきゃなのでまとめました。以下のリンクにある動画とスライドのまとめみたいなものです! 自分用なので、細かいことは書いてませんが。 参考:Memory Management Masterclass with Addy Osmani - YouTube 参考:JavaScript Memory …

Node.jsでテキストを1行ずつ処理する

さくっと書きたいコードの時は、npm installしたくない派です。 なので、いままでコレ困ってたんですけど、 よくよく調べてみると普通にビルトインのAPIでできるってことがわかり。今後のためにも、それをメモっておきます。

Requirejs x Createjsするときの、require.configの書き方

タイトルが長いシリーズ。まさかの需要があったので、インターネットの大海原にも放流しておきます。 ペタっとするだけなので、さくっと続きを。

WebAudioAPIさわるならFirefoxのWeb Audio Editorで

職場のとある神エンジニアさんから、最近のFirefoxがイケてるという話を聞き。実際にFirefoxのNightly使ってみてるんですけど、良いですねコレ! Firebugないとどうしようもなかったあの頃のFirefoxとは違うのだよ!というわけで、FirefoxのNightlyで先行実…

タイプライターみたくテキストを扱えるtype-write.js

書いたので一応。 参考:leader22/type-write.js

$.fn.fadeIn(fn)をCSSアニメでやる

最初は便利かなーと思ったのですが、使い勝手はイマイチでした・・。 まあ一応書いたので、メモっとこうと。

Requirejsを使う時の覚書

巷ではあまり評判よくないんですかね? 個人としては、そこまでらいふちぇいんじんぐってほどではないけども、 それなりに使えるケースもあると思うんですけど・・。というわけで、個人的にメモっておきます。

Backbone.Marionetteがv2.0.0に

みなさんお待ちかね!大変お世話になってる身としてはうれしいですねー。 おめでとうございます!さて、いまMarionetteを使ってるプロジェクトで、割とキリのいいタイミングやったのでアップデートしようとしたのですが、そのままファイル差し替えればOKって…

HTML5のdata属性をキャメルケースで定義するとどうなるか

jsでは変数名をキャメルケースにしてて、どうせなら目につくとこ統一したいなーと思ったんです。 で、そういえばdata属性って最初からキャメルケースにしたらどうなるんやろー?って。 まあ結論からいうと、ダメですw

_.extend() は いわゆる"継承"ではない

どうも、JavaScriptゆとり世代です。 JavaScriptで継承ってキーワード聞いて、どんなコードを連想しますか?なんと私が最初に連想したのは、UnderscoreとかBackboneとかのextendでした・・。 ※注:うまくまとまる気のしないメモ記事です。

Android(実機)でconsole.logできちゃうADM

ADM(Android Device Monitor)っちゅー便利なもんがあるんよ。ってメモをまさか70日前に書いて放置してたので放出します・・。 注:以下、Macでの話です。

Backboneで作ったSPAをMarionette化してみた

こないだ作ったのをMarionette使ってみよう!というわで、Marionette化してみました。 参考:leader22/simple-pokedex

Backbone.Marionetteのコード読んで日本語コメントをつけた

バージョンは1.8.1です。 (この記事書いてる間に最新バージョンが1.8.2になっててちょっとかなしかった。)Marionetteにはソースコメントつきのコードが見れるとこがあるのです。 参考:backbone.marionette.js それを、こう。 参考:backbone.marionette-ja.…

自分用のgruntのスターターつくった

毎回コピーしてくるのも面倒なので、ざっくり作った。

いまさらnode-webkitをさわってみた

去年くらいに一回ちらっと見た覚えがあるけども、 何事も遅すぎることはないという精神で。 参考:rogerwang/node-webkit

Vue.jsでViewにバインドした配列を更新するとv-repeatしてるViewがおかしくなる問題(があった

まさかの3日で過去の話になりました。 現時点で最新のv0.10.1ではなおってます! 某人のおかげか、こんな僻地ブログまでも来てくださる方が多いようですありがたやー。 そんなあなたにVue.jsネタをひとつ。タイトルが長いわりに、問題なのか、仕様なのかわか…

Vue.jsでv-repeatをネストするには

いまいちやり方がわからず前回はあきらめた・・。 が、いまやったらできた! 見た方が早いと思うので、コチラをどうぞ。 なんかjsfiddleは調子が悪かったので、CodePenに。 参考:CodePen - Pen Gistにもメモっておくことにした。 参考:How to v-repeat in …

Require.js使う時にhtmlにどう書くか

地味に書き方が複数あるっぽかったので。

jQuery Plugin Design Patterns

って検索したのにコレだ!って情報が出てこなかったので、自分でメモしておく。 jQueryのプラグインを書くにあたり、そもそもどういうやり方があるのか 気をつけるべきポイントはどこなのか みたいなことのメモ。 イマサラ感は気にしない。

Gruntでタスク名が被ってしまったら

これ、実行されないんですね。 そしてエラーでもなんでもなく何もせず終わる・・!

JavaScriptで明るい色だけランダムに

jsの話というより、そういうものがあるんですという話です。個人のティザーでこういうことしたかったんですよ、こういうの。 参考:Lealog.net

噂のVue.jsをさわってみた

なんか流行りにのってる感があります。 参考:vue.js なんかわからんけどはてブの上位に出てた、気象庁のAPIとあわせて使ってみました。以下、サンプルのURLです。 ソース見た方がはやいかも。 参考:Vue.js x 気象庁API Sample ↑気象庁APIの仕様変更?の影…

いまさらBackbone.jsでSPAぽいものを作ったので

反省と学びをメモしておきます。リポジトリは、 参考:leader22/simple-pokedex ご参考まで。 2014/04/24現在、Backbone.Marionetteで作りなおしました。

Require.js とか jQueryはリクエストをキャッシュする

ほんとに注意してください!!!(自戒 他のコードが悪いんじゃないかとか 使ってるライブラリが古いんじゃないかとか サーバーのキャッシュの設定のせいじゃねとか ブラウザのキャッシュじゃねとか 色々勘ぐって調べる前にチェックしてくださいまし! requi…

Backbone.Collection.get()がよくわからない

単に私がよくわかってないだけな可能性もありますが。 参考:Backbone.js これを見る限り、 getcollection.get(id) Get a model from a collection, specified by an id, a cid, or by passing in a model. で、 var book = library.get(110); と。 2014/06/…

Array.prototype.slice.call(arguments)とは

Array.prototype.slice.call(arguments); っていう、いかにもJavaScriptを使いこなしている風なこの書き方。 もちろん最初はまったく意味がわからんかったです。そして次に、意味はわかっても、使い道がわからんかったです。けど最近、使い道がやっと見えて…

こんなJavaScriptのイディオムあったのね集

キャメルケースを単語単位でArrayに "CamelCaseString".match(/[A-Z][a-z]*/g); // ['Camel', 'Case', 'String'] JSONをPrettyPrintする JSON.stringify(hoge, null, 2); // 2スペースでインデントされたJSON形式のhogeが! 小数点以下を指定 123.432.toFixe…

特定のURLで動作するChromeExtensionをつくる

Google Chromeのエクステンションのネタです。昔書いた記事もありますが、イマイチ実践的な感じではないので改めて。 参考:いまさらまとめるChrome ExtensionでのJavaScript挿入 - console.lealog(); とはいえやはり、タブどうしでやりとりしたり・・はして…

forループの中でsetTimeoutしたらiはどうなるか

この手の話題は記事タイトルが本当につけにくいw今回も備忘メモです。 for(var i = 0; i < 3; i++) { setTimeout(function(){ console.log(i); }); } このコード、実行するとどうなるでしょう?

JavaScriptのカスタムイベント

JavaScriptでよくある、 そんなユーザーインプットが行われたわけではないが、それをエミュレートしたい時 各クラス間を疎結合に保ったまま、データのやりとりに独自のイベントを使いたい時 そんな時などに使われるだろうアレです。MDNくらいしか検索しても…

いま、ブラウザで音声認識するなら

これは、2013/12/28時点での情報です。 ブラウザだと、こういうのがあります。 Speech Input API Web Speech API まあ結論から書くと、今のところはPCのしかもChromeでしか楽しめないみたい。

JavaScriptの値渡しとか参照渡しとか、プリミティブとかイミュータブルだとか

なんてタイトルにしたら良いのかまったくわからんwとはいえ、最近のハッとした事例。 var arr1, arr2; arr1 = arr2 = []; for (var i = 0; i < 3; i++) { arr1[i] = 1; } arr1 = []; console.log(arr1.length); // 0 console.log(arr2.length); // 3 わかっ…

JavaScriptの実装で、最近悩んでるコト

たとえば、こういう要件があったとします。 複数の選択肢から、nコを選んで実行する nコ以上選んだ場合は、後から選んだものを優先する リセットボタンがある 決定ボタンを押すと、選んだ内容が表示される みたいな。で、こういうのを実装するにあたり、どう…

connect.multipart() will be removed in connect 3.0って言われたら

まぁわざわざメモしなくても良いけども。 connect.multipart() will be removed in connect 3.0 visit https://github.com/senchalabs/connect/wiki/Connect-3.0 for alternatives connect.limit() will be removed in connect 3.0 ってでたので。

Node Expressで、Handlebarsを使う

最初はちょっと手間取りましたが、なんとか使えるようになりました。 参考:donpark/hbs · GitHub

JSHintが何もしないswitch/caseを許してくれないときは

なんて表現の難しいケースなのか。以下のコードをみてください。 switch (scene) { case 'opening': // .. break; case 'ending': // .. break; case 'others': // <- こういうやつ default: // .. } JSHintが言うには、 Expected a 'break' statement befor…

JavaScriptのDate.getMonth()のオリジンは0から

わかりにくいタイトルやけども、こういうことです。 var d = new Date(); d.getMonth(); // 10 <- 今11月やのに! というわけで、getMonth()の起算点が0からなので、+1しないとズレます。 PerlとかJavaとかでもそうらしい。 参考:Moment.js | Parse, valida…

Node.jsのExpressでファイルアップロード

簡単にできるんやろなーと思ってたけど、思ってた以上に簡単やった。Node.jsのおかげで色んなことができるようになった気がします。

いまさらrequestAnimationFrameを理解する

理解できたらいいな・・。 だいぶ今さら感はあるのですが、改めて知っておきたいタイミングなので。 参考:window.requestAnimationFrame - Web API リファレンス | MDN

display: noneの要素は、高さも幅も取れない

opacity: 0 or visibility: hidden のものは取れる。うーむ。その子要素も同様に取れない。うーーむ。

Node.jsのConnectなら、ローカルサーバーを一瞬で

ちょっとコレは感動的やったので! ご存知の方はご存知なのでしょうが、このモジュール。 参考:Connect - High quality middleware for node.js

console.logで使える%sを他でも使いたくて

ちょっと関数書いてみた。という、またも個人的なコードスニペット。 意味不明なコードを修正。 もっと短く書けるものを追加。

ページ遷移なしでコンテンツを更新したいとき

どう実装するのがベターなんやろうと思って。 まず最初に思いついたのが、jQuery Mobileです。というわけで、どういう実装になってるか調べたのでそのメモ。