非同期処理で並列処理。お腹いっぱい #jscode
2023.06.10
おはようございます。１８時でも明るくていつカーテンを閉めればよいのか分からないです。さて、非同期処理で並列処理のコードを一週間前にＴｗｉｔｔｅｒで呟いたので、ソースコードをこちらにUPします。非同期処理で並列処理を行うのは、こういう感じだということを理解できると思います、あまり非同期処理で並列処理を行う機会なんて無いかもしれないですが、こういう事が出来るんだということを頭の片隅に置いとくと良いかもです😌。
がっちり覚えとくのも良いですけど、曖昧に覚えているのも悪くないと思います。因みに自分はこういう事は出来るだろうと自分は思っているタイプです。自分が考えていることぐらい頭の良い人は考えているはずなので、出来るだろうという事から始まって大体、ググったりChatGPTに聞くと最適解を教えてくれます。そういう訳でサンプルコードとサンプルサイトのリンクを貼っときます。
https://zip358.com/tool/demo76
let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log("test1");
resolve(1);
}, 15);
});
let p2 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log("test2");
resolve(2);
}, 11);
});
let p3 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log("test3");
resolve(3);
}, 16);
});
let p4 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log("test4");
resolve(4);
}, 1);
});
let p5 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log("test5");
resolve(5);
}, 9);
});
(async()=>{
let a = await Promise.all([p1, p2, p3, p4, p5]);
console.log(a);
})()
タグ
A`, async, await Promise.all, ChatGPT, console.log, gt, new Promise, quot;test1", quot;test2", quot;test3", quot;test4", quot;test5", reject, resolve, setTimeout, Twitter, いつカーテン, 並列処理, 最適解, 片隅,
Twitterで自動投稿する雛形-#脱TwitterAPI。
2023.02.05
おはようございます、この記事はQiitaに投稿したもののと同じ内容になります。
エンジニアに悲報としか言えない今回の発表・イーロン・マスク氏って👹
２月９日でTwitterAPIが無料で使えなくなるのでその対応をしないといけない。
そんなエンジニアさんもいらっしゃると思います。
APIサービスに月、１万円払えないという会社は中小企業には多いと思います、それで取引を解消される企業とかもあったりするかも。
そんな方は一個VPSサーバーを構えてNodeJSをインストールして下記の雛形コードを元にゴニョゴニョしたら何とかなるかも知れません。🫠
因みにこれはchatGPTとの合作だったりします。
- いつまで動作するかは保証しません。尚、これは雛形ですので、これに細工をして常時接続で
- TweetやRTするようにコードを変更しないといけません。もしくは時間を置いてTweetするなど。
node sample.js 'username' 'password' 'テスト投稿'const puppeteer = require('puppeteer');
const [username, password ,tw] = process.argv.slice(2);
(async () => {
const browser = await puppeteer.launch({ headless: true });
const page = await browser.newPage();
await page.goto('https://twitter.com/login');
await page.waitForTimeout(3000);
await page.waitForSelector('input[autocomplete="username"]');
await page.type('input[autocomplete="username"]', username);
const divs = await page.$$('div[role="button"]');
await divs[2].click();
await page.waitForTimeout(3000);
await page.waitForSelector('input[autocomplete="current-password"]');
await page.type('input[autocomplete="current-password"]', password);
await page.waitForSelector('div[data-testid="LoginForm_Login_Button"]');
await page.click('div[data-testid="LoginForm_Login_Button"]');
await page.waitForNavigation();
console.log('Login successful');
await page.waitForTimeout(3000);
await page.waitForSelector('div[data-testid="tweetTextarea_0"]');
await page.click('div[data-testid="tweetTextarea_0"]');
await page.waitForSelector('div[data-testid="tweetTextarea_0"]');
await page.type('div[data-testid="tweetTextarea_0"]',tw);
await page.waitForTimeout(3000);
await page.waitForSelector('div[data-testid="tweetButtonInline"]');
await page.click('div[data-testid="tweetButtonInline"]');
console.log('Tweet posted');
await browser.close();
})();
タグ
async, autocomplete, await browser.close, await browser.newPage, await page.goto, await page.waitForSelector, await page.waitForTimeout, ChatGPT, const, data-testid, div, headless, input, nodejs, password, qiita, require, tw, TwitterAPI, username,
JSのPromiseとawaitってこういう事なんだよね。理解した！！( ･ิω･ิ)
2022.04.29
おはよう御座います。
この頃、JSを使う機会が増えてきています。巷ではReact.jsなどやVue.jsなんかが人気ですよね。またnext.jsなんかも出来れば転職活動に有利です。でもそんなフレームワークを勉強するまえにJavaScriptの基礎が出来ていないといけないと思っています。ネイティブでゴリゴリ書ける人であれば、何処へ行ってもやってけると思っています。
"use strict";
const main = (a,b,c)=>{
return new Promise ((resolve)=>{
console.log(a,b,c);
b++;
resolve({a:a,b:b,c:c});
});
}
(async()=>{
await main("A1",1,"C1").then((val)=>main(val.a,val.b,val.c)).then((val)=>main(val.a,val.b,val.c)).then((val)=>main(val.a,val.b,val.c));
// main("A1",1,"C1").then((val)=>main(val.a,val.b,val.c)).then((val)=>main(val.a,val.b,val.c)).then((val)=>main(val.a,val.b,val.c));
console.log("fin");
})();Promiseとawaitとかの使い方はこんな感じです😀、このコードでは重たい処理を書いているわけではないけど、非同期通信処理チェーンで繋ぐとどんな所で使えば良いのか分かるかなって思います。要するに順番に非同期通信処理をしたい時に役に立ちます。このソースコードの場合、awaitしなくても良いですがね・・・。awaitを付けると処理後に次のコードが処理されます。付けない場合は同時並行的に処理されます。
サンプルコードはこちらから閲覧ください（検証）ませ！！
タグ
１, async, await, console, const, gt, javascript, JS, log, main, new, NEXT, Promise, quo, quot, react, resolve, return, strict, use, vue, なん, なんか, ネイティブ, フレームワーク, まえ, 事, 人, 人気, 何処, 勉強, 基礎, 巷, 有利, 機会, 活動, 理解, 転職, 頃,
JavaScript(js)でcsvファイルを読み込み自動計算する(合計sum)
2021.11.17
謎の訪問者さんが検索窓を使用して何度かググっているので要望にお応えJavaScript(js)でcsvファイルを読み込み自動計算する(合計sum)というものを作りました。以前、csvを元にテーブルを作成するものを作っていました、ソースコードはそれを応用して作っています。実際、数万行に渡るファイルを自動計算するには、かなり爆速のパソコンが必要になります。このプログラムで耐えれるのは精々、1,000行あたりだと思います。
過去のコードと今回のサンプルデモのリンクを貼っときます。
どうぞご自由にお使いください。
https://zip358.com/tool/demo47/
"use strict";
var csv = {
load:async function(filename,id){
const responseFile = await fetch(filename);
const result = await responseFile.text()
let separate1 = /\r\n/;
let separate2 = ",";
let data = (result.split(separate1)).map(function(value){
return (value.split(separate2)).map(function(value1){
return value1;
});
});
let sum =[];
for (const usedata of data) {
(usedata).map(function(val,index,array){
sum[index] = (isNaN(parseInt(sum[index]))?0:parseInt(sum[index])) + parseInt(array[index]);
});
}
console.log(sum);
document.getElementById(id).innerHTML = sum.join(",");
return "OK";
}
};
csv.load("math.csv?", "sum");タグ
000, １, async, await, const, CSV, fetch, filename, function, ID, javascript, JS, load, quot, res, responseFile, strict, sum, use, var, お応え, かなり, コード, ご自由, サンプル, ソース, それ, テーブル, デモ, パソコン, ファイル, プログラム, もの, リンク, 今回, 以前, 何度か, 作成, 使用, 元, 合計, 実際, 必要, 応用, 数万, 検索窓, 爆速, 精々, 自動, 要望, 計算, 訪問者, 謎, 過去,
asyncとawaitとthenの関係と使い道。
2021.01.27
asyncとawaitとthenの関係と使い道は？まず、関係性はこの3つでまぁ一つの役割を果たすと考えても良いかもしれません。どんな時に使うかは、例えば、innerHTMLに計算した値を渡したいとか…。いや違うな。同期処理として使うのが正解ですね。尚、asyncは非同期でawaitで非同期通信を同期処理とする。
ちなみにIE11では動かない処理なので氣をつけてご使用ください。今どき、IE11なんてと思うかもしれないけど、使っている人がいるから・・・。
document.getElementById("btn").addEventListener("click", async (e) => {
test1();
test2();
test3();
await test1();
await test2();
await test3();
});
function test1() {
return new Promise(resolve => {
setTimeout(() => {
console.log("btn = 1");
resolve('1');
}, 3000);
});
}
function test2() {
return new Promise(resolve => {
setTimeout(() => {
console.log("btn = 2");
resolve('2');
}, 2000);
});
}
async function test3() {
return new Promise(resolve => {
setTimeout(() => {
console.log("btn = 3");
resolve('3');
}, 100);
});
}
IE11を使っているパターン、例えば社長や上司がシニア世代だったりするとIE11をいまだに使っていたりする。そもそもWindows10にIE11がインストールされている時点で悪だ・・・と思う開発者もいるはずです。そろそろマイクロソフト、IE11なんてものを強制的に削除するようなバージョンアップをして戴きたいと思ってます。それぐらい問題だと。あと、IE11で引っかかったことがあります。新しいブラウザでは下記のコードをHTMLに記入すると察してくれてjsファイルを読み込んでくれるが、IE11は違うのだ。
<script src="./assets/js/common.js"></script>これじゃ読み込んでくれない。厳密に書かないとファイルを読み込んでくださらない。やっぱ早くIE11の撲滅を願う。
<script type="text/javascript" src="./assets/js/common.js"></script>タグ
'src', addEventListener, assets, async, await, await test, common.js", document.getElementById, gt, innerHTML, lt, quot, quot;btn, quot;btn", quot;text, resolve, setTimeout, then, 撲滅, 氣,
demo23、javascriptの非同期同期処理?
2020.11.18
今日はJavaScriptで非同期、同期処理のことに付いて考えてみた。関数を呼び出して返却の値を変数に渡す処理を作って頂けると非同期処理と同期処理の違いがわかるかと思います。例えばこういうJSの処理があるとします。
document.getElementById("btn").addEventListener("click", async (e) => {
test1();
test2();
test3();
await test1();
await test2();
await test3();
});
function test1() {
return new Promise(resolve => {
setTimeout(() => {
console.log("btn = 1");
resolve('1');
}, 3000);
});
}
function test2() {
return new Promise(resolve => {
setTimeout(() => {
console.log("btn = 2");
resolve('2');
}, 2000);
});
}
async function test3() {
return new Promise(resolve => {
setTimeout(() => {
console.log("btn = 3");
resolve('3');
}, 100);
});
}こちらの処理を試すと結果、このような内容がデバックモードで表示されます。予想通りの結果が返ってきましたか？それとも予想外の結果が返ってきましたか？
asyncが付いていてawaitがついてない場合とついている場合とでは違いの差がわかるかと思います。いろいろと試してみると非同期処理の応用が出来るかと思います、逆に言えば上手く非同期処理を使いこなすことが出来るとコードが短縮出来たり、効率的に回せるのではないかと思います。自分もこれらを使っていろいろと作ってみたいですね(´Д｀)。因みに今回、Promiseを簡略化したパターンでコードを書いています。
尚、Demo23にはデモコードが存在しますので動作を検証してみてください。
https://zip358.com/tool/demo23/
タグ
addEventListener, async, async function test, await, await test, console.log, document.getElementById, function test, JS, Promise, quot, quot;btn, quot;btn", quot;click", resolve, setTimeout, デバックモード, 変数, 返却, 関数,
JavaScriptのPromise例えが分からない人のために。
2020.06.06
自分は『Promiseってなんやねん、わからんわ。』という人でした。皆さん賢いので複雑怪奇なコードで教えてくれていて…わかんない。
Promiseって非同期処理にするための道具です。Promiseって書いてその中に非同期処理の内容を書いてあげる。値を戻したい場合は命名した名前のカッコの中に値を返してあげれば良いが！！、どうも渡せる値は一つだけなのだ。
ちなみにthen（その後）で、非同期処理が終わった後にする処理が書けるですね(´・ω・`)。thenの中に非同期処理の値も返ってくる‥但しひとまとめで、、そんだけの話。またエラーになった時の処理も対応できるってさ…、そしてチェーン（数珠繋ぎ）の様に書くことも可能です、ここではそれらは割愛しますね?。
ちなみに最初、asyncとawaitと混合していて悩んでおりました。asyncとawaitは対になっていると同じような感覚でPromiseとthenは対になっていると考えてください。あまり複雑怪奇に考えずサンプルコードを動かして出来るできないを判断した後に賢い人が書いたリファレンスなどを読むことをオススメします。
最後に単純なソースコードとコンソールの結果を載せときますね。
"use strict";
var a = 0;
const q1 = new Promise((zaru)=>{//zaru...名前付けは何でも良い（予約されているものでなければ
a++;
zaru(a + "1..");//データをまとめて返す
});
const q2 = new Promise((zaru)=>{
a++;
zaru(a + "2..");
});
const q3 = new Promise((zaru)=>{
zaru("3~~~~n");
});
const qdaaaaaaaa = new Promise((zaru)=>{
zaru([1,2,3,"Dahahaha!!"]);
});
Promise.all([q1,q2,q3,qdaaaaaaaa]).then((val)=>{
console.log(val);
}
);
qdaaaaaaaa.then((val)=>{
console.log(val);
});
Array(4) [1, 2, 3, "Dahahaha!!"]
move.js:26
length:4
__proto__:Array(0) [, …]
0:1
1:2
2:3
3:"Dahahaha!!"
Array(4) ["11..", "22..", "3~~~~n", Array(4)]
move.js:21
length:4
__proto__:Array(0) [, …]
0:"11.."
1:"22.."
2:"3~~~~n"
3:Array(4) [1, 2, 3, …]
length:4
__proto__:Array(0) [, …]
0:1
1:2
2:3
3:"Dahahaha!!"タグ
async, await, javascript, Promise, then, エラー, かっこ, コード, ここ, こと, それら, そん, ため, チェーン, なん, ひとまとめ, 一つ, 中, 人, 但し, 値, 内容, 処理, 割愛, 可能, 同期, 名前, 命名, 場合, 対, 対応, 後, 感覚, 数珠繋ぎ, 時, 最初, 混合, 皆さん, 自分, 話, 道具,