フロントハックス

【フロントハックス】第16章非同期処理編レビュー②

今日は、非同期処理編(全step20)のうち、step5〜step10までを学習したのでご報告します。

正直に言います。わかりませんでした。( ̄▽ ̄)

5時間粘ったのですが、レビューができません。。。は悔しいので、そりゃあこんなこともあるよねって感じで読んでもらえれば・・・。

この記事を読んで欲しい人

  • 「わからなかった」って言ってるのに、「どれどれ」とイタズラな好奇心がある人

この記事を読んでもわからないこと

  • つよぽん先生のよさ
  • 第16章非同期処理編の概要

この記事を読んでわかること

  • 開き直り方

とにかく、イメージがつかない。。。

まず出てくる単語は「promise」「resolve」「reject」「then」「catch」です。約束、解決、拒絶、それから、捕る、という意味ですね。

なぜこのpromiseオブジェクトを使うのかというと、コールバック関数が繰り返される「コールバック地獄」を避けるため。です。

私が3時間かけて分かったのはこれくらいでしょうか・・・。つよぽん先生の教えてくれたサイトや、自分なりにググったサイトも一通り目を通したのですが。ちょっと厳しかったです。

もう1つ分かったのが、非同期処理は、同期処理が終わるのを待たずに実行できる。。。ことです。。。

ということで、コードをコピーで手を動かす作戦。

3時間粘ったのですが、ここは、マナブさん(エンジニア兼有名ブロガー)の言葉を思い出し、「わからなくても前に進む」ことを実行しました。step10は「エクササイズ(演習課題)」なので、とにかくつよぽん先生が教えてくれている通りにコードを真似して書きました。

しかもかなり難しい!どこがどうなっているのかが、自分の実力ではまだ理解できませんでした。

必死で真似をしたのですが、実行するとエラー、、、もう一度答えをカンニングしても、エラー。こんな時、独学は辛いですね。質問はし放題なのですが、何が分かってないのかも分からないし、カンニングしてるのにできませんって、絶対チェック漏れがあるだけです。必死で答え合わせをしたら、やっとこさ3回目のチェックで見つけました。Promiseがpromiseになっていたのです。大文字と小文字。。。2時間エラーを探しまくった結果でした。

ちなみにコードはこんな感じ。

(()=>{
const todos = [];
const inputBox = document.getElementById('input-todo-box');
const addButton = document.getElementById('add-button');
const listContainer = document.getElementById('todo-list');
const pickupTodoFromTextBox = () => {
const todo = inputBox.value;
inputBox.value =''
return todo;
};

最初の10行だけです。あと74行です。イメージつきますか?
でも、これが理解できた時、「Todoアプリ」が自分で作れるようになるんです!

ただ、「あ、今の自分の段階で理解は無理だ」と開き直り、コードを模写しました。この勉強方法がいいのか悪いのかは別として、挫折はしませんでした!

というわけで、

今日は、そんな日だったな、と前に進みます。プログラミング学習を始めて2ヶ月になるのですが、ある日パッと理解できるようになるのが分かっているので、あまり焦らず行こうと思います。大切なのは、挫折しないこと。挫折しなければ、上位2割には入れるわけですので。(プログラミングの挫折は8割らしい。)

とりあえず明日からは、前に進みます。何かを作る時、必ずこの「promise」を使う時が来ると思うので、今は、こんな書き方や考え方があるんだなと分かったことをよしとします!

以上で、今日のレビューを終わります!お付き合い、ありがとうございました!つよぽん先生、明日もよろしくお願いします!

ちなみに、

ドットインストールを始めて、90日が経過したのですが、私、同期ユーザー1690人中14位(上位0.8%)でした。継続すれば、マナブさんや迫さんが言う、周りが勝手に挫折していく説。結構信憑性ありますよね。全ユーザー43万人中でいくと、10002位(上位2.3%)です。うーん、続けたらいいことあるかも。

ABOUT ME
tozan-miyage
アラフォーからプログラミングを学び独立。Webスキルを身につけて、個人で稼ぐ方法を発信します。