ほんきでJavaScript 第5回&第6回 〜LocalStorage & API通信〜

みなさん、こんにちは。杉本です。
台風ラッシュが終わり、やっと暑さも落ち着いて過ごしやすくなってきましたね。
しかし季節の変わり目ですので、みなさん体調にはお気をつけください。

では、少し前回から間が空いてしまいましたが、先日行われた第5回と第6回の様子をまとめてお伝えします。

第5回の様子
まずは、先週のおさらいです。
前回同様、「追加」「保存」「削除」の機能が入ったメモアプリのデモをもう一度作ります。

hj56_5

・LocalStorage(ローカルストレージ)
次は、ローカルストレージの使い方を学びました。
ローカルストレージとは、ブラウザにデータを保管できる仕組みです。
ブラウザにデータが保管されているので、サーバーにアクセスしなくてもデータの出し入れが簡単に行えます。
今回学んだのは「setItem」と「getItem」
「setItem」でローカルストレージにデータを保存します。
「getItem」でローカルストレージからデータを取得します。
今までは、ページを閉じれば、画面上のデータは消えてしまいましたが、
ローカルストレージを使うことによってページを開き直しても、データが保存されているので再度表示することができます!

hj56_1

オブジェクトから文字列への変換
便利なローカルストレージですが、ローカルストレージには文字列しか保存できません。
そのため、配列などの複数のデータが含まれている要素を保存するとひとつのオブジェクトとして処理されてしまいます。
そこでオブジェクトを変換するために使用するのが、「JSON.stringify」と「JSON.parse」です。
JSON.stringifyでオブジェクトを文字列へ変換しローカルストレージへ保存します。
ロカールストレージから文字列を取得しJSON.parseでオブジェクトに変換します。

LocalStorage(文字列) ⇆  「stringify」「parse」 ⇆  オブジェクト

hj56_2

・今回新しく学んだこと
-LocalStorage
・setItem(LocalStorageにデータを保存します)
・getItem(LocalStorageからデータを取得します)
・JSON.stringify(オブジェクトを文字列に変換します)
・JSON.parse(文字列からオブジェクトに変換します)

今回は、ローカルストレージの使い方を学び、データを管理する方法を学びました。
順序だけ見ると簡単そうですが、これがなかなかややこしくて最初は少し混乱しましたが、
データを管理できることで、いよいよ動きが本格的になってきました!
次はAPIなど通信の方法を学んでいく予定です。

第6回の様子
今回は前回の授業から秋休みを挟んでの2週間ぶりの授業です。
ちゃんと忘れていないか、じっくりといつもより念入りにおさらいをしました。

hj56_3

今回のおさらいは、配列データをローカルストレージに保存して、また表示するというお題。
配列の中の要素もしっかりローカルストレージに保存しないといけません。

次に、API通信を学びました。
APIとは、Application Program Interfaceの略で、簡単に言えばプログラミングの一部を公開して誰でも共有できる仕組みです。

hj56_6

今回、授業では「OpenWeatherMap (https://openweathermap.org/)」という天気の情報を公開しているサイトのAPIを使って学びました。
そして、jQueryの.ajax()というメソッドを使って「指定した都市を送信すると、その都市の天気を返してくれる」という機能を作りました。

hj56_4

そのあとは、課題のメモアプリの製作をしながら先生への質問時間が設けられました。
皆さん、入れたい機能ややりたいことをどうすればできるか先生に相談されてました。
先生が一人ずつ時間を作ってくれるので、わからないことは全部質問できます!

・今回新しく学んだこと
-API通信
-.ajax()

通信まわりの理解は少し難しいですが、使えるようになればネット上には様々なAPIがありますのでAPIを使って面白い作品が作れるようになりますね!
いよいよ講座も残すところあと2回です。次回も質問時間がありますので皆さんたくさん質問を用意してきてください!
ラストスパート皆さん頑張りましょう!