laravelの非同期処理でDELETE・PATCH・PUT😗する方法。 #php #code

2023.01.27

Logging

おはようございます、華の金曜日ですね~🙄。けんすうさんは一体何歳なんだろか?自分より若いのかな?それとも・・・・。

【後藤達也は椅子にハマれ】けんすうが説くお金の使い方【と、起業家ひろゆきの素顔】
【後藤達也は椅子にハマれ】けんすうが説くお金の使い方【と、起業家ひろゆきの素顔】

さて、今日は久しぶりにlaravelの非同期処理でDELETE・PATCH・PUTをする方法を記載しておきます。大体の人が知っているもしくは非同期処理でRESTの設計を使わないよという方もいるかもしれない。ですが、あまり遷移させたくない、遷移させると余計にコードを書かないといけない等、そういう場面があると思います。是非、そういう時は非同期処理でDELETE・PATCH・PUTして上げてください。

因みにこの頃、知ったのですがBootstrapからtailwindへ鞍替えする人が続出してダウンロード数が逆転した話を知りました。web業界に限らずですが隅から隅まで覚えている人は凄いなと関心します。自分は、どうしてもググったりドキュメントでググったりします。

document.getElementById('btn').addEventListener('click', () => {
    const formData = new FormData();
    formData.append('id', document.getElementById('id_number').value);
    formData.append('_method','PUT');//DELETE・PATCH・PUT

    fetch('ajax-test', {
        method: 'POST',
        headers: {'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content}, // CSRFトークン対策
        body: formData
    })
        .then(response => response.json()) 
        .then(res => {
            console.log('res: '+res[0].id);
            document.getElementById("result").innerHTML = "ID番号" + res[0].id + "は「" + res[0].name + "」です。価格は「" + res[0].price+"円」です。";
        })
        .catch(error => {
            console.log(error); // エラー表示
        });
});

タグ

addEventListener, ajax-test, catch, document.getElementById, document.querySelector, fetch, formData, formData.append, getElementById, headers, innerHTML, Laravel, METHOD, quot, res, response, response.json, tailwind, then, ,

サイト内の文字をハイライトする一万円の案件は。 #案件

2022.12.18

Logging

おはようございます、笑う門には福来る😆この記事は月曜日の朝に書いたものです💦。

先日、Chromeの拡張機能でサイト内の文字をハイライトする一万円の案件を募集しておりました。この一万円の案件は妥当な金額なのかが“????”。例えば人工知能をゴリゴリと使えるスーパーエンジニアにとっては朝飯前の案件だと思いますが、見習いエンジニアにとっては難しい案件なのかもしれない。

この一万円という金額は人によって高くもなるし安くもなるかもしれないです。要するに見習いエンジニアが3日間かけて納品した場合とスーパーエンジニアがものの数秒で納品した場合を日本の平均時給で考えると一方は黒字でもう一方は赤字になる。

そう考えると今回の文字をハイライトするという案件は適正価格なのかもしれない。

因みにこの文字をハイライトするChromeの拡張機能はもう存在しており無料で公開されている。そう考えると一万円も貰えるというのはラッキーなのかも知れない。

尚、文字をハイライトするコードは下記により参照ください(デモページはこちら)。

let funs = {
    init: { htmlcode: document.getElementById("vals").innerHTML },
    highlight: function (e) {
        document.getElementById("vals").innerHTML = funs.init.htmlcode;
        if (!String(this.value).match(/[a-zA-Z]/) && this.value) {
            document.getElementById("vals").innerHTML = String(funs.init.htmlcode).replace(new RegExp(this.value, 'g'), '<span style="color:red">' + this.value + '</span>');
        }
    },
    inputevent:function(){
        document.getElementById("txt").addEventListener("input", this.highlight);
    }
};
funs.inputevent();

タグ

a-zA-Z, addEventListener, document.getElementById, function, funs.init.htmlcode, getElementById, gt, highlight, htmlcode, init, innerHTML, inputevent, lt, match, quot, replace, string, this.highlight, this.value, 朝飯前,

asyncとawaitとthenの関係と使い道。

2021.01.27

Logging

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&quot, document.getElementById, gt, innerHTML, lt, quot, quot;btn, quot;btn&quot, quot;text, resolve, setTimeout, then, 撲滅, ,

javascriptのアロー関数ってアレだな。

2020.05.20

Logging

javascriptのアロー関数ってアレだな、無名関数の省略形だと思ったら良いです。アロー(arrow)=矢って意味、まんまだよね。日本語に直訳すると矢関数って意味になるのかな・・・。矢関数って響きが良くないのでアロー関数って読んでいるだけだと思うのです。英語のわからない自分は矢関数で良いじゃないと思ったりするわけです。

例文:載せときます、、比較的新しいブラウザなら動作します。

	const test = (e)=>{
		var view = document.querySelector("#view1");
		view.innerHTML = e.target.value;
	};
	const input = document.querySelector("#t");
	input.addEventListener("input",test);

一応、デモサイトのリンクも載せときますので、動作確認してみてくださいな。
尚、今回は純正なjavascriptだけで記載しました。これから極力、純正で純粋なjavascrpitで書いていこうと思います、いまのWEBの流れはそうなんだって。そしてTypescriptとかが今後来るみたいに言われていますよね。

https://zip358.com/tool/demo15/

タグ

, addEventListener, arrow, const, document, gt, innerHTML, input, javascript, querySelector, quot, target, test, value, var, view, アレ, アロー, ブラウザ, まんま, 例文, 動作, 意味, 日本語, 無名, 直訳, 省略形, , 自分, 英語, 関数,

javascriptの並列処理について

2018.02.13

Logging


 
javascriptの並列処理についてdemoサイトを作りましたので
参照し見てください。尚、コードは下記になります。
注意点とかは下記の画像を参照してみて下さい。
使用してわかったことは落ちないというのは良いことだということ。
落ちても表面上はエラー警告などはないので、結構便利なんじゃないだろうかという事です。
ちなみにこちらがデモサイトのリンクになります。
https://zip358.com/tool/worker/

<!DOCTYPE html>
<html>
    <head>
        <title>worker</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script>
            var wkr = new Worker("worker.js");
            wkr.onmessage = function(d) {
                document.getElementById("wkr").innerHTML = document.getElementById("wkr").innerHTML +  d.data + "<br>";
            };
        </script>
    </head>
    <body>
        <div id="wkr">
        </div>
    </body>
</html>
var e = 0;
function en(){
    e = e + 1;
    postMessage((e*3.14));
    if(e < 1000)en();
}
en();

 
 

タグ

AM, body&gt, device-width, div&gt, DOCTYPE html&gt, document.getElementById, function en, head&gt, initial-scale, innerHTML, meta charset, meta name, new Worker, script src, script&gt, title&gt, var wkr, wkr.onmessage, worker.js, worker&lt,