TypeScriptで不動点コンビネータに型をつける - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
スナップショットテストの向き不向きについて考えてみる - mizdra's blog
ふとスナップショットテストってなんだろう、どういう場面で向いていて、どういう場面には向いていないんだろうと考える機会があって色々調べてました。丁寧な記事にしようとしたのですが、上手くまとまらなくて挫折してしまった… とはいえこのまま手元に置き続けておくのも勿体ないので、下書き段階のものを公開して供養します。 スナップショットテストとは スナップショットテストとは、あるプログラムの出力を以前の出力と比較し、両者に差分があるかをテストする手法のことです。予め以前のバージョンのプログラムの出力 (スナップショット) のどこかに保存しておき、新しいバージョンのプログラムの出力と比較し、差分があったら fail させます。これにより、プログラムの出力内容が予期せぬうちに変わってしまっていた場合に気づくことができます。 例: React コンポーネントのテストへの適用 代表的な利用例が Jest を使
フロントエンドのテストのモックには msw を使うのが最近の流行りらしい
皆様フロントエンドのテストを書いていらっしゃいますでしょうか？ フロントエンドのテストを書くときには API コールする処理を全てモックする必要があります。外部の API をコールする処理をテストに含めると API サーバーが落ちているなどの外部の要因によってテストが失敗してしまう可能性がありますし、テストを実行するたびに実際に API をコールしてしまうとサーバーに負荷がかかってしまうなど外部に対しても悪影響を与えてしまいます。 さて、従来のモックする手段としては Jest のモックを利用して axios や fetch などのモジュールをモック化する手法がよく使われていたかと思います。 最近のテスト手法として API コールをモックする際に Jest ではなく Mock Service Worker (以下 msw ）を使用する手法が注目されています。実施にどのように使用されているのか
colorsなどのnpmパッケージに悪意あるコードが含まれている問題について
追記: 2022年1月11日 2:29 JSTにDoS脆弱性としてセキュリティアドバイザーが出されて、悪意あるバージョン(1.4.1や1.4.2)はnpmからunpublishされ、npmの最新は安全なバージョンである1.4.0へと変更されました。 Infinite loop causing Denial of Service in colors · GHSA-5rqg-jm4f-cqx7 · GitHub Advisory Database 2022-01-08 に colors というnpmパッケージにDoS攻撃のコードが含まれたバージョンが1.4.44-liberty-2として公開されました。 GitHub: https://github.com/Marak/colors.js npm: https://www.npmjs.com/package/colors 問題についてのIssu
リアル調査案件で使ったPuppeteer - Qiita
Meguro.es #15 @ Drecom 2018年5月22日 自己紹介 ちきさん Twitter/GitHub/Qiita: @ovrmrw 市ヶ谷のオプトという会社で働いています。初心者です。 今回のGitHubリポジトリ 今日話すこと 実際に降り掛かってきた調査案件でPuppeteerを使って地獄を回避した話。 日々降りかかる調査案件 「計測タグの発火タイミングを調べて」 ＿人人人人人人人人人人＿ ＞ ふわっとした依頼 ＜ ￣Y^Y^Y^Y^Y^Y^Y^Y^Y￣ 課題 「発火タイミング」と一口に言ってもページ上の他の要素も絡んで結構ばらつきがあるので、何十回も計った上で平均を取る必要があった。 色々な調査パターンの組み合わせがあり、その数は72もあった。 72パターン x 10回 としても合計720回。 「ツールで自動化した数値はあてにならないから手動でやって」 by PM ＿人
DevTools の Web 技術でできている部分を覗き見る - polamjaggy
この記事ははてなエンジニア Advent Calendar 2021 の 22 日目の記事です。 昨日の記事は id:shimobayashi さんの アジャイル推進活動にここ1年で吉兆がみえてきた要因について - 下林明正のブログ でした。 Chrome の DevTools の UI 部分は Web 技術でできています。Web 技術でできているので、DevTools を DevTools で inspect することもできます。 example.com を inspect している画面を inspect している様子 このことを知ったのは、10MB くらいある JavaScript ファイルにブレークポイントを貼りつつデバッグしていたら DevTools が固まるようになってしまい、ブレークポイントを解除しようにもその前に DevTools がフリーズしてしまうので詰んだ……、という出
すき焼きの写真にすき焼きの3Dモデルを埋め込む方法 - KAYAC Engineers' Blog
この記事は Tech KAYAC Advent Calendar 2021の14日目の記事です。 こんにちは！意匠部のおばらです。 今日は、知っていても役に立たないかもしれない、 WEBページでの画像の変な使い方をご紹介しようと思います。 題して「すき焼きの写真にすき焼きの3Dモデルを埋め込む方法」です。 すき焼きの写真にすき焼きの3Dモデルを埋め込む方法 WEBページで読み込んでいるファイルは全部丸見え！ ブラウザのデベロッパーツール、便利ですよね。 特に Network や Source タブ。 読み込んでいるファイルがぜ〜んぶ丸見えです。 いけてるWEBサイトを見つけたら どうやって作ってるんだろう？ ふむふむ、3D部分はThree.jsで、モデルはglTFか〜 お、テクスチャはKTXを使ってる！ みたいに調べちゃいますよね？？ そう、デベロッパーツールは 覗く側としては、すご〜く勉
deno で機械学習
はじめに 最近、deno が面白くなり始めています。deno はコマンドラインバイナリを1つインストールすれば、import によりパッケージの読み込みはインターネットからダウンロードしてキャッシュされ、開発者が package.json を書く事もなく、とてもお手軽に TypeScript を書くことができます。 もし、機械学習をやりたいとして、事前準備(npm でインストールしたり、conda/pip 等で依存物をインストールしたり)が大幅に削減できるなら、とても便利だと思いませんか？ deno で機械学習 deno で機械学習と聞くと tensorflow.js を使いたくなりますが、残念ながら現在はまだ deno で tensorflow.js を扱える様にはなっていません。しかし deno 1.8 では GPU を扱う為の機能が追加されており、ジワジワではありますが目標に向かって
React Apollo MockProvider の知見をまとめた - tomoima525's blog
MockProviderはReact Apolloクライアントのリクエストや結果をモックするのに推奨されている方法です。サンプルコードを見る限りではいい感じに動くように見えますが、実際に使うとなると、結構ハマりどころがあります。MockProviderの使い方のヒントについてはすでにmediumなどに素晴らしい記事がありますが、それでもMockProvierの予期せぬ動作に数時間を溶かしてしまいました。 そんなわけでこの記事では、レスポンスを適切にモックするまでに得られた知見をシェアします。 なおテスト環境は以下です: @apollo/client: 3.2.0 react-native:0.62.2 jest: 24.9.0 react-native-testing-library: 2.1.1 それでは行ってみましょう! 1. useQueryはhooks packageから直接インポ
AWS API GatewayのWeb Socket機能を使ってAmazon Athenaのクエリ結果を非同期にReactで受け取る
はじめに おはようございます、加藤です。API GatewayとLambdaを使ってサーバーレスなWeb APIを構築していると、バックエンドに時間がかかる処理をさせたい時にAPI Gatewayのタイムアウトである29秒が障壁になることがあります。また、タイムアウトに収まるとしても長時間レスポンスを返さず拘束してしまうことはユーザー体験の観点で好ましくありません。 この課題をAPI GatewayのWeb Socket機能とStep Functionsを使って解決するアーキテクチャを検討してみました。 前提 AWS CDKを使って環境構築を行います。CDKの書き方及びデプロイ方法について本記事では説明しません。 Node.js(TypeScript)を使用してWeb APIを構築します。React(TypeScript)を使用してフロントエンドを構築します。フロントエンドは動作を確認する
npm auditは有益なのか？ - @ledsun blog
体感として、npm auditが出してくる警告は、利益より手間の方が多いように感じてはいます。 とはいえセキュリティに関わることなので、手間でも対応しなきゃなあと、頑張って対応しています。 僕自身は、主にアプリケーションのメンテナンスだけなので、それほど大変ではないのですが、chokidarのような色々な開発ツールで使っているパッケージの脆弱性が報告されると、対応が面倒です。 chokidarを使っている複数のパッケージを更新しないといけない パッケージによってすぐに更新されたり、しばらく時間が掛かったりする ので、in progressなタスクが居座るのが面倒です。 パッケージメンテナーの人は、加えて、ユーザーから早く直せという要望が来て大変なのだろうなあ・・・と思います。 これに関わる話が、DHHのコメント/bin/importmap outdated · Issue #19 · ra
GraphQLとクライアントサイドの実装指針.md
GraphQLとクライアントサイドの実装指針.md GraphQLとクライアントサイドの実装指針 GraphQLって何 Facebookが開発した クエリ言語 今はGraphQL Foundationに移管されている https://quramy.github.io/graph-api-note/#/ GraphQLの特徴 スキーマと静的な型 Demand Driven Architecture Composition 1. スキーマと静的な型 スキーマには可能なクエリや操作の全てが記述されている。 表現方法はいくつかあるが、SDL(Schema Definition Language)で表現されることが多い。 type User { id: ID! name: String! age: Int friends: [User] articles: [Article] } type Arti
銀の弾丸は川から流れて来ない - saneyuki_s log
The Evolution of Flux Frameworks — Mediumを読んだ。自分がここ3ヶ月～半年くらい考えてたことと殆ど一緒で、若干の安心感を得たり。実装論の話も概ね同意ではあるのだけれど、自分は必ずしも同意しかねる面がある。 今のメモリマネージド言語のトレンド、特にクライアントアプリケーションの存在を想定したアーキテクチャは、C#が筋道を立てた実践理論に追随してる面があるので、過程はどうあれ、彼らの先端スタイルに近づいていくことになると思うのよね。 Fluxパターンの話をすると、あれが偉かったのは「疎結合すると色々楽になるから、オブザーバーパターンにして、コマンドパターン使って、コマンドは単方向にすると破綻しにくい割に弄りやすいよ」ってのを、フレームワーク症候群に陥っていた凡百なWebクライアントサイドに、一発、投げつけた辺り（というのは半年くらい前に書いたな……）。
makeのくびき - saneyuki_s log
「gulpって何だよ、makeでいいじゃん（要約」論争について、私もちょっと一本講釈をぶってみることにする。あれやこれやといった実利的な話をするつもりはない。そういうものは既に書いた人がいるのでそちらを参照のこと。 Gruntの思い出 Gruntは、私の印象で言えば車輪の再発明の失敗作のようなもので、タスク間の依存関係が破滅への一途をたどり管理不能に至るなど、宣言型の負の側面が強く出てしまった。しかし、設定は本当にサンプルコードのコピペだけで組み立てられるので、JSが不得手なデザイナーなどには非常に受けが良かったという点は忘れてはならない。ちょうど、html5ブームが本格化して, Apache Antとかに慣れ親しんだJava（主にSIer）系の人が入ってきたタイミングにあった道具かつ、Yeomanファミリーにも組み込まれており、それでいて簡単な事をやらせるには悪くはない具合のシンプルさ、
JavaScriptとWebGLで取り組む
クリエイティブコーディング
The document discusses various coding techniques and tools for creating 2D and 3D visualizations using JavaScript, WebGL, and CreateJS, including examples and code snippets. It highlights different libraries like Three.js and Babylon.js, as well as particle animation techniques. Links to samples and additional resources provided enhance understanding and practical application of the discussed conc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebAssembly text format で画像処理を書くぞ
IndexedDBをSQLで操作可能なSqlWebというライブラリを使ってみた - Qiita
フロントエンドにおける「関心の分離」は間違っていた - fsubal
Storybook CSF3.0 時代のテストに備える
昔懐かしいインターネットの風物詩を最近の技術で作る話 - Speaker Deck
