「大規模なUI改修」を行うとどうなるか
アプリケーションを実装していくと、「大規模なUI改修」に遭遇することがある。 あちこちで見聞きした結果、以下のようなパターンがあるように感じたのでまとめてみた。 （UI改修なので基本的にフロントエンドからみた内容） 機能実装を進めて行った結果、UIの実装が難しくなる。これは一般的に「技術的負債」と呼ばれることが多いが、デザインの負債（UIを置く場所が無くなったり無くなったり、同じ概念のUIが分散したり）である場合も多い。 （ちなみに、デザインの負債は「ダイアログを多用する」とか、「最小画面サイズが大きくなる」とかの形で現れやすい） そして、デザイン負債に対応するために実装の困難なUIが増えるため、技術的負債も高くなる傾向がある。 （サーバサイドの技術的負債がDBの負債に起因する場合が多いことと似ているかもしれない） 技術的負債の解消とデザイン負債の解消を目的とした「大規模なUI改修」が企画
mocha+TypeScript+power-assert
@teppeisさんがこの辺のことを一発でやってくれるteppeis/espower-typescript-babelを公開されてるので、以下の情報はもうあんまり意味がありません。 TypeScriptがasync/await対応したのでテストとかでも使いやすくなった。 こないだ試したらちょうどmocha+TypeScript+power-assertが使えるようになってたのでメモる。 package.json { "devDependencies": { "babel": "^6.0.15", "babel-polyfill": "^6.0.16", "espower-babel": "^3.3.0", "espower-typescript": "^2.0.0", "mocha": "^2.3.3", "power-assert": "^1.1.0" }, "scripts": { "
TypeScriptで作成したライブラリのrequire対応
TypeScriptで作成したライブラリをrequireで読み込めるようにするには.d.tsをreference pathで参照する。 ただし、普通に.tsを–declarationでtscした結果では参照できないので、以下のような内容を手書きする。 declare module "Hoge" { export var huga: String; export var gege: Number; }上記の内容をnpm install Hogeで入れている場合、以下のような形式で読み込める。 （dtsmで入れている場合、reference pathで直接node_modulesを参照する必要はない） /// <reference path="../node_modules/Hoge.d.ts" /> import Hoge = require('Hoge'); console.log(Hog
Chrome extension向けTypeScript,gulp,power-assert,karma設定
Chrome extension向けTypeScript,gulp,power-assert,karma設定 ベース設定的なものができたので紹介。 gulp or grunt今回はassertionにPowerAssertを使うため、変換時に中間ファイルを必要としないgulpを選択。 gulp-tsc or gulp-typescriptgulp-tscはだいぶ更新されてないし取り込まれてないPRもあるけど、gulp-typescriptはしばらく触ってみてファイルを結合する方法がわからなかったので断念した。 gulp-tscはコンパイル時に「Compiling TypeScript files using tsc version null」って出るのさえ気にしなければそれ以外はそんなに問題ない。 gulp-typescriptはjsとd.tsと.mapをそれぞれ別々に処理する方法を提供し
なぜSeleniumIDEを作ってるのか
この記事はFrontrend Advent Calendar 2014 - Qiita 1日目です。 今年の中頃から一人でSeleniumIDEのChrome版のようなものを作ってる。 kyo-ago/chrome-autopilot-tool これはほぼ趣味の活動だけど、せっかくなので目的とかを書いておこうと思う。 SeleniumIDEとは何かその前にSeleniumの説明がいるか。。。 Seleniumとは何かSeleniumとはオープンソースのE2Eテストフレームワークで、主に実ブラウザを動かしてWebサイトの検証を行うために使われる。 歴史は結構古くて2004年くらいに現Sauce Labs CTOのJason Hugginsが開発したらしい。 WebDriverとは何かSeleniumを語る上で外せないのがWebDriverだ。 WebDriverとはブラウザをリモートから共通
AppCacheをJSから動的に生成できないか試してみた
答え：できない（少なくとも以下の方法では） Blob URL経由で読み込むvar manifest = [ 'CACHE MANIFEST', 'https://developer.cdn.mozilla.net/media/img/mdn-logo-tiny.png', 'NETWORK:', '*' ].join('\n'); var manifestUrl = URL.createObjectURL(new Blob([manifest], { 'type' : 'text/cache-manifest' })); var html = [ '<!DOCTYPE html>', '<html manifest="'+manifest+'">', '<head><title><\/title><\/head>', '<body>from Blob', '<script>', 'docu
JavaScript UnitTest Patterns
ここでは以下の順番でSinonJSとJsTestDriverを使用したJavaScriptのUnitTest Patternsを紹介します。 初期化の遅延非同期実行の同期化html, cssのテストイベントのテストその他問題になりうるコード初期化の遅延UnitTestを行う場合、まずは初期化functionが自動的に実行されないようにしましょう。 初期化functionをこちらの任意のタイミングで実行できるようにすることにより事前に対象外のコードをstub化したり、必要なfunctionへspyを仕込んだ状態でfunctionを実行できるようになります。 UnitTestの場合のみ初期化を遅延する一番簡単な方法はUnitTest実行時のみ条件分岐で初期化を止める方法です。 $(function () { if (window.sinon) { init(); } }); この方法は簡単かつ
SinonJSとJsTestDriverを使ったJSテスト手法に関して
最近SinonJSとJsTestDriverを組み合わせてこんな感じのコードをベースにテストを書いているので紹介したいと思います。 sinon.log = function (message) { jstestdriver.console.log(message); }; sinon.assert.expose(this, { 'includeFail' : false }); var oldTestCase = TestCase; TestCase = function (name, condition, opt_proto) { if ('function' !== typeof condition) { opt_proto = condition; condition = undefined; } Object.keys(opt_proto).forEach(function (ke
JSのUnitTest関連技術
ざっくり以下のようなツールが関連する CIサーバ系（Jenkins等） 何かのタイミングで自動的にテストを実行する場合に使用 「Swarm系」、「結合テスト系」を操作し、その結果を蓄積、報告する 結合テスト系 利点 IDEを使えばテストの定義が簡単実ブラウザでテストを実行するので検証が確実標準で画面遷移も含めた結合テストをサポートhtmlの切り出しが不要で実サービスを使ったテストが可能CIサーバとの連携が可能欠点 IDEを使ったテストは柔軟性に欠ける実ブラウザを使うので起動が遅い実ブラウザを使うので安定性に欠けるテストがUI（html, css）に依存するHeadLess系が使えない（多分）ブラウザのみでテストが完結しないある程度UIが安定しているサービスに対してのサーバも含めたブラックボックステストに向く Swarm系 利点 実ブラウザでテストを実行するので検証が確実UnitTest系の
JsTestDriverとphantomjsとJenkinsを使ってのJSの継続的なテスト
JsTestDriverとphantomjsとJenkinsを使ってのJSの継続的なテストを行う方法を解説します。 Javaのインストール JsTestDriver、Jenkins共に実行にJavaが必要になるため、Javaのインストールを行いましょう。 すでにインストール済みの場合は必要ありません。 JsTestDriverのインストール JsTestDriverのjarを落としましょうダウンロードしたJsTestDriverを–portオプションで起動しましょう（ $ java -jar JsTestDriver[バージョン番号].jar –port 9876 ）設定ファイルのサンプルをダウンロードしてJsTestDriver.jarと同じディレクトリにJsTestDriver.confの名前で保存しましょうこれでJsTestDriver serverが起動します。 今回はテスト対象と
JSの単体テストにJsTestDriverがおすすめ
基本的には以下の内容のまとめです。 0-9, JsTestDriverを使うときの注意点 http://0-9.tumblr.com/post/15574052397/jstestdriver 0-9, 最近のJS系のツールを触ってみたまとめ http://0-9.tumblr.com/post/15398953814/javascript-tools ・JsTestDriverとは何か？ 超簡単に言うとSelenium CoreのJS実装とQUnitを合わせたものです。 実際Selenium ver2はJsTestDriverが使ってるWebDriverと言うAPIを使っています。 （WebDriverがブラウザを外部から動かす共通仕様で、Selenium ver2とJsTestDriverはそれを使ってる状態） ・使った感想は？ ブラウザ上で動作するJSの単体テスト環境としてはかなり快
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
