input[type="file"] 同じファイルを選んでもchangeイベントが発火しない問題をちょっとだけ深掘りするよ🎶 - カミナシ エンジニアブログ
「よし、これで完璧！」と思って実装したファイルアップロード機能。テストで同じファイルを2回選んだら...あれ？2回目は何も起きない。 // さっきまで動いてたはずなのに... <input type="file" onChange={(e) => { console.log('ファイル選択した！', e.target.files[0]); uploadFile(e.target.files[0]); }} /> 「え、なんでonChange動かんの...？」 Chromeのコンソールとにらめっこすること数分。これ、実は私の実装ミスじゃなくて、ブラウザの仕様に起因する面白い問題だったんです。今日は、この挙動を掘り下げて、Web標準とブラウザによる挙動の違いについて話してみたいと思います。 そもそもchangeイベントってさぁ 教科書的な説明を確認してみる MDNのchangeイベントのドキュ
![input[type="file"] 同じファイルを選んでもchangeイベントが発火しない問題をちょっとだけ深掘りするよ🎶 - カミナシ エンジニアブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/42612fbb374419affecede01347fc77b5a431be0/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2Fa4c3cafc63f5a2e2ff57fa86a97d43b969b42b92%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fk%252Fkaminashi-developer%252F20251111%252F20251111100718.png)
フロントエンドからファイルをダウンロードさせるやり方について
いまどきのWebアプリにおいては、ファイルのダウンロード機能が必要な場面が多々あります。例えば、バックエンドが生成したCSVデータをファイルとしてダウンロードさせる「CSVダウンロード」機能などです。 今回はAPI[1]から得られたデータをファイルとしてダウンロードさせたい場合のフロントエンドの実装方法について考察します。 要件 今回考える要件は、前述のとおり、APIから得られたデータをファイルとしてダウンロードさせることです。具体的には、以下のような要件を考えます。 APIをGETリクエストで呼び出し、そのレスポンスをそのままファイルとしてダウンロードする フロントエンドでの何らかのアクション（ボタンクリックなど）によってダウンロードがトリガーされる 追加の要件次第でやり方は変わりますが、とりあえず以上の前提で考えます。 ベストな方法 とりあえず、筆者が考える一番ベストな方法を紹介します
Web技術を駆使してユーザーの画面を「録画」する
Constant integer division faster than compiler-generated code
Cloudflare Workersで構築する非同期ジョブシステム
「Cloudflare Workers活用事例 業務利用の決め手とその効果に迫るLunch LT」https://findy.connpass.com/event/318382/ での発表資料です。
令和時代の API 実装のベースプラクティスと CSRF 対策 | blog.jxck.io
Intro CSRF という古の攻撃がある。この攻撃を「古(いにしえ)」のものにすることができたプラットフォームの進化の背景を、「Cookie が SameSite Lax by Default になったからだ」という解説を見ることがある。 確かに、現実的にそれによって攻撃の成立は難しくなり、救われているサービスもある。しかし、それはプラットフォームが用意した対策の本質から言うと、解釈が少しずれていると言えるだろう。 今回は、「CSRF がどうして成立していたのか」を振り返ることで、本当にプラットフォームに足りていなかったものと、それを補っていった経緯、本当にすべき対策は何であるかを解説していく。 結果として見えてくるのは、今サービスを実装する上での「ベース」(not ベスト)となるプラクティスだと筆者は考えている。 CSRF 成立の条件 例えば、攻撃者が用意した attack.examp
【JS体操】JavaScript で頭の体操をしよう！〜第1問 44文字 解説編〜 - KAYAC Engineers' Blog
こんにちは！カヤック面白プロデュース事業部のおばらです。 普段は受託案件、特にインタラクティブな WebGL や Canvas2D を駆使する案件のデザイン＆実装を担当しています。 先日出題したJS体操 第1問目、挑戦してくださったみなさまありがとうございました！ 早速ですが最短文字数の回答は 44文字 でした！ export default x=>x-(x%=.2)+.2-(.04-x*x)**.5 みごと44文字を達成した方は、 halwhite さん koyama41 さん sugyan さん tkihira さん たつけん さん の5名！（※ Unicode コードポイント順） おめでとうございます！！ 最短文字数を狙った正統派の回答以外にも、裏技的な面白アプローチがたくさんありました笑 このアプローチは面白い、ぜひ紹介したい！という回答がいくつかあったので、解説記事は2回に分けて
TypeScriptとDocumentaion tests / Documentation tests with TypeScript
TypeScriptとDocumentaion tests / Documentation tests with TypeScript
Three.jsで新宿駅構内図を3Dで可視化してみる - Qiita
はじめに この記事では新宿駅の屋内地図データを使用して、Three.jsで3Dによる可視化をします。 DEMOはこちら サンプルコードはこちら 使用するデータ 今回は、G空間情報センターで公開されている「新宿駅屋内地図オープンデータ」の統合版（ShapeFile）を使用します。 データについての詳細は製品仕様書に記載されています。 この記事のように、データの加工利用には以下の出典が必要となります。 コンテンツを編集・加工等して利用する場合は、上記出典とは別に、編集・加工等を行ったことを記載してください。なお、編集・加工した情報を、あたかも国（又は府省等）が作成したかのような態様で公表・利用してはいけません。（コンテンツを編集・加工等して利用する場合の記載例）「新宿駅周辺屋内地図データ」（国土交通省）（https://www.geospatial.jp/ckan/dataset/mlit-i
Maximum call stack size exceeded について解説
"Maximum call stack size exceeded" というエラーに関する解説を書きます。JavaScript を前提に解説しております。 ざっくり解説 Uncaught RangeError: Maximum call stack size exceeded これは、関数が何度も深く深く呼ばれてしまった場合に出るエラーです。 大抵は、間違って自分自身の関数を呼んでしまった、もしくは再帰の終了条件をミスった場合に発生します。 ここに検索で来た方は、自分自身を呼んでいたり、関数同士が循環的に呼びあっていたりするミスを犯していないか確認してください 。 図にすると、こんな感じです ちなみに、関数呼び出しがなければこのエラーは発生しません。ただの無限ループでは決して発生しないエラーです。以下、解説を書きます。 「関数を深く呼ぶ」とは？ ここでは、関数からリターンせず再度関数を呼び
ESLintのconfigがどのように変わり得るか（flat configとは何か）
はじめに ESLint v8.21.0のリリースでこれまでとは異なるconfigシステム（flat config）が持ち込まれた。 以下の通り、新しいconfigシステムへの一歩というように言及があり、ESLintを利用する上で無視できない影響を受ける変更となりそうなので、どのようなものか確認しておきたい。 We took a big step toward ESLint’s new config system! The new FlatESLint class is now merged. Its API is not yet stable, and not all features are implemented yet, but it is accessible via the Node.js API for early testing. See RFC9 for the origi
極限環境で最終ビルドを絞るためのフロントエンド設計
https://3rdpartyjs.connpass.com/event/289558/
JavaScript で CPU が Intel かどうかを判定する（ついでに JIT を検知する）
先日、次のような Tweet を見かけました TIL I discovered that TensorFlow.js uses an interesting trick to sniff your CPU architecture in WebAssembly. pic.twitter.com/LVyywIM48I — Robert Knight (@robknight_) January 4, 2023 面白かったので、なぜこうなるのかの解説と、ついでにこのテクニックを使った JIT 検知方法などについて紹介します。 JavaScript における低レイヤーの扱い JavaScript においては、挙動が比較的しっかりと仕様に定められているために、環境による振る舞いの違いはあまり発生しません。しかし、低レイヤーに降りるほど振る舞いは実装依存になり、環境差が発生する余地が出てきます。 一番
2023 パズルの逆ポーランド記法(RPN)による解法の解説
2023 年、あけましておめでとうございます！私は元旦に次のようなオリジナル・パズルを出しました。 上の例のように、数字の合間に四則演算（＋−×÷）や括弧を入れることで、2023 を作ってください。 数字の間に必ず演算子を 1 つ入れてください ただし 9 と 8 の間には既に ÷ が入っています 括弧は複数重ねて使用できます 10×(-9 ÷ 8) のようなマイナス記号の使用は禁止です オリジナルツイートはこちらです。この記事では、JavaScript によるこのクイズの解き方をご紹介します。 括弧の数式をプログラムで扱うには さて、この問題の一番厄介な点は、括弧の絡む数式をプログラムで処理するという点ではないかと思います。この記事でもそこを重点的に解説したいと思います。 中置記法 まず、我々が日常的に使っている数式は、いわゆる「中置記法」と呼ばれる記法です。例えば (1 + 1 / 9
JS+SVGで液晶画面風の表示をつくる | tech - 氾濫原
液晶風の画面は決まった形をオン・オフするだけなので、canvas にコードで描くのは大変なだけで無駄が多い。かといってセグメントを1つ1つ画像にわけて座標指定で配置していくのも面倒くさい。 と考えていくと SVG を埋めこんで、SVG の要素を JS で操作するのが効率が良い。ワークフローとしては SVG の作成と JS の実装で綺麗に境界を作ることができる。 Inkscape Inkscape の良いところは以下の点 XML エディタが UI と連動している レイヤーやオブジェクトを選択すると該当箇所にエディタ上で跳べる 構造をコントロールしやすい 画像を編集するというより SVG の XML を編集するUIというイメージ Inkscape でオブジェクトに名前をつけると、svg 上では inkscape:label 属性に入る。これを利用して JS から操作すれば Inkscape で
JavaScript の undefined と null を完全に理解する
JavaScript で頻出する undefined と null について語ります。 言語仕様上の違い JavaScript (ECMAScript) において、仕様上 undefined と null は当然ながら明確に区別されています。いくつか言語仕様上の扱いについて挙げてみます。 比較 厳密な比較演算子 === において undefined と null は区別されます。ゆるい比較演算子 == においては両者は区別されません（仕様 7.2.14）。 console.log(undefined === null); // false console.log(undefined == null); // true
How To Build Minesweeper With JavaScript - Mitchum.Blog
In my last post I showed you guys a tic tac toe game I built using JavaScript, and before that I built a matching game. For this week’s post I decided to ramp up the complexity a bit. You guys are going to learn how to build minesweeper with JavaScript. I also used jQuery, a JavaScript library that is helpful for interacting with html. Whenever you see a function call with a leading dollar sign, t
JavaScript のクロージャーと for 文の let 初期化の例外
先日、次のような JavaScript クイズを Twitter で出しました。 // JavaScript quiz: 出力は？ const a = []; { for(let i = 0; i < 10; i++) { a[i] = () => console.log(i); } } a[3](); { let i; for(i = 0; i < 10; i++) { a[i] = () => console.log(i); } } a[3](); { for(let i = 0; i < 10;) { a[i] = () => console.log(i); i++; } } a[3](); — Takuo Kihira (@tkihira) August 15, 2022 答えは 3, 10, 4 なのですが、for 文の let 初期化専用の例外処理がない場合は 10, 10,
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ブラウザストレージを活用した、複数アプリをまたぐ永続化とリアクティブな同期
Next.jsの考え方
Sharing a state between windows without a server