暗号化したまま距離計算！JavaScriptと準同型暗号「paillier-bigint」で学ぶプライバシー保護技術 - Qiita
暗号化したまま距離計算！JavaScriptと準同型暗号「paillier-bigint」で学ぶプライバシー保護技術 位置情報のような機密性の高いデータを、サーバーに渡すことなく安全に処理したいと考えたことはありませんか？例えば、「2つのGPS座標間の距離を、それぞれの座標を秘密にしたまま計算する」といった処理です。 これを実現するのが準同型暗号という技術です。この技術を使えば、暗号化されたデータを復号することなく、データに対する加算や乗算などの計算ができます。 この記事では、JavaScriptの準同型暗号ライブラリpaillier-bigintを使い、暗号化された緯度・経度データからユークリッド距離を計算するデモプログラムを通して、その仕組みと可能性を探ります。 シナリオ：暗号化された位置情報から距離を求める このプログラムの目的は、2つの地点（lat1, lon1）と（lat2, l
「ぷよぷよプログラミング」セガ公式のガイドブック発売へ 最新版のソースコード全文掲載
ぷよぷよプログラミングはセガが2020年に無料公開した、ゲームのソースコードを書き写し、ぷよぷよのプレイ画面を確認しながらコーディングを学ぶ教材。小学校でプログラミング教育が必修化した時期だったこともあってSNSなどで話題になり、同年以降も副教材の追加や、セガによる出張講座などが行われている。 関連記事 プログラミング初心者も「“ぷよ”が動いた！」の感動を 着想から7年、ぷよぷよの教材が生まれた理由 コード入力すると“ぷよ”が動くぷよぷよのプログラミング教材が登場。教材を作った経緯や理由を開発者に聞いた。 青学初等部が「ぷよぷよ」のプログラミング教材で授業 青山学院初等部は5月14日から6月25日にかけて、対戦アクションパズルゲーム「ぷよぷよ」のソースコードを使ったプログラミング教材「ぷよぷよプログラミング」を活用した授業を行った。セガが開発した小学生向けカリキュラムを活用し、子供たちにゲ
iOS で click イベントがわけのわからない動作をする件について - Qiita
iPhone や iPad などでも、 JavaScript の click イベントは基本的に有効です。 しかし、これらのデバイスで click イベントを拾おうとすると、うまくいかないことがあります。 このあたり、結構わけのわからない仕様になっているので、順を追って説明します。 なお、以下の説明では jQuery 1.9以上の使用を前提としています。 どういうときにうまくいかないか とりあえず、以下のHTMLを前提とします。 ... <body> <p id="child1">...</p> <p id="child2">...</p> </body> ...
モダンなjQueryに挑戦してみよう
最初にこの記事を書いた時点では、jQueryでTypeScript, バンドラー, ES module, そしてmoduleを使ったビジネスロジックの分離を使ったものは現場で見たことはないと述べました。その後、これをすべて使っている現場があることも発見したので、本記事を修正しました。 用意したもの 例によって、デモコードをGitHubに公開しました。 今回作るのは下記のリンクにあるUIです。 電車の料金を計算するUIです 入力: ユーザが入力する項目 通常席かファーストクラスか 乗客の人数 割引率 出力: 画面で変化する項目 通常席かファーストクラスかのボタンの表示 単価 合計金額 jQueryが得意とするちょっとしたUIの動的アップデートではなく、ブラウザでステートとビジネスロジックを持たせるものを作っています。考えずに作るとスパゲッティーコード化しやすいものです。 複雑になりやすいUI
「Image.onloadはやめてImage.decodeを使おうね」はループの中以外の話 - Qiita
20250427追記 どうやらこちらは画像のキャッシュサイズ問題のようです。 下記二件のchromiumのイシューが参考になります（報告いただいた方ありがとうございます。） ただ、こちらの問題はwon't fixとされてしまっており、今後も直る見込みはなさそうです。 この記事は何？ 画像を複数枚jsで読み込む実装を行なっていたところ、 generosenninさんから「onloadよりimage.decodeを使った方がいいよ。」とアドバイスいただきました。 ただ、実際に実装するとなぜかうまくいかなかったので調査した結果をここに記します 発生した事象 for文で回しながら画像を取得する処理において、image.decodeを利用すると、下記のエラーが発生する。 これは特定の画像やタイミングで起きるものではなく、不定期のタイミングで発生する（ただ、必ずに近いレベルで発生した）
dialog 要素の罠 - Esc キーを連打すると preventDefault が効かない - Qiita
はじめに 最近の Web 開発では、モーダル UI のマークアップに <dialog> 要素を利用することが主流となってきました。 最小限の JavaScript でモーダルを実現可能 フォーカス制御や Top layer などのアクセシビリティへの配慮が標準実装されている Esc キーで閉じる機能が標準搭載（本記事のテーマ） Chrome, Firefox, Safari, Edge など、主要なモダンブラウザでサポートされている この記事では、<dialog> 要素に標準搭載されている Esc キーで閉じる機能が、とある条件下で制御できない問題についてまとめます。 結論 最初に結論まとめです: <dialog> 要素の Esc キーによる閉じる操作は cancel イベントを発火する Chromium では、Esc キーを連打すると2回目以降の cancel イベントは event.c
Dialog と Popover #1 | blog.jxck.io
Intro HTML の <dialog> 要素と、 popover 属性、および関連する様々な仕様が標準化され、実装が進められている。 Open UI を中心に進められているこれらの改善は、多くのサイトで共通したユースケースがありながら、長らくミッシングピースとなっていた重要な機能だ。 もし今、同等のユースケースを自前で実装しているのであれば、適切な仕様を用いた実装に刷新することで、従来はほぼ不可能だった UX を提供できるようになる。 今回から、数回の連載形式で、これらの仕様がどのように標準化され、我々開発者はこれをどのように使っていくべきなのかについて解説する。 showModalDialog Modal や Dialog と言われる UI の歴史は Web においても古く、ブラウザでは IE4 くらいのころに独自実装された window.showModalDialog() が最初に
paged.jsで作るPagedMedia帳票 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 帳票、契約書などのビジネス文書をページ化メディアで印刷するまでのロードマップ。 Paged Media Paged MediaとはCSS3のページ化メディア= 版物の用紙サイズ、ふち、改ページなどのスタイルを指定するためのど真ん中の仕様セット。 ページ化メディアとかページ組版とかPaged Mediaとか、いかにも専門チックな用語が登場するが、ページ概念のあるスタイルセットという理解でOK。 しかしながら、いま現在もメジャーブラウザの対応状況はまちまちだそうで、ブラウザ互換性という意味で安定していないようだ。 ライブプレビュー それでも
1人 Intl Advent Calendar 2024 - Adventar
JavaScript(ECMAScript)の国際化API、「Intl」について紹介する1人 Advent Calendar です。 2024末時点でのIntl仕様と提案されているProposalを広く紹介することをゴールとしています。合わせてIntlに関連する仕様についても端端で紹介できたらなと思っています。 機能・ドメイン的に関連する話題をまとめて紹介していくので、「既存仕様→関連するProposal」の順で繰り返す流れになる予定です。基本的な機能だけ知りたいよと言う方は適宜読み飛ばしてください。
【JavaScript】ES2025の新機能全部解説する - Qiita
ES2025 / ES2024 / ES2023 / ES2022 JavaScriptの仕様は、TC39というところで決められています。 ブラウザベンダや関係者が定期的に会合を行い、様々な新機能について話し合って今後のJavaScriptの方向性を決めていきます。 ここでは2024年にFinishedになった、すなわち仕様が確定して複数のブラウザで実装がなされたproposalについて紹介してみます。 主要ブラウザでは既にほとんどの機能を使用可能です。 ちなみに、2024年2月から2025年1月までにStage4になったproposalがES2025と呼ばれます。 ややこしいですね。 Finished Proposals Promise.try 同期かもしれないし非同期かもしれない、Promiseを返すかもしれないしそうでないかもしれない、そんな関数があります。 その関数を使う際に、いち
思考停止でasync/awaitを使うのはやめよう - Qiita
経験上、「async/awaitはthenより簡潔」程度の理由でasync/awaitの利用が強制されているリポジトリに遭遇することが少なくないです。 自分は思考停止でasync/awaitを優先利用する風潮にはネガティブで、その理由をいくつか挙げたいと思います。 Promiseの理解を妨げる async/awaitは、非同期処理の理解をすっ飛ばして実装できてしまいます。 そのため、特に初学者においてasync/awaitの簡単さがある種の逃げ道として使われ続けるようなケースでは、Promiseへの慣れや理解を妨げる可能性があります。 クイズ 例えば以下の実装に対し、fetchData実行直後に「console.log('取得を開始しました')」という出力も追加してみてください。
JavaScriptで有理数・複素数(ガウス有理数)を扱うための備忘録 - Qiita
この記事は、「Qiita全国学生対抗戦 Advent Calendar 2024」 シリーズ3 12月3日の記事です。 綾坂ことです。趣味でJavaScript狂人をやっている大学1年生です。 JavaScriptで3次方程式を解かなきゃいけなくなったので、複素数を扱うためのコードを書きました。 この記事はその実装で詰まったところとその解決方法の備忘録です。 完成品は"Zahlen.js"という名前で公開しています。実装だるいな〜って人は使ってください。 数学ⅡB以上未履修人間が雰囲気でやってます 数学的に間違ってることをやってたら教えて下さい、とくに複素数の扱い 自然数を$\mathbb{N}$、非負整数を$\mathbb{Z}_{\ge0}$、整数を$\mathbb{Z}$、有理数を$\mathbb{Q}$、ガウス有理数を$\mathbb{Q}\mathrm{(i)}$で表すことがあり
（改訂版）三項演算子は本当に読みにくいのか。TypeScript で分かった 後置 else if メソッド の効果
本記事はこちらの改訂版です。コードも改良しています。 三項演算子は本当に読みにくいのか コードをドキュメントのように読みやすくすることは非常に多くのメリットがあります。 そして、プログラミング言語自体にも読みやすくするためだけに存在する構文があります。 その１つが三項演算子です。 いやいや、三項演算子は読みにくいだろう、と思われた方は多いと思います。 しかし、読みやすいケースがあることも私は経験しています。 あなたも経験しているかもしれません。 なぜ、読みやすさに差が出るのか。調べていった結果、ポイントが分かりました。しかし、それを言語仕様として持っているものはありません。 そこで、TypeScript で読みやすい三項演算式を書くためのメソッドを開発したのでご紹介します。 そのメソッドを使った TypeScript のコードは、次のようになります。 Python の条件式（三項演算子）に
実践: await using でリソース開放
実践 いつ使うんだこれと思ってたら使う日が来たシリーズ。 今回、Deno で使ったんですが、 Node.js やブラウザでも Polyfill を入れれば動きます。 try finally で puppeteer を終了したい Deno で puppeteer を扱うために、こういうコードを書いてました。 // original import puppeteer from "npm:puppeteer@23.6.1"; import chromeFinder from "npm:chrome-finder@1.0.7"; let browser: puppeteer.Browser | null = null; try { browser = await puppeteer.launch({ headless: false, executablePath: chromeFinder(),
破壊的なバックトラック(Catastrophic backtracking)
一部の正規表現は、一見すると単純に見えますが、実行時間が非常に長く JavaScript エンジンを “ハング” させることがあります。 遅かれ早かれ、多くの開発者はこのような振る舞いに直面することがあります。典型的な症状は、正規表現は概ねうまく機能しますが、特定の文字の場合 “ハング” し、CPUを 100% 消費します。 このような場合、Webブラウザはスクリプトを停止し、ページをリロードするよう提案します。これは確かに良いことではありません。 サーバサイド JavaScript では、このような正規表現はサーバプロセスをハングさせる可能性があり、より深刻です。そのため、絶対に見ておくべきことです。 例文字列があり、それぞれの文字の後に任意のスペース \s? を持つ文字 \w+ から構成されるかを確認したいとしましょう。 正規表現を組み立てる明白な方法は、文字の後に任意のスペース \w
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スプレッド構文を使った「条件付き挿入」のテクニック（オブジェクト & 配列） - Qiita
In-Application Sandboxing with Web Workers
デザイナーの角丸へのこだわりに応えよう【HTML/CSS/JavaScript編】 - Qiita
Get computed value of CSS variable that uses an expression like calc
Javascriptのセキュリティ対策について