この日記は私的なものであり所属会社の見解とは無関係です。 GitHub: takahashikzn

Javascript

jQuery-2.2.0をEnv.js上で動かすためにパッチを当てる

jQuery-2.2.0がリリースされています。 「まだjQueryで消耗してるの?」と言われそうですが、細かいDOM操作をするならjQueryは依然として非常に優れた選択肢です。 ウチはクローラーをJavaで書いたりしている都合上、jQueryをEnv.js上で動かしているのですが…

JSONにコメントを付けるなら空文字キーがオススメ

JSONを設定ファイルとして使うとき、コメントを付けたくなりますよね。 または、お決まりのコピーライトヘッダを入れるとか。 「JSON コメント」でググったところ、わざと同じキー名の値を宣言するというテクが使えるとありますが、実装依存なのであまり良く…

Select2-4.0系へ移行するために必要な修正点メモ

コンボボックスをスーパー便利にしてくれる素晴らしいjQueryプラグイン、Select2。 使っている人も多いと思います。http://select2.github.io/ 本日4.0系がリリースされたので早速、移行してみました。 リリースノートでは「できるだけ互換性は維持した」と…

React-0.13でpropTypesを違和感なく記述する

最近、とある業務システムの一部となるリッチ画面をReactで開発してます。 Reactは良く出来ていると思います。 できるだけステートレスにすることで安全なコードを記述するという思想は僕の好みです。 Fluxも同じく良い。『処理の流れは一方向。何も考えずに…

lodash-3.0がリリース

つい数時間前にlodash-3.0.0がリリースされました。 一つ前のバージョンと概ね互換性はあるようですが、非互換の修正もあります。 自分に関係のあった箇所は以下の通り。 _.templateの戻り値が変更 _.chainが遅延評価されるように 今のところこれだけですが…

Google Closure Compilerのアノテーションで擬似キャスト

jQuery.dataのように、どんな型の値が返ってくるか不確定なメソッドを使うとき、 たとえ自分が「必ずその型である」と確信が持てる状況であっても、それを通知する記法(キャスト記法)は用意されていません。 だから、 /** @type {!Array.<number>} */ var nums = $</number>…

素のless-v2.0をRhinoで動かす

lessの2.0がリリースされました。http://github.com/less/less.js/blob/master/CHANGELOG.md 世間的にはSass/SCSSが主流だと思いますが、動作にはRubyが必要です。一方でlessは全部JSで記述されているため、(僕にとっては)使い勝手が良い。 JSPのように、初…

jQueryのセレクタ文法へコンビネータを追加しようとしてみた

jQueryのセレクタ文法は簡単に拡張できます。みんな知ってるね。 え?知らない?ココを参照すべし。 http://james.padolsey.com/javascript/extending-jquerys-selector-capabilities/ 僕は、こんな風にして (function($) { $.extend($.expr.pseudos, { 'all…

Mozillaの開発者サイトでコンソールを開くと…?

もしかしたら「こんなのとっくの昔から知ってるよ」ネタかもしれませんが。 僕はついさっき知りました。

SeleniumのコマンドをjQueryで拡張する

Seleniumでは、HTML内の要素を特定する方法はXPathがデフォルトです。 一応、セレクタも使えるようですが、jQueryのセレクタに慣れた身としてはかゆいところに手が届かない感じです。 というわけで、jQueryのセレクタベースのassertコマンドを作りました。 …

Rhinoの最適化レベル毎の違いを正確に理解する

※Rhinoのバージョンは1.7R4です。 ウチの製品であるMOD99は、いくつかの箇所で式言語としてJavascriptを採用しています。 例えば帳票生成において、サーバーサイドで計算しなければならない導出値(代表例: 何らかの集約値)を出力したいときなど。 帳票をダウ…

Strict Modeを検知する

IE10 for Windows7がリリースされました。 で、早速検証してみたわけですが、stacktrace.jsで 『strict モードでは、関数または arguments オブジェクトの 'caller' プロパティを使用できません』 と怒られる(時がある)ことが判明。stacktrace.jsの内部で…

Moment.jsのexternファイル(2.0.0対応)

日付計算に便利なライブラリである、「Moment.js」。 いつも便利に使わせていただいております。 で、僕はJavascriptを書くときにGoogle Closure Compilerを使ってタイプセーフに書くよう心がけているわけですが、 Moment.jsの型チェックに必要な定義ファイ…

console.log.applyでillegal invocationエラー

Chromeで var name = "log"; console[name].apply(window, [1, 2, 3]) とかやると、 TypeError: illegal invocationと怒られます。 ネイティブの関数はapplyを使えないのかな?と思って調べた所、 var name = "log"; console[name].apply(console, [1,2,3]) …

new演算子のオーバーロード?

いま知ったのですが、Javascriptでは、new演算子のオーバーロード的な芸当が使えます。 但し条件があって、『コンストラクタを関数として評価した結果が数値、文字列、真偽値、null、undefined以外のみ』です。 仕様的にはこれ。 http://www.ecma-internatio…

IEでは、tableタグを子要素に持つAタグは画面遷移が発生しない

IE7、IE8、IE9では、Aタグのなかにtableタグがあると、hrefが指すURLへ移動してくれません。 IE6は知らぬ。サンプルコードは次の通り。HTML4でもHTML5でも同じ結果です。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <a href="http://www.google.com/"> <table> <tr> <td>押しても無駄</td> </tr> </table> </a> </body></html>

JavascriptでCSSの@importを処理する

(2012/04/30追記:IEではCSS.getRuleで@importを処理できていなかった問題を修正しました) Javascriptで既存のCSSクラスなどを変更する場合、大きく分けて2つの手段があります。 styleタグをheadの末尾に付け足して、その内容にて既存のCSSクラスなどをオー…

Linux on browser

信じられません。こんなモノを作ることができるなんて。 http://bellard.org/jslinux/ これ、Javascriptで書いたx86シミュレーターだそうです。ブラウザ上でLinux2.6が動いてます。 (現在、Chrome11およびFirefox4でのみ動作するそうです) 『本物のプログ…

jQuery 1.6でattr()の動作が変わった

jQuery 1.6がリリースされています。 リリースノートを見ると。。。ムムム!!見過ごせない変更があるではないですか。 .prop(), .removeProp(), and .attr() .prop()、.removeProp()と.attr()に関して In the 1.6 release we’ve split apart the handling o…

function宣言は式

こんなケースがありました。(※jQueryを使ってます) var foo = function() { // do something... }; // 最初に一回だけ実行する foo(); // ウィンドウリサイズイベントをリッスンする $(window).resize(foo); で、コレを何とか1行で書けないかなぁ、と思った…

"overflow:auto"&固定テーブルヘッダ

最近、いまさらですがjQuery始めました。 で、今日のお題です。 tableタグ表形式のデータを表示する場合で、もし画面内に収まらない場合に 自動的にスクロールバーを表示するには <div style="overflow: auto; height: 600px"> <table> ...(略) </table> </div> なんてやりますが、overflowってヘッダ行(th)を固定してくれない…

Javascriptのスコープは謎仕様

もう5年も前にコチラにて解説されつくしていることなのですが、さっきまでJavascriptの奇妙な変数スコープ仕様にハマってました。 http://d.hatena.ne.jp/m-hiyama/20051209/1134086113 何にはまっていたかというと、とりあえず下のコードを見てください。 <html> <body> <script type="text/javascript"></script></body></html>…

voidの真の意味

よく、クリックしても何もしないリンクを表示するのに <a href="javascript:void(0);">ほげほげー</a> とかやるじゃないですか。で、このvoidの意味はなんなんだ、と。 パッと見は関数呼び出しに見えるので、ずっとそうだと思っていたのですが。 先程、それは違うということを知りました。 void…

イベントハンドラの互換性問題にハマるの巻

僕は、キーイベントを拾って何かアクションを起こすようなJavascriptに違和感を感じてます。 ただのWebアプリケーションなのに、やりすぎというか。 リッチなクライアントを作りたければ、さっさとFlashなどを使うべきです。Javascriptで頑張るのは疲れるだ…

動的に作成したtableタグにtheadを設定する

Javascriptでtableを動的に作成する場合、IEではtbodyが必要。 で、今度はtheadを突っ込もうとしたら、またもやIEだけエラーになる。 var tableElem = document.createElement("table"); table.innerHTML = "<"+"thead>" + "<"+"tr>" + "<"+"th>" + "ほげほ…

"select.options.length = 0"はダメ

Selectタグの中身を全部消そうとして、 // Select要素 var selectElem = document.getElementById("..."); selectElem.options.length = 0; としたんだけど、なぜかうまく消えていない時がある。 特にChromeで顕著でした。 var selectElem = document.getEle…

addEventListener/attachEventの使い勝手が悪いのでどうにかした

addEventListener/attachEventの使い勝手が悪い。 例えばIEのケースを考えると、 node.onchange = function() { ... }; node.attachEvent("onchange", function() { ... }); としたとき、これはどっちか片方しか呼ばれない。onchangeは一個しか登録できない …

r42utils-0.1.10リリース

かなり放置気味でしたが、r42utils-0.1.10をリリースしました。変更内容は次のとおりです。 絞り込み選択リスト(NarrowDownSelectionList.js)で、値を途中まで選択した状態でも、サーバへ値を送れるようにした。 ドキュメントはこちら これに伴い、データ構…

文字列から数値への変換

やらかしてしまいました。 文字列を数値に変換しようと思い、 0 + "1" としたのです。だけど何故か動作がおかしくなる。 調べてみると、 (0 + "1") == "01" らしい。 うーむ、Javascriptは、式の評価が左結合じゃないんですね。知らんかった。ちなみにこうい…

submitをキャンセルする

とある処理を書いていて、「submitボタンを押しても、POSTしない」ようにしたくなりました。 とりあえずやってみた(for IE) とりあえずググらないで自力で頑張ってみたところ、IE限定ですが var submitInputElem = document.getElementById(...); submitIn…