GitHub Actions で Windows IE11 と Mac Safari を selenium-webdriver で動かす - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
puppeteerでフロントエンドISUCONのためのパフォーマンス計測ツールを作りたい - Qiita
この記事は、 Recruit Engineers Advent Calendar 2017 の2日目です。 リクルートテクノロジーズで パートナーとして働いてる mizchi です。ここでの仕事は、 yosuke_furukawa が忙しくて調べられないことを、勝手に調べてくることです。 今までリクルートでやったことは Next.js, AMP, PWA, Puppeteer って感じ。今回は Puppeteer を使ったE2Eテストの自動化やパフォーマンス評価の話をします。 puppeteer とは リポジトリ名でわかりますが、GoogleChrome チームが公式に提供する Chrome の Headless Driver です。 スペルがとにかく覚えづらい クロスブラウザテスト以外にはかなり万能なツールです。E2Eテスト、スクレイピング、日々の作業の自動化、なんでもござれ。 他のブラ
型なき世界のためのflowtype入門 - Qiita
http://qiita.com/mizchi/items/3bbb3f466a3b5011b509 で紹介したモダンJSスタックの上に、flowtype を導入して型をボトムアップに追加していくアプローチを紹介します。 なぜflowtypeか、そのゴールは 流行っているライブラリのみを組み合わせて使う場合や、バックエンドとの連携において型が十分に提供される環境なら、正直、flowtypeよりtypescriptでいいと思っています。flowtypeが力を発揮する環境は、既存のJSが大量に存在する環境や、railsなどの動的な型のフレームワーク環境で、静的な定義が抽出できない環境だと思います。 よほど品質が低いライブラリを使わないかぎり、バグはほとんど自分が記述したコードによって発生します。なので、まずは「自分が書いたコードのIFを明確にし、その静的なチェックを行なう」、というのを最初の目
EventEmitterバケツリレースタイル/フレームワークなしで小さくFluxする - Qiita
想定しているシチュエーション 非SPA環境で個別にマウントされるコンポーネントがそれぞれで小さくFluxするような環境。 SPAガッツリ組むのでないなら、Fluxフレームワークは不要だと思っていて、とは言えオレオレ構成も行き過ぎると害になる。 その辺のバランスをとって、次のような構成がいいのではないか、と考えてみた。 考え方 コンテナがEventEmitterを1つ保持する コンテナはEventEmitterの各種イベントをListenする コンテナはpropsとstateを区別して扱い、stateを更新する コンテナはコンポーネントを一つだけ描画する コンポーネントはpropsとして渡されたEventEmitterを発火させる コンポーネントはEventEmitterをListenしない コンポーネントはpropsのみ扱う コード // src/components/header.js
Nightmare v2(Electron) でブラウザ上でES2015のコードを個別にrequireしてユニットテストを書く - Qiita
'use strict'; // nightmare const Nightmare = require('nightmare'); const path = require('path'); const TEST_HTML_PATH = "file://" + path.join(__dirname, "test.html"); // create global.browser = null; let startBrowser = function * (){ global.browser = Nightmare({ show: false, nodeIntegration: true }); yield browser .goto(TEST_HTML_PATH) .wait('body') .evaluate(() => { require("babel-register"); //
babel-plugin-typecheck を使って flowtype 文法で書かれたJSをランタイムチェックする - Qiita
https://github.com/codemix/babel-plugin-typecheck を使ってみた。 これは何 babelでflowtypeの構文を使って型エラーのランタイムチェックを行う。静的解析ではない。（自分がドキュメントから見落としてるだけで静的解析を行う方法がある？） 興味を持った理由 既存コードに対してtypescriptを導入するのは大変 flowtypeは既存コードからの乗り換えは簡単だが、型チェッカの挙動が未だに不審 コード上のドキュメントとしての型 + ランタイムチェックというアプローチなら十分では ESdoc等で型を書いてもあくまでドキュメント上の指定だが、flow syntax とこれなら実行可能という点が大きい。最悪動かなくてもランタイムチェックを外せば良い。型指定はドキュメントとして残る。 Install すでにbabel環境があることを想定
テストがないJS環境にモダンなテスト環境を導入していく - Qiita
Qiita:Teamに投げた社内ドキュメントだったけど、特に問題ないのでQiitaにも投げる。 前提として browserify-rails とbabelify が導入されている状況を想定してる。 基本方針 新規コードはES2015で書く 本番はbrowserify(-rails)でコンパイルする。 単体テストは node 環境下で走らせる テスト環境下では jsdom で window, document をモックする 単体テストでは ブラウザ特有の挙動はテストしない 裏側の環境(browserifyやspec-helper)は難しくして良いが、利用者からみえる範囲は複雑にしない(npm install; npm testで走る) Universal JavaScript に寄せることでコードのポータビリティを上げる 事前準備 browserify-railsを導入する。 .babelr
redux への 不満を解消する為に, flumptというFlux実装を作った - Qiita
名前はダークソウルのフラムト(frampt)から。FLux Minimum なんたらかんたら。 なんかTwitterで色々言ってたら naoyaさんにまとめられたので、ここに僕の考えを詳しく書いておく。 mizchi の Redux 考 - Togetterまとめ やりたかったこと 基本的なアイデアは、stateをpushする方式(setStateみたいな)だと非同期間で参照したときの値がズレて非同期の終わる順番次第では状態の遷移ステップが壊れてしまう可能性があるんだけど、前のstateをとって次のstateを返す非同期をキューに並べて順に実行することで、トランザクションみたいなものを保証することができるだろう、というもの。 軽量(pubsubインターフェースはEventEmitterそのまま) 複数の状態更新関数の待ち合わせ reduxで感じた不満の解消 TypeScriptフレンドリー
IndexedDbをActiveRecord+Promiseっぽく扱えてJSONSchemaでバリデーションできてnodeでもオンメモリで動いてくORMみたいな何か作ってみた - Qiita
タイトル盛りすぎた。 mizchi/stone-skin です。 npm install stone-skin で入るんでbrowserifyと一緒に使ってください。 命名は、時間があったらFF14やるんだけどなという気持ちを込めて。(ナイトだけLv50にしてから1年以上触ってない) この前紹介したArdaと一緒で、本番環境でドッグフーディングしつつ開発したので、使い物になるはず。今さっきドキュメント書いてv0.1.0にしたので紹介。 サンプルコード 非同期APIはPromiseを返すので、この前書いた JavaScript - Babelのasync/await試してみた(+中の処理をちょっと追ってみた) - Qiita のasync/awaitを使いつつ紹介。 import "babel/polyfill"; import StoneSkin from '../with-tv4'; c
ServiceWorker上で動く軽量WAFみたいなミドルレイヤー作ってみた - Qiita
これ mizchi/sabizan ServiceWorkerっていう名前がサビ残っぽいよなってみんな思ってたと思う。 ServiceWorkerの勉強兼仕事で使うためのモックサーバーとして作った 用途 ServiceWorker層でビジネスロジックを持つAPIサーバー またはテスト用のAPIモックサーバー できるだけexpress風にしようとしたけどRequestのネイティブオブジェクトに値を挿入するの気持ち悪くて互換は諦めた。適当なラッパー書けば同じコードから生成できる気がしている。 どう動くか dist/sabizan.js は service worker上で動くことが必須で、他のクライアントJSと同じくbrowserifyを使うか、importScriptで読み込むことを意図している。 Sabizan = require 'sabizan' # with browserify o
NightmareでE2Eテストしつつスクリーンショットとってgifに結合したら目視チェックが最高に楽になった - Qiita
最近またe2eを書いたりしてる。色々悩んだけど、やっぱNightmareを使うことにした。 Nightmareについては僕が前書いた記事を参考にしてください NightmareでE2E - Qiita Nightmareの良い点 Zero configuration というかただのスクレイパー 悪い点 プロセス立ちあげるのが遅い JSわかってないと読みづらい PrecepeterとかTestiumとかProtractor試したけどどれも走らせるだけでいっぱいいっぱいで、もう面倒臭い。 僕は行儀が悪いのでスクレイパーを走らせられればいいです。エビデンス() はスクリーンショットで確保する方向で。 連番のスクリーションショットを取りながらNightmareを走らせるサンプル Nightmare = require 'nightmare' class TestRunner extends Nig
JSDOMとReact.addons.TestUtilsでReactをヘッドレスにテストする - Qiita
JSDOMはnode環境でDOMをシミュレートするやつ。React.addons.TestUtilsはReactに同梱されているテストツール。この2つがあわさり最強に見える。 今作ってるライブラリのために、しばらくブラウザ使わずにテストしてたけど、ブラウザ立ち上げる必要なくて非常に快適。これ https://github.com/mizchi/arda/tree/master/test JSDOM、昔はとにかく不安定な印象だったけど、最近はよくできてる印象。見なおした。 コード # globalにdocumentとwindowを定義することで、DOM環境を参照できるようにする # 必ずReactの前に読み込むこと jsdom = require('jsdom').jsdom global.document = jsdom('<html><body></body></html>') # gl
segmentio/dekuのコード読んで自分でも仮想DOMのdiffアルゴリズムを書いてみた - Qiita
VirtualDOM Advent Calendar 2014 - Qiitaの6日目です。 前回、チラッと紹介したdeku、どんなもんかそこまで詳しく知らなかったのでコード読んでみた。 segmentio/deku Dekuの特徴 APIはほぼReactと一緒 render/renderToString/setState/shouldUpdate 小さい 手元でビルドしたのが23kb(Reactが90kb) 公式が9kb謳ってるのは、昔の名残かな…？gzipかもしれないけど diff即生DOM操作なんでヘッドレスで動くような構造ではない duo.jsに依存して書かれてる まあsegment.io製だし デクだけにシンプル。小さいのが特徴。 アルゴリズムとしての本質はここみればわかる deku/diff.js at master · segmentio/deku dekuを参考に自分で仮想
なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita
追記: 情報が色々と古くなったため、2020年に書き直した版へのリンクを張っておきます。 この記事は VirtualDOM Advent Calendar 2014 - Qiita の初日です。 初日ということで、基調講演風に、Virtual DOMとはなにか、なぜ僕はこんな興奮しているのか！という話から。 Virtual DOMとはなにか 既存の概念で当てはめると、JavaScriptのMVC, MVW(Whatever)フレームワークのViewに位置します。が、その程度では終わりません。仮想DOMとは世界を革命する力であり、このjQueryのDOM操作で汚れきったフロントエンドを救う救世主なのです。 現時点で自分が知っている限りは、以下の実装を指します。 facebook/react 最も使われてるFacebookの実装 Matt-Esch/virtual-dom Altenative
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
render-prop で お手軽な状態管理層を作る - Qiita
ES async/awaitを全力で使ってみて発見したイディオム - Qiita
Promiseに関するパターンや命名規則 - Qiita
browserifyでビルドした時のgitのコミットハッシュを埋め込む - Qiita
wzrd - もっとも簡単なフロントエンドの為のbrowserifyサーバー - Qiita
atom-shellを雑に使って任意のnodeスクリプトが実行可能なアプリケーションとして配布する - Qiita
