元保育士アラサー女のぐんぐんストーリー🐻‍❄️ITエンジニアになるまでの道のり😤

IT知識ゼロ、パソコン苦手な元保育士が、独学でエンジニアになるまでの日々を投稿します😊

JavaScript学習🌸〜APIとfetchAPI編〜Node.jsで簡単な天気アプリ制作

 

Udemyでfetch APIについてさらに詳しく勉強をしました😌

 

 

XMLの作り方を流し見をし、promiseをサポートしていないことを知る

fetchを実際に作る

YouTube動画で、Node.jsで天気アプリを作る

 

 

という順番で進めます✨

 

 

fetchで勉強したことを簡単にまとめます💡

 

 

 

fetch

fetchはWebAPIにリクエストを送り、データを取得するためのJavaScriptの関数。

簡単に言えば、fetch APIを使うときは、データを取得するのが終わるまで待ってくれるpromiseがあって、もし何か問題があればエラーを捕まえてくれるcatchがある!

 

🌸promise

promiseは「これから何か作業をするよ」という約束みたいなもの。

作業がうまくいったら、「はい、できたよ!」と教えてくれて、何か問題があったら、「ごめんね、うまくいかなかったよ」と教えてくれるようなもの。

fetchをすると、サーバーからデータが届くまで待って、その後に何かをすることを約束してくれる。

 

🌸then

何かの作業が終わったあとに、次に何をするかを決めるために使うもの。

fetchを使って情報を取ってきた後に、その情報を使って何かをするときにthenを使う

 

🌸catch
キャッチは、もし何かがうまくいかなかったときに、そのエラーをキャッチ(捕まえる)する手段。
エラーが起きたら、catchで指定した処理をする。

(「ここで問題があったよ」と教えてくれる役割をする)

 

🌸asyncとawaitの違い

- async

「この関数は特別で、時間がかかるかもしれないよ」と教えてくれるマーク。

これがついてる関数は、他のことをしながら待てる。
- await

「ここでちょっと待ってね」という合図で、asyncでマークされた関数の中で使う。

これを使うと、その部分で時間がかかる作業が終わるまで、ちゃんと待ってくれる。

 

🌸try

プログラムで何かを試してみるときに使う部分。

この中に書かれたコードは、エラーが起きる可能性があるけど、もしエラーが起きたら、プログラムが止まらないようにしたいときに使う。

もしtryブロックの中で何か問題が起きたら、プログラムはすぐにcatchブロックに移動する。

そしてcatchブロックが、その問題をどうにかするためのコードを実行する。

 

 

 

 

今回はローカル上のみに出力しました😆

 

 

 

 

近々ローカル上でサーバーをつなげ、HTMLやCSSでレイアウトをしてアプリケーションを作っていきます😉

 

 

明日は、『非同期処理』を進めていきます!!