同期 | On the ghost Internet

今の今まで間違った認識でいた、やばぁ．asyncとawaitとPromise

2024.08.20

おはようございます．今の今まで間違った認識でいた、やばぁ．asyncとawaitとPromiseの関係．asyncは非同期、awaitは同期（処理待ち）だと思う．ここでasyncした関数を取得するにはawaitして取得するだけで良いみたい．そうPromiseは出番なくて良いみたい😱．

例文コードを書いていきます．まずは非同期処理の場合です．

async function example1(a){
    if(Number.isInteger(a)){
        return a;
    }
    throw new Error('wow');
}

example1(123).then(d=>console.log(d)).catch(e=>console.log(e));
example1('abc').then(d=>console.log(d)).catch(e=>console.log(e));

こんな感じに書けば良いだけ．．．．

次に処理待ちの場合はこんな感じです．

async function example2(a){
    if(Number.isInteger(a)){
        return a;
    }
    throw new Error('wow');
}
async function example3() {
    let result = await example2(123).then(d=>d);
    document.body.textContent = result;
}
example3();

async function example4() {
    let result = await example2('123').then(d=>d).catch(e=>e);
    document.body.textContent = result;
}
//example4();

非常にシンプルなコードです．こんな感じで取得することが出来るからPromiseを使ったコードを見なくなったのですね😁．

もっと詳しく知りたい方は下記の記事を参考にしてみてください．

https://qiita.com/soarflat/items/1a9613e023200bbebcb3

明日へ続く．

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

投稿日時 2024年08月20 06:00日

タグ

async function example, asyncとawait, await, await example, body.textContent, catch, console.log, example, example1, example3, example4, if, let result, Number.isInteger, Promise, result, then, 出番, 同期, 関数,

３０万件のデータを扱っている方の話を聞いて一瞬😱となる。 #laravel #Queue #worker #jobs

2022.12.01

Logging

おはよう12月!!。皆さんおはようございます。今日から寒くなるそうですね。

先日、面談の中で３０万件のデータを扱っている方の話を聞いて一瞬尻込みしましたが、自分でもその処理を捌くことが出来そうだなと思ったので、ダミーデータを作って今月中に捌いてみようと思います。なお、ローカルサーバーを使用して捌くのでレンタルサーバーやクラウドサーバーでメモリリークなんかで落ちたりしたらごめんなさい🙇。

因みに３０万件のデーターをどう捌いているかといえば、非同期処理(Queue)で捌いているとの事。フレームワークはLaravelを使用し、非同期処理はララベルの機能であるキューを使用してバックエンドで処理を立ち上げているとの事。要は個々プロセス複数立ち上げて並列処理で動かすという事です、プロセスを立ち上げ過ぎたら、メモリ食いすぎてサーバー事態が落ちる可能性があるので別サーバーで動かすのが理想ぽっい、その場合はコネクションの設定してあげないといけない事やプロセスをどれぐらい立ち上がると良いのかなどの設定が必要みたいですね。

php artisan queue:table
php artisan migrate

ともあれ自分でダミーデータを用意して試してみないと感覚が掴めないし、実際上手くいくかなどが分からないので試してみます😳。

明日、１万件のダミーデーターを複製（コピペ）して30万件のエクセルファイル作る方法を記載します。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

投稿日時 2022年12月01 06:00日

タグ

12, 30, jobs, Laravel, Queue, worker, エンド, キュー, クラウド, こと, サーバー, ダミー, データ, データー, バック, フレームワーク, プロセス, メモリ, ララベル, リーク, レンタル, ローカル, 一瞬, 万, 並列, 中, 事, 事態, 今日, 今月, 使用, 個々, 先日, 処理, 動, 可能性, 同期, 方, 機能, 皆さん, 自分, 複数, 要, 話, 面談,

htmlとcssとphp-初学非同期処理とおまけ-No.3

2022.11.14

Logging

おはようございます。月曜日の朝ですね‥お仕事探しは続いています。

さて、非同期処理とは何かと問われると詰まりますが・・・。いつ結果を返してくれない処理といえば良いのでしょうか。じゃ同期処理はといえば仕事が終わるまで次の仕事を進めない事といえば良いのかな🤔、教えるのが下手なのでぐぐってみてください。

document.querySelector(".btn").addEventListener("click", () => {
    let p = [document.querySelector("[name='name']").value, document.querySelector("[name='text']").value];
    [...document.querySelectorAll(".put")].forEach((elm, index) => {
        elm.innerText = p[index];
    });
    document.querySelector("#box2").style.display = "none";
    document.querySelector("#data").insertAdjacentHTML("beforeend", `<button class="btn2" type="button">非同期送信</button>`);
    document.querySelector(".btn2").addEventListener("click", async () => {
        //submit code
        let url = "./submit.php";
        let data = (() => {
            return ([...document.querySelectorAll(".put")].map((elm, index) => {
                return "test" + index + "=" + elm.innerText;
            })).join("&");
        })();
        const options = {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                "Content-Length": data.length,
                'Accept': 'application/json'
            },
            body: data //JSON.stringify(data)
        };
        await fetch(url, options).then(response =>
            response.json()
        ).then(resultdata => {
            document.getElementById("view").insertAdjacentHTML("beforeend", resultdata.test0 + "," + resultdata.test1);
        }).catch(error => {
            console.log(error);
        });
    });
});


function imgchg(imagename){
    document.body.setAttribute("style","background-image: url(./assets/images/" + imagename + ".jpg");
}

ぐぐると自分言っていた意味がなんとなく分かるかと思います。ちなみに非同期動画（youtube）のおまけとして、背景画像を変える処理のソースコードを書いています。プログラムコードとしては３行ですが、初学者の方はこの３行のソースコードの方が面白いのかもしれません。自分が書いたソースコードを所々、変更して動かしてみてください。そうすることで、徐々にコードの意味が理解してくると思います。

追伸：サンプルサイトの動画は少しお休みします()？

https://358tool.com/sample-site/

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

投稿日時 2022年11月14 06:00日

タグ

３, 39, addEventListener, btn, click, css, document, gt, html, let, name, no, php, querySelector, querySelectorAl, quot, Text, value, いつ, おまけ, お仕事, 事, 仕事, 何, 処理, 初学, 同期, 月曜日, 朝, 次, 結果,

POSTとGETの考え方について伝えている動画。 #以心伝心

2022.11.12

Logging

おはようございます、11月なのに寒くないって不思議です😗温暖化。

さて、POSTとGETの考え方について無音声（音楽あり）で伝えている動画です、以心伝心で意味が通じると良いですが、それではブログを書いている意味がないので要点だけ解説します。POSTとGETとは、インターネット上でデータの送信を行うのに使用します。POSTの利点はデータを隠して送れることと、比較的に重いデータも送れることにあります。ではGET送信の利点は、SEOに有利と言ったところでしょうか。

htmlとcssとphp-初学POSTとGETの考え方-No.2

今回、POST送信とGET送信を行い、PHPのプログラムでPOSTとGETを受信する方法を動画で伝えています。次回は非同期処理を使用して送受信を行う方法をプログラムで書いていきます。

HTMLとPHPプログラムは下記のソースを参照下さいませ🙇。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo site</title>
    <style>
html {
    width: 100vw;
    height: 100vh;
}

body {
    background-color: rgb(0, 0, 0);
    color: aliceblue;
    background-image: url(./assets/images/aig-mid22910-120-xl_TP_V.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

div.box {
    border-color: aliceblue;
    border-style: inset;
    position: absolute;
    width: 300px;
    height: 450px;
    color: white;
    border-radius: 1em;
    padding: 1em;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    /* background-color: #ffffff80; */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    overflow-wrap: break-word;
    text-align: center;
}

div>form>p {
    font-weight: bold;
    margin: 13px;
}

input {
    opacity: 0.5;
}

textarea {
    opacity: 0.5;
}

button {
    padding: 5px;
    border-radius: 1em;
    border-style: solid;
    border-color: aliceblue;
    background-color: aliceblue;
    color: rgb(0, 0, 0);
}
button:hover{
    border-color: rgb(255, 255, 255);
    border-style: inset;
    background-color: rgb(27, 76, 119);
    color: aliceblue;
}
.put:nth-child(2){
    overflow: auto;
    height: 120px;
}
    </style>
</head>
<body>
    <div class="box">
        <div id="box2">
            <form action="submit.php" method="post">
                <p>名前:<input type="text" name="name"></p>
                <p><textarea name="text" id="" cols="30" rows="10"></textarea></p>
                <p><button class="btn" type="submit">確認</button></p>
            </form>
        </div>
        <div id="data">
            <p class="put"></p>
            <p class="put"></p>
        </div>
    </div>
    <script src="./assets/js/main.js"></script>
</body>

</html>

<?php
var_dump(xss_d($_POST));
print(xss_d($_POST["name"])."<br>");
print(xss_d($_POST["text"])."<br>");

function xss_d(mixed $val){
    if(!isset($val))return false;

    if(is_array($val)){
        foreach ($val as $key => $value) {
            $val[$key] = strip_tags($value);
            $val[$key] = htmlspecialchars($val[$key],ENT_QUOTES);
        }
    }else{
        $val = strip_tags($val);
        $val = htmlspecialchars($val,ENT_QUOTES);
    }

    return $val;

}

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

投稿日時 2022年11月12 06:00日

タグ

11, 2, css, DOCTYPE, GET, html, lt, no, php, POST, SEO, インターネット, こと, ソース, データ, ところ, ブログ, プログラム, 下記, 不思議, 今回, 以心伝心, 使用, 処理, 初学, 利点, 動画, 参照, 受信, 同期, 意味, 方法, 有利, 次回, 温暖化, 考え方, 要点, 解説, 送信, 送受信, 音声, 音楽,

Qiitaのfeedを取得して表示するだけのコード非同期編？ #phpcode

2022.11.06

Logging

おはようございます。昨日の続きのお話ですコードは金曜日に書きました😗。

動画を見ていただければわかるかと思いますが即興で書いたコードです、最後の最後でエラーってる！？ところなんかも編集していない所が伝わってくるかと思います。ちなみに画質HDのフル画面で見ないとコードは見えないかなって思います。

任意のユーザーのQiita、feedを取得して表示するだけのコード😋非同期編？

音声も今後入れていくかもしれません。

任意のユーザーのQiita、feedを取得して表示するだけのコード😋非同期編？ https://t.co/69VMhbPyrr @YouTubeより
— 田岡寿章@taoka_toshiaki🦌 (@taoka_toshiaki) November 4, 2022

任意のユーザーのQiita、feedを取得して表示するだけのコード😋非同期編？

任意のユーザーを増やしたい場合はmain.jsの先頭行（２行目？）のqiitaIDに任意のIDを追加するだけで取得可能です。解説はなしですけど一応、何をやっているのかそれなりに、わかるように心がけたつもりです。あとは盗んで覚えてください😂。

ソースコードはこちらになります。

<?php
session_start();
$toke_byte = openssl_random_pseudo_bytes(16);
$csrf_token = bin2hex($toke_byte);
$_SESSION['csrf_token'] = $csrf_token;
?>
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        .qiita_feed-list>li {
            /* font-weight: bold; */
            color: aliceblue;
        }

        .qiita_feed-list>li>a {
            color: aliceblue;
        }

        body {
            background-color: #60b111;
        }

        .shadow-lg {
            box-shadow: 0 1rem 3rem rgba(255, 255, 255, .195) !important;
        }
    </style>
    <title>Qiita-feed</title>
    <?php
    require $_SERVER['DOCUMENT_ROOT'] . "/header_script.php";
    ?>
</head>

<body>
    <input type="hidden" id="csrf_token" value="<?= $csrf_token ?>">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1 class="text-light">Qiita-feed</h1>
            </div>
        </div>
    </div>
    <div class="container mt-2">
        <span id="view"></span>
        Copyright <?= date("Y") ?>  <a href="https://358tool.com">358tool.com</a>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
    <script src="./js/main.js?<?= time() ?>"></script>
</body>

</html>

//qiita feed
["taoka-toshiaki","mpyw","suin"].forEach(id=>{
    let data = {
        csrf_token:document.getElementById("csrf_token").value,
        feedid:[id]
    };
    let url = "./qiita-feed.php";
    qiita_feed(url,data);
});

async function qiita_feed(url, data) {
    const options = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify(data)
    }
    await fetch(url, options).then(response =>
        response.json()
    ).then(resultdata => {
        document.getElementById("view").insertAdjacentHTML("beforeend",resultdata.reshtmlcode)
    }
    ).catch(error => {
        console.log(error);
    }
    );
}

<?php
session_start();
$obj = json_decode(strip_tags(@file_get_contents("php://input")));

if (isset($obj)) {

    if (isset($obj->csrf_token)  && $_SESSION["csrf_token"] === $obj->csrf_token) {
        $str ="";
        foreach ($obj->feedid as $key => $id) {
            $str.= '
        <div class="row shadow-lg p-3 mb-5 bg-body rounded">
            <div class="col-12">
            🌿<span class="text-light">://qiita.com/' . xss_d($id) . '/feed :[引用]</span>';
            $str .= get_Qiitafeed("https://qiita.com/" . xss_d($id) . "/feed");
            $str .= '
             </div>
        </div>      ';
        }
        $res["reshtmlcode"] = $str;
        print json_encode($res);
    }
}


function xss_d(mixed $val): mixed
{
    if (is_array($val)) {
        foreach ($val as $key => $value) {
            $val[$key] = htmlentities($value, ENT_QUOTES);
        }
    } else {
        $val = htmlentities($val, ENT_QUOTES);
    }
    return $val;
}

function get_Qiitafeed(string $feedUrl): string
{
    $xml = @simplexml_load_file($feedUrl);
    if (isset($xml->entry)) {
        $str = "<ul class='qiita_feed-list'>";
        foreach ($xml->entry as $key => $val) {
            $str .= "<li><a href='{$val->url}'>" . $val->title . "</a></li>";
        }
        $str .= "</ul>";
    }
    return $str;
}

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

投稿日時 2022年11月06 06:00日

タグ

2, feed, HD, ID, JS, main, PHPCODE, qiita, qiitaID, あと, エラー, お話, コード, こちら, ソース, つもり, ところ, プル, ユーザー, 今後, 任意, 何, 先頭, 動画, 即興, 取得, 可能, 同期, 場合, 所, 昨日, 最後, 画質, 画面, 編集, 表示, 解説, 追加, 金曜日, 音声,

Qiitaのfeedを取得して表示するだけのコード。 #php

2022.11.05

Logging

おはようございます、土曜日の朝ですね😗。

今日は文化の日にQiitaにUPしたfeedを取得して表示するだけのコードを書きました。見た目はこんな感じでQiitaの雰囲気を取り入れたデザインにしています。デモ版として実際にサーバーで起動しているモノです、feedを取得しているユーザーは自分を入れて３人です。

表示する人数が多くなるとページを描画する時間が遅くなるので実質、１０人が限度かも知れないです。もし何人ものユーザーを取得したいと考えている方は表示部分と処理部分を別けて、尚且つ処理部分は非同期処理で変更することを推奨します。

尚、明日には２つに別けたプログラムコードを別記事として記載しますので、しばしお待ち下さいませ🙇。

今回のソースコードはこんな感じになってます。

<?php
    function get_Qiitafeed(string $feedUrl){
        $xml = @simplexml_load_file($feedUrl);
        if(isset($xml->entry)){
            print("<ul class='qiita_feed-list'>");
            foreach($xml->entry as $key=>$val){
                print("<li><a href='{$val->url}'>".$val->title."</a></li>");
            }
            print("</ul>");
        }
    }
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
    .qiita_feed-list > li{
        /* font-weight: bold; */
        color:aliceblue;
    }
    .qiita_feed-list > li > a{
        color:aliceblue;
    }
    body{
        background-color:#60b111;
    }
    .shadow-lg {
        box-shadow: 0 1rem 3rem rgba(255,255,255,.195)!important;
    }    
</style>
<title>Qiita-feed</title>
<?php
    require $_SERVER['DOCUMENT_ROOT'] ."/header_script.php";
?>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1 class="text-light">Qiita-feed</h1>
            </div>
        </div>
    </div>
    <div class="container mt-2">
        <?php
            $Id_List = ["taoka-toshiaki","mpyw","suin"];
            foreach ($Id_List as $key => $id) {
            ?>
        <div class="row shadow-lg p-3 mb-5 bg-body rounded">
            <div class="col-12">
                🌿<span class="text-light">://qiita.com/<?=$id?>/feed :[引用]</span>
                <?=get_Qiitafeed("https://qiita.com/".$id."/feed")?>
            </div>
        </div>            
            <?php
            }
        ?>
        Copyright <?=date("Y")?>  <a href="https://358tool.com">358tool.com</a>
    </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

投稿日時 2022年11月05 06:00日

タグ

10, 2, ３, feed, feedUrl, function, GET, lt, php, qiita, Qiitafeed, string, UP, お待ち, コード, こと, サーバー, ソース, デザイン, デモ版, プログラム, ページ, もの, ユーザー, 人数, 今回, 今日, 何人, 処理, 別記事, 取得, 同期, 土曜日, 変更, 実質, 実際, 感じ, 推奨, 描画, 文化の日, 方, 明日, 時間, 朝, 自分, 表示, 見た目, 記載, 起動, 部分, 限度, 雰囲気,

Photo by Markus Spiske on Pexels.com

デモ５５ajax=jqueryを使わずに非同期通信するのが普通に。

2022.05.03

Logging

おはようございます。

祝日が始まりましたね、お休みの方も多いかと思います。

そんな中、連休からプログラミングの勉強を始めようと考えている方もいるかと思いましたので、フロントエンドエンジニアがバックエンドエンジニアとの連携で一番初めにぶち当たる壁である、非同期通信のコードを書きました。コードをコピペして階層など合わしてご自身の実行環境で実行してみてください。この頃ではフロントエンドエンジニアの方は非同期処理でコードを書いているので、非同期という言葉を聞くことも多くなったと思います。

非同期処理は処理の結果を待たずして次の処理を実行することです、非同期通信も同じです。バックエンド側に処理を問い合わせて処理の結果は待たずして行います。結果も順番に帰ってくる訳では無いのでフロント側で処理するときに注意も必要になります。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="api">非同期通信</button>
    <script>
        document.getElementById("api").addEventListener("click", api);

        function api() {
            let data = [];
            data.push({"name":"樹龍"});
            console.log(param(data));
            fetch("./api.php", {
                method: "POST",
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body:param(data)
            }).then(
                response => response.json()
            ).then(data => {
                console.log('data', data);
            }).catch(error => {
                console.log('error', error);
            });
        }
        function param(data){
            let str = [];
            for(key in data){
                for(keyname in data[key]){
                    str.push(keyname +"="+ encodeURIComponent(data[key][keyname]));
                }
            }
            return str.join("&");
        }
    </script>
</body>

</html>

<?php
$name = htmlspecialchars(strip_tags($_POST['name']));
$response['res'] = $name;
print json_encode($response);

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

投稿日時 2022年05月03 05:33日

タグ

55, ajax, DOCTYPE, gt, html, jquery, lang, lt, quot, エンジニア, エンド, お休み, コード, こと, コピペ, ご自身, デモ, とき, バック, プログラミング, フロント, 中, 処理, 勉強, 同期, 壁, 実行, 必要, 方, 普通, 次, 注意, 環境, 祝日, 結果, 言葉, 訳, 通信, 連休, 連携, 階層, 頃, 順番,

なるほど、よくわかりました。

2021.02.22

Logging

小学生でもわかるasync/await/Promise入門【JavaScript講座】

そういう事だったんだね。いまごろ理解する、いろいろな方法で非同期処理ができるだなと、ちなみにIE11でもPromiseは使用することが出来るみたい。そのかわりライブラリを読み込む必要はあるけれど・・・。IE11を開くとエッジを使用しようと勧めてくる。そろそろIEを強制的に削除すればいいのにと思っています。IEだとjsも制限が出てくるだよね。とくにコードを書くときにグレイヴ・アクセントとかいう記号「`」が使用できないのは痛いなと思います。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

投稿日時 2021年02月22 04:08日

タグ

11, IE, JS, Promise, アクセント, いま, いろいろ, エッジ, かわり, グレイヴ, コード, こと, とき, ライブラリ, 事, 使用, 処理, 制限, 削除, 同期, 必要, 方法, 理解, 記号,

そうなんだよなぁそうなんだよ、英語がなぁ。うんうんと頷く。

2020.12.27

Logging

そうなんだよなぁそうなんだよ、英語がなぁ。うんうんと頷く。レベルになりたい。

英語ができない日本人はいっぱいいる、じぶんもその中のひとりで、全然英語ができないのだけど、コレを見ていると英語喋れてある程度、英会話や英語を読み書きができると世界は広がるだろうなと思った。とくに、ITエンジニアは英語は大事になると思う、全然出来なくても大丈夫だけど、世界は広がらないし壁ができると思っている。どんな壁かといえば変数名の名前付けから、英語のドキュメントやリファレンスを理解する速さがかけると、最初は同じスタートラインに立っていた同期ともかなり差が出る。

I will focus on making English content! 今後は英語のみで行きます Breaking the language barrier

これからは間違いなく英語が大事だと、何度も言うけれど英語は大事です。これ意識高い系というより、将来英語が分からなかったら仕事につけない時代にこのままなるだと。日本人の人口が減少していき、外国人を受け入れを続ければ結局そうなるだと思う。そして、特にITエンジニアとしては生きていくには技術的な勉強も大事だと思うけど、基となる英語は大事な要素になるし、そのうち委託するより海外から受託する側に変わることが必ず来るだろうと思います。

50 COMMON ENGLISH PHRASES | MARINA MOGILKO

いま、じぶんはどうやって英語を苦労せずに覚える良い方法はないか探しています、日本語がまぁまぁ喋ることができるのだから、英語もまぁまぁ出来るようになると思っています。「思うは招く」です。出来ると思えばそうなるだと自分は思います。

3 tips for sounding like a native speaker

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

投稿日時 2020年12月27 06:43日

タグ

IT, エンジニア, かなり, これ, コレ, じぶん, スタートライン, ドキュメント, ひとり, リファレンス, レベル, 世界, 中, 人口, 仕事, 何度, 同期, 名前, 壁, 変数, 外国人, 大事, 将来, 差, 意識, 日本人, 時代, 最初, 減少, 理解, 生, 系, 英会話, 英語, 読み書き,

わざわざ対策した、これでも。

2020.06.18

Logging

非同期通信する部分にデータ投げてアクセスカウンターをわざわざ増やしてくれる人がいたので、わざわざ対策した、これでも抜けてくるようだと違法な領域かと思います。
わざわざ対策しないといけないというのが、自分としては変だなと思うところ。
何故、そこまでするのか・・・。
意味がわからないが…。

そもそもあんぽんたんな自分に関わっても意味がないのではと思っている。トイレで目が覚めてアレ、アクセスが増えていると思って・・・。

一時間ばかり、ぼーけーってして10分ぐらい、対策用のコードを書いてバグとりして、まぁネタになるので今、ブログを書いています。

話全然変わるけど、Twitterで音声投稿が可能になるだってさってのをタイムラインで見てすぐにRTしました。

Twitterで音声の投稿が可能に https://t.co/ydywTsJB6V pic.twitter.com/N0nDOMdt2X
— PC Watch (@pc_watch) June 17, 2020

実装されたら面白そうだけど、いろいろと問題も出てきそうだと思います。デジタルツールってそういう所がありますよね。

ちなみに話戻して、ページを切り替えるとアクセスカウンターは増えます。その対応は出来ますがしません。どうぞアクセスカウンターを増やしてください。SEO的にもとても有り難いことなので・・・。

アクセスカウンターが増えて得することはあるけど、損することはないじゃないかと思います。初めて訪問されるユーザーにとってはアクセス数が多いページは信頼されやすいです。仕様的にはアクセスカウンター増えやすい仕様にあえてしてますよ。

数字マジック、数の印象は大体あると思います。客が並んでいるお店はもしかしたら美味しいかもと思い込むのと同じです。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

投稿日時 2020年06月18 03:10日

タグ

10, rt, Twitter, アクセス, アクセスカウンター, アレ, あんぽんたん, いろいろ, コード, これ, そこ, タイムライン, ツール, データ, デジタル, トイレ, ところ, ネタ, バグ, ブログ, ページ, わざわざ, 一, 人, 今, 可能, 同期, 問題, 変, 実装, 対策, 意味, 所, 投稿, 目, 自分, 話, 通信, 違法, 部分, 音声, 領域,

実はこの頃、何ですよ。

2020.06.17

Logging

実はこのブログの月の収益でサーバー代はまかなえるように
なってきました。そうワンコインぐらいの収益が去年から平均的に
入るようにはなりました。これも皆様のおかげです。
ただ目標金額は高卒の初任給手取り前ぐらいです。なので未だまだ遠い・・。
近い目標は夏目漱石さんです。

ちなみにサーバーはさくらレンタルサーバーのスタンダードプランを
使用しております。はい、とてもリーズナブルなお値段です?。

塵も積もれば山となる、犬も歩けば棒に当たる、記事も積もればググるに当たるという具合に質より量で頑張っているブログです。たまに良いことを書こうと案を練るのですが、モチベーションが続かず継続できません。継続できているのは更新記録です、たまにはその日にリリースせずに何日か溜めてリリースする日もあります。

昨日の昼頃から数のマジックを使用させてもらいます。数のマジックとはアクセスカウンターを設置致しました。~~リロードを書けるとカウンターが1プラスされます。~~また非同期通信でカウンターは表示させているので誰かが訪問したらリロードを書けないでもカウントが増えていきます。

追記：リロードを何回もするひとがいるので、対策を行いました。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

投稿日時 2020年06月17 05:07日

タグ

１, アクセスカウンター, おかげ, カウンター, コイン, こと, これ, サーバー, さくら, スタンダード, たま, プラス, プラン, ブログ, マジック, モチベーション, リーズナブル, リリース, リロード, レンタル, ワン, 何, 何日, 使用, 値段, 具合, 初任給, 去年, 収益, 同期, 塵, 夏目漱石, 山, 手取り, 数, 日, 昨日, 昼頃, 更新, 月, 案, 棒, 犬, 皆様, 目標, 継続, 記事, 記録, 設置, 質, 通信, 量, 金額, 頃, 高卒,

JavaScriptのPromise例えが分からない人のために。

2020.06.06

Logging

自分は『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!!"

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

投稿日時 2020年06月06 10:58日

タグ

async, await, javascript, Promise, then, エラー, かっこ, コード, ここ, こと, それら, そん, ため, チェーン, なん, ひとまとめ, 一つ, 中, 人, 但し, 値, 内容, 処理, 割愛, 可能, 同期, 名前, 命名, 場合, 対, 対応, 後, 感覚, 数珠繋ぎ, 時, 最初, 混合, 皆さん, 自分, 話, 道具,

JavaScriptを再勉強しているのだが、ある疑惑が！？

2020.06.03

Logging

JavaScriptを再勉強しているのだが、ある疑惑が生まれた。それはjqueryで良いじゃねぇという疑惑。自分はjsよりjqueryの方が使いやすく感じる。まぁいまの所なのかもしれないが・・・使いやすいですね。

jqueryはいろいろなブラウザ上で動くことをサポートしてくれるライブラリとして普及したのだけど、IEが消滅時効状態のいまではシェア率は下がっていてネイティブJSが良いじゃねぇという動きですが・・・。いやいやjqueryの方が楽だしコードはあまり書かなくて良い。特にイベント処理時のデータの複数受け渡しでは、今の所、JavaScriptよりjqueryの方が楽だと思います。

https://www.youtube.com/watch?v=RQD4m5WNfDk

あと非同期通信とかもね。ajaxで良いじゃねぇとか思いますよ。
最後に動画のJSコードを載せときますね。

document.getElementById("my-textarea").addEventListener("input",()=>{
	document.getElementById("view").innerText = document.getElementById("my-textarea").value;
});

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

投稿日時 2020年06月03 04:00日

タグ

addEv, ajax, document, getElementById, IE, javascript, jquery, JS, my-textarea, quot, イベント, いま, いやいや, いろいろ, コード, こと, サポート, シェア, それ, データ, ネイティブ, ブラウザ, ライブラリ, 今, 処理, 勉強, 動画, 同期, 所, 方, 時効, 普及, 最後, 消滅, 状態, 疑惑, 自分, 複数, 通信,

PHP非同期の考え方サンプル。

2019.11.12

Logging

非同期の考え方サンプルです。
さて非同期ってなんでしょうか？
非同期とは次から次へと仕事をお願いする状態。
仕事量が重いと結果が返るまで時間がかかります。
なので、Aという仕事が重く、B、Cという仕事が楽な場合は
A、B、Cという仕事を順番に頼んでもAの結果はBの後やCの後に
結果が返ってきます。

逆に同期処理とは何か？
A、B、C の順に仕事を頼むと、Aの仕事が終えた後にB、Cと仕事を
行います。

非同期＝並列処理と考えると良いかも。
同期処理＝逐次処理と考えると良いかも。

https://www.youtube.com/watch?v=VHlW65WPUDY

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>Document</title>
    <script>
        $(function(){
            $("#btn").on("click",function(){
                test();
                return false;
            })
        });
        function test(){
            var data = $("#frm").serialize();
            $.ajax({
                type: "post",
                url: "url.php",
                data: data,
                dataType: "json",
                success: function (response) {
                    console.log(response);
                }
            });
        }
    </script>
</head>
<body>
    <a href="#" id="btn">クリック</a>
    <form id="frm">
        <input type="text" name="test1">
        <input type="text" name="test2">
        <input type="text" name="test3">
    </form>
</body>
</html>

<?php
//url.php
$data = [];
if(!is_null($_POST)){
    foreach($_POST as $key=>$val){
        $data[$key] = $val;
    }
    print(json_encode($data));
}else{
    print(0);
}

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

投稿日時 2019年11月12 12:26日

タグ

65, 8, charset, com, DOCTYPE, en, gt, head, html, lang, lt, meta, name, php, quot, UTF-, VHlW, WPUDY, youtube, お願い, サンプル, 並列, 仕事, 何, 処理, 同期, 場合, 後, 時間, 次, 状態, 結果, 考え方, 逆, 順, 順番,

自分の務めてる会社の１次入社試験（過去問）

2019.10.12

Logging

自分の務めてる会社の入社試験（過去問）です。
これぐらいのことは出来てもらわないと困るという事で出題したのですが
どうもこの問題難しいのか？
ここまで漕ぎ着けて採用された人はひとりしかいない。
大手の会社にはこんなの簡単だよという人は
たくさんいると思いますが、自分の務めてる会社は
どちらかと言えば零細企業です。
こういう問題出しても中々、解けない人が多くて
採用まで至らないのが現状です。
※今は募集していません。
■問題
郵便番号入力すると検索結果を表示するようにせよ。
また下記の条件を満たしていることとする。
1．サジェスト機能がある。
2.PHP言語を使用。
3.非同期処理。
単なるこれだけでも、中々出来る人が来ない。
これが零細企業地方の現状です。
https://zip358.com/tool/postal_code_search/

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

投稿日時 2019年10月12 06:06日

タグ

１, 2, ３, 358, Code, com, php, postal, search, tool, zip, ここ, こと, これ, これぐらい, これだけ, サジェスト, たくさん, どちらか, ひとり, また下, 中々, 事, 人, 今, 企業, 会社, 使用, 入力, 入社, 処理, 出題, 募集, 同期, 問題, 地方, 大手, 採用, 条件, 検索, 機能, 現状, 番号, 簡単, 結果, 自分, 表示, 言語, 記, 試験, 過去問, 郵便, 零細,

非同期通信の2重ループは素人にはオススメしません。

2016.03.20

Logging

非同期通信の2重ループは素人にはオススメしません。
そして、2重ループでなおかつ、再帰処理だったら・・・
まさにややこしくなる事間違いないのでオススメ度は限りなく低いですね。
ただ、こういう事も出来ることを覚えていると
何かの役に立つことは間違いないです。
ちなみに再帰処理は、いろいろな言語で可能ですので
技として覚えていて損はないです。
再帰処理を追う方法はループせずに見るという
感覚を養うことが大事だと思います。
ようするに再帰処理を抜け出すひとつ前の値で
トレースすることが大事だと思われます(´Д｀)。
ちなみに非同期通信の場合、非同期ですので
返ってくる順番はめちゃくちゃです。
何か番号を振って処理しないと、
うまく処理されないという事になるのでそこらへんも注意して組み立ててください。

追記2021：今では古くなったコードになったのでソースコードを削除致しました。
ただ、考えは間違っていませんがJSも進化して非同期処理も簡単に組み込めるようになりました。
これも時代の流れですね。async/await、promiseというキーワードでググってみると非同期処理の説明が書かれたサイトがありますのでそちらを参考に！！

https://qiita.com/_takeshi_24/items/1403727efb3fd86f0bcd

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

投稿日時 2016年03月20 06:00日

タグ

2, 2021, JS, いろいろ, おすすめ, コード, こと, ソース, そこら, トレース, ひとつ, べん, めちゃくちゃ, ループ, 事, 今, 何か, 値, 再帰, 処理, 削除, 可能, 同期, 場合, 大事, 役, 感覚, 技, 損, 方法, 注意, 番号, 簡単, 素人, 言語, 追記, 通信, 進化, 順番,

なんちゃってIT戦記（新人編：フィクション）をはじめました(ﾉω・)ﾃﾍ

2015.04.05

Logging

小さなIT会社へ就職した。なんちゃって君の物語を今日から書きはじめます（真面目に！！）。
小さなIT会社に新人として入社したなんちゃって君ですが・・・・。
自己紹介前から異変に気づいていたこの会社、デスクがないのだ。
デスクのかわりに壁際にPCが並んでいる・・・そこで皆さんが仕事をしているのだ。
何だか変だと心では叫んでいたんだけど・・・。
入ってしまってから辞めるに辞めれない（同期の新人もいるし）。
これが壮絶なITの戦いになるとは、この時には思っていなかった。

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

投稿日時 2015年04月05 02:58日

タグ

IT会社, IT戦記, PC, かわり, デスク, フィクション, 仕事, 同期, 君, 壁際, 心, 戦い, 新人, 新人編, 物語, 異変, 皆さん, 自動, 自己紹介前,

@Blog

日常日誌からプログラムやYOUTUBER紹介、旅日記まで日々更新中です。

今の今まで間違った認識でいた、やばぁ．asyncとawaitとPromise

３０万件のデータを扱っている方の話を聞いて一瞬😱となる。 #laravel #Queue #worker #jobs

htmlとcssとphp-初学非同期処理とおまけ-No.3

POSTとGETの考え方について伝えている動画。 #以心伝心

Qiitaのfeedを取得して表示するだけのコード非同期編？ #phpcode

Qiitaのfeedを取得して表示するだけのコード。 #php

デモ５５ajax=jqueryを使わずに非同期通信するのが普通に。

なるほど、よくわかりました。

そうなんだよなぁそうなんだよ、英語がなぁ。うんうんと頷く。

わざわざ対策した、これでも。

実はこの頃、何ですよ。

JavaScriptのPromise例えが分からない人のために。

JavaScriptを再勉強しているのだが、ある疑惑が！？

PHP非同期の考え方サンプル。

自分の務めてる会社の１次入社試験（過去問）

非同期通信の2重ループは素人にはオススメしません。

なんちゃってIT戦記（新人編：フィクション）をはじめました(ﾉω・)ﾃﾍ