JavaScript で Wasm 使ってるなら要注意！ そのメモリ、本当に解放されてますか？ - カミナシ エンジニアブログ
数ヶ月前、画像処理ライブラリ OpenCV.js を使って Web カメラの映像をリアルタイム処理するプロトタイプを作っていたときのことです。 OpenCV.js は C++ で書かれたコードを WebAssembly（Wasm） にコンパイルして作られており、Wasm ならではのブラウザ上での高速な処理が可能なライブラリです。 実際、画像のフィルタ処理や特徴点検出など、ユニットテストの段階では高速に実行でき、開発は一見順調に進んでいるかのように見えました。 ところが、いざアプリケーションに画像処理モジュールを組み込んでみると、起動したカメラが数秒経つとなぜか止まってしまいました。 コンソールにもエラーは出ず、Chrome を再起動すればまた数秒だけ動く……そんな不可解な状態に悩まされました。 原因は、Wasm のメモリリーク。 そう、恐ろしいことに C++ 製 Wasm で作られたライブ
「今夜はANGEL/椎名恵」の歌詞 って「イイネ！」
燃え尽きた私のHeart あなたには見えない 灰の中で生まれ変る 天使の翼は 流れる河のように 色を変えてゆく おびえずに はばたけば 大地までもつかめる この乾ききった街角は やさしい歌もないけど たとえ光は とどかなくても 握りしめた愛のかけら 胸に抱きしめ 時を超えるのさ 誰でも天使のように 自由になりたい 心、熱く燃やせば きっとかなうだろう 私は翼を広げ どこへでも飛ぶよ 涙、隠す瞳に勇気がみなぎるまで 夜の闇を飛び越えて 光を受け止める そして身体で感じ合うのさ 今、閉ざされた時が終わると It's gonna be over… Before you… know it's begun It's all we…really got Tonight! 別の心が Tonight! おなじ身体を Tonight! 冷たく見つめてる 冷たく見つめてる… 風が叫び 雨が泣いて くずれてゆく
MIX - 超軽量MSXエミュレーター with Z80.js
MSX向けソフトウェアの開発サイクルを速くするために超軽量エミュレータを合わせて作っていきます。 MITライセンスのオープンソース実装「Z80.js」を発見、ESモジュール化して、メモリとBIOSの一部をつなげるテストプログラム「test.js」を書き「Hello World」に成功！ 下記のように、MSXのBIOSレベルでエミュレートする作戦です const bios = (st) => { /* BIOS emulate 0x005F CHGMOD - スクリーンモード切替 0x00C3 CLS - 画面全体をクリア 0x00A2 BIOSの CHPUT 0x00D5 INKEY ; ret a: 1=up, 2=right up, 3=right, 4=right down, 5=down, 6=left down, 7=left, 8=left up 0x00C6 POSIT lo
URL.createObjectURL の URL はダウンロード開始直後に revoke しても大丈夫 : (*x).b=z->a+y/c
2023/02/23 20:10 URL.createObjectURL の URL はダウンロード開始直後に revoke しても大丈夫 URL の作成と取り消しDataURI 形式だと許容されている文字列の長さの限界の影響を受けることが多いので ある程度大きなファイルを想定してダウンロードするときには Blob にして URL.createObjectURL を使って URL を作成しそこからダウンロードをしています const downloadBlob = (blob, filename) => { const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = filename a.click() } これでダウンロードができますが 作った U
NyankoSweeper
遊び方 30×17のブロックの中に100匹の猫がかくれています。 猫のいないブロックをすべて開いてください。 ブロックを開く ダブルクリックでブロックが開きます。 猫のいるブロックを開くとGame Overです。 ブロックに猫がいない場合は、周りのブロックにいる猫の数が表示されます。 周りのブロックにも猫がいない場合は、開いたブロックの周りのブロックが自動的に開きます。 自動的に開いたブロックの周りにも猫がいないときは、さらに周りのブロックが自動的に開いていきます。 マークをつける シングルクリックでマークをつけることができます。 マークはクリックするごとに、 → → [なし] と変わります。 猫が確実にいると思うブロックにはマーク、猫がいるかもしれないと思うブロックにはマークをつけるといいでしょう。 ステータスパネルの意味 Panel 開いたブロックの数 / 開けるブロックの数 Cat
はてなブログにJavascriptでグラフを作成する方法【Chart.js】 - Fix the Bits | あっぷり工房
こんな方にオススメの記事はてなブログでグラフを作成したい！ Javascriptでグラフをどう描画すればいいの？ 先日、はてなブログへのJavascriptの組み込み方を紹介しました。 これはこれで計算しやすくなったので良いのですが、一度ラクを覚えると人の欲望はエスカレートするもの。 計算結果が数字として出てくるだけじゃなく、グラフィカルに描画できるともっと印象に残りますよね。 ということで、試しにグラフを作ってみました。 【サンプル】VDOT別の完走タイム VDOT別の完走タイム（縦軸の単位は秒数）です。 ボタン押下でグラフが更新されます。 グラフ表示 ※マウスオーバー（またはタップ）で詳細が確認できます 今回は上記のようなグラフをはてなブログで描画する方法とソースコードを公開していきますよ～ 【サンプル】VDOT別の完走タイム 手順 head内タグ 本文 参考 まとめ 手順 はてなブロ
p5.js Web Editor上で「console.log({変数名})」という書き方（変数名＋中身の出力）や「console.table()」のお試し - Qiita
以下の記事で見かけたconsole.log({変数名})」という書き方をする話と「console.table()」を、p5.js Web Editor上でさくっと試してみた、という話題です。 ●console.log(); しか使えなかった自分へ。。。 - Qiita https://qiita.com/ashketcham/items/06e50b3f7f6238d9b51b 動かしたプログラム： console.log({変数名}) さっと試せそうな内容で、まずは「console.log({変数名})」のほうをサクッと動かしてみました。 ｐ5．ｊｓ標準で使える「width・height」や「frameCount」を、このやり方で出力してみるだけのものです。 とりあえず、「frameCount」で試して動いて、その後に「複数指定しても、同じ感じかな？」と「width・height」の部分
すぐ消えてしまう要素をDevToolsで確認するTips集
はじめに こんばんは！ 皆さんは以下のようなすぐ消えてしまう要素をDevToolsで確認したいときはどうしますか？ 常に表示されるようにわざわざコードを修正してから、DevToolsで要素を確認したりしていませんか？DevToolsをうまく使うことで、わざわざコードの修正をせずとも簡単に要素の確認をできるのでそのちょっとしたTipsのご紹介です！ ① CSSイベントでの確認方法 まずはCSSイベントで要素の表示制御を行っているパターンでの確認方法です。以下のようにCSSイベントのhoverで表示制御をしている要素を例にDevToolsで確認する方法を見ていきましょう！ import "./style.css"; export const Index = () => { return ( <div> <button className="myButton">Button</button> <
［注意喚起］ブラウザ互換ライブラリ「Polyfill.io」がドメイン名ごと中国企業に売却、CloudflareとFastlyが代替となる配信を開始
［注意喚起］ブラウザ互換ライブラリ「Polyfill.io」がドメイン名ごと中国企業に売却、CloudflareとFastlyが代替となる配信を開始 開発者がブラウザの互換性を気にすることなくWebアプリケーションを開発するためのJavaScriptライブラリ「Polyfill.io」が、ドメイン名ごと中国企業に売却されたことを受けて、CloudflareとFastlyが急きょライブラリをフォークし、安全が確認されているコードの配信を開始しました（Cloudflareの発表、Fastlyの発表）。 Polyfill.ioをドメインごと中国企業に売却 Polyfill.ioはAndrew Betts氏が開発したオープンソースのJavaScriptライブラリです。Polyfill.ioを組み込むことで、ブラウザのバージョンを気にすることなくWebアプリケーションの開発を行うことができる便利なラ
Polyfill.io を使って JavaScript の Polyfill を適用する - Qiita
TL;DR Polyfill.io という非常に便利なサービスを使って、Internet Explorer などのブラウザでも最近の JavaScript を動くようにします。その為に必要なのは、以下のような <script> を一行追加するだけです。 はじめに JavaScript の実装で Fetch API を使用したい場面がありました。 https://developer.mozilla.org/ja/docs/Web/API/Fetch_API この機能が Internet Explorer (以下、IE) 非対応である為、何かしらの対応をすることになりました。 （尚、この解説での IE のバージョンは 11 になります。10 以前はほとんど使用されていないので、無視します。） 結果、Polyfill を効かせるライブラリを導入することになり、選定を行いました。 Polyfill
【徹底解説】JavaScriptでモジュールの作り方 - Qiita
ライブラリとモジュールの違い ライブラリとモジュールは、両方ともコードの再利用を促進するために使用される概念ですが、意味や使用方法においていくつかの違いがあります。 ライブラリ: ライブラリは、特定の機能や機能セットを提供する再利用可能なコードの集まりです。 一般的に、ライブラリは独立して使用され、他のプログラムやプロジェクトで利用されることを目的としています。 ライブラリは、一般的な問題を解決するための関数、クラス、ユーティリティ、データ構造、アルゴリズムなどの要素を含むことがあります。 ライブラリは、プログラム全体に影響を与えることなく、必要な機能を選択的に使用できるようにするため、モジュールやコンポーネントとして提供されることがあります。 モジュール: モジュールは、コードの構造化と組織化を目的とした小さな単位です。 モジュールは、関連するコードのグループ化とカプセル化を容易にします
JavaScript モジュール - JavaScript | MDN
JavaScript のプログラムはとても小さいものから始まりました。初期の用途は、必要に応じてウェブページにちょっとした対話的な機能を追加する独立したスクリプト処理がほとんどであったため、大きなスクリプトは通常必要ありませんでした。そして何年かが過ぎ、今や大量の JavaScript を持つ完全なアプリケーションをブラウザーで実行することはもちろん、JavaScript を他のコンテキスト（例えば Node.js）で使うこともあります。 それゆえ近年は、JavaScript プログラムをモジュールに分割して必要な時にインポートできるような仕組みの提供が検討されるようになってきました。Node.js は長年この機能を提供しており、モジュールの利用を可能にする JavaScript ライブラリーやフレームワークも数多くあります（例えば、他の CommonJS や、AMD ベースのモジュールシ
JavaScriptにおけるモジュールとWebpack - Qiita
JavaScriptにおける「モジュール」の定義 モジュール(module)とは「変数や関数をまとめたもの」で, JavaScriptにおいては1つのモジュールは1つのjsファイルに対応します. 一つの大きなjsファイルにあらゆる機能を書くのではなく, モジュール化を行なって小規模なjsファイルの組み合わせとして表現することにより, コードの可読性が増したり変数や関数名の衝突を防ぐことができたりなどの様々な恩恵が受けられます. importとrequireの違い importとrequireはどちらもモジュールの読み込み方法を表しています. importはブラウザ上で動作するES6のモジュールシステムであり, requireはNode.jsの環境で動作するCommonJSのモジュールシステムという違いがあります. importについて モジュール側では関数やクラスを定義する際に先頭にexp
【JavaScript】exportと importを使ったモジュール化【module】
みなさんこんにちは、現役エンジニアのサメハックです アパレル企業でトップ販売員を経て 未経験からWebエンジニアに転職し、 現在正社員として5年働いています！ JavaScriptの解説シリーズです。 今回はexportとimportを使ったモジュール化について学んでいきましょう！ 駆け出しエンジニアや未経験の方、 また新入社員を指導する先輩社員にとっても わかりやすいように解説していきます！
「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita
はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-original by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ
input type=“date” の沼から、ライブラリを導入する意義を考える - Mirrativ Tech Blog
はじめまして！2023年7月からミラティブでフロントエンドインターンをしております、かずえもんと申します😺 今回は、インターンでの作業中にハマってしまった Safari のバグについて調査していたら、なんと10年モノの issue だったことが判明し、ライブラリを導入する意義について考える機会となった話を書いてみたいと思います。 Safari の日付入力欄に無効な日付を入れると起こるバグ onChange が正しく呼ばれないのは Safari が原因？ Safari 17 以降で再現しないので原因は Safari で間違いなさそう Safari 17 以前での解決方法として DatePicker を使ってみる まとめ: ネイティブを補う存在としてのライブラリ We're Hiring!! Safari の日付入力欄に無効な日付を入れると起こるバグ 2023年8月、私はミラティブの管理シス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
URL: revokeObjectURL() 静的メソッド - Web API | MDN
【JavaScript】ここがしんどかったよTauri開発【Rust】 - Qiita
JavaScriptのconsole.logで簡単に変数名と値をデバッグログ表示
this.x is not iterable