JavaScript

【課題】PromiseでTodoアプリを実装【JavaScript】

どうも、つよぽんです!

今回は演習課題の紹介記事となります。

今回の課題は、これまで解説してきたPromiseの以下の知識の定着度を確認するものとなっています。

確認する知識
  1. Promiseオブジェクトの作り方
  2. Promiseオブジェクトのthenメソッドの使い方
  3. Promiseオブジェクトのcatchメソッドの使い方

今回実装するTodoアプリは「【課題】JavaScriptのDOM操作でTodoアプリを作成する」と内容はほとんど同じですが、前回と異なり「Promise」を使った実装となります。

今回の課題の完成形は以下の画像の通りです。(※画像をクリックすると別タブで開きます。)

今回の課題の完成形今回の課題の完成形

今すぐ課題に取り組みたい方は以下の記事から課題ページにアクセスして、早速取り組んでいただけたらと思います。

あわせて読みたい
【エクササイズ】Promiseを使ってTodoアプリを作成する【JavaScript】今回の課題では、以前別の課題で取り組んだTodoアプリをもう一度作成していただきます。しかし、前回とは異なり今回はPromiseを使ってアプリを作っていただきます。Promiseのthenやcatch、データの受け渡し方法などを正しく理解できているか今回の課題で確認しましょう。...

この記事の想定読者は次のとおりです。

想定読者
  • DOM操作の方法を既に学習済みの方
  • Promiseについて学習済みで、Promiseの知識がちゃんと定着しているか確認したい方

現時点で上記の知識が身についていないとしても、今回の記事で上記内容を学習できる記事を紹介していくので問題ありません。

今回の課題をクリアするために参考になる記事は次のとおりです。忘れてしまっているものがあれば記事を読み返しふり返ってみましょう。

【JavaScript】Promiseのメリット【コールバック地獄の緩和】

Promiseを実際に使う前に、「なぜPromiseを使う必要があるのか?」ということから考えると、Promiseを使う意義がわかります。

つまり、Promiseを使うメリットがわかり、どういう場面でPromiseを使うべきか分かるようになります。

どういう場面でPromiseを使うべきかについて、結論から言うと「複数の非同期処理が入れ子構造になっている時」に使うべきです。

非同期処理というのは、処理がおわったときにコールバック関数を実行するのが一般的です。

つまり、複数の非同期処理が入れ子になっているとコールバック関数が入れ子状態になり、非同期処理の数が多ければ多いほど、入れ子の深さが上限なく深くなっていきます。

このような入れ子が深くなったコールバック関数の状態を「コールバック地獄」といいます。

Promiseを使うことで、コールバック関数の入れ子の深さに上限を持たすことが出来るので、コールバック地獄から抜け出すことができます。

コールバック地獄」に陥ったコードは読みづらくなる傾向にあるため、Promiseを使ってコールバック地獄を抜け出し、読みやすいコードを書くようにしましょう。

あわせて読みたい
【JavaScript】Promiseのメリット【コールバック地獄の緩和】JavaScriptのPromiseのメリットについてまとめました。深く考えずにJavaScriptで非同期処理を実装していくとコールバック地獄に陥る場面が出てきます。コールバック地獄を解決するために、今回紹介するPromiseは役に立ちます。コールバック地獄を解消して読みやすいコードを書きましょう。...

【JavaScript】Promiseオブジェクトの作成【2通り】

Promiseを使って非同期処理を実装する際には、Promiseオブジェクトを使うことになります。

Promiseオブジェクトを作成することで、後述する「then」「catch」メソッドを使うことが出来るようになります。(thenとcatchの詳細は後ほど説明)

Promiseオブジェクトの作り方は大きく分けて2つの方法があります。

Promiseオブジェクトの作り方を忘れてしまった場合は以下の記事を参考にすると良いです。

あわせて読みたい
【JavaScript】Promiseオブジェクトの作成【2通り】JavaScriptのPromiseオブジェクトの作り方を解説します。大きく分けると「①new Promise」、「②Promise.resolve, Promise.reject」の2通りの方法があります。②に関しては①の省略記法になるので、非同期処理の成功・失敗が最初からわかっていれば②で書くと便利です。...

【JavaScript】Promiseのthenの基本的な使い方

Promiseオブジェクトを使って非同期処理を実装するときに、非同期処理が成功したか、失敗したかによって次の2つの状態を持つことになります。

Promiseの2つの状態
  1. 成功 : resolveな状態(=resolved)
  2. 失敗 : rejectな状態(=rejected)

非同期処理が成功・失敗した状態というのは、言い換えると「非同期処理が終わった」ということになります。

非同期処理が終わったタイミングで次の処理に実行を移りたいときに使うのが、「then」「catch」メソッドになります。

そして、非同期処理が「成功」で終わったものに関しては「then」になります。

thenの使い方は以下の記事で詳しく解説しているので、thenの使い方を忘れてしまった場合は以下の記事で復習しておきましょう。

あわせて読みたい
【JavaScript】Promiseのthenの基本的な使い方JavaScriptのPromiseを使うためには、Promiseのthenメソッドの使い方を正しく覚える必要があります。なぜなら、Promise内で行われる非同期処理が完了した際にデータの受け渡しをthenメソッド経由で行うからです。今回の記事でthenメソッドの基本を覚えていきましょう...

【JavaScript】Promiseのcatchの使い方

前の項目で、「非同期処理が終わったタイミングで次の処理に実行を移りたいときに使うのが、「then」「catch」メソッドになります。」ということを説明しました。

「catch」メソッドは、「then」メソッドと対となるメソッドで、非同期処理が「失敗」に終わった場合に使われます。

catchの使い方は以下の記事で詳しく解説しているので、catchの使い方を忘れてしまった場合は以下の記事を参考にしていただけたらと思います。

あわせて読みたい
【JavaScript】Promiseのcatchの使い方JavaScriptのPromiseのcatchの使い方について解説していきます。catchメソッドは、前回解説したthenメソッドと反対の動きをするメソッドになります。つまり、Promiseの中で実装した処理が失敗したり、例外が発生したときに実行されます。...

まとめ

あらためて、今回の課題をクリアするために必要な知識を解説した記事を以下にまとめておきます。

上にまとめた記事内容をふりかえり、今回の演習課題で取り組む知識の定着のためにも、ぜひチャレンジしましょう!^^

今回の課題で定着させたい知識
  1. Promiseオブジェクトの作り方
  2. Promiseオブジェクトのthenメソッドの使い方
  3. Promiseオブジェクトのcatchメソッドの使い方
あわせて読みたい
【エクササイズ】Promiseを使ってTodoアプリを作成する【JavaScript】今回の課題では、以前別の課題で取り組んだTodoアプリをもう一度作成していただきます。しかし、前回とは異なり今回はPromiseを使ってアプリを作っていただきます。Promiseのthenやcatch、データの受け渡し方法などを正しく理解できているか今回の課題で確認しましょう。...

頭では理解してても実際に手を動かしてみて手が進まないところがあれば、それは理解が不十分だということを意味します。

練習問題をやっててわからないところ、質問したいところがあればお気軽に以下からご連絡いただけたらと思います^^

あわせて読みたい
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!プログラミングやWebで困っていることに対して何でも質問受け付けています。「こんなこと質問しても大丈夫かな」と思っている方のために過去にどんな質問があったのか一例で挙げているので参考にしていただけたらと思います。...

それでは、課題頑張ってください!

【やる気満々な方向け】学習サポートとオンライン講義やってます!

Webエンジニアになりたい人向けに、MENTAにて『【やる気満々な方向け】未経験からのWebエンジニア育成コース』というプランを用意しております。

このプランでは、「【学習コンテンツ】Web開発」と「【初心者向け】The Web Developer Bootcamp」で紹介している教材を使って学習を進めていただきます。

【学習コンテンツ】Web開発」に用意している学習コンテンツのスライドも「【初心者向け】The Web Developer Bootcamp」で紹介している教材をベースに作っています。

あわせて読みたい
【初心者向け】The Web Developer Bootcampはじめに 「The Web Developer Bootcamp」はWeb白熱教室の「学習コンテンツ」のベースとなっている教材です。 ...
あわせて読みたい
Web開発Webエンジニアになるために必要な知識・スキルを学習できるコンテンツを用意しました。未経験者でも、①開発環境の準備、②Webの基本的な仕組み、③HTML、④CSS、⑤JavaScriptと順を追って学習することでスキルが身につくことを目的に教材を作成しています。...

誰向けのプラン?

こちらのプランは次のような方に向けて作られています。

プラン対象者
  1. Progateやドットインストールで一通り学習したけど、次に何をすればよいかわからない
  2. Webエンジニアになるまでの学習プランがあると助かる
  3. 学習していてわからないところが出てきたときに質問したい
  4. コードレビューして欲しい
  5. オンライン講義に参加したい
  6. 学習した内容をアウトプットした際に、フィードバックがもらえたら嬉しい
  7. おすすめの学習教材を知りたい
  8. Webフロントエンド・バックエンドを学習したい
  9. フルスタックエンジニアになりたい
  10. 文系出身で今までプログラミングをしてこなかったけど、将来Webエンジニアになりたい
  11. 将来フリーランスになることを目指している

プラン内容は?

【やる気満々な方向け】未経験からのWebエンジニア育成コース』では次のことを行っております。

プラン内容
  1. Udemyの教材や、Web白熱教室の学習コンテンツを使った学習プランの提示 (学習プランに沿って学習を進めていただきます。)
  2. 教材・学習コンテンツの課題をこなしたあとは、僕にコードレビュー依頼を投げていただくことで、コードを添削する(課題クリア後は、引き続き学習プランの内容を続けていただきます。)
  3. プラン契約者が参加するSlackグループにて質問し放題
  4. Slack内にある「アウトプットの場」チャンネルにて、学習したことをアウトプットをしていただくことで、それに対しフィードバックをする (学習内容のアウトプットは復習にもなるため、アウトプットすることを強く推奨します。)
  5. 画面共有を使ったオンライン講義 (オンライン講義は録画して、いつでもふり返れるようにしています。(オンライン講義動画(ウェビナー動画)))
  6. 学習プラン以外の内容に対しての質疑応答 (内容によっては回答できないものもありますが、まずは気軽に質問していただけたらと思います。)

その他注意点

1人で対応していることもあるため、対応が難しくなった場合は急遽募集を終了する可能性もあることをご了承ください。

もしくは、僕以外にメンターを増やすことで募集を継続するということも考えているため、その場合は現在のプラン料金の値段を上げることなると思います。

仮にプラン料金を上げる場合は、『現在のプラン料金 × メンター人数』の料金になるかと思います。

現在の値段が5000円なので、1日1本ペットボトルジュースを買うのを我慢することで(約160円)、効率よく学習できるので費用対効果はかなり高いかなと自負しています。

また、今後メンターが増えて、プラン料金が10000円15000円と上がったとしても、月々の料金は申し込んだときの料金となるので、5000円のときに契約した場合はずっと5000円で受講することができます。

詳しく話を聞いてみたい方は

以下のいずれかでメッセージをいただけたらと思います^^

 

プラン内容については以下のリンク先からも確認することが出来ます^^

【やる気満々な方向け】未経験からのWebエンジニア育成コース

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です