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

parseIntを小数点切り捨てに使わない

TwitterのTL上でにわかに話題になっていた。parseIntは引数をstringにしてからint変換するので、小数点以下の切り捨てには使わん方が良いというお話。 > parseInt(0.000001) 0 > parseInt(0.0000001) 1 これは以下のように処理されているのと同じ > (0.00000…

クロージャとbindの引数束縛パフォーマンス

JavaScriptで引数を束縛したい場合、クロージャかbindを使うのだが… function plus(x, y) { return x + y; } function multiply(x, y) { return x * y; } // Function.prototype.bindで束縛 const plus1 = plus.bind(null, 1); plus1(5); // => 6 // closure…

generatorとpromiseで行う非同期処理

2年ぐらい前にgeneratorでコールバック地獄から解放されるぜウェーイと話題になりましたが、今現在、世間ではgeneratorによる非同期処理ってどのくらい使われているんでしょうね? 自分たちのチームでは今更過去のコードを書き直すのも面倒なので使ってませ…

obj && obj.hoge && obj.hoge.fuga ... を少し簡単に書く

Qiitaにも投稿してみた JSerの皆様につきましては、JSON.parseしたデータなど、多段ネストしたオブジェクトのプロパティにアクセスするとき、 const obj = {hoge: {fuga: {piyo: 1}}}; const value = obj && obj.hoge && obj.hoge.fuga && obj.hoge.fuga.piy…

関数の可変長な仮引数を直接コンストラクタに渡す

ある関数が受け取る可変長引数を、コンストラクタに直接渡す方法 要するにコンストラクタが可変長引数を受け取るのでファクトリ関数も可変長引数を使えるようにしたいんですよ。 ES2015ならばこう。 'use strict'; class Hoge { constructor(...args) { cons…

ES2015以前の可変長配列の書き方

LTSのnode 4系ではRest Parametersは使えんのですよね。 'use strict'; function x(a, var_args) { const args = Array.prototype.slice.call(arguments, 1); console.log(a); console.log(args); } x('a'); x('b', 1); x('c', 1, 2); x('d', 1, 2, 3); 可変…

left-padの文字列連結はクソではない

例のleftpad, GCを虐めるためとかコンパイラの最適化を確認するために用意する、「無駄に一時オブジェクト量産するクソコードの典型例」みたいな実装なので、こんな小さい関数のために、信頼できない人のコードを、実装を見るでも無く、依存性追加してたって…

snake_caseなプロパティにcamelCaseでアクセス

とあるAPIのレスポンスJSONのキーがsnake_caseだが、JavaScript的にはcamelCaseでプロパティアクセスしたいんだよなー、みたいな話を某所で見かけた。 ES2015 Proxyを使って解決してみる。 function toSnakeCase(name) { name = name.replace(/([A-Z]+)([A-Z…

do式

do式が実装された - JS.next へえ〜 ES7のfeatureなので、正式に標準化されるのは2017年以降になると思われますが、babelでは--stage=0ですでに動くようです。 // hoge.js let x = 3 let y = do { let a = 1; var b = 2; a + b + x; } // console.log(a); //…

toCamelCase / to_snake_case

JavaScriptでcamelCaseとsnake_caseの変換 function toCamelCase(name) { return name.replace(/_(.)/g, function(_, $1) { return $1.toUpperCase(); }) // 先頭も大文字にするならこっち // return name.replace(/(?:^|_)(.)/g, function($$, $1) { return…

デフォルト引数でフィボナッチ in JavaScript

Rubyのメソッド引数は奥が深い(その2)または別のフィボナッチ ES6にはデフォルト引数があるのでJavaScriptでも書けそう。 Firefoxでは動いた。 function fib(n, m = (n === 0 || n === 1 ? n : fib(n-2) + fib(n-1))){ return m } undefined fib(1) 1 fib(2…

Linked listをJavaScriptで実装

JavaScriptで双方向連結リストを書いてみる。 function List() { this._length = arguments.length; for (var i = 0; i < arguments.length; i++) { this.addLast(arguments[i]); } } Object.defineProperties(List.prototype, { length: { get: function() …

argumentsオブジェクトと仮引数の謎挙動

JavaScriptのargumentsはなかなか不思議なオブジェクトで、配列のようで配列でなかったり、関数スコープで暗黙に作られていたり、きわめつけは… function hoge(a, b) { console.log(a); arguments[0] = 5; console.log(a); } hoge(1, 2); 1 5 !? function …

見てるページのドメインでgoogle site検索するブックマークレット

はてなブログに移行して「ブログ検索がない、使えない、まブログ毎にドメイン違うからGoogleでsite検索ですればいいか」と思ってブックマークレットを作成した。 javascript:(function(w){if(w)location.href='https://www.google.co.jp/search?q='+encodeUR…

Object.values

Object.keysがあるのにObject.valuesがないので ObjectUtils.values = function(obj){ return Object.keys(obj).map(function(key){ return obj[key]; }); }; ついでにkey valueをイテレーション ObjectUtils.forEach = function(obj, callback) { var keys …

createObjectURLとは何か?

createObjectURL、省メモリだとかaudioの再生がスムーズだとか言われてるけど、これが何物なのか日本語の詳しい説明が見当たらないので、自分の理解を書いておく。File APIの仕様書を軽く流し読みして得た理解なので正確さは保証しない。ま、大筋は間違っち…

Object.keys

javascript の オブジェクトが空かどうかを調べる場合 - Node.js日誌βObject.keysはオブジェクトのプロパティ名を配列で返すメソッド。for inの列挙と違って hasOwnProperty が true になるものだけが返る(だからオブジェクトが空かどうか調べられる)ので…

ES 5thなクラスを生成3

前回はFunctionオブジェクトの拡張を試してみたのだけど、ネイティブオブジェクトに独自メソッドぶら下げるの気持ち悪いという意見もあるので、クラスを作るオブジェクトを作成してみる。 var Class = (function(){ var mixin = function(trait) { Object.de…

getterとsetter / Object.create(null)

GetterとSetter ES 5thからsetterとgetterの定義が仕様に入ったわけですが… var Hoge = Object.create({}, { // プロパティ val: { set: function(a){ this._a = a }, get: function(){ return this._a } }, // メソッド add: { value: function(a){ this._a…

ECMAScript 5thなオブジェクト生成の話2

昨日書いた new を使わないインスタンス生成は、実際に使ってみると、たかだかオブジェクトの生成ごときで Object.create(Hoge.prototype).init(); とか長いし、init呼ぶの忘れそうだし、init メソッド定義しないといけないし、return this 忘れるとハマるし…

ECMAScript 5th時代のクラス定義とインスタンス生成

オブジェクトの生成にnew演算子を使わないのが今どきらしい。じゃあ、どうすりゃいいのよ?こんなんで良さげ。 var Hoge = Object.create({}, { // プロパティ val: { set: function(a){ this._a = a }, get: function(){ return this._a }}, // メソッド ad…

ビット演算で小数点切り捨て

ライセンスで話題のモバゲーDeNAのJavaScriptライブラリですけど、プログラマならライセンスよりソース読んでみようぜ。え、おまえもTwitterでライセンスpgrしてただろうって?なんの事すか?コードはかなり奇麗に書かれているので、読みやすいですよ。arcti…

jQuery.ajaxのdeferred

jQuery.ajaxのdeferred版、コールバック設定用のメソッド名が変わるそうで… Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks will be deprecated in jQuery 1.8. To prepare your code for their eventual removal…

マージソート

次はマージソート。マージソートは要素を半分ずつ分け、半分にしたものをさらに分ける、これを全部ばらばらになるまで繰り返して、結合する。結合する時に互いの先頭を比較して小さいのから取り出していくことでソートするというアルゴリズム。例によって、…

クイックソート

最近、Erlang始めたので、手始めに何か適当なアルゴリズムのコードでも書いてみようかと。まずはソートアルゴリズムの王様クイックソート。小さいのを左に集めて、大きいのを右に集めて、集めたグループ毎にそれぞれ同じよう左右に分けて…これを繰り返してい…

Array.prototype.map

chromeでnative版とjQuery版のベンチを取ってみたら倍ぐらい違ったのでjQueryを使わないで実装。native版とほぼ変わらない実行速度になりました。 if( typeof Array.prototype.map === 'undefined') Array.prototype.map = function($callback){ var len = t…

jQueryのコードフォーマット

関数を引数に取るメソッドをチェインさせると、ダラっダラの長い記述になるんですけど、どの辺で改行するのがベストでしょうか…? $("#hoge").click(function(){ }).mouseover(function() { }).mouseout(function() { }); とか $("#hoge") .click(function()…

HTML5のJavaScriptでバイナリファイルを扱う(その2)

コードの解説。jQueryのイベントオブジェクトからファイルデータにアクセスするためのおまじない。 jQuery.event.props.push('dataTransfer'); PCからファイルがドロップされたときの処理 $("#file").bind("drop", function(event){ // ドロップされたファイ…

HTML5のJavaScriptでバイナリファイルを扱う

HTML5のFile APIではデスクトップからファイルを取得して、その内容を読むことができます。テキストとしての読み込みはもちろん、生のバイト列も読めるので、バイナリファイルも解析できます。とりあえず手始めに16進ダンプしてみますか。http://nullpon.moe…

jQuery 1.6のpropメソッド

1.6で prop というメソッドが出来たそうだよ。John Resig - jQuery 1.6 and .attr()英語よく分からんが、http://api.jquery.com/prop/ 等も読んでみると、どうやらこういう事らしい。たとえば <input type="checkbox" id="a" checked="checked"> に対して $("#a").attr("checked") という操作が可能だが、この…

日本語のページを除外してGoogle検索するGreaseMonkeyのAjax検索対応版

Googleさん検索ページ変え過ぎです。日本語サイトを除外して検索するリンクを左サイドバーに追加するグリモンをAjaxによる検索に対応しました。https://github.com/paulownia/greasemonkey/blob/master/googleNotInJapanese.user.jsAjax検索するときにロケー…

Drag and DropとFile APIを試す

HTML5のDrag and Drop APIとFile APIを試してみました。Drag And Drop APIは HTML上の要素のドラッグアンドドロップをサポート File APIとの連携でデスクトップからのドラッグアンドドロップをサポート 1番はHTML5でなくてもjQuery等を用いれば実現可能です…

Web FontsをHTML Canvasで使う

といっても特に変わった事をする必要も無く、CSSでWeb Fontsを定義して、Canvasのfontプロパティに定義した名前をセットするだけ。 @font-face{ font-family: MadoMagi; src: url('./MadokaRunes.ttf') format("truetype"); } ctx.textAlign = "center"; ctx…

jQuery 1.5のDeferredって何?

jQuery1.5がいつの間にかリリースされていた。1.5ではAjax関係のコードが書き直され、コールバック関数をsuccessメソッドの引数として指定できるようになったらしい。 $.ajax({ url: "/test.txt", cache: false, dataType:"text" }).success(function(data){…

node.jsでServer-Sent Eventsを試す

HTML5のServer-Sent Eventsの仕様は、HTTP通信を使ってサーバサイドからのデータプッシュを行うCometを、JavaScriptのAPIを定義するなどして使いやすくまとめたものらしい。クライアント側のAPIはSafari5やChrome8では既に実装されているそうなので試してみ…

Function.prototype.bind

ECMAScript 5thでFunctionオブジェクトにbindというメソッドが追加されたそうだ。これは引数やスコープを束縛できるものらしい。引数を束縛して部分適用したり、クロージャに取り込まれた値を変えることが可能になる。最新版のChromeでは実装されている。Fir…

Array.prototype.sort

>>> [5,10,2,4,30].sort(); [10, 2, 30, 4, 5] えー、なにそれー compareFunction (比較関数) が与えられなかった場合、要素はそれぞれの文字列に変換したものを比較して辞書 (あるいは電話帳。数的でない) 順にソートされます。例えば、"80" は辞書順では "…

JettyとiPhoneでWebSocketを試す

iOS 4.2のSafariがWebSocketに対応したらしい。以前JettyとGoogle ChromeでWebSocketを試すために書いたプログラムを使って、iPhoneのWebSocketを試したみた。WebSocketのプロトコルに変更があったようで、以前のプログラムではiPhoneはおろか最新のGoogle C…

HTML Canvasを使って画像にエフェクトを加えるjQueryプラグイン

以前に作って遊んでいたHTML Canvasの画像処理をjQueryプラグインにまとめてみました。実用性は皆無ですよ。https://nullpon.moe/dev/sample/jquery/canvasFilter/test/使い方床面反射処理を加える $("img").canvasFilter(function(f){ f.reflect(); }) モノ…

JavaScriptのベストプラクティス?

http://togetter.com/li/59441ベストプラクティスというよりもバッドノウハウみたいの(==よりも===使えとか)含まれているけど…いくつか抜粋 default and guard operator:var foo = o || {};//init with empty obj if o is falsyvar bar = o && o.bar;//if …

HTML Canvasでほかし処理してみる

IE に Canvas きたー! URL2010-06-24 11:47:57 via webな、なんだってー(AA略「Internet Explorer 9 Preview 3」公開 Canvas要素、ハードウェアアクセラレーションに対応:CodeZineIE! IE! IE! マイクロソフト、本気です。IE9のcanvas要素の実装により、今…

はてなのサービス間を移動するグリモン

△のリンク、ダイアリーとブックマーク間を移動するのに便利だったので使ってたんだけど… ダイアリーに限らず、はてなサービス内で気になるユーザーを見つけたとき、そのユーザーが他のはてなサービスを使ってないかどうかを調べるのに地味に便利だったんです…

クロスドメイン画像はピクセル操作できない

HTML Canvasでクロスドメイン画像のピクセルを加工することはできない。クロスドメインの画像をdrawImageすることはできる。しかし、クロスドメイン画像をdrawImageしたcanvasからgetImageDataしようとするとエラーになる。 $("<img>").attr("src", "http://www.h…

jQueryでcanvasを扱うときは画像読み込みのタイミングに注意

jQueryの $(function(){ ... }) は、ページの load イベントではなく、DOMContentLoaded というイベントをトリガにして実行されます(Firefoxの場合)。このイベントはHTMLファイルがロードされDOMツリー構築が終了したときに実行されます。画像などの重いコ…

HTML Canvasでアンシャープマスク

最近、HTML5のCanvasの世界ではC言語で鳴らしたガチの画像処理の達人がコード書いてるらしく、恐ろしい最適化がされていてハッキリ言って付いていけませんwま、そんなガチムチマッチョな画像処理ウィザード野郎共はほっといて、HTML5のCanvasで画像処理して…

日本語のページを除外してGoogle検索するGreaseMonkeyの修正版

日本語のページを除外してGoogle検索するGreaseMonkeyスクリプトをGoogleの左サイドバーに対応させました。左サイドバーの「日本語のページを検索」の下に「日本語以外を検索」のリンクを追加します。https://github.com/paulownia/greasemonkey/blob/master…

JettyとGoogle ChromeでWebSocketを試す

JavaのサーブレットコンテナであるJetty 7には WebSocketServlet があり、HTML5 WebSocket アプリケーションのサーバサイドを簡単に実装できるようだ。試しにチャットの原型のようなプログラムを書いてみた。gitで公開しているのでcloneして試してみて。 git…

JavaScriptでSVGを書くライブラリ

なんだ、既にあるじゃないか…Raphaël―JavaScript Libraryラファエルと読むのかな?SVG対応ブラウザではSVGで、IEではVMLで書くらしい。jQuery SVG DemojQueryのSVG拡張もありますね…。

JavaScriptでSVGを書く

IE9はSVGをネイティブ実装するそうだ。SVGが主要なブラウザの標準機能になればWebアプリでもデータをグラフ化してビジュアル的に表示する、なんて要件も普通に求められるようになるだろうな。というわけで今のうちにちょっと触れておこう。SVGはXML形式のベ…

Twitter API JSONレスポンス確認ツール

Twitter APIのJSONレスポンスが見難いので、自動的に整形して確認できるようにと思って作ってみました。Firefox3.6で動作確認しています。https://nullpon.moe/dev/tool/twitter_api_test/index.htmlちょっと書き換えれば他のJSONP API用の確認ツールとして…