Concurrent Mode時代のReact設計論 (1) Concurrent Modeにおける非同期処理 - Qiita
Concurrent Modeは、現在（2020年3月）実験的機能として公開されているReactの新しいバージョンです。Reactの次のメジャーバージョン（17.x）で正式リリースされるのではないかと思っていますが、確証はありません。なお、React公式からもすでに結構詳細なドキュメントが出ています。 並列モードの導入（実験的機能） Concurrent Modeに適応したアプリケーションを作るためには、従来とは異なる新しい設計が必要となります。筆者はConcurrent Modeを使ったアプリケーションをひとつ試作してみました。この記事から始まる「Concurrent Mode時代のReact設計論」シリーズでは、ここから得た知見を共有しつつ、Concurrent Mode時代に適応したReactアプリケーションの設計を提案します。 なお、Concurrent Modeはまだ正式リリース
マイナンバーのチェックディジット計算
[2018-08-07 おことわり] JavaScriptで書かれたマイナンバーのチェックディジット計算プログラムを公開していましたが，個人情報保護委員会様から，入力されたものがネットに流れないことはソースで確認したが，マイナンバー収集を誤認するようなページは好ましくないのではないかというご意見をいただきました。確かにもっともなことですので，ソースコードを示すだけにとどめることにしました。このソースを打ち込めば確認できますので，ご自分でお試しください。 <p><label>マイナンバーの先頭11桁：<input id="input" size="13" onchange="check()"></label></p> <p>マイナンバーの最後の桁（チェックディジット）：<input id="output" size="5" readonly></p> <script> function ch
jQuery Face Detection Plugin
Credits jQuery plugin written by Jay Salvat. Full credits for the Face detection algorithm go to Liu Liu. Buy me a beer! Feeling Generous? Feel free to buy me a beer. Beer is good for motivation and further developments. Help & support Need help for this plugin? Don't waste your precious time and hire me for work right away.
Metaballs
Metaballs, not to be confused with meatballs, are organic looking squishy gooey blobs. From a mathematical perspective they are an iso-surface. They are rendered using equations such as f(x,y,z) = r / ((x - x0)2 + (y - y0)2 + (z - z0)2). Jamie Wong has a fantastic tutorial on rendering metaballs with canvas. We can replicate the metaball effect using CSS & SVG by applying both blur and contrast fi
WebDNNのサンプルとコードの解説に挑戦 - のんびりしているエンジニアの日記
皆さんこんにちは。 お元気ですか。師走の12月らしく締め切りに追われています。 この記事は「Deep Learning フレームワークざっくり紹介 Advent Calendar 2017」第7日目です。 qiita.com DeepLearningフレームワークの１つ、WebDNNのご紹介をします。 このフレームワークを調べたきっかけとして、「MakeGirls.moe」があります。 MakeGirls.moeは萌画像生成のWebサービスで、WebDNNを使用して提供しているようです。 make.girls.moe WebDNN WebDNNは東京大学 原田・牛久研究室が作成した深層学習モデル(DNN)を ウェブブラウザ上で高速実行するためのオープンソースフレームワークです。 次のサイトのアワードに掲載されるほど、良いソフトウェアでもあります。 Open source software
JavaScriptで大量のオブジェクトの当たり判定を効率的にとる - Subterranean Flower Blog
ゲームなどのコンテンツにおいて、「当たり判定」から逃れることはできません。オブジェクトとオブジェクトが衝突したかどうかという判定は、インタラクティブコンテンツにおいて最も重要な部分になるからです。 当たり判定の実装自体は難しくありません。ですが、素朴な実装ですと、対象となるオブジェクトが大量である場合に、十分なパフォーマンスが出ません。これはオブジェクトの多い、現代的なゲームでしたり、弾幕シューティングなどを作るときに大きな障害となります。 この記事では、大量のオブジェクトの当たり判定を処理する、効率的な方法について紹介します。 まずは素朴に実装してみる 当たり判定の処理を語るには、ある程度ゲームの骨組みのようなものが必要になってきます。もちろんクラスなどを使わないベタ書きでもよいのですが、大変読みにくくなってしまいます。ですので、今回は、まず簡易的なゲームエンジンのようなものを作って、そ
差分検出アルゴリズム三種盛り - Object.create(null)
こんばんは. 気がつけばもうずいぶんと涼しくなってきました. 勢い余って凍ってしまったりせぬよう, くれぐれも普段の言動にはお気をつけください. はじめに さて, 我々人類にはどうしても二つの文字列 (あるいは行ごとに区切られたテキスト) 間の差分を求めなければいけない瞬間が発生します. 先人たちはそういった時のために diff のようなツールを開発し, それを利用することで文明はめざましい発展を遂げてきました. しかしながら, 使用するアルゴリズムを比較検討したい場合, 「差分」の定義を変えるなどして既存のアルゴリズムに変更を加えたい場合, diff のない異世界に飛ばされて自分で実装しなければいけない時などにおいては, 差分検出アルゴリズムについての理解が必要不可欠です. というわけで, この記事では文字列間の差分検出とは何かということと, 差分を求める三種類のアルゴリズムの紹介・解説
乱数チューニングによる動きのコク
乱数チューニングによる動きのコク 1. 一様乱数 いわゆるMath関数による乱数。 雑味や臭みが強く、そのままでは使い物にならない。 2. 雑味を取り除いた乱数 下処理として臭みや雑味を取り除いた状態。一様乱数特有の発作的なガタツキがないのがわかるだろうか？ 過去2フレームに、距離33%以内の重複数が出ないようになっている。 シャッフルやスロットのアニメ処理など、2連続で同じ数字が重なるとバグって見える表現に有効。 3. コクのある乱数 乱数の旨味が濃縮された状態。中心極限定理により、自然な風合いに濃縮されている。 加算式による天然の正規分布は、ボックスミューラー法の養殖された乱数と違い、加算回数で生産者ごとの味わいが出せる。 パーティィクルや自然シミュレーションと相性が良い。 4. 芳醇なまろ味を出した乱数 口に含んだ後に、豊かな香りが広がる乱数。移動平均により連続性を出すことで、揺らぎ
快適なUXを実現するOptimistic Updates(楽観的更新)とは何か
先日、とあるJavaScript関連の記事を読んでいたところ、"Optimistic Updates" という技術が紹介されていました。 日本語に直すと "楽観的更新" といったところでしょうか。 はじめて聞いた言葉で、日本語の記事も見当たらなかったため記事にしてみます。 Optimistic Updatesとは Optimistic Updatesというのは、ネイティブアプリやSPA(Single Page Application)などで使われる技術で、非同期の通信処理が成功するという前提(楽観)のもとに、通信のレスポンスを待たずに次の処理を行うというものです。 最も多いOptimistic Updatesの使い方は、UIへの反映をリクエストの結果を待たずに行うというものでしょう。 Optimistic Updatesの例 例えば、よくある「いいね」ボタンのようなものにOptimisti
JavaScript開発に役立つ重要なランダムの数式まとめ - ICS MEDIA
プログラムで使うことの多い「乱数」。ゲーム開発やビジュアルアート、ウェブサイトのアニメーションにおいて乱数は非常に重要で、さまざまな用途で利用されています。プログラムで一般に乱数と聞くと、すべての数値が同じ頻度（分布）で出現する「一様乱数」と呼ばれる乱数をイメージする方が多いと思います。 多くの場合はこの「一様乱数」で取得した乱数を用いれば十分でしょう。しかし、場合によっては「一様乱数」ではなく、偏りのある乱数を用いることでコンテンツの見た目や現象の「自然さ」を演出することが可能です。 実は「一様乱数」に一手間加えることで、乱数の分布の偏りを制御できます。今回は乱数を使用して好みの分布を得るためのパターンをいくつか紹介します。 乱数分布のシミュレーションデモ （HTML5製） 次のデモはリアルタイムで乱数の出現頻度を計算し、グラフに可視化するコンテンツです。画面下のプルダウンで乱数の種類を
JavaScript で実装してみる Deep Learning
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに はじめまして、安藤義裕と申します。ヤフー株式会社データ＆サイエンスソリューション統括本部ソリューション本部でプログラマーをしております。趣味はカミさんの手料理です。 機械学習で用いられるアルゴリズムの一つにニューラルネットワークがあります。ニューラルネットワークは脳細胞の働きにヒントを得て考えられたものです。今回扱う多層ニューラルネットワークはニューラルネットワークの中間層と呼ばれる部分を多層化したものです。近年話題に上ることの多い Deep Learning ではこの多層ニューラルネットワークが利用されています。 多層ニューラルネットワークは用途に応じて異なるネットワークが利用されます。画像処理では畳込みニューラルネッ
JavaScriptの乱数の精度の話 / LiosK-free Blog
2010-06-03 カテゴリ: Client Side タグ: JavaScript Tips アルゴリズム 前回の記事で予告したとおり、今回はJavaScriptのMath.random()で生成できる乱数の精度の話。 前回の記事で、JavaScriptでは2^53未満の正整数を扱うことができるということがわかったから、今回の記事では2^53未満のランダムな正整数を生成してみる。 具体的には↓のようなコード。 var ub = Math.pow(2, 53), list = []; for (var i = 0; i < 16; i++) { list[i] = Math.floor(Math.random() * ub).toString(2); while (list[i].length < 53) { list[i] = "0" + list[i]; } // padding }
WebSocketを再接続するアルゴリズムの工夫 - ワザノバ | wazanova
http://blog.johnryding.com/post/78544969349/how-to-reconnect-web-sockets-in-a-realtime-web-app 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約2時間前 John RydingのブログでWebSocketの再接続のアルゴリズムの工夫について紹介しています。 リアルタイムウェブアプリにおいて、何らかの理由でバックエンドとの接続が切れた場合、クライアントは一定間隔で再試行するというロジックを設定（参考コード）していたとします。その場合、大量のクライアントがいて、もし長い時間接続が不能であれば、再開時にバックエンドには大量のリクエストが集中することになります。 そこでJohnがお薦めするExponential Backoff
配列のランダマイズ、出来ますか？（前編）
先日、When Random Isn't Random Enough: Lessons from an Online Poker Exploit（英文注意）という記事がタイムラインに流れてきて、同僚と少し配列ランダマイズの話になったので備忘録として書いておきます。 配列のランダマイズというのは、たとえば上の記事にあるようなトランプのシャッフルであるとか、音楽プレイヤーの再生リストのランダム再生とかで実装しますね。ゲームを作るときなどには実装することが多いでしょうが、記事を読む前に、自分だったらどのように実装するか是非少し考えてみてください。 自分が中学生の頃に書いた記憶のあるコードは、たしか次のようなものでした。 // 配列の初期化 var a = []; for(var i = 0; i < 1000; i++) { a[i] = i; } function swap(s, d) { v
javascriptでdiff実装
高速とされるO(NP)のアルゴリズムをベースに 、javascriptで実装してみた。 [1]E.W.Myers, "An O(ND) difference algorithm and its variations", Algorithmixa, 1 (1986), pp.251-266 に論文を日本語に訳したものが載っており、参考になりました。 http://hp.vector.co.jp/authors/VA007799/viviProg/doc5.htm 上記の論文中のコードは「ＳＥＤ Shotest Edit Distance」の値を求めるだけで、 Diffの結果をどう組み立て格納していくかについてと、fpという配列の初期値を 何で埋めればよいのかが分からず、 かなり苦労しました。 アルゴリズムは上記のO(NP)そのままですが、javascriptで実装していく中で、 メイン処理と
design
Reading To do macros we need to read. To read we need to match delimiters and build a token tree to know where a macro invocation ends. But JS complicates this because delimiters can appear inside of a regex literal and deciding if / is the start of a regex or the division operator depends on parsing context. The read algorithm follows but see also the DLS 14 paper which goes into more detail. Giv
エデンの園でおきたこと - steps to phantasien
有給を駆使し一足早くクリスマス休暇に突入、ヒャッホイ Ingress やるぜーと 意気込んでいた矢先ノロウイルスにやられダウンした。かなしい。鎮まれ俺の胃袋・・・ そんな腹痛日和の気晴らしとして今日は Garbage Collection Advent Calendar に参加してみることにしました。 Advent Calendar 初体験につきよくわかってないけど勝手に参加していいんですよね？ GC というとジェネレーショナルだのパラレルコンカレントだのといった話が目立ちがちだけれど、 現実の問題というかブラウザを相手にするとそれ以外の細々とした面倒が目につく。 GC つき言語 (JavaScript) のコードと C++ で書かれたコードとの連携は最たる面倒の１つ。 たとえば WebKit の DOM は C++ で実装されており、 C++ のオブジェクトは JavaScript 処理
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
検索や推薦をWebWorkerでやる - 橋本商会