Deno のめっちゃ難しいバグを修正した - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2022年4月、Deno に以下のバグが報告されました。 fetch API を使って 300KB ぐらいあるファイルをアップロードすると、一定確率でアップロードされたファイルが壊れるというバグの報告です。 報告者によれば、1.20.6 まではバグは発生しておらず、1.21.0 から発生するようになったという事です。1.20.6 の次のリリースが 1.21.0 なので、パッチバージョン1個分まで、バグの発生時期が特定されている状態です。 fetch 周りは自分はほぼ実装していないので「担当範囲ではない」感覚だったので、普通にスルーしてい
Zig の文書読んで所感を記す - Qiita
これは何？ Zig を学ぼうと 公式文書 (0.91時点) を読んでいるんだけど、読みながら思ったことを記していく。 続編は Zig の文書読んで所感を記す #2 へ。 その前に Zig への言及が最近多いなぁ、でもシンプルな言語だって言うしまあどうでもいいかなぁ、ぐらいの気持ちでいたんだけど、ZigはCMakeの代替となるか を読んで、俄然興味が湧いてきて、じゃあ読んでみるか、と思った。 数値 i32 とか u16 のような名前で型が提供されている。 整数は 128bit まである。そればかりか、 3bit とか 53bit のような中途半端な幅の整数も使える模様。面白い。 さらに。何に使うのかわかってないけど、 i0 u0 のようなゼロビットの整数もある。 ちなみに0ビット整数には 0 が代入できる。 u1 は、 0 または 1。 i1 は、 0 または -1 が代入可能。 浮動小数点
Reactに有利なベンチマークを作ってみた - Qiita
皆さんこんにちは。現在、フロントエンドでは宣言的UIが大流行しており、そのためのライブラリもReactを筆頭に複数存在しています。 ライブラリが複数存在するところには当然のように比較や論争が起こるものですが、UIライブラリの場合はパフォーマンスがよく焦点となります。 筆者はReactの信者ですが、Reactは古株ということもあってか、最近の議論ではReactは他のライブラリと比較されるかませ犬のような役割を担うのがよく見られます。「仮想DOMは必要ない」といった類のものです。 しかし、筆者の考えではReactは今でも、もっとも真剣にパフォーマンスに取り組んでいるUIライブラリです。特に、Reactはパフォーマンスを高いユーザーエクスペリエンスのための手段として捉えており、ドキュメントにもユーザーエクスペリエンスという言葉が多く出てきます。 そこで、今回はReactが最も有利になるようなベン
4KBのJavaScriptだけで動く可愛いアクションゲームを作ったのでソースと解説 - Qiita
年イチでちょっとしたブラウザゲームを作ってます（→ 去年）。今年はそこそこ遊べる可愛いアクションゲームを4KB以内で作ってみました。 🎉宣伝させてください！ 🐱今年も無事、猫の日ゲームができました！https://t.co/XnDD8AXx4k 今年は可愛さはそのまま、限界までコードを削って4KBにおさめました。PCの方はソース表示して見てみてね pic.twitter.com/j0QqH6iSSn — ゆき (@yuneco) February 20, 2022 作ったもの：ブラウザで動く4KBのゆるかわアクション URL： https://yuneco.github.io/mezashi-4kb/ ソース： https://github.com/yuneco/mezashi-4kb つまりどういう...コト？ index.htmlという名前のファイルを作って下のコードをコピペする
【HTML5】マリオのコインの音をブラウザで出そう【ファミコン】 - Qiita
で、上記の通り「矩形波、三角波」って見たらアラフォー以上の人は「ファミコンじゃん」ってなったり、むしろ、コナミ矩形波倶楽部を思い出す方も多いかもしれません。 技術的なこと まぁ、ソースを見て貰えば特に難しいことはしていない（いつものように殴り書きだし…）のでコインであれば「♪シミー」という音を鳴らせばできるわけです。 const AudioContext = window.AudioContext || window.webkitAudioContext const audioContext = new AudioContext() const gainNode = audioContext.createGain() gainNode.connect(audioContext.destination) gainNode.gain.value = 0.1 const oscillator =
Unityでスライムを作ろう！ - Qiita
この記事は Akatsuki Advent Calendar 2021 14日目の記事です。 13日目は、アディさんの「カードゲームクリエイターで快適ポケカライフを過ごす」でした。 はじめに はじめまして、新卒クライアントエンジニアのyuyuです。 アカツキにはハイパーカジュアルゲームを作る研修があるのですが、そこで作ったゲームにスライムの表現を入れました（下の画像参照）。 それが思いの外いい感じになったので、記事として残すことにしました。 本記事では、全体の工程を10ステップに分割して説明していきます。 最終的にはこのような画を作っていきます。 プロジェクトはこちらにアップしています。 対象の読者 この記事は、以下のような方を対象としています。 シェーダーやレイマーチングの経験があり、スライム的な表現のミソを知りたい シェーダーやレイマーチングの経験はないが、実際に動くコードや途中経過を
【追記あり】ES2022 Array#at がちょっとおかしい #fix_ecmascript_at - Qiita
既に Stage 4 になっているので諦めていたんですが、流石に見逃せないかなと思ったので TC39 の Discourse にトピックをたててみました。意見がある方はこちらにお願いします。 https://es.discourse.group/t/fix-at/983 議論に伴って私が実際に欲しかったものをモジュールにして公開してみました。 https://github.com/petamoriken/safe-at それといまいちユーザーからの声が伝わっていない感じがしたのでハッシュタグ #fix_ecmascript_at を用意してみました。協力をよろしくおねがいします。 String#char{At, CodeAt} という存在を忘れてたんですが、この似た名前のメソッドたちが引数を整数に丸めるのに String#at が丸めないのはたしかに変だということに気づいてしまったので、自
家のポストに荷物が投函されたらSlackに通知が来るIoTやってみた - Qiita
概要 最近は家にいることが多くQOLを上げていきたいと常々考えております。家のポストに荷物やチラシが投函されたら、Slackに通知が来るIoTをやってみました。 仕様 ① エントランスのポストのフタが開いたらCloud Functionsをコールする ② コールされたCloud FunctionsがWebHookでSlackに通知を送る どうやって実現するか？ 仕様は簡単です。ただ「ポストのフタが開いた」ことをトリガーとするデバイスが、ネットワークに接続している状態でなければ実現ができません。マンションのエントランスにあるポストから、自分の部屋のWifiを接続することはできません。 その課題を解決するためにSORACOMが販売している「SORACOM LTE-M Button Plus」を購入して実現することにしました。 SORACOM LTE-M Button Plus とは？ SORA
Spotify API + Next.jsで作る選曲支援Webアプリ - Qiita
概要 Spotify APIの楽曲レコメンド機能を使って、DJ Mix用のプレイリストを作成できるWebアプリケーションを開発しました。まずはそのアプリケーションの内容をご紹介します。 実装はTypeScript + Next.jsで行いVercelにデプロイする形にしたところ、非常に高い開発体験が得られました。後半はSpotify APIの使い方を含めて、Next.jsでの実装やVercel上での設定について書いていきます。 できたもの AUTOMISCE - Automate Your Mix with Spotify API 使い方 まず"Sign in with Spotify"ボタンでSpotifyにログインします。次に右側の検索欄で最初の曲を選んでプレイリストに追加します。するとその曲と似たテンポでかつテンション感が少し上の曲が"Upper Tracks"欄に、少し下の曲が"D
Windows の 3 種類のスクリーンキャプチャ API を検証する - Qiita
Screen Capture API 現在 Windows には画面をキャプチャする方法が 3 通りくらい用意されている。一番速いのはどれなのか？それぞれ検証してみたい。(他にも非公開の API があるらしいが、ここでは触れない) なお、記事中のソースは説明のため色々省いている。一通り動作するものはこちら。 https://github.com/i-saint/ScreenCaptureTest GDI 石器時代の API だが、今でも機能するしお手軽。 注意すべき点として、GetSystemMetrics() や GetWindowRect() を使う場合、Visual Studio 上のプロジェクトの設定、"Manifest Tool" にある "DPI Awareness" を "Per Monitor High DPI Aware" に設定しておくべきである。これを怠ると、該当 A
リーダブルテストコード - Qiita
はじめに よく言われるように、ソースコードというものは書かれることよりも読まれることの方が多く、それゆえ読みやすいコードを書くということが非常に重要です。それはテストコードにおいても同様であり、プロダクトコードと同等に資産として扱う必要があります。 テストコードは具体的な値を用いて記述し、また複数の変数の値の組み合わせでテストケースを起こすため、プロダクトコードと比べて冗長になりがちです。 書籍『リーダブルコード』の14章でもテストコードの読みやすさについて触れられていますが、本稿では読みづらいテストコードをリファクタリングして読みやすくするためのテクニックを紹介したいと思います。 なおサンプルコードはJavaScriptで記述されており、そのテストコードはJest1を用いて書いています。 ソースコードはGitHubにあります。 リファクタリング(その壱) 以下の、決して読みやすいとはいえ
ケンモFMの配信バックエンド :: ラジオ番組の制作からライブ配信、Podcast化までを全自動化 - Qiita
ケンモFMとは 5ちゃんねる嫌儲板で、コロナ感染者を適当に予測したスレが立ち、明確なソースが貼られないまま「ソースはラジオで聴いた」などの一文が添えられていました。それを揶揄し、「ケンモFMかよ」のようなレスが付いたのが元ネタです。 せっかくなので、fmドメインを取得した上で、スレタイ（スレッドのタイトルのことです）を自動で読み上げるサイトを作ったのが https://kenmo.fm です。YouTubeにも同時配信しており、 https://www.youtube.com/channel/UCHBucrED96_pdOCvIs6jNSQ/live で聴けます。 とりあえずサイトにて自動で生成される音声を聴いてみてください。 システム構成 現状はこのようになっています。 ほぼTypeScriptで書かれており、所々にBashも使用しています。 順に解説します。 1 スクレイピング この項
Playwrightも知らないで開発してる君たちへ - Qiita
const pw = require('playwright'); // iPhone11のデバイス情報を取得 const iPhone11 = pw.devices['iPhone 11 Pro']; (async () => { const browser = await pw.webkit.launch(); const context = await browser.newContext({ viewport: iPhone11.viewport, userAgent: iPhone11.userAgent, geolocation: { longitude: 12.492507, latitude: 41.889938 }, permissions: { 'https://www.google.com': ['geolocation'] } }); const page = aw
Uncontrolled Components でシンプル且つ高パフォーマンスなフォームの実装 - React Hook Form - Qiita
Uncontrolled Components でシンプル且つ高パフォーマンスなフォームの実装 - React Hook FormJavaScriptTypeScriptReactreact-hooksreact-hook-form この記事は READYFOR Advent Calendar 2020の13日目の記事です。 はじめに こんにちは。今年の11月から READYFOR でフロントエンドエンジニアとして働いている菅原（@kotarella1110）です！ React と TypeScript が好きで、React Hook Form のメンバーだったりもします。React Hook Form は TypeScript で記述されているのですが、型の改善を中心にコントリビュートしております。 そこで、本記事では React Hook Form に関連した内容をお話しできればと思い
Promise のキャンセルについて - Qiita
[ English version ] JavaScript と Node.js についてのこの徹底した投稿では、Promises のキャンセルの歴史、なぜNode.jsに関係があるのか、そして async/await APIで使おうとしたときに注意すべきことについて学ぶことができます。 この投稿は、JavaScript の Promise API をよく理解していて、 Node.js の経験がある方のためのものです。 歴史 2014 年に Promise API がブラウザに導入されて以来、人々は Promise で他に何ができるかを調べていました。ブラウザに最初に登場した関連APIは、HTTP リクエストのための fetch() でした。 HTTP リクエストの問題は、サーバーのリソースを消費することであり、サーバーに送信されるリクエストの数が多い場合はお金がかかります。このため、特に
JavaScriptのディープコピー速さ比較 〜7つの手法/ライブラリを比べてみた〜 - Qiita
この投稿では、JavaScript(Node.js)でディープコピーするにあたって使えるコードスニペットやライブラリの処理速度を比較した結果をお見せします。 比較対象 JSON.stringify/JSON.parse Nodeビルトインモジュールv8のserialize/deserialize lodashのcloneDeep deepcopy - deep copy data clone - offers foolproof deep cloning of objects, arrays, numbers, strings, maps, sets, promises, etc. in JavaScript. clone-deep - Recursively (deep) clone JavaScript native types, like Object, Array, RegExp,
React.memo / useCallback / useMemo の使い方、使い所を理解してパフォーマンス最適化をする - Qiita
はじめに React（v16.12.0）のReact.memo、useCallback、useMemoの基本的な使い方、使い所に関しての備忘録です。 「React でのパフォーマンス最適化の手段を知りたい」 「なぜReact.memo、useCallback、useMemoを利用するのかわからない」 といった人達向けに書いた記事です。 デモは CodeSandbox 上に置いてあります。編集して動作を確認してみると理解が深まると思います。 本記事で用いている用語 メモ化 計算結果 メモ化 計算結果を保持し、それを再利用する手法のこと。 キャッシュのようなものだとイメージすれば良いと思う。 そのため、以下の言葉の意味は大体同じ。 「メモ化された値」=「計算結果が保持された値」 「メモ化する」=「計算結果を再利用できるように保持する」 メモ化によって都度計算する必要がなくなるため、パフォーマン
JavaScriptで文字列が小文字・大文字・数字を全て含むかどうか判定する方法について - Qiita
タイトルにあるように、文字列が半角英小文字・大文字と半角数字を全て含むかどうかを判定するという機会は少なくありません。特に、文字種の多さがパスワードの強さであるという教義の持ち主である場合に顕著です。もちろん長さは16文字以内です。 さて、この判定は一見単純に見えて一筋縄ではいきません。文字列の条件判定といえば正規表現ですが、「全て含む」という条件をきれいに書くのは少し難しいでしょう。そこで、この記事ではこの条件を判定する諸方法について雑に考察します。 愚直に正規表現を使う方法 正規表現では、「ある文字種をひとつ含む」という条件を書くのは簡単です。例えば半角小文字を含むという文字列は/[a-z]/という正規表現で判定可能です。これを用いれば、正規表現を3回使うことで上述の条件を判定できます。 const ratz = /[a-z]/, rAtZ = /[A-Z]/, r0t9 = /[0-
JavaScriptのモジュールは変数をエクスポートする - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 今時のJavaScript開発において、JavaScriptが持つモジュールの機能は欠かすことができません。我々はプログラムをいくつものファイル（モジュール）に分割し、import文とexport文を使ってそれらを繋げています。各モジュールはexport文を用いてそのモジュール内で定義した変数・関数などをエクスポートすることができ、別のモジュールがimport文でそれらの値を取得することができるのです。 皆さんは、このimport・export文がどのように働いているのか正確に説明できるでしょうか。実は、import文やexport文と
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React大好き侍が、「もうSolidJSでいいじゃん...//」ってなったワケ。 - Qiita
