+ JavaScript の質問用スレッド vol.126 +

**デフォルトの名無しさん** · 2018/06/02(土) 14:31:23.04

JavaScript を自ら学ぶ人のための質問スレッドです。

■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
　　(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
　　具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
　　わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
　　※必ず「問題の事象が再現されること」を確認してください。
　　　必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。

前スレ
+ JavaScript の質問用スレッド vol.125 +
https://mevius.5ch.net/test/read.cgi/tech/1518940081/

（ライブラリ禁止条項は、多数の意見によって廃止されました。ライブラリの質問もOKです）

**デフォルトの名無しさん** · 2018/12/19(水) 08:43:58.69

数学くんは虚学の悪いとこ取りしたような人だね。

**デフォルトの名無しさん** · 2018/12/19(水) 09:41:58.49

>>712
wasm は、emscripten_sleep(millisecond) をサポートしてるので、もともと問題の根は浅い。
でもあなたの言ってることはSetEvent()やMutex()などの同期オブジェクトとは直接関係
ない。それに proposal 段階で、実装報告は見当たらないんじゃないの。

**デフォルトの名無しさん** · 2018/12/19(水) 10:08:12.65

【数学首席のオイラが書く(言葉の美しさは知らん)】

atomic fence は、二つのスレッドが同時に読み書きすることを防ぐ目的で使うもの。
たとえば、グローバル変数 a に「1足す」場合、CPUは、それをいったん(内部)
レジスタなどに読み取ってから、1足し、最後に同じグローバル変数 a に書き戻す。
この際、二つのスレッドがほぼ同時に「読んで」しまった場合、合計で「2」を足して欲しいのに、「1」しか足されなくなってしまう。それを防ぐために、ある同時に「読む」ことすら防ぐフェンスのようなものを用意するためのもの。だから、専用APIとして、
InterlockedIncrement() があったり、CPU自体にもマシン語レベルでLOCK修飾なるもの
があったりする。
一方、SetEvent() などのイベント発生を「待つ」ことは、この仕組みだけでは不十分で、
次のような単純なやり方では CPU がフルパワー状態になり、電力の無駄使いになる。
ちなみに、このように (HLT 命令を使っていない) BUSY LOOP では、CPU の電力消費
が何十倍にもなることがある（だから、sleep()命令は特殊な実装を行ってる）。：

ATOMIC_FENC　g_fence;
BOOL　　　　　g_bEvnet = 0;
void mySetEvent() // スレッドBが使うとする。
{
　　g_bEvent = 1;
}
void myWaitForEvent() // スレッドAが使うとする。
{
　　// 以下ループで、CPUがフルパワー状態になり電気の無駄使いになる：
　　for ( ;; ) {
　　　　BeginAtomicFence(&g_fence); // あなたが言ったAtomic Fenceの開始。
　　　　if ( !g_bEvent ) {
　　　　　　g_bEvent = 0;
　　　　　　EndAtomicFence(&g_fence); // あなたが言ったAtomic Fenceの終了。
　　　　　　break;
　　　　}
　　　　EndAtomicFence(&g_fence); // あなたが言ったAtomic Fenceの終了。
　　}
}

**デフォルトの名無しさん** · 2018/12/19(水) 10:09:02.19

>>715
[続き]
そこで今度は、myWaitForEvent()のループを次のように書き換えたとする：
　　for ( ;; ) {
　　　　BeginAtomicFence(&g_fence); // あなたが言ったAtomic Fenceの開始。
　　　　if ( !g_bEvent ) {
　　　　　　g_bEvent = 0;
　　　　　　EndAtomicFence(&g_fence); // あなたが言ったAtomic Fenceの終了。
　　　　　　sleep(100);　　// 100(ms) 待つ。
　　　　　　break;
　　　　}
　　　　EndAtomicFence(&g_fence); // あなたが言ったAtomic Fenceの終了。
　　}
この場合は、電力消費はかなり抑制されるが、スレッドBで mySetEvent()が呼ばれて
から、スレッドAのmyWaitForEvent()がそれを知って、ループから脱出するまでに、
最悪100(ms)の遅延が発生してしまう。だから、OSは、WaitForSingleObject() API
などの専用の同期メカニズムを用意しなくてはならない。Emscriptenにはまだそれ
が整備されていない。

**デフォルトの名無しさん** · 2018/12/19(水) 10:11:23.08

>>715
【修正】

void mySetEvent() // スレッドBが使うとする。
{
　　BeginAtomicFence(&g_fence); // あなたが言ったAtomic Fenceの開始。
　　g_bEvent = 1;
　　EndAtomicFence(&g_fence); // あなたが言ったAtomic Fenceの終了。
}

**デフォルトの名無しさん** · 2018/12/19(水) 10:12:13.28

>>716
【修正】

誤：if ( !g_bEvent ) {
正：if ( g_bEvent ) {

**デフォルトの名無しさん** · 2018/12/19(水) 10:14:39.02

>>715
【sleep()を使う場合の最もましなコード】
（それでもどうしても遅延が発生する。）

void mySetEvent() // スレッドBが使うとする。
{
　　BeginAtomicFence(&g_fence); // あなたが言ったAtomic Fenceの開始。
　　g_bEvent = 1;
　　EndAtomicFence(&g_fence); // あなたが言ったAtomic Fenceの終了。
}

void myWaitForEvent() // スレッドAが使うとする。
{
　　// 以下ループで、CPUがフルパワー状態になり電気の無駄使いになる：
　　for ( ;; ) {
　　　　BeginAtomicFence(&g_fence); // あなたが言ったAtomic Fenceの開始。
　　　　if ( g_bEvent ) {
　　　　　　g_bEvent = 0;
　　　　　　EndAtomicFence(&g_fence); // あなたが言ったAtomic Fenceの終了。
　　　　　　sleep(100);　　// 100(ms) 待つ。
　　　　　　break;
　　　　}
　　　　EndAtomicFence(&g_fence); // あなたが言ったAtomic Fenceの終了。
　　}
}

**デフォルトの名無しさん** · 2018/12/19(水) 10:15:59.44

>>719
【修正】
誤：// 以下ループで、CPUがフルパワー状態になり電気の無駄使いになる：
正：// 以下ループで、最悪100(ms)の遅延が発生する。

**デフォルトの名無しさん** · 2018/12/19(水) 10:17:28.95

>>719
【再修正】

void myWaitForEvent() // スレッドAが使うとする。
{
　　// 以下ループで、最悪100(ms)の遅延が発生する。
　　for ( ;; ) {
　　　　BeginAtomicFence(&g_fence); // あなたが言ったAtomic Fenceの開始。
　　　　if ( g_bEvent ) {
　　　　　　g_bEvent = 0;
　　　　　　EndAtomicFence(&g_fence); // あなたが言ったAtomic Fenceの終了。
　　　　　　break;
　　　　}
　　　　EndAtomicFence(&g_fence); // あなたが言ったAtomic Fenceの終了。
　　　　sleep(100);　　// 100(ms) 待つ。
　　}
}

**デフォルトの名無しさん** · 2018/12/19(水) 10:46:30.85

いや、もうAtomicsAPIがChromeでオリジントライアルで使えるでしょ
もう解決してる問題に対して何をイキっちゃってんの
いくら数学の理論構成や計算ができようと意味はないよ
そんなのは機械でできることだから
正しい問題と前提を認識できて初めて数学という道具は有益に使えるんだから
君がやってるのはただ思考力の無駄遣い
まあ君の頭だからどう無駄に使おうと勝手だけど、スレ汚しは勘弁してね

**デフォルトの名無しさん** · 2018/12/19(水) 13:13:50.30

>>722
なるほど、Atomics の wait() と notify() の事か：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics/wait

分かった、すまんかった。
しかし、海外のサイトを検索しても、この関数のことは一切発見することが出来なかったんだよ。
await や async や、その他の便利ラッパクラスみたいなものより、こっちの関数の方が重要だ。

初見だが、多分、notify() と wait() が、Win32API の SetEvent() と WaitForSingleObject() に大体
対応していて、それがあればスレッドの同期に関してはほとんどの用途では足りると思う。
効率の良い(電気もCPUパワーも無駄にしない) sleep() もこれらを使えば実装できてしまうだろう。

**デフォルトの名無しさん** · 2018/12/19(水) 14:57:22.19

またWindowsのAPIに固執してるの？
いい加減に理解しなよ。Windowsとwebは無関係だって。

**デフォルトの名無しさん** · 2018/12/19(水) 17:02:01.51

マルチプラットフォーム環境として、wasm や JVM や CrossBrdige(FlashCC) など
を調査してるから、Windowsアプリが移植できるかどうかに興味があるんだ。

**デフォルトの名無しさん** · 2018/12/19(水) 20:13:23.94

Windowsアプリが移植できるかと、同じAPIを持ってる事は無関係だし、
事実同じAPIも持ってないよね。
なのに見立てる理由がわかんない。

**デフォルトの名無しさん** · 2018/12/19(水) 21:13:53.09

基本的にLLVMに変換可能なプログラムなら移植できるけど
OS特有のAPIやライブラリ使ってちゃそりゃそのまま移植できるはずがない

**デフォルトの名無しさん** · 2018/12/20(木) 01:35:15.77

だからそれをやっちゃおうかな、っちゅう話ですわ。

**デフォルトの名無しさん** · 2018/12/20(木) 08:29:03.69

やっちゃおう、にどれだけ価値があるかわからんけどね。
そこまで言うなら、前回のIMEだって、やっぱりIMEを移植すべき問題じゃん。
同じAPI使うってのは、wasmでのWin32API互換ライブラリを作るって夢を語ってるって事なのかな？

簡単な道ではないと思うけど。
WINE何年かかってんよって話。

**デフォルトの名無しさん** · 2018/12/20(木) 12:51:09.87

WasmでというよりJSででしょ
現状Web API叩くのはJSからしかできないのだから

**デフォルトの名無しさん** · 2018/12/21(金) 02:52:57.38

foo =function(){}とか
bar = ()=>{} とか
エディタがDocコメ認識してくれないことが多くてなあ…

**デフォルトの名無しさん** · 2018/12/21(金) 03:02:08.56

jsdocって言語機能が名前から想像するよりはるかに異なるjava用のjavadocの単なるメクラポーティングだしなぁ…
js用にもっと相応しいドキュメント仕様が普及してもよかっただろうに世の中うまくいかんのう…

**デフォルトの名無しさん** · 2018/12/23(日) 03:20:59.12

iframe要素のsrcを変更したら画像のロードが終了してからloadが発火すると思うんだけど
この間（画像のロードしてる間）にiframeのHTMLにcss挿入するのってどうしたらいい？

**デフォルトの名無しさん** · 2018/12/23(日) 03:32:31.98

へけっ

**デフォルトの名無しさん** · 2018/12/23(日) 18:55:55.79

>>733
src を変える前に iframe の style 属性を指定しておくのでダメであれば、
別に、タイマーイベントみたいなので、少し遅れてから、イベントハンドラ
の中から iframe の style 属性を変えればいいだけではないの。

**デフォルトの名無しさん** · 2018/12/23(日) 20:07:18.83

だめやろうなぁ

**デフォルトの名無しさん** · 2018/12/24(月) 02:47:05.59

エクセルのマクロとかすら使ったことがないし
数学も超苦手なのですが
プログラムを始めてみたくてウズウズしてます。
仕事で使ってる動画ソフトが
javascriptでスクリプトを追加できるので
java scriptをはじめてのプログラムとして始めてみたいのですが
何から揃えればよいのでしょうか？

**デフォルトの名無しさん** · 2018/12/24(月) 05:38:37.54

ブラウザ

**デフォルトの名無しさん** · 2018/12/24(月) 12:33:43.31

>>738
確かに。

冗談のようだけど重要だな
Chromeなど開発モードがあるブラウザを使い、それの操作方法に多少は馴れておけって意味では

**デフォルトの名無しさん** · 2018/12/24(月) 16:16:56.97

知識０なのに実用的なプログラムから始めるのは間違っている
HTMLを学んでてそこに動きを付けたいとかいう段階的な目的とステップがあるなら別だけど
マクロとしてのJSを学びたいのにWebに手を出すというのは無理筋
基本的に勉強用の非実用言語環境でできれば配列くらいの知識まで身につけといてから
Webとか手を出さないで直接マクロに行かないと絶対に挫折する

**デフォルトの名無しさん** · 2018/12/24(月) 18:15:32.52

マクロとしてのJSって何だよ・・・・

やりたいこととしてはブラウザよりNodeの方が向いているとは思うが

**デフォルトの名無しさん** · 2018/12/24(月) 18:21:49.02

いや、もうやりたいことは決まってるでしょ
いくら比較的余計な知識が要らないとは言え
NodeでのJS入門環境が充実してるわけでもないのに

**デフォルトの名無しさん** · 2018/12/24(月) 20:00:11.14

webpackで依存関係が数百とかなってわけがわからなくなる

**737** · 2018/12/24(月) 23:14:29.77

みなさんありがとうございます。
「なにかゲームしたい」くらいな感覚でプログラムをやってみたいと思ってました。

必要に迫られて始めたいわけではなくて
暇なときにテトリスする代わりに
クネクネ動くhello worldを作ったり
自分で使うようのアプリとか作れたら楽しそうだなと思った次第でした。

今は小さくて安い小型パソコンがたくさんあるのでそういうパソコンで
暇な時にシコシコプログラム作れたら
すごく楽しいんじゃないかと

ついでにJs覚えれば仕事の動画編集にも活かせそうだしなんか良いかなみたいな感覚でした。

htmlもかじってみようと思います。

**デフォルトの名無しさん** · 2018/12/25(火) 06:55:27.86

>>738
グリフィンドールに１０点！！

**デフォルトの名無しさん** · 2018/12/28(金) 09:59:07.54

MSDNからMDNにとばされるんだけど…

**デフォルトの名無しさん** · 2018/12/28(金) 12:22:40.64

統合されたんだから当たり前じゃん

**デフォルトの名無しさん** · 2018/12/28(金) 22:17:34.14

Excelの表をGraphqlに変換することは出来ますか？

**デフォルトの名無しさん** · 2018/12/28(金) 22:18:40.05

>>748
続き
横幅やセルの色や結合までGraphqlでもっていけたらいいなぁと思うんですが・・

**デフォルトの名無しさん** · 2018/12/28(金) 22:35:42.83

質問です。下記のようなプログラムで、'テスト'をhoge内に記載する場合は
どのようにすればいいでしょうか？
const hoge = {
hoge1:'hogehoge1',
hoge2:'hogehoge2'
};
console.log(hoge.hoge1 + 'テスト')

イメージ的にはこんな感じにしたいです
const hoge = {
hoge1:'hogehoge1',
hoge2:'hogehoge2'
(hoge1+テスト)
};
console.log(hoge.hoge1)
結果：hogehoge1テスト

**デフォルトの名無しさん** · 2018/12/28(金) 23:15:33.48

const hoge = {
hoge1:'hogehoge1'
+'テスト',
hoge2:'hogehoge2'
};

**デフォルトの名無しさん** · 2018/12/28(金) 23:57:17.21

>>748
gatsby-transformer-excelあったと思う

**デフォルトの名無しさん** · 2018/12/29(土) 09:01:54.50

>>746-747
メソッド一覧とかプロパティ一覧、関数一覧のページはMSDNのほうが見やすかったから
索引的なページは残しておいてほしかった
エディタのマクロ書くときなんかはMSDNのほうが都合よかったので残念

**デフォルトの名無しさん** · 2018/12/29(土) 10:27:57.06

MDNに文句を言いましょう

**デフォルトの名無しさん** · 2018/12/31(月) 00:10:35.03

Electronでクロスプラットフォームのアプリ開発の出来ることを知ったプログラミング初心者ですが、一般的なElectronの開発はVue.jsやReact.jsを併用するのでしょうか？

**デフォルトの名無しさん** · 2018/12/31(月) 12:44:57.49

好きなようにすりゃいいんだよ。なんだよ一般的て

**デフォルトの名無しさん** · 2019/01/01(火) 14:16:52.62

もうElectronは古い
今からはできる限りPWAでやる風潮

**デフォルトの名無しさん** · 2019/01/01(火) 17:49:09.57

React学ぶのにオススメのチュートリアルや本ありますか？

**デフォルトの名無しさん** · 2019/01/01(火) 19:27:21.70

本は薄い奴が今のところ比較的新しいけど、残念なことにそれでも情報が古いからGithubのreadmeとか見ないとダメ
その本に書かれているライブラリはもう開発停止していたりするから

ReactよりもReduxのほうが大変かもね

**デフォルトの名無しさん** · 2019/01/01(火) 21:59:08.65

>>758
Q. ○○を学ぶのにオススメのチュートリアルや本ありますか？
A. 公式
JavaScript界隈の場合はほぼ全部これ。

公式読んで無理なら諦めた方がいいと思う。当然だが、
1. JavaScript界隈の場合は布教意識ありまくりで公式がかなり充実している。
2. 公式は対象技術レベルを想定して書かれている＝読んで無理ならどうせ使いこなせない。
3. 公式以外は「ぼくががんばったきろく」を残したい馬鹿ばかりで、間違いが多すぎる。
4. そもそも普通の奴は「ぼくのさいこうのチュートリアル」なんて作らない。
　公式のチュートリアルを充実させる方向に参加する。したがって当然非公式サイトはおしなべてゴミ。
5. 本を書いている奴は本で食っている＝一線のプログラマではなくただのテクニカルライタであり、
　売れない本は書きたくない。よってどうしても後追いになるし、技術レベルも低い。
6. JavaScriptの場合はフレームワークonフレームワークの状態だから、
　はっきり言って、構想を聞いて「あ、いいね」とぱっと思えるのでなければ使う必要がない。
　だから本来、対象者にはリファレンスしか必要ない。Nodeとかそんな感じでしょ。

というか、自分が知ってるフレームワーク等と比べてみたらいい。
例えばjQueryを使っている奴は公式トップの3例を見て、「素晴らしい」と思えるから使っているわけだろ。
Nodeの場合は公式トップは空で、aboutで鯖を立てる例だけ出しているが、魅力のアピールにはそれで十分なわけだろ。
同様に、reactの場合も公式トップの4例で十分だと思っているからあの構成な訳で、
それで魅力を感じないのであれば使う必要はないし、意味が分からないのなら使いこなせない。

**デフォルトの名無しさん** · 2019/01/02(水) 03:56:07.95

「Reactを学ぶ」とかワケワカランな
スマホだってなんだって説明書見て使ってれば自分にとって十分使いこなせてるでしょ
「Reactのプロ」になる必要なんてないんだから
ただ道具の一つとして自然に使っていけばいいだけ

**デフォルトの名無しさん** · 2019/01/02(水) 16:10:49.32

emscripten_sleep() の以下のソース、理解が出来ない。JSに不慣れだから余計。
誰か助けて欲しい。emscripten は、少なくとも asm.js 形式だと、JS から、
JS の emscripten_sleep() 関数を単純に呼び出している。
以下の、{{{・・・}}} の三重括弧や、callback の部分の意味が理解できない。

[x:\yyyy\emsdk\emscripten\1.38.21\src\library_async.js]
mergeInto(LibraryManager.library, {
#if ASYNCIFY
　・・・
　emscripten_async_resume: function() {
　　var callback = 0;
　　___async = 0;
　　___async_unwind = 1;
　　while (1) {
　　　if (!___async_cur_frame) return;
　　　callback = {{{ makeGetValueAsm('___async_cur_frame', 8, 'i32') }}};
　　　// the signature of callback is always vi
　　　// the only argument is ctx
　　　{{{ makeDynCall('vi') }}}(callback | 0, (___async_cur_frame + 8)|0);
　　　if (___async) return; // that was an async call
　　　if (!___async_unwind) {
　　　　// keep the async stack
　　　　___async_unwind = 1;
　　　　continue;
　　　}
　　　// unwind normal stack frame
　　　stackRestore({{{ makeGetValueAsm('___async_cur_frame', 4, 'i32') }}});
　　　// pop the last async stack frame
　　　___async_cur_frame = {{{ makeGetValueAsm('___async_cur_frame', 0, 'i32') }}};
　　}
　},

**デフォルトの名無しさん** · 2019/01/02(水) 16:12:12.28

>>762
　・・・
　emscripten_sleep: function(ms) {
　　Module['setAsync'](); // tell the scheduler that we have a callback on hold
　　Browser.safeSetTimeout(_emscripten_async_resume, ms);
　},
・・・
}

**デフォルトの名無しさん** · 2019/01/02(水) 16:28:37.28

以下の前提がある時、

callback = {{{ makeGetValueAsm('___async_cur_frame', 8, 'i32') }}};
{{{ makeDynCall('vi') }}}(callback | 0, (___async_cur_frame + 8)|0);

の部分が、何を意味するのか分かる人いない？
---------------------------------------
var Module = {};
Module["asm"] = (function(global, env, buffer) {
"use asm";
var HEAP8 = new global.Int8Array(buffer);
var HEAP16 = new global.Int16Array(buffer);
var HEAP32 = new global.Int32Array(buffer);
var HEAPU8 = new global.Uint8Array(buffer);
・・・・
}

var dynCall_vi = Module["dynCall_vi"] = function() { return Module["asm"]["dynCall_vi"].apply(null, arguments) };

function makeDynCall(sig) {
if (!EMULATED_FUNCTION_POINTERS) {
return 'dynCall_' + sig;
} else {
return 'ftCall_' + sig;
}
}

**デフォルトの名無しさん** · 2019/01/02(水) 16:46:37.75

三重波括弧についてはEmscripten独自のマクロみたいだね
多分だけどビルド時に当該箇所が置換されるんだと思う
https://github.com/kripken/emscripten/blob/52479350e642453bf74ceca108fca8e1f43b30d5/src/parseTools.js#L11-L12

マクロ展開後がどうなるか分からないからこれ以上は分からない

**デフォルトの名無しさん** · 2019/01/02(水) 18:09:44.66

[何をやってるかの自分なりの推定]

例えば、main() 関数の中で、emscripten_sleep(n) を使うと、setTimeout() を使って、
emscripten_async_resume() 関数を、n(ms) 後に起動するようにしておく。そして、
その段階では、main() の後の処理を全て素通りして、main() 関数から return する。
これは、if 文で、label という名称の local 変数の値で場合わけして、goto で色々な
ラベルに飛んでいるような感じ。でも、JS には、goto 文がないので、関数の処理全体を
大体 while(1) 文のブロック中に入れてしまって、必要な時に break する事で、while
ブロックの次の場所に飛ぶようにしてある。そして、そこで label 変数の値で場合分けして、
何らかの処理を行う。実は、この時、main() 関数に割り当てられた識別番号をどこかの
グローバル変数 g_k に残しておく。この識別番号は、0 から割り振られた小さな値で、
どこかの配列 g_func_s[]には、色々な関数の先頭アドレスが入っており、main もその中の
1つとして入っている。例えば、main に割り振られた識別番号が 5 なら、g_funs[5] で
main の関数アドレスが取得できるようになってるらしい。

次に、n(ms) の時間が経過すると、emscripten_async_resume() が呼び出される。この時点では、
main() 関数は実行を終えてしまっているので、何とかして、もう一度 main() 関数を起動しなおして、
上手く、emscripten_sleep() の直後の行にまで戻りたい。そこで、g_k に残された番号を頼りに、
g_func_s[g_k] の関数を起動しなおす。g_func_s[g_k] には、main 関数の先頭アドレスが入ってい
るので、main 関数を再起動することは出来ることは出来る。

で、main をもう一度起動して、なんとかして、emscripten_sleep() の直後の行にまで進む。
これは、変数「label 」に上手く値を入れることで、何とかしているんだと思う。
この時、スタック・ポインタの値も、元に戻す。

STACKTOP が、スタック・ポインタで、HEAP32[] が、CPU 全体のアドレス空間みたいなもの。
大体、HEAP32[STACKTOP] と書くことで、該当のスタックの近くにアクセスできるらしい。

**デフォルトの名無しさん** · 2019/01/02(水) 18:50:37.56

function dynCall_vi(index,a1) {
index = index|0;
a1=a1|0;
FUNCTION_TABLE_vi[index&15](a1|0);
}

var FUNCTION_TABLE_vi = [b2,b2,b2,b2,_main__async_cb,b2,_vfprintf__async_cb,
_fflush__async_cb_2,_fflush__async_cb_1,_fflush__async_cb_3,
_fflush__async_cb,___fflush_unlocked__async_cb,___fflush_unlocked__async_cb_4,
_printf__async_cb,b2,b2];

**デフォルトの名無しさん** · 2019/01/02(水) 19:52:48.79

単純にスタックを切り替えて該当処理を再開できるようにしてるだけじゃん

**デフォルトの名無しさん** · 2019/01/03(木) 00:47:27.22

>>768
おいらは数学主席だが、そんな単純じゃない。
もっと非常に複雑なことをやってる。

>>765
その情報は助かった。自分一人では数ヶ月間は気付く事は出来なかったと思う。

**デフォルトの名無しさん** · 2019/01/03(木) 01:00:48.19

>>768
asm.js は、JSの「subset」とされる。だから、JSでサポートされてないことは、
asm.jsでも本質的には出来ない。JSは、
・sleep()関数が存在せず、wait()関数も今のところサポートされているブラウザが
　かなり限定されるので、原則的には、関数の途中で無限ループ以外では停止する
　ことは出来ない。
・関数callを使わずに、アセンブラの単純な(大域) jmp のようなことは
　出来ない。だから、スタックポインタだけを元に戻しても、命令ポインタ(IP)
　を元に戻すことが難しい。
・LLVMでも、原則的にはコードは個別の関数としてだけ作ることが出来て、
　関数の外にコードを書くことはおそらく出来ない。
・ただし、LLVMの場合は、longjmp やスタックポインタなどのサポートが
　色々と有るのでそのあたりを利用すれば何らかの方法があるかもしれない。
・だから、Emscriptenのemsripten_sleep()は、非常に高度なことをやっており、
　「待ちたい時」は、いったんそれまでの呼び出し連鎖の全ての関数を逆に戻って、
　「システム」にまで戻る。原則的には、全ての関数は、なんらかのイベント
　からスタートしているので、これは、イベント・ハンドラの処理をいったん
　終了して、ブラウザに制御を戻すような事になる。
・一定時間が経過すると、設定しておいたresume用のハンドラがシステムによって
　起動されるので、そのタイミングで、呼び出し連鎖の全ての関数を再度、
　「再起動」する。この仕組みを使わないと「EIP」を元に戻すことが出来ない
　ためである。なお、スタックポインタについては、独自のグローバル変数を元に戻す
　だけで済む。スタック自体は、巨大な「配列」をCPUのメモリー空間のように
　して、スタックポインタに該当する変数を配列の添え字としてアクセスするような
　事をしている。

**デフォルトの名無しさん** · 2019/01/03(木) 01:14:16.10

>>770
[補足]
・データ用のスタックポインタは、単純にSTACKTOPという名称のJSの
　グローバル変数によって模倣するとする。
・CPUの全アドレス空間は、HEAP32[] という32BIT整数の配列で
　模倣するとする。
・その結果、スタック変数(local auto 変数)は、HEAP32[STACKTOP + ofs/4]
　のような形式でアクセスできるようになる。
・通常のCPUでは、関数を呼び出した親のコードのアドレスが、スタック上に保存
　されたあと、命令ポインタ IP の値が、呼び出し先の関数の先頭アドレスに修正される。
・JSの関数呼び出しも、ブラウザの内部的な変数に「戻りアドレス」が保存されて、
　ある意味ではこれとよく似たことは行われていると考えてよい。
・しかし、このスタックは、HEAP32[] や、STACKTOP とはまったく独立した
　ブラウザの内部的な領域にある。
・つまり、この「戻り値アドレス」は、HEAP32[]の中には入ってない。
・だから、STACKTOP を元に戻したところで、CPUの場合のように単純にはいかない。
・その結果、関数呼び出し連鎖を全て cancel する動作と、全て call し直して元に戻す
　という動作は、STACKTOP の動作とは別に行わなくてはならない。
・ラベル名やラベル番号を指定した大域 goto 命令みたいなものが有れば話は別なのだが、
　多分、JS にはそれがないためである。

**デフォルトの名無しさん** · 2019/01/03(木) 01:41:07.74

JSも、全てのコードを一つの関数の中に収めてしまって、
continue label 文や break label 文を使えば、好きなラベルに
jmp 出来る気がする。

もしそうだとすれば、関数の戻り値のラベル番号も、独自スタック
HEAP32[STACKTOP + ofs/4] に保存し、関数 call は、
JS の関数 call を使わずに、continue label / break label
を用い、関数から戻るときは、HEAP32[] から、戻り値の
ラベル番号を取得して、そのラベルに continue label または、
break label を使って jmp すれば、もっとすっきり実装してしまえる
かも知れない。

**デフォルトの名無しさん** · 2019/01/03(木) 03:01:45.80

sleepは全然複雑じゃない
CPUを例に出すのは大間違いsleepしてもその間に別の処理が走るわけではないのだから
スタックの切り替えだなんだのは必要ないしやっていない
ただ処理ループを一旦抜けてsetTimeoutで待って再開してるだけ

**デフォルトの名無しさん** · 2019/01/03(木) 05:08:32.78

> CPUを例に出すのは大間違いsleepしてもその間に別の処理が走るわけではないのだから

JavaScriptでsleepを実装すると「その間に別の処理が走ってしまうから」
それを妨害するのが大変なんでしょ

**デフォルトの名無しさん** · 2019/01/03(木) 09:28:46.87

公式のsleep(2000)の実装例
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function
てかマジでグダグダ言う前にMDNとか読めよドアホ>>770

**デフォルトの名無しさん** · 2019/01/03(木) 10:15:21.62

>>775
だからそれsleepじゃないよ

sleepはその場で停止して（他にスレッドがないならば）
他の処理に割り込まれないという特徴がある
それを実現できてない

**デフォルトの名無しさん** · 2019/01/03(木) 10:25:31.04

>>776
おまえがsleepを分かってないことは分かった

**デフォルトの名無しさん** · 2019/01/03(木) 10:48:05.95

>>770
どうもアホがいて空回りしそうだから先に言っておく

> 原則的には、関数の途中で無限ループ以外では停止する
> ことは出来ない。
これがasync/awaitで構文的に緩和されてる。
勿論それでもシングルスレッドだから、
実行中のコンテキスト（スタック等）の切換は行わなければならないが、
async/awaitをサポートした時点でそれはJSエンジン側の仕事になってる。
emscripten自体はasync/awaitの標準化以前から存在するから、
その部分が結果的にポリフィル的になっているのは致し方ない。

**デフォルトの名無しさん** · 2019/01/03(木) 10:52:03.35

>>774
妨害してないよ
正確にはビジーループに変換されるsleepもあるけど動作には関係ない
なぜなら複数スレッドの処理が実際の１スレッドで動くよう変換されるわけではないから
むしろメインスレッドをブロックしないためにsetTimeoutが使われてる
その間に別のJSが動こうとそれは世界が違う話なので関係ない

**デフォルトの名無しさん** · 2019/01/03(木) 11:20:52.45

>>778
async, await はダメだよ。
停止せずに素通りしてしまうから。
戻ってくることは出来るけど、async 修飾したその関数にだけしか
戻って来れないので、sleep には使えない。

**デフォルトの名無しさん** · 2019/01/03(木) 11:27:05.78

>>780
お前が馬鹿だということは分かった
つかマジな話、お前らsleepを全く理解してないな

**デフォルトの名無しさん** · 2019/01/03(木) 11:37:39.37

ただそれ以前に、emscriptenは要するにC++→JS変換してくれるわけで、
sleepも当然サポートされていてそれなりに変換されてるだけだろ。

馬鹿なら馬鹿なりにそれを有り難く使えばいいだけだと思うが。
お前らのオレオレ実装よりは数段マシだと思うぜ。

**デフォルトの名無しさん** · 2019/01/03(木) 15:03:04.04

現実世界では、天才だといわれてきたが。

**デフォルトの名無しさん** · 2019/01/03(木) 16:46:36.63

いくら天才でも正しい前提知識を持ってないんじゃ仕方ない

**デフォルトの名無しさん** · 2019/01/03(木) 17:47:55.93

10000ms指定したらUIが10秒止まるクソ関数が作れるなんて聞いた事ないし
簡単に作れちゃったら困る

**デフォルトの名無しさん** · 2019/01/03(木) 18:21:47.24

簡単に作れるけどな

**デフォルトの名無しさん** · 2019/01/03(木) 18:56:01.52

>>782
>sleepも当然サポートされていてそれなりに変換されてるだけだろ。

バグがある。

**デフォルトの名無しさん** · 2019/01/03(木) 18:56:36.55

>>786
なら、作って欲しい。

**デフォルトの名無しさん** · 2019/01/03(木) 19:11:23.28

ggrks

**デフォルトの名無しさん** · 2019/01/03(木) 19:19:13.19

>>789
何度ググっても出てこない。

**デフォルトの名無しさん** · 2019/01/03(木) 19:40:17.29

どういうときにどう上手く行かないのかを言ってくれないとな

**デフォルトの名無しさん** · 2019/01/03(木) 20:06:11.56

そんな知能なさそうだし。
sleepなんて昔から話題としては出尽くしていて、ググレばいくらでも出てくる。
それを出てこないと言いきる辺り、つまりはコードクレクレ君で、コピペプログラマ以下だろ。
(ググったコードについても読めないからコピペすら出来ない)

**デフォルトの名無しさん** · 2019/01/03(木) 21:50:51.86

また数学首席くんが妄想してんの？
いい加減自分が向いてないって気づけば良いのに。

**デフォルトの名無しさん** · 2019/01/03(木) 22:48:54.84

こいつはスルースキル特化型だな。

俺はスルースキル・モンスターと呼んでいるが、最近このタイプは増えてきている。
危険な兆候だよ。

**デフォルトの名無しさん** · 2019/01/03(木) 22:52:45.12

じゃあお前の職業は、スキースキル・ハンターで

◆QZaw55cn4c · 2019/01/04(金) 09:17:15.97

>>794
「スルースキル・モンスター」を説明してください

**デフォルトの名無しさん** · 2019/01/04(金) 09:53:39.24

canvas の width や、グラフィック描画時の座標指定が、ブラウザの拡大率を
100%にしても、実際の画面のピクセル座標とは違っている。

<meta name="viewport" content="width=device-width, initial-scale=1">

を指定しても駄目だった。ぴったり同じにする方法ある？

**デフォルトの名無しさん** · 2019/01/04(金) 15:04:48.00

Chromeで拡大率100%の時、HTML 内の JS で、
value = window.devicePixelRatio;
console.log( "window.devicePixelRatio = " + value );
とすると、1.25 と表示される。
HTML の <div> tag の style を css で width: 100px; などとしたものを
Chrome で 100% の拡大率で表示したものを、ScreenShot をとって調べてみると、
125 dot 程度になっていた。

使用OSは、Win7 で、確か、文字を大きめに表示する設定にしてある。

**デフォルトの名無しさん** · 2019/01/04(金) 15:50:35.77

canvasの内部的な座標とcanvasのelement的な座標の比で調整するのじゃダメなんかい

**デフォルトの名無しさん** · 2019/01/04(金) 16:11:48.10

そもそもピクセルが正方形とも限らないわけで
デバイス、ドライバ、OSが順に抽象化したあと更にブラウザが抽象化したものが
Webアプリからは見えるのでそこをどうこうしようとするのはナンセンス

それでもどうしてもどうにかしたいというのなら
devicePixelRatioやrenderedPixelWidthを元にその文だけCanvasをCSSで縮小してみるとか

**デフォルトの名無しさん** · 2019/01/04(金) 16:50:58.90

色々試して、以下のようにすると、ほぼ 1px = 物理 1 pixel になった。
こんな方法でよい？

<style>
#div0 {
transform: scale(0.8); // 1.0 / 1.25
transform-origin: top left;
}
</style>

<div id="div0">
実際に表示したいタグ達
</div>

**デフォルトの名無しさん** · 2019/01/05(土) 01:10:26.21

それでいいけど
単純にwidthを表示の1.25倍にしたらどうなるのかな

**デフォルトの名無しさん** · 2019/01/05(土) 08:40:55.94

canvas の putImageData() で、引数が7つのタイプの場合の引数の意味が分からない。

context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

http://www.webtech360.com/detail/html5-canvas-draw-pictures-and-manipulate-pixels-3555.html

↑の図で合ってる？日本人の感覚だと、この図では、「dirtyAaaa」という言葉
と合ってるようには思えないんだけど。

**デフォルトの名無しさん** · 2019/01/05(土) 09:24:30.49

>>802
実験してみると、
HTML tag の width と、css(style) の width の二種類の意味が違っていて、
<canvas width=aaa style="width:bbb;">
とした場合、
　aaa = 論理的な横方向のドット数;
　bbb = 物理的な横方向のドット数;
の意味になるらしく、canvas の色々な描画関数で渡す x 座標を log_x とすると、
原則的には、
　　phys_x = canvas_phys_left + (log_x / aaa * bbb);
のように座標変換された後に画面に表示されるらしい。
JavaScript だと、
　canvas = (getElementById("ID名") などで DOM 要素を取得);
　canvas.width = 論理的な横方向のドット数;
　canvas.style.width = 物理的な横方向のドット数;
と書けるようだ。

ただし、>>801 のやり方だと、canvas の左上の座標が(0,0)で
ない場合にも、canvas の左上の位置を自動的に調整(縮尺)してくれるが、
今回のやり方だと、それは自分で調整しなくてはならない。

**デフォルトの名無しさん** · 2019/01/05(土) 09:26:31.72

>>804
あ、確か逆さまだったと思う。
だから、
誤： <canvas width=aaa style="width:bbb;">
正： <canvas width=bbb style="width:aaa;">

が確か正しい。

**デフォルトの名無しさん** · 2019/01/05(土) 09:27:38.04

>>805
だから、確か、
canvas.width　　　= 物理的な横方向のドット数;
canvas.style.width = 論理的な横方向のドット数;

だったと思う。

**デフォルトの名無しさん** · 2019/01/06(日) 18:47:08.41

つチラ裏

**デフォルトの名無しさん** · 2019/01/06(日) 22:56:13.91

webページでフォーム入力した項目を確認のために埋め込まれたような形で一旦表示させたいんですけど、こういうのはJavaScriptで実装するんですかね？
どうググったら、ここら辺の情報取得できますかね？

自分、pythonしかできなくて、フロントエンド的なところは全然わからないです。。。

**デフォルトの名無しさん** · 2019/01/06(日) 23:16:51.05

javascript使う
vue.jsとか使えば楽

**デフォルトの名無しさん** · 2019/01/06(日) 23:31:44.52

>>808
そもそも何を表示するの？
フォーム入力した項目って最初から見えてるだろ。

**デフォルトの名無しさん** · 2019/01/06(日) 23:38:17.77

>>808
まず現状フォームをどうやって表示してるのか
サーバーサイドPython？
入力フォームなら値をPOSTで受け取ってるだろうから
確認画面を生成するだけなのでは

**デフォルトの名無しさん** · 2019/01/06(日) 23:53:49.41

フロントでvaildateしてユーザーに伝えたいという意味と解釈したけど違った？