CoverallsというGitHubのプロジェクトのテストカバレッジを記録するためのサービスがあって、クライアントサイドのJavaScriptのテストでもできそうだったんでやってみた。 最近のJavaScriptのカバレッジツールはBlanket.jsがいけてるらしいんだけど、これを使ってクライアントサイドJavaScriptのカバレッジをCoverallsに投げるの若干めんどそうだったんで、ponchoっていうラッパーを使ってみた。 ponchoはMocha、PhantomJS、Blanket.jsをうまいことつないでくれるやつで、普通にMochaでテスト書いてるプロジェクトだったらすごく簡単に設定できる。Mocha限定になっちゃうけど。 すでにMochaでテストが書かれてて、test/index.htmlとかでテスト実行できる（ブラウザで開いてMochaのテストが走る）とすると、まず、

はじめに JavaScriptにおけるデータバインドの実装方法を双方向データバインドライブラリのKnockoutJSのソースコードを読み、自分で以下のような最低限の機能を実装をしていきます。 変更をsubscribeできるobservableオブジェクト 他のobservableオブジェクトの値の変更を検知して、自身の値を変えるdependentObservableオブジェクト 上記の機能を実現するために、KnockoutJSの以下のオブジェクトの仕組みを解析しました。 ko.subscribable ko.observable ko.dependencyDetection ko.dependentObservable(ko.computed) この記事のソースコードはgithubで提供されています。 https://github.com/tenntenn/js-binding-hunds

吉川徹さんによる「DOM操作の最適化によるJavaScriptチューニング」問題解説記事です。JavaScriptのDOM操作について基本的なパフォーマンスチューニングができるかどうかを評価する問題でした。 チューニングを行うことで、具体的にどういった形のコードになるかを中心に解説していただきましたので、ぜひ参考にしてくださいね！ by 馬場美由紀 （CodeIQ中の人） 吉川徹です。 少し前になりますが、私の方から以前、JavaScriptのパフォーマンスチューニングについての問題を出題しました。今回は、その問題の解説をしていきたいと思います。 また、この問題は、HTML5 Experts.jpとの連動企画となっており、こちらの記事を読んで頂くとおおよそのチューニング方法について理解できるというものになっています。ぜひ、合わせてご覧頂ければと思います。 問題文 あるHTMLファイルに記述

concatパターンの小ネタ 最終的には、1つに結合される予定の個別ファイル ( 例 Phalanx/src/view.js ) において (そのファイル内の)グローバルに use strict 書いておきたい ひとつひとつにファイルに即時実行関数パターンを書きたくない 'use strict' var View = defineClass({ constructor: function() { // 初期化とか }, // 以下クラス定義 }); こんな感じで、余計なラップを書かずに1ファイルの中身を完結させたい。 という条件を満たすために下記のような grunt-concat の設定を使っている。 var RE_USE_STRICT_STATEMENT = /(^|\n)[ \t]*'use strict';?\s*/g, BANNER_TEMPLATE_STRING = '/*! <

jQuery Mobile 1.4が正式版に。CSSインラインSVGのアイコンでRetina対応、DOM削減で動作の高速化も iOSやAndroidなどクロスデバイス対応のモバイルアプリケーション開発のためのJavaScriptライブラリ「jQuery Mobile」の最新版「jQuery Mobile 1.4」が公開されています。 CSS内のSVGでアイコンを描画 今回のバージョンの大きな特徴は、これまで画像ファイルを基に描画されてきたアイコンがすべてSVGに置き換えられたことで拡大縮小に対して柔軟になり、Retinaなど高精細な画面でもなめらかな表示を実現したことです。 例えば、jQuery Mobile 1.4でアイコン表示を備えたボタンをChromeのデバッガで見てみると、イメージファイルを示す部分にはSVGのコードがそのまま記述されていることが分かります。 これまであったPNG形

CSS3を使用する時に、ベンダープレフィックスを付けていますか？ 自分でプレフィックスをつけたり、SassなどのCSSメタ言語やツールを利用するなど、さまざまな方法がありますが、せっかく付けたベンダープレフィックスも適切でない場合もあります。適切にベンダープレフィックスを付与するツールに、CSS Postprocessorの「Autoprefixer」というものがあるので紹介します。 ベンダープレフィックスをいつまで付け続けるのか ベンダープレフィックスはブラウザの試験的、または独自拡張で実装されているものであり、W3Cの仕様がある程度固まると、ブラウザはベンダープレフィックスが外すことが推奨されています。 現在、CSS3の一部の仕様は、すでに勧告や勧告候補まで上がっているものがあり、最新のブラウザではベンダープレフィックスなしで作動するCSSも増えてきています。またグラデーションやFle

5歳・8歳になる娘へのクリスマスプレゼントはアイカツ3DSゲームとアイカツギターになりました ishida です。どんだけアイカツ大好きなのよ〜、私はトンカツ好きなのよ〜。 さてさて、皆さんHTMLコーディング時のバリデーションチェックにはどのツールをお使いでしょうか？ The W3C Markup Validation Service サービスでページごとにコピペしてチェックすることも多いかと思います。でも毎回コピペとか手間がかかりますよね。 今回は、Sublime Text にてバリデーションチェックできるパッケージがありましたのでご紹介。 パッケージインストール まずは、パッケージのインストールです。 Sublime Text を立ち上げた状態で、ToolsメニューからCommand Pallet をクリックして Package Control: Install Package を選

12/4の記事（AngularJSを使ったWebアプリのアーキテクチャ設計）で書くと言ったまま放置していたので、AngularJSのMVCパターンについて書いてみたいと思います。 AngularJSのMVCについては、12/19のお前のAngular.jsはもうMVCではない。と言われないためのTutorialというすばらしい記事がありますが、本記事ではもう少し抽象的な内容を扱ってみようかと思います。 MVW（Model-View-Whatever）パターンとは MVCパターンには、MVC2、MVP、MVVMなど数多くの派生パターンがあります。 目的は同じなのに派生パターンがたくさんあるのは、それぞれのプラットフォーム固有の問題（フレームワークの違いや、サーバサイドかクライアントサイドかの違いなど）によってMV*の*の役割が異なるからです。 AngularJSは公式ページで"Superhe

こんにちは、エンジニアチームのづやです。 CSS3のtransition便利ですよね。 JavaScriptから制御してると、jQueryでanimateをstopさせるときみたいに途中で動きを止めたいことがありました。そんな時どうすればいいかわからなかったので、調べてみました。 JavaScriptから制御しているCSS3のtransitionを途中で中断させる方法 動かしてるstyleを上書きしてしまう これが一番ベターっぽい。中断したいタイミングで対象となってるstyleを上書きすると止まってくれるようでした。 <!-- こんな要素があって --> <input type="button" name="start" id="start" value="開始"><br> <input type="button" name="stop" id="stop" value="停止"><br>