[JS] jest-mock-axios “Cannot read property ‘resolve’ of undefined”

JestのtestでmockAxios使ってて、mockResponseのところでエラーになる原因

//TypeError: Cannot read property 'resolve' of undefined

> 297 |  mockAxios.mockResponse({ data: [] });
  298 |  wrapper.vm.refresh(); ← axios.getしてる
  299 |  expect(mockAxios.get).toHaveBeenCalledWith(

同名であげられてたissueにあるコメントを要約すると
テスト書くときの順番の問題で

wrapper.vm.refresh(); ← axios.getしてる
mockAxios.mockResponse({ data: [] });
expect(mockAxios.get).toHaveBeenCalledWith(

axios.getしてるやつの後にmockResponseを書けばエラーは出ない

スマートフォンサイトを1080x1920pxのデザインサイズで作る

なんでもネイティブアプリのUIデザインが1080x1920pxだからと。
えーまじで、と。iPhone6+なら1242x2208pxでないの?と。
Webでそんな数字聞いた事ないんだけど今ってどうなの?と思ってググってみたんだけども

やっぱりWebだと1080なんてのはないなあと思い知らされた。
とはいえ時間もないし強引にやってみることにした。

“スマートフォンサイトを1080x1920pxのデザインサイズで作る” の続きを読む

Riot.js 触ってみたメモとサンプル

jQueryではもうアカンと思った時に挙った乗り換え候補はRiot.jsMithril.js
どっちもナウいんで一応両方試してみたんだけども、Riot.jsに落ち着いた感じであります。

なんでRiot.jsになったかというと、完全に個人的な好みの問題でして、
すごい大雑把にいうとRiot.jsはHTMLにJSを書くという方針に対してMithril.jsはJSにHTMLを書くという親のReact.jsの流れを汲む文化を継承してるんですが、試しで作ってる時に「HTMLにJS書く方が違和感ない」と思ったからなのでした。
あとはRiot.jsが企業に対してMithril.jsは個人であるといった、開発母体の差もちょっと気になる点でした。
機能面はどちらもミニマムでシンプルでAPI数少なくてとっつきやすいのでそんなに変わらないが、学習コストは独自ルールが多いRiot.jsの方が数段高いと思う。

でこうして紹介するにしてもTodoじゃ面白みがないんで、
実際使えそうなものをサンプルを作ろうとして思いついたのが、
Googleのスプレッドシートで更新情報表示するというものです。
昔普通に商用サイト作ってた頃「ホームページに更新情報表示したい(自分でお知らせ書きたい)」ってな要望が多かったので、今ならこういう手も使えるかなと思いまして。

スプレッドシートをデータベースにするというサンプル自体は4年前にやってたので
http://jsdo.it/Tenderfeel/ahd8

これのガワをbackbone.jsからriot.jsに変更しただけのものですが、
Google visualization API + Riot.js sample
ソースを比較するとえらいこざっぱりしているのがお分かり頂けるかと思います。
backbone.jsと比べても可読性めっちゃ上がってると思う〜。

続きはplnkerにつくったサンプルの解説です。
“Riot.js 触ってみたメモとサンプル” の続きを読む

[js] Closure Tools用コンパイルツール plovr について

plovrはClosure Toolsに依存するJSとClosureTemplateのSoyファイルのローカルコンパイルデーモン。

普通にClosure LibraryやClosure Templateを使う時は 作成→コンパイル→コンパイル後のソースで動作確認 という手順になるが、
plovrを使うと、作成→コンパイル前後のソースで動作確認→コンパイル という手順に変わる。

作りながらコンパイル後の動作確認ができる。というのが主たる恩恵だが、それだけじゃなく、
必要になった時だけJSファイルを読み込めば良いように、JSファイルをメインとモジュールに分割して作りたい場合にも使えるツールです。

“ Closure Tools用コンパイルツール plovr について” の続きを読む

[js] WebStorageのサポートチェック

LocalStorage や SessionStorageが使えるかどうか確認する時の条件について。

未サポート機種であればwindowにlocalStorageやsessionStorageというプロパティがないので
if(window.localStorage)みたいな条件だけでもチェック出来る。

しかしWebViewでも表示する場合、ネイティブ側で使用許可をしていないと
「サポートはしているんだけど使えない」という状況になってsetItem等を使った場合にQUOTA_EXCEEDED_ERRとなる。

WebViewで許可されていない場合はnullを返すので、その条件も含めつつ
setItemで適当な文字列を書きこんでgetItemした時に同じ文字列だったら
ストレージが使えると判断するのが確実みたいでした。

var hasLocalStorage = (function(){
	if(('localStorage' in window) && window['localStorage'] !== null){
		try {
			localStorage.setItem('test', 'test');
			var c = localStorage.getItem('test');
			localStorage.removeItem('test');
			return (c === 'test');
		} catch(e) {
			return false;
		}
	}else{
		return false;
	}
})();

書きこみの前に都度チェックを入れる場合は、setItemの前にremoveItemを挟んでおくと
連続書きこみのエラーが回避出来ます

[js] 画像をDataURLに変換するツール

中身はDrag&Drop + File API なので何番煎じなんだか分からないけれども…

ブックマークするならこちら

できること

  • 画像ファイルをドラッグ&ドロップで変換実行
  • 変換1回あたりの枚数制限なし(PCスペック依存)
  • imgタグ作成
  • 50%縮小オプション(小数点以下切り捨て)

複数の画像を一括でDataURLに変換するのと、
画像タグを生成してくれるものが無かったので自分で作った。
スタイリングはBootstrapです。

MooToolsで未定義の新しいイベントを使う時には
Element.NativeEventsで設定するとaddEventとかで使えるようになります。

Element.NativeEvents['drop'] = 2;
Element.NativeEvents['dragover'] = 2;
Element.NativeEvents['dragleave'] = 2;

[js] iScroll4でform要素が動作しなくなる問題

テキストボックスとかセレクトメニューとかをタップしても動かなくなる症状が出る事があります。
その解決方法についてのメモです。

デモより抜粋

form要素があるiScrollに下記オプションを設定すれば動くようになります。

var myScroll = new iScroll('wrapper',{
	onBeforeScrollStart: function (e) {
		var target = e.target;
		while (target.nodeType != 1) target = target.parentNode;
						
		if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
			e.preventDefault();
		}
	}
});

[js,iPhone,Android] コンテンツがwindow.innerHeightより小さい時にもアドレスバーを隠したい

スマートフォンのブラウザアプリで画面の高さにきっちり収まる仕様で作っていると
高さが足りないのでwindow.scrollToしてもアドレスバーが隠せない。
でも隠した方が表示領域が増えるので何とかしたい。
単純に考えればアドレスバー分bodyの高さを増やせばいい、ってことなんですが…

“[js,iPhone,Android] コンテンツがwindow.innerHeightより小さい時にもアドレスバーを隠したい” の続きを読む

[JavaScript] 非初心者向け入門記事まとめ

経験者でも入門したい時がある。

基礎

JavaScript基礎文法最速マスター

Ajax時代のJavaScriptプログラミング再入門

JavaScript再入門

アマグラマーのすすめ

プログラマのためのJavaScript

これでできる! クロスブラウザJavaScript入門

[JavaScript] 猿でもわかるクロージャ超入門

JavaScript – MDN Doc Center
eval

Google JavaScript Style Guide 和訳

Building iPhone Apps with HTML, CSS, and JavaScript

Eloquent JavaScript

HTML5 API

Using web workers

サーバー不要で保存できる「Web Storage」の使い方

HTML5サンプル集

まだまだ間に合うCanvasでアニメーション入門(まとめと実践)

ネイティブのドラッグ & ドロップ

Using files from web applications

古籏一浩のJavaScriptラボ

OOP

Prototype.js を使った JavaScript OOP 講座
JavaScript OOP におけるクラス定義方法

ゲームプログラミング

An Introduction to Game Programming with JavaScript

Simple Game Programming In JavaScript

Game Development with JavaScript and the Canvas element

JavaScriptゲームプログラミング

ゼロから始める「ゲームの作り方」入門 by BFF

grantgalitz/GameBoy-Online – GitHub
JavaScriptのゲームボーイエミュ

いろいろ

jsのオレオレ演算子

How to Crash Internet Explorer IE6, IE7, IE8, IE9

document.write()の実行タイミングをずらす方法

HTML5@iPhoneゲーム開発

サーバー側コーディング不要のGoogle App Engine開発環境「jsonengine」

Androidで動く HTMLとJavaScriptで作る電子書籍アプリ

難読化JavaScriptで利用可能なテクニック

JavaScriptからメモリ情報を取得する方法

WebSocket, Socket.IO, Comet

WebSocket and Socket.IO

Socket.IO

Jettyで始めるWebSocket超入門

サーバを作りながら学ぶWebSocketプロトコル

Comet Programming: Using Ajax to Simulate Server Push

Comet—プッシュ型のWebアプリケーションを作る

CometとAjaxを利用したチャットサーバの実装

サーバサイドJavaScript

node.js (ja)

node.jsとMySQLで割と普通のデータベースウェブアプリを作ってみるチュートリアル
node.jsとjQueryでスクレイピングするウェブアプリの作り方

Learning Server-Side JavaScript with Node.js

マニアックな金融系サイトをnode.jsとMongoDBで実装してみた(概要編)