Web APIの初心者向けチュートリアル+開始方法

これは、APIの操作について初めて学び始めたときの様子です。

APIを使いたいですか?

これを読んでいる場合、次の行に沿って何かを検索する可能性があります。

「APIの使用方法は?」
「APIにはどのライブラリを使用しますか?」
「APIとは?」
「私がfreeCodeCampのWeather App APIにこだわっているのを手伝ってください。何をしているのかわかりません。」

私はあなたとまったく同じボートにいたので、あなたの人生を100倍楽にします。

この記事を読んだ後、APIとは何か、どのようにAPIとやり取りするかを正確に理解することをお約束します。

まず最初に。

オブジェクトとは何かを理解する必要があります。

私はあなたがこのようなものを見たことを知っています。

おなじみですか?確かに、おそらくJavaScriptの旅で最初に学んだことの1つです。

さて、あなたのポイントは何ですか?これは何と関係がありますか?

このオブジェクトについて何かお気づきですか?トリックの質問ではありません。

このオブジェクトは何を伝えていますか?

エラー、personという名前のオブジェクトですか?キーと値があります...それで何ですか?

よいスタート。

さて、それは他に何を言っていますか?このオブジェクトは正確に何を伝えていますか?

それは何を説明していますか?

ああ。これはPersonと呼ばれるオブジェクトです。名前はマリオです。 22歳の年齢。ルイージという名前の兄弟。食べ物はキノコだと思う?

今、あなたはそれを得ています!

前進しましょう。

これはどうですか?

それは同じたわごとではありませんか?

よく見てください。

あ、宣言はないの? const Person =がないように。

あなたは暖かくなってきています…

キーに引用符がありますか?

まさに。

だから何?

理解する必要があるのは、最初のスニペットが通常の日常的なJavaScriptオブジェクトであり、2番目のスニペットが非常に似ているが、それはJSONと呼ばれるということです。

最大のキーポイントは、一般に、使用するAPIが常にJSONを吐き出すことを知ることです。これが重要です。

私があなたの脳に植え付けようとしている精神モデルは、APIを操作することはオブジェクトを操作するのと同じくらい簡単だということです。

最初のスニペットに戻ります。このPersonの名前を取得したい場合、何を書く必要がありますか?

簡単だ。ドット表記を使用して名前プロパティにアクセスするだけです。 Person.nameを実行するだけで "Mario"が得られます。

では、JSONについてはどうでしょうか?

あー同じこと…?

ほぼ。問題は、単なる匿名オブジェクトです。ドット表記の前に何も付けずに.nameをどのように使用しますか?

おい!それはトリックの質問でした。不公平だ!
でも大丈夫。では、どのように割り当てますか?

簡単だ。

前に言ったことを覚えていますか?通常、JSONはAPIからの応答になりますか?

実用的な例を使用しましょう。実際にAPIからデータを取得してみましょう。

先に進み、これをウェブブラウザのコンソールに配置します。

何が見えますか?

これは少し異なります。しかし、以前よりも少し馴染みがあります。単なるオブジェクトの配列です。

そして、配列の最初のオブジェクトの名前が必要な場合は?

簡単! [0]を使用して最初のオブジェクトを取得し、次に.nameを使用して名前を取得します!

今、あなたはそれを得ています。

はい。しかし…これはどのように機能しますか?どこに割り当てられますか?そのコードは何をしていますか?あなたがやめたことがたくさんあるようです。道に迷いました!

できる限りシンプルにします。あなたはそれを完全に理解していないかもしれませんが、それはすぐに来るでしょう。

そのスニペットの注釈付きバージョンを見てみましょう。

そして、あなたはそこに行きます!

これで、APIを呼び出す方法の基本を理解し、データを取得してそれで何かを実行できるようになります。

この場合、APIを呼び出すことができ、最初のオブジェクトとconsole.logの名前を取得できるようになりました。

それが課題です。

データを取得してDOMに入力してほしい。

これがスターターコードです。お気に入りのテキストエディタで.htmlファイルにこれをコピーして貼り付け、空白を埋めてください。

別のエンドポイントを使用する場合のボーナスポイント! / postsエンドポイントを使用してみてください。