Case1
前回の続きとおさらい
CHECK
01
前回作った会話アプリのコードを上から、1行ずつ解読していきます。
CHECK
02
知っておかないといけない単語集
オブジェクト
複数の変数をまとめたもの
{ } で囲まれたもの
引数
関数に渡す値のこと
メソッド
特定の処理をまとめたプログラムの塊のこと
配列
複数のデータを順番に並べた構造のこと []で囲む
0から始まる
JSON
JavaScript Object Notationの略
JavaScriptのオブジェクトの書き方を元にしたデータ定義方法
構造化データ
Case2
ウェブストレージAPIを用いて、画面をリロードしても会話の内容が保存されて消えないようにする機能を実装する。
CHECK
01
ウェブストレージAPI
ブラウザでキーと値のペアを保存・取得するための仕組みです。
Cookie を使用する方法よりも直観的であると言われています。
【特徴】
サーバーではなく、個々の端末にデータを保存できる。
オフラインでも Web メールを保存したり、ブラウザだけでアプリケーションを作ったりできる。
名前とそれに対応する値からなる、より小さなデータ項目を格納できる。
【機能】
どのくらいのスペースを使用できるかや、すでにどのくらいのスペースを使用しているかを調べることができる。
ユーザーエージェントが他のもののための場所を空けるためにサイトデータを処分する前に、警告する必要があるかどうかを制御できる。
保存されているデータアイテムを追加、変更、削除できる。
＊COMMENT＊
下川 春樹
＊コメント＊
今回は、前回作った会話アプリに追加の機能を実装する回でした。
最初に前回のコードのおさらいとして、上から1行ずつ何をしているか、答えられる人が解説していきました。終わった後に、説明の途中で出てきた分からない単語を、また答えられる人に解説していってもらいましたが、プログラミングで初歩的な「オブジェクト」や「配列」・「引数」などを改めて知ることが出来ました。この辺りをしっかり理解していないと、JSのコードは書けないみたいですので、基本的な事からしっかり学んでいく事の大切さを認識しました。
後半の追加の機能の実装では、またまたAIにコードを丸投げして書いてもらいました。1行ずつでも自力で書けるよう、頑張っていきます＞＜b
＊コメント＊
則岡 えり
＊コメント＊
今回は前回作った会話アプリに、履歴を表示する機能を追加しました。
「ウェブストレージAPI」というものを使って、ブラウザを閉じたりリロードしても履歴が消えないようにしました。
以前に「サイトに初回アクセスした時のみローディングアニメーションを表示させる」という内容のJSを見たことがあり、その時はよくわかりませんでしたが、これを使っていたのかと繋がって嬉しくなりました。
また、検証ツールで実際に保存されている内容が目で見えるのも新鮮でした。
私はまだまだchatGPTに助けてもらわないと全然コードを書けませんが
ブラウザに保存できるこの機能を使って、他に何かできるかなーと考えるだけで楽しいです。
＊コメント＊
＊コメント＊