フロントエンドのテストのモックには msw を使うのが最近の流行りらしい
皆様フロントエンドのテストを書いていらっしゃいますでしょうか？ フロントエンドのテストを書くときには API コールする処理を全てモックする必要があります。外部の API をコールする処理をテストに含めると API サーバーが落ちているなどの外部の要因によってテストが失敗してしまう可能性がありますし、テストを実行するたびに実際に API をコールしてしまうとサーバーに負荷がかかってしまうなど外部に対しても悪影響を与えてしまいます。 さて、従来のモックする手段としては Jest のモックを利用して axios や fetch などのモジュールをモック化する手法がよく使われていたかと思います。 最近のテスト手法として API コールをモックする際に Jest ではなく Mock Service Worker (以下 msw ）を使用する手法が注目されています。実施にどのように使用されているのか
Cloudflare Workers 面白い - ゆーすけべー日記
追記 Cloudflare Workers向けのWebフレームワークを作っているので、そちらを是非チェックしてみてください！ honojs/hono: Ultrafast web framework for Cloudflare Workers. Fast, but not only fast. Cloudflare Workers が面白い。面白いので、いくつか簡単なアプリを作ってみた。例えば、そのひとつが Slack Bot で「yusukebe++」とかやるとインクリメントされるやつ。 今回は Cloudflare Workers の面白さについて解説する。より興味のある方がいれば、上記のコードを参考にしてもらうといいだろう。 Cloudflare Workers とは？ Cloudflare の CDN エッジでスクリプトが動くのが Cloudflare Workers。いわゆる
CORSの仕様はなぜ複雑なのか
Webアプリケーションを実装していると高確率で CORS の問題にぶつかります。CORSがどのようなものかはリンクしたMDNなど既存の解説を読むのが手っ取り早いと思いますが、「なぜそのように設計されたのか」という観点での説明はあまり見ないため、昔の資料の記述や現在の仕様からの推測をもとに整理してみました。 CORSとは 現代のWebはドメイン名をもとにした オリジン (Origin) という概念 (RFC 6454) をもとに権限管理とアクセス制御を行っています。その基本となるのが以下のルールです。 Same-origin policy (同一生成元ポリシー): 同じオリジンに由来するリソースだけを制御できる。 上記Wikipedia記事によるとSOPの概念は1995年のNetscape 2.02に導入されたのが最初のようです。当時のドキュメンテーションを読む限り、これはウインドウ越しに別
[JS] Google Analyticsを活用して、サイトで起こったJavaScriptエラーを収集しよう - YoheiM .NET
[JS] Google Analyticsを活用して、サイトで起こったJavaScriptエラーを収集しよう こんにちは、@yoheiMuneです。 Google Analyticsで、JavaScriptエラーの内容も収集できるって知ってますか！？ 自分は最近知って驚きました。Google Analytcsを導入しているサイトであれば簡単に行うことが出来るので、その内容と実装方法を紹介したいと思います。 Google AnaliticsでJSエラーを収集する仕組み Google Analyticsはサイトの訪問者数やPVを計測する機能を持ったWebアプリケーションです。訪問数、PV計測、離脱率、Google Adsenseの効果測定など様々なことが出来るのですが、その中でイベント機能というものを使うとJSエラーをGoogle Analiticsで収集することが可能となります。 イベント機
![[JS] Google Analyticsを活用して、サイトで起こったJavaScriptエラーを収集しよう - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/01876e0c78235487976af4f6884313f14eb26e18/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F254.jpg)
全画面 API - Web API | MDN
全画面 API は、特定の要素 (Element) （およびその子孫）を全画面モードで表示したり、必要なくなったときに全画面モードを抜けたりする方法を追加します。これによって、要求されたコンテンツ — オンラインゲームなど — がユーザーの画面全体で表示され、全画面モードが終了するまで、ブラウザーのユーザーインターフェイス要素や他のアプリケーションをすべて画面から排除することができます。 API の使い方についての詳細は、 全画面 API ガイドをご覧ください。 インターフェイス 全画面 API 自体に独自のインターフェイスはありません。その代わりに、全画面機能を提供するために必要なメソッド、プロパティ、イベントハンドラーを数多くの他のインターフェイスに追加しています。これらは以下の節に挙げています。 インスタンスメソッド 全画面 API は Document および Element イン
どんな要素でも全画面表示に出来るFullscreen APIをブログの記事に使ってみる ※動作サンプル有 - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 どんな要素でも全画面表示に出来る Fullscreen APIというものがありま して、主に動画で使われている事が 多いですが、今回はブログコンテン ツのリーダビリティに貢献させる 目的で使って見ます。 動画コンテンツに主に使われている印象のAPIなので目にする機会が多くはありませんが、動画だけでなく、どんな要素にも使えますので、ブログやドキュメントなどのテキストコンテンツに使ってみたらリーダビリティの高い状態にユーザー側でスイッチできるので素敵かな、と思った次第です。 さっさとサンプル見せろ、という方は下にスクロールしてください。 W3Cでの仕様はまだEditors’ Draft状態ですけど、最近ちょくちょく使っているところを見かけるようになりました。 HTML5
なんでもフルスクリーンにする FullScreen API - techlog
HTML5 Advent Calendarの2日目です。 本当は3日目の担当だったけど、代打(?)で2日目も書いている。もちろん3日目の記事も書く。 「HTML5 Advent Calendar」はこんな感じの取り組み。まだ空きがあるので、よかったらどうぞ。 今年は、HTML5もAdvent Calendarやります！ 本来のAdvent Calendarとは、12月1日からクリスマスの25日まで、カードに作られた窓を1日に1つずつ開けていくというものです。一方、技術系のAdvent Calendarは、12月1日から25日までの間、毎日違う人が特定のテーマに沿ってブログ記事を書くというものです。もちろん、ここでのテーマは「HTML5」になります。HTML5に関することならなんでもOKです！ このイベントに参加した順番が、そのままブログを公開する日付とします。 是非、みなさん一緒にわいわい
ＱＲコードのＵＲＬ生成ブックマークレット | げことじ。
Goo.gl 短縮URLからQRコードを簡単に作る方法を見て何かしたくなったのでブックマークレット化する！ 最初に作ったのは 見ているページのＱＲコードを作成するして新規ウィンドウに表示するブックマークレット。 w=250の数字を変えると好きな大きさの物が作れる。twitterに投稿したかったから140文字以内で必要最低限。 javascript:w=250;open("http://chart.apis.google.com/chart?cht=qr&chs="+w+"&chld=H&chl="+encodeURIComponent(location.href));void(0); 本家のchartAPIドキュメントにいろいろ書いてあった。 調べたらいっぱいあるのね。２００８年には存在してたよ！ しょんぼり。 ということで前に作った【javascript】google url short
ページの表示・非表示状態を取得するPage Visibility API - へっぽこプログラマーの日記
HTML5 Advent Calendarの1日目です。 本来のAdvent Calendarとは、12月1日からクリスマスの25日まで、カードに作られた窓を1日に1つずつ開けていくというものです。一方、技術系のAdvent Calendarは、12月1日から25日までの間、毎日違う人が特定のテーマに沿ってブログ記事を書くというものです。ここでは、「HTML5」がテーマになります。他にも面白い記事が公開される予定ですので興味のある方は是非チェックしてみてください。 http://atnd.org/events/21987 私は、とりあえず1日目なので軽く、堅くPage Visibility APIというマイナーな仕様について解説したいと思います！ Page Visibility APIとは Page Visibility APIは、ページの表示状態を取得するAPIです。document.h
YoutubeでHD動画がダウンロード可能か判別する方法と、作ったAPIとブックマークレット | Creazy!
YoutubeのHD祭りに乗じて作ったGreasemonkeyが好評価を頂いたようです。 ・動画を楽しもう！（Youtubeでダウンロード可能なファイル形式が一目瞭然になるGreasemonkey） ・はてなブックマーク – 動画を楽しもう！（Youtubeでダウンロード可能なファイル形式が一目瞭然になるGreasemonkey） 毎度ながら、こういったツールは「自分が便利になるもの」を目指して作り始めるのですが、今回のグリモンの場合、「どうやってやっているの？」っていう疑問を持った方が結構いたみたいなのでちょっくら解説などしてみようと思います。 目的のファイルがあるかどうかを判別する方法 Youtubeのダウンロードファイルの在処が分かったとしても、HD画質でアップロードしていない場合は「&fmt=22」の動画ファイルは存在していません（他のフォーマットについても同様でしょう）。しかし、
Javascript初心者です。 picasaに登録している画像をJSONで取得して、自分のWEBページに表示させたいです。…
Javascript初心者です。 picasaに登録している画像をJSONで取得して、自分のWEBページに表示させたいです。 jQueryを使わずJavascriptのみのやり方を教えてください。
Safari 3.1 に実装された「Client-side database storage (SQL API)」とは何か？ - IT戦記
はじめに Safari 3.1 には Client-side database storage （SQL API とも呼ばれています。）という新しい仕様が実装されました。 というわけで、この新しい API について色々調べたことを簡単にまとめておきます。 Client-side database storage が使えるブラウザ 2008 年 03 月 27 日現在では、 Safari 系のブラウザのみです。 Safari 3.1 WebKit Nightly Client-side database storage とは Selectors API とは HTML5 で定義された仕様です。詳細に関してはこちらをどうぞ。 簡単に説明すると JavaScript 内でリレーショナルデータベースを使えるということです。 もっと簡単にイメージするために、実際のコードを示すとこんな感じです。 va
Fullscreen API を簡単に試してみた
Web ページ内の任意の要素をフルスクリーン表示可能にする Fullscreen API ですが、お勉強ついでに簡単に試してみました。 ちょっと前、先月の話題になってしまうのですが、Web ページ内の任意の要素をフルスクリーン表示可能にする Fullscreen API に関連して、Mozilla が公開している Gecko:FullScreenAPI が更新されて Firefox Nightly で使えるようになったり、W3C からも Fullscreen （Editor's Draft） が公開されたりと色々動きが活発になってきましたので、いい機会ということで、お勉強ついでに簡単に試してみました。 例えば HTML5 で追加された video 要素は、今まで Flash などのアドオンに頼ってきた動画の Web ページへの埋め込み、再生を HTML 側で対応することを可能にしましたが、
JavaScripture - The word on JavaScript
JavaScript is the programming language of the web and is quickly gaining traction outside of the browser. JavaScripture.com is a testing ground and reference for all JavaScript APIs. Each reference page contains detailed descriptions and interactive examples like the following so you can quickly learn by doing.
はじめての mixi アプリ - IT戦記
IE ではたぶん動きません。 友達一覧取得 <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="simple mixi Appli"> <Require feature="opensocial-0.8"/> </ModulePrefs> <Content type="html"> <
The complete real-time developer platform
Decision Intelligence - OverviewPower Decisions with Real-Time Intelligence
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript charting library for web apps, dashboards, grids, React and more | Highcharts | Highcharts
はじめての Web Audio API
Twitter の tweet回数に関する質問です。 こちらの記事 http://indigonote.com/2011/05/17/javascript-twitter-button/ を参考に、 twitter Api （urls.api.twit…
HTTP Archive (HAR) format (Editor's Draft)
