2019-02-16に更新

非同期がわからないのはゲシュタルト崩壊を起こしていたからだ

ということに気が付いた。

すげーあほなこといってます。

よくある?サンプル

fetch(url)
.then(function(response){
    //fetchで返ってきたデータをjson形式にする
    return response.json();
})
.then(function(json){
    //jsonで何か処理する
    doSomething(json);
})
.catch(function(error){
    //エラー発生
    console.log(error);
})

(async/await使えよって指摘はごもっともなんですが……)
初見で見たときすごい未知の呪文に見えたんですね。
で、なんとなく真似てやってみても、ちょっと変えようとすると動かない、みたいな。
めっちゃ変な書き方しちゃう、みたいな。

「thenはメソッドで引数にコールバックを指定します。」
ただこれだけなのに、なぜか謎の呪文に見えていた時期があった。

アホの極み

というか今までthenのメソッドチェーンが特殊な記法に見えていたんだけど、これって
(fetchが返す)Promiseオブジェクトが持つthenメソッド
じゃん。普通の書き方じゃん。A.B()じゃん。PHP風に書くとA->B()じゃん。
え、なんでこんなこと今まで気づかなかったの、俺。馬鹿じゃん。

たぶん、メソッドの引数がコールバックで、しかも無名関数で書かれているから、その時点でちょっと複雑になって、
しかも括弧と波括弧とfunctionがゲシュタルト崩壊起こして謎の呪文に見えていたんだな。きっと。
実際はもっと処理が書いてあって複雑だし。

あと、メソッドの部分で改行するのも馴染みがない。
そりゃ、長くなるからわかるんだけども、なんか、ねえ……。
だって、

mojiretsu
.substring(0,5);

とか普通書かないじゃん。
(意外と書くのかな?)

なんかこの辺、コーディング規約とかあるのかな?

ということで書き直す

function convertToJson(response){
    //fetchで返ってきたデータをjson形式にする
    return response.json();
}

function doSomething(json){
    //json使って何か処理する
    doSomething(json);
}

function addErrorLog(error){
    //エラー発生
    console.log(error);
}

fetch(url).then(convertToJson).then(doSomething).catch(addErrorLog);

(アロー関数使えって指摘はごもっともなんですけどね……)
これならもっと理解早かったわ、きっと。
まあ、この次にPromiseとかコールバックを理解するっていう壁があるんですけどね。
thenメソッドに渡したコールバック関数の引数って何だよ、とか。
その辺は別の記事で書くかもしれない。

教訓

サンプルがわからないときは自分がわかるように分解・再構築するとわかりやすいかも。
アロー関数がわからない(慣れてない)ならfunctionに直すとか。
(アロー関数は覚える必要があるという前提で。というか、こういう作業をやっていくと覚えやすいのでは)
無名関数でゲシュタルト崩壊起こすなら、別関数に切り出すとか。
あとは、まあ、いろいろ。

まあ、わからないから勉強しようとして、それがわからないんだから、直すのも一苦労だろうけど。
わかるところから分解するしかないよなー。

当たり前だけど、自分で手を動かさなきゃわからんよね。

以上


hammhiko

恥を晒して生きていきます。

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント