JavaScript初心者向け！お天気APIを使ったプチハンズオン

0:01 アルパカですJavaScript初心者 向けにお天気APIを使った プチハンズを行いますWebブラウザ上で 簡単にできますのでぜひ 挑戦してみてください [音楽] 成果物はですねこんな感じです例えば東京 を選んで天気予報を見るってボタンを押し たらその天気の文字列が出てくる例えば 名古屋を選んで研究をしたら名古屋東海 地方の天気が出てくるとそういったような ちょっとしたアプリを最後に作っていき たいと思いますはいではハンズオン始め たいと思いますYouTubeの 概要欄のところに リンクが貼ってあるかと思いますので そちらの方をクリックお願いしますで クリックするとこんなようなページ コラボラトリーというものを使うんです

0:48 けどもこういうページが出てくるかと思い ますエッジとかでも開けるかと思うんです けれどもひょっとしたら自分が動かしてる 操作と少し違った動きになるかもしれませ んのでできれば Chromeを使うことを推奨しますまず 最初準備ということでここの書いてある 指令をちょっと実行していきたいと思い ます上のセルを実行ということでここ初回 はですねここ特にいじらないでください このチェックはつけたままでここの黒い ボタン直してください セルを実行するボタンですねそうすると こういった警告が出てくるかと思うんです けどこのまま実行してもらってOKですで あとGoogleにログインしてない人は 多分ログインしろっていうのが出てくると 思うんでログインしてくださいはいでこの まま実行します最初ちょっと初めの実行は ですね時間がかかるんですけれどもあでも

1:37 すぐ終わりましたねここ押した人いるかと 思うんですけど特にあのこのコードは今日 使うためのコードではないんでこれは見 なくてもOKです開いちゃった人は右側で ダブルクリックすれば元に戻りますここ 開いちゃった人は右側の領域でダブル クリックですね でこれ何やったかっていうとgithub っていうところからファイルを ダウンロードしてきたというのが主な準備 になりますでは続いて次のところですね 左側のファイルアイコン色はついてないん ですがここですねファイルアイコンを クリックしてくださいそうするとこれ出て きますしばらくするとこういうフォルダが 出てくるんでコードフォルダをクリックし てください そうすると 9つのファイルが見えれば 成功ですここで補足ですが本来は

2:22 JavaScriptやる場合はあのvs コードとかいわゆるエディターコード データを使って普通にブラウザ実行した方 がいいです でなんでそれ今日やらないかっていうと それやるとそのエディタの導入まず インストールから始まって使い方とかあと はファイルのさっきのダウンロードとか あと 複数ファイルのウィンドウ操作必要でそこ で結構時間とってしまうんで今回はコラボ だと利用結構特別な形で採用してるという ことになりますでメリットとしては準備 不要なんですね皆さんにインストールとか いらないとあともう1個いいのが 編集と実行が一つのウィンドウで完結する というので一緒についてきやすいかなと 思いますただデメリットありましてその 本来のHTMLJavascriptとは 少し異なる部分もあります特にあのエラー

3:08 とか見たい場合ですねちょっと見にくかっ たりしたりとか動かないところがあったり するんで基本的には 普段皆さんがやる場合はvsコードを使っ て普通に開発してくださいではこれ準備 終わりましたんで次に進みたいと思います 01HTMLjavascrテンプレート ですまたここの指令の通りやっていきます 左の01テンプレート.HTMダブル クイックこのコードの中に入ってるこれ ですねこちらはダブルクリックして ください そうすると右側にこのコードが出てきたと 思いますここで編集できるんですねでここ の ウィンドウのところをこう 移動したりもできますあとこう左側も ちょっと邪魔だったらこのフォルダー ボタン押したりすると見え隠れするんで そういうの

3:54 に移動しながらやってみて くださいでえっと下のセルを実行ですね これですねこちらまたこの実行ボタンを 押してください そうするとこのテンプレートHTMLの ファイルが実行されたという形になります でこれ今やってるのがこのボディの中に ピーターグですねP要素の中身が出てき てるとじゃあですねちょっとこの3番です ね右側のHTMLのHTMテンプレート要 はここここを 適当に変えてみてくださいまだなんか追記 してもらってもいいですとか何でもいい です でこれいいのがあの保存する必要ないん ですね保存する保存してもいいんですけど 保存する必要なくってここをもう1回実行 するとすぐに反映されて出てきます

4:41 ただちょっとあまりにも早く 編集した瞬間にポットを押そうとすると すぐに反映されない時がありますのでその 場合はもう1回多分押せば 反映されますので何度かポチポチ押して ください これでだいたいの操作わかったかと思い ますのでじゃあここでですねちょっと練習 問題ですと以下をボディの下に追加して くださいと以下っていうのはこれですね はいここここと選択する時にな他の選び すぎない気をつけてくださいこれを選択し てもらってコピーですねまあ右クリックで 選択したセルをコピーとかコントロールし とかでコピーできますこれを要はこの ボディて言ってるのはこの11行目ですね 11行目まあここ改行してもらってそこに 加えて実行してみてくださいという話です

5:28 余裕のある人はいろいろ変更してみて くださいはいではちょっと1分間ぐらい 時間取りますので皆さんチャレンジしてみ てくださいどうぞ [音楽]

6:36 はいではちょっと答え合わせしていきたい と思いますまずここ普通にコピーすれば いいんですね 右クリックで選択者セルをコピーして ボディの下なんでここら辺をカーソル 合わせてエンターをして 貼り付けですねま右クリックでペーストか もしくはコントロールVですねうまくでき ない人コントロールVをやってくださいで この状態でまたここをクリックしますそう するとはいこのようにですね物語のところ に色がついて大きくなったかと思います 今オレンジ色ですよねってことはじゃあ このオレンジで書いてあるところブルーに したらどうなるんだろうかな 実際にブルー じゃあこのなんか50って書いたの100

7:23 にしたらどうなのかな はいで実行してみようと そしたら青くなって ちょっとなんか2つできちゃいましたけど も2個張り付いちゃってですねはいあの 青くなって大きくなったというのが確認 できたと思いますはいでここではですね今 やったのはJSではなくてCSSの話でし たのでこれ以降はあのJSの方をやって いきたいと思います 今のちょっとここの 補足ですけれどもHTMLのテンプレート 必ず書くみたいなものがあってそれを基本 的にはコピペしてるだけですドックタイプ とかHTMとかヘッドとかメタとか色々 あるんですけどテンプレートとしても書く というものですでJSを書くのはここです

8:08 ねスクリプトタグという中に書きますで この位置が結構重要で 閉じるボディタグの直前に書いていますで このスラッシュ2つは何かっていうところ コメントを表していますコメントっていう のはプログラム実行した時に無視されると いうものですですのでJSとしては実行さ れていないという状態になります 次はですね02HTML要素の書き換え ですねでここから後も全部さっきの パターンと一緒です左側のところの 02ディスプレイこれはダブルクリックし てもらってここちょっとどんどん増えて いくと邪魔になっていくんで 過去に閉じちゃっていいですしばらく保存 されてるんでで02 ディスプレイが出てきたらちょっと自分を 閉じちゃいますけど また同じですねここのセルを実行して ください

8:54 そうするとこんにちはというふうに出てき たと思いますでこれコードですね見てみる とここに表示しますって書いてあるのに こんにちはになってるんですねさっきと 違う点としてこのIDってのがつきました ディスクという名前を 付けてますねこのJSのところに今回 新しい文が追加されていますこれもね なんかめちゃくちゃ 難しそうですよねなんかドキュメント ゲットなんとかいない占めとかでもうこれ 全然覚える必要なくって本当にコピペ できればOKです多分覚えてる人で ちゃんといないんじゃないかなと思います とにかくこれを書くとこんな形で書くと ここにディスプってありますね要はこの この IDがあるところこの右側の文字列で

9:41 書き換えるという意味になりますなので これあのこんにちはに変わったってこと ですねちょっと一緒にやってみたいと思う んですけどじゃあこんにちはのところ さっきと同じ要領でこのダル コーテーションの中で適当に 文字変えてみてください そうすると ちゃんと反映されているかなと思います 文法的に丸書くことかなんか色々ついてる けどわけわかんないと人もいるかもしれ ませんがとりあえずここ変えたらこうなる んだろうなという予測のもとどんどん進め てみてくださいはいでは練習問題ですP 要素ここですねP要素を増やしてそこにも 信頼してみるのを使って 文字表示をしてみてくださいはいではまた 1分間ぐらい取りますどうぞ [音楽]

11:22 はいじゃあ答え合わせですちょっとまあ 難しかったかもしれませんねまずはPOS を増やせということなんでこのHTMの とこですねここ12行目のところをコピー して下に貼り付けたいと思いますはいまず この状態で実行してみるとちょっと変え たらすぐ実行してちょっと変えたらすぐ 実行してやると変化点が分かりやすいです はいこんな感じでこれ普通につけただけだ とこんな風になっちゃいますであのIDは ですね 唯一のものにしなきゃいけないので2個目 のところとディスク2にしたいと思います でここにもこのインナーhtmlを使って かけということなんで今度はここですね 15行目これコピーしてしまって 下に適当に書いてですねあれちなみにここ

12:10 のスペースはあってもなくてもOKです見 やすいというか綺麗に見えるんで揃えてい ますで同じところに書いてもしょうがない んでもう1個の方はディスク2のIDに 変えて書きたい内容は別な内容ですねなん でもいいですけど こういう風に書いてもらってで実行すると リスク2を増やしたところには今回書いた 文字列が反映されたということになったか と思いますちょっと今時間短かったんで 難しかった人もいるかと思いますがもう1 回見返せばわかるかと思いますでは ちょっとここの補足なんですけれどもこの HTML要素の書き換えのやり方として いろんな書き方があるんですねでちょっと こういうの3つあげたんですけれどもパッ

12:57 と見で一番簡単そうなのはこの jQueryですよね ちょっと変なドルマークみたいながある もののかなり他と比べて半分ぐらいの記述 で書けるとでこれがですね今10年ぐらい 前だったら チェック入り推しなんですけども今は ちょっとこれを 推奨しませんなんでそうするかっていうと このjQueryですね最近のそのモダン な開発例えばビューとか リアクトとかを使った場合に 競合してしまうっていうのがあって結構 ですねjQueryをみんな使わなくなっ てきていますそれってまあ結構その開発の 最先端にいる人なんでいやいやあの 趣味とか個人レベル使うんだったら別に 全然これでいいじゃんと思うかもしれませ んがやはり今後出てくる新しいライブラリ

13:43 とかはモダンな開発を意識した ライブラリーが出てくるのでもうチェック インを使ってしまうと 古いライブラリーしか使えなくなると 新しいことやろうとしてもできないも ずっと古いまましか作れないってことも あるので 趣味の世界であったとしてもなるだけです ねjQueryでは新しい方に移行した方 がいいかなというふうに思われますですの で今回のハンゾーンではこのjQuery は却下したいと思いますはいでそこで残る のがこの2つになります1つがGet ELEMENTbyですね今使ったやつ あともう一つはクエリセレクターというの がありますこれはですねまあちょっとお 好みの問題かなっていうのがありますほぼ まあ長さも変わらないですよそんなにね見 た目もそんな変わんないでまぁ何が 違うかっていうとこのクエリセレクター

14:29 こっちのがちょっと新しいんですけども CSSわかる方であれば わかるかと思うんですけど IDの他にクラスっていうのがあるかと 思うんですが IDの形にも書けるしクラスでも書けるん ですねでこっちのエレメントbyIDの 場合はこれIDしか書けないクラス使い たい場合はまた別のやつが必要ですGet ELEMENTbyクラスネームというの が必要で使い分けなきゃいけないんですが 今回のようなケースはあまりクラス 書き換えることないので基本的にはこっち で IDの方でいいかなというふうに考えてい ますこれちょっとお好みの問題なんです ですが今回はこちらのGet ELEMENTbyIDにしたいと思い ます気をつけなきゃいけないのが小文字と 大文字混ざってるんですねなんか別に うまくこのIDのi小文字にしてもいい だろうなと思って小文字にしてみると動か なくなりますエラーなりますBとかも一緒

15:15 ですねあの打ち込む時は気をつけて ください基本的にはコピペをしてもらって 変えるべきところだけ買えるとここの IDとこの何を書くのかここだけ変えれば いいです基本的にはコピペして変えるべき とこだけ買えるこの方針でどんどんやって いくとプログラミングするかと思いますで は次ですねこの03変数宣言に入りたいと 思います 手順は一緒です左側から 03これですねこれをダブルクリックして もらって でここを載せるを実行してください はい100と500というのが出てきたと 思いますまずちょっとコード見てみると HTMLのところはPタグ2つですね

16:00 さっきの練習問題でやった形に似てますよ ねここに表示します1とここに表示します 2があってそれぞれ IDがディスク1とディスク2になって いるとでJSの方を見てみるとちょっと今 はこのレッドとコンストテン一旦無視する としてA=100点Aに100を代入して ますで B=200っていうのはBに200を代入 していますという意味ですはいでそこでは Aに100を入れてB200を入れてます で次の17行目でAを表示してるんで要は 100が出てますねこれ期待通りですねで 次に19行目で今度はまたAに500を 入れています20行目でまたAを出してる んで500で出た 期待通りの動きができてるかなと思います はいではちょっと練習問題です17行目

16:46 以降のAですね要は17行目と19行目と 20行目に書いてあるA3カ所について 全てをBに変更してちょっと結果を考察し てみてくださいではまた1分ぐらいでお 願いします [音楽]

17:59 はいでは答え合わせですまず17行目のA ですねこれをBに変えるということなんで 半角にするってポイントですね全角だと ダメです半角bにして 19行目もBにして20行目をBにすると

18:56 なのでこのコンストをつけた場合最初の1 回目はOKなんですけど2回目はここで 最大2してるんでNGということでここで エラーになってるとエラーになってしまっ たので次に進まないで元の表示のままに なってるという形になっています はいじゃあこちらのですねえっと補足に 進みたいと思います ES2015以前は変数はですね宣言して もしなくても良かったんですねどっちでも いいと 宣言する場合はこのバーっていうのを書い てました ES2015でレッドとコンストっていう のは追加されてさっき言った通りですね ネットの場合は最大にOKの変数であると コンストの場合は最大に負荷の変数である というようになりましたちょっとここ ややこしいのが次のところなんですけども 普通の変数の時はまさにさっき言った通り

19:42 なんですけどこういった配列オブジェクト を関数式これをこれが何だかわからなくて もOKです例えば配列ですね配列を コンストで 宣言した場合に実は中身は何度でも 書き換えられるんですね 書き換えられないのはあくまでも箱の方 です外側だけここがちょっとですね ちょっと分かりづらいところになるかなと 思います基本的に普通の変数以外だけは コンストをほぼ使いますちょっとしばらく 慣れてきたらですねまずはコンストで宣言 してみてダメだったらレッドに帰るこう いった考え方で進むと初心者の人はいいか なというふうに思います 今度は04に進みたいと思います クリックイベントですね じゃあまた左から

20:28 04ダブルクリックしてもらって ここを実行してください そうするとボタンが出てきましたねボタン あったら押したくなるんで押しましょう はい 押すとOKになりましたこれ何どうしても ずっとOkのままです はいじゃあこのコードを見ていきたいと 思います まずHTMLの最初ここはいいですね今 までと同じですねここに表示ますって表示 がPタグであってIDとしてディスプレイ が指定されています今回 追加になったのが ここですねボタン書く場合はこんな感じで ボタンタイプ=ボタンみたいな形で書き ます IDとしてこれ何でもいいんですけど ディスクと同じような感じですねBTS

21:13 っていうのを指定していますこの2つを 書くことでここに 文字とボタンが表示されるとでJSの方 ですねJSの方見てみると なんかここのドキュメントゲット エレメント場合はまあいいとしてまた なんか変な新しいの出てきますねこのオン クリック =ここまで意図してなんかファンクション かっこかっこ別の括弧みたいななんかもう わけわからないものが出てきたと思うん ですけどももうこれはもう完全に抽象的に 捉えてくださいもうこの形でこの中身に 書いたものを実行するんですけどこの IDに書いてあるボタンがクリックされ たら 中身を実行するよとそういった意味になり ます で処理の内容は今までやった内容ですね GetELEMENTbyを使ってOKと

22:01 いう風に書いてとなのでこのボタンを押す とここの中身がOKに変わったということ になります はいでは 練習問題です別のボタンを追加して 押されたらOK2という風に表示してみて ください はいではどうぞ [音楽]

23:18 もう1分追加します [音楽]

24:18 はいじゃあ答え合わせですねまずは別の ボタンを追加するってことなんでこの13 行目をコピペですね ボタンのところ もう1個追加すればいいとこの状態でまず 見てみると ボタン2つ追加されていますでIDは かぶってとまずいのでもう1個の方が ボタン2にしましょう はいでまあこの状態で今押しても何も 反応ないですなのでこの反応を作るために JSの方でこちらをコピーしますもう16 から18行目これ3行丸とコピーして下の 方に 貼り付けます

25:03 で今回のターゲットボタン2なのでこの IDのところをボタン2に変えると で表示のところはまあ共通でもいいので ちょっとこっちが押したってのわかるよう にOk2に変えてみましょうはいでこれで 実行してもらうとボタンに押した場合は ちょっともう1回 ボタンに押した場合はちゃんとOK 2になりますしボタン1の場合はOK だけになるということで こんな感じですね あのコピペして変えるべきところを変えれば このように動く という結果になります はいじゃあ こちらも 補足をしていきたいと思います ボタンクリックイベントもいろんな書き方があるんですね

25:50 ちょっとここで 3つ 紹介していますがすごくシンプルにかけるのが JクールなんですねただjQueryはま あさっき言った理由でも却下します はいで残るはオンクリックとアドベント リスナーというものになりますがこれは ですねまあ明らかにこのオンクリックで 書いた方が短く書けるというメリットが あります 処理的にはほぼ一緒なんでこれであれば ワンクリックの方を書いた方がいいかなと いうことで今回はこのオンクリックの方を 選びましたさっきも言ったようにこの IDのあるボタンをクリックしたらこの 処理を実行するよとそういった意味になり ます 誤って例えばオンクリックの処理を たくさん書いちゃった場合はどうなるかっ

26:36 ていうと一番最後に書いたやつだけが有効 になります 一方でアドベントリスナーとjQuery に関しては 誤っていっぱい書いちゃった場合は全部が 適用されるとここの違いはあるんですけど もそもそも誤って書かなければいいので オンクリックを選ぶのがいいかなという ふうに思われます はいでは次すみます次が 05ですね05セレクトボックスの値3章 です じゃあこちらも開いて0をダブルクリック して 古いのは出てきます はいまず実行します そして今度あのセレクトボックス出てき ましたね

27:21 札幌になってますけど適当になんか選んで 選択って押すとOKと出てきました ただこれどれ選んでもOKしか出てこない 状態ですはい じゃあちょっとコードを見てみるとHTM の方 これですねセレクトボックスのこういった セレクトボックス書く場合はこのセレクト タグっていうのとオプションタグっていう のを書きますで今回はセレクトタグにID エリアっていう名前を付けました でこのセレクトボックスはこの札幌 福岡沖縄って書いてあるところが見かけ上 の 値ですね本当の真の値はこのバリューの中 に入ってます 札幌であれば16,000円 福岡であれば40万 沖縄では47万1000という値ですね

28:06 後々使う気象庁のAPIと関連してる数値 になりますボタンはさっきと一緒ですね 今回もBTSあと ピータグもさっきと一緒ですちょっと位置 関係は上下逆になりましたけどこの3つが 書いてあると でJSの方を見るとここの外枠ですね はいここのオンクリックのところはさっき と全く一緒です 処理する内容が増えたっていうことですね でえっと1番目の処理を見てみると コンスト変数制限ですねあのエリアコード に対してドキュメント決定エレメントby なんとなくだんだんわかってきたかと思う んですけどここのエリアの中身を指して ますねでここの 値を

28:51 参照するという意味でドットバリューての 書くと今ここで選んでいるバリューを取っ てきます例えば福岡が選択されている場合 は40万だし 沖縄が選択されていれば47万1000が 選択されということでこっち側のバリュー がここで取れるということになります はいで2行目何書いてるかっていうとこれ は今までやったのと全く一緒ですねGet ELEMENTbyIDでインナーHTM で使ってOKという風に書いてるだけです ここまでの内容を踏まえて練習問題に進め たいと思います2つですねOKではなくっ てセレクトボックスで選択されたバリュー を表示してください 問題2が東京は高度13万です名古屋は 高度23万ですこれらを追加してみて

29:39 くださいはいではこれ2分間でお願いし ます はいどうぞ [音楽]

31:46 はいでは答え合わせですまず演習問題1 ですねOKでなくてセレクトボックス選択 されたバリューということなのでこれ 分かってれば簡単ですね今あの 常にOKを表示してるんで全然選択に関係 ないんですねなんでここを要はエリア コードにしてあげればいいということです これをOKを消しちゃってエリアコード これで実行すると 例えば札幌の時に洗濯するとちゃんと 16,000 福岡40万 沖縄は47セントというふうに出てきたと 思います はいで問題2の方ですねえっと東京は高度 13万って書いてあるんでここには追加し ていけばいいっていう感じですねまぁ だいたい規則性見えてると思いますので

32:32 適当にコピーして ちょっと地域的にどこに追加してもOKな んですけど見える順番になりますが 札幌と福岡の 中に追加しますで東京 コピペでも書いてもらってもいいです でコードが13万なんでちょっと間違え やすいですがこんな感じですねはいこれ だけでまず 東京がちゃんと追加されてるし選択すると 13万になるとあとはもう一個名古屋です ね名古屋は23万なので 東京と福岡の間っていうことでその下に 追加したいと思います 名古屋

33:18 で23番です ねこれも半角で書かないとダメ ですでこの状態で実行するとちゃんと 選択肢に名古屋が 追加されてちゃんと23万という風に出て きたかと思います他の選んでも大丈夫です ねはい わかれば意外と 簡単だったかなと思いますでセレクト ボックスの値3章もまた 似た感じでいろんな書き方ができると だんだん見慣れてきたかと思うんですけど もやはりですねjquaryは非常に優秀 なんですねもう非常に短く書けるとですが 今までの理由より却下しますで残るは GetELEMENTbyIDとクエリー セレクターなんですがさっきのいない HTMLでこっちのゲットエレメントバイ IDを選択したのでこっちも統一した方が

34:04 いいということでここでもGet ELEMENTbyIDがいいかなと思い ますこれは本当にお好みの問題なんで 統一感を持つということでこっちの方を 採用したという結果になりますでは続いて 06ですね 文字列連結に進みたいと思います 左が風ログダブルクリックしてもらって 実行してください そうする富士山の高さ3776mですと いう文字列が出てきましたはいじゃあ こちらのコード見ていきたいと思いますと HTMLのところはこれ簡単ですねBタグ で IDでディスプレイでここに表示しますっ ていう 文字列があるだけです でJSの方まずconstで変数です変数

34:53 制限してですねハイトっていう変数に対し て 文字列で 3776mというふうに代入しています 次次はのテキストという変数を用意して 今度またコンストで代入してるんですけど もここがなんか違いますよねなんか記号が 違うぞとさっきのことなんか向きが逆 っぽいこれバックオートっていうやつです ねバックコードで囲まれてますでまた なんかドルとかなんか変な格好出てきたぞ みたいな感じでちょっとパッと見とっつき にくいんですけどもでもどうでしょうなん となくあここにこの変数の中身埋め込ん でるんだっていうのが 理解できてもらえればいいかなと思います まさにこの記述をするとここの書いてある 変数の中身が展開されると

35:41 いうことになりますでそれがテキストに 入ったんで16行目ですねこれまでやった のと全く一緒ですねこれをディスクの ところに書いてるんでこのこれが出てきた ということになります はいではちょっとまだぼんやりしてる ところもあるかと思うんですがじゃあ今度 ですねこの富士山のところも同じように 変数化してしまってこれですねこれはまあ まずコピペして14行目の下ぐらいに書い てもらってじゃあこのマウンテンっていう のを使った形でこの表示を表してみて くださいはいではまた2分間時間取ります のでお願いします [音楽]

38:16 はいでは答え合わせしますまずはこの コンストマウンテン=富士山ですねこれ コピーして 14行目をしたあたりにまずは貼り付け ます はいでこれマウンテンに富士山っていう 文字列が入ったんで16行目のところ 富士山これを1回消してマウンテンにまず してしたいと思いますマウンテン でもいいですけどでただこの状態でやると 予想つくかと思うんですけどマウンテンっ ていう文字がそのまま出てきちゃいますで これを変数から文字ずつ展開したいんで この記号ですね ドル 波加工ですね波括弧を書いてあげると

39:01 これで実行すると はいちゃんとこのようになりました 初めはとっつきにくいかと思うんですけど ここに埋め込まれてるっていう見方をすれ ば意外とこっちの方が見やすいというもの になっていますと文字列連結ですね大きく 分けて2つありますちょっとプラス演算子 というやつで 初心者の方はこっちの方がまあ多分より 理解しやすいかなと思う思います プラス器具を普通は足し算ですけど 文字列に 適用すると文字数連結になります でただ今回使ったのはこっちの方なんです ねこのES2015以降に出てきたこの テンプレートリテラルというものを使い ましたでもさっき言ったように普通はです ねこういうクォーテーションを使うんです けれども

39:47 テンプレートリテラの場合はバック クオートですねバッククオートで囲って あげてその展開したい変数のところでドル 器具を波括弧を書くという形になります この程度の連結だとあんまり差はないん ですけれどもさっきみたいに複数たくさん 入れなきゃいけない時なった場合にあと プラス演算子だんだん見にくくなるって 言うんですねまあそういうの考えると やっぱ可読性ですねコードの読みやすさを 考えるとこっちの方がいいだろうという ことでちょっと最初はとっつきにくいん ですけど今回はこちらのテンプレート リテラルを採用しました他にもちょっと 細かいところでですね 薬業の時に開業記号不要とかその他 いろいろあるので今回はこちらを採用して いますでは次この07ですねジェイソンの

40:32 参照に行きたいと思います またゼロのダブルクリックしてもらって 実行しますはい そうするとなんか日付 期間が出てきました2025年 4月13から10月13はい でじゃあコード見ていきたいと思います まずHTMLの部分ここがいいですねもう 何とか出てきてBタグで IDがディスプレイここに表示しますと いうデフォルトの 文字列を書いてあります でJSの部分ここですね14行目コンスト 宣言してやってデータの中に何やらすごい めちゃくちゃ長いものが入ってるんです けどこれがJSON形式のデータになり ますでちょっとこれ長いんで見にくいんで

41:18 コピーして見やすくしたのが左の方に 貼り付けました見やすくするためですね 最後のテキストってやつは長いんですけど こう改行してみるとより分かりやすいかな と思いますJSONコードっていうのは 簡単な例ですけどもこのように 波括弧で全部括ってこういうペアになって んですねピリオド期間ですね期間はこれと かエリアは大阪 姫島とかヘッドラインはまあこういうやつ テキストにこういう文章みたいなこういっ た組み合わせなのがあのJSONコードと 呼ばれているものですそれをデータに入れ て JSONコードの中から一部だけを 取り出して表示したいその場合にこんな形 で書きますはいデータちょっと ローテーションピリオドを書いたら

42:05 この期間が表示されたとこれをヒントに ですね次の演習問題2つやってみて くださいピリオドをエリアに変更したら どうなるのか続けてじゃあこの長いこの 文字列まあここに書いたり同じですけど これを表示させるにはどうしたらいいか ちょっとこれは1分間ぐらいでやってみて くださいどうぞ [音楽]

43:28 はいでは答え合わせですまず練習1は ピリオドエリアに帰ろうってことなんで これで15行目の話ですね ここをピリオドを一旦消してしまって エリア に変えるとどうなる かそうするとですね大阪 夢島店出てきましたまさにここのペアの とこですねこれが出てきたということに なります はいで2番目分かるかと思うんですけど この長い 文字列を表示するにはここですよねこの ペアになってるなのでエリアを消して テキストですねテキスト 実行すると はいこのようにちゃんと出てきたと思い ますこのようにJSONはペアになって

44:15 ですね左側のことをキー右側のこと バリューという風に呼んでいます キーバリューのセットで間をコロンで つないで 複数ある場合はどんどんカンマをつけて どんどん増やしてあげれば何個でも書く ことができるとこれが非常にシンプルな形 なJSONの形になりますはいじゃあこれ も少し補足ですが ジェイソンを参照する際にもう2つほど やり方がありますドット機構とブラケット 基本ですでこれ比べた時にドット機構の 簡単に書けるんですねちょっとだけ書いて あげればいいと今回でもブラケット気泡 ってのを採用しましたこれは 各括弧書書いてクォーテーションを書いて あげるとでこれの最大のですね違いはこう いう風に決まりきったものを書く場合は 正直ドット機構の書きやすいんですけど 変数で書きたい場合もあるんですね変数は

45:01 使いたい場合はこのドットキーを使えない んですね ブラケット気泡の方じゃないと書けないと いうことで両方同じ汎用性の高いこの ブラケット基本の方がいいだろうという ことで今回はこのブラケット気泡の方を 選択しました じゃあ続いて8ですね ここが今回の最大のところですねhttp リクエストというものです じゃあ左側のダブルクリックしてもらって 古いの閉じちゃい ますはいで早速実行してみたいと思います そうすると石狩空知これ難しいんですけど べしというふうに思います北海道の地方

45:46 ですねが出てきたと思いますちょっと高度 の方見ていきたいと思うんですがまず HTMLの方はこれはもうずっとやって ますねもうピータグで IDがディスクでここに表示しますという 文字ですこれですね問題はスクリプトの方 ですねまず1行目これはいいかと思います コンスト使ってエリアアンダースコアって 記号を使ってますけどこれで一つの変数 ですエリアコードっていうのに16000 を入れてると15行目今度はURLって いうのに何が出てますこれはもうさっきの テンプレートリテラですねここにエリア コードを埋め込んでるっていうのが見えて くれば 成長してる証ですこの 埋め込んだ形がどうなるかっていうのが実 はこの左側青い文字ですねこれになります

46:32 埋め込まれてますよねはいちょっと実際 ちょっとアクセスしてみてください でこれで見るとちょっとややこしく見える んですけどもさっき見せた通りこれ改行 すると非常に簡単なんですねこれも JSON形式なので キーとバリューのセットになってます キーは1つ目がパブリッシングオフィス ですね2つ目がレポートデートタイム3個 目がターゲットエリアで4つ目が ヘッドラインテキストただこれはよく見る とないんですね何もないで最後の5個目が テキストさっきと一緒ですねテキストが 馬鹿長いですここまでがテキストの バリューになりますで問題は次ですなんか フェチっていうの出てきてメソッド ゲットとかまたなんか前なんだろう全って あとこの謎の記号ありますよねこれこれ

47:18 なんか逆なんじゃないかみたいな不等号 知ってる人がこれ逆じゃないかと思うかも しれませんけども変な記号出てきたりとか リターンとかなんかめちゃくちゃ 難しそうなのが出てきましたでもこれは もう完全にもう 抽象的に捉えてくださいこれでセットです この フェッチっていうこのセットをやっして あげることでインターネット上からデータ を取ってくることができます で最後にこの書いた処理のところですね ここは今までやってきたんでわかりますね ディスクここに表示しますどこに書いてる のはわかるかと思いますでこれさっきやっ たブラケット方式ですねデータの中に入っ てるターゲットエリアなんでこれに対応 するバリューがこれが出てきてという形が 見えるかと思いますはいちょっと今ここは

48:04 ちょっと気にしないで 注目すべきはここだということで集中して くださいではこれを踏まえてじゃあ 天気予報が書いてある長い文字列の部分を ここに表示してくださいはいではこれ1分 でお願いします [音楽]

49:23 はいでは答え合わせです わかる人にはすぐわかったんじゃないかな と思いますテキストさっきと同じキーの 名前でしたね 答えはこのターゲットエリア24行目の ターゲットエリアのところを消して テキストにしてあげると これで実行すると はい見事に天気予報の 文字列が取得できたかと思います じゃあこちらの方 補足に入りたいと思いますこれもですね また3つの書き方を用意しましたどれも 記述例はそんなに変わんないんですが ちょっとこれだけですね結構なんか書き方 が分散してるっていうかまとまってない 感じなんですね他の2つは結構まとまりが あるで結構複雑でしたとでその後に jQueryが生まれてかなり

50:10 簡素なシンプルな形になってのがわかるか と思いますが今までの 理由よりjQueryは却下します で今回選んだのがこの フェチAPIですねこれもES2015 以降で使えるようになったというものです もう1回整理するとこのフェッチっていう のはこのURLに対してメソッドこれ方法 ですね大きく ゲットとポストというのはあるんですけど ネットメソッドですね ゲット方式で取ってくると でそしたら全そうしたらこのレスポンスっ て特に1回入るんですね入ったものをこれ 実はですね矢印記号と同じ意味を持って ますアローファンクションと呼ばれてるん ですけどこのレスポンスに対して 元のデータJSON形式なんですけど

50:55 なんてコンピューターにとって見える ジェイソン形式になってないんでちゃんと JSON形式に変換するという処理を加え てますそれをリターンリターンするとまた こっちの前の方に入ってデータが取れるん でこの最後にデータに対して処理をすると いうことをやってると3段方式ですね データ取ってきてJSONに変えて最後 そのデータをどうするかってことで注目す べきはここの処理の部分とこのURLの ところだけ気をつければ基本的にはまる コピーで使えるかなというふうに思います 最後いよいよお天気API感染させ ましょうじゃあ左の方ですね全くクリック してもらうと 出てくると思うんですけどコピペして 作ろうと皆さんにここもう1から作って

51:41 いただくという内容になりますまた1から 作ると言っても 組み合わせですねさっきやった05 セレクトと08の組み合わせですもう少し と言うと 05セレクトをベースにして 08httpが必要な部分を持っていくと そうするとできますのでぜひですね チャレンジしてみてくださいで早く終わっ た人はちょっとアドバンスド演習みたいな のも用意してるんでこちらの方にも挑戦を してみてください音声合成の読み上げとか ですね初心者の方多分絶対早く終わらない ので ゆっくりやってもらってOKですあの 終わった人今回ちょっと長いコードになる んでこちらの方から入手できます簡単に ですね 難しかったかどうかっていうのアンケート があるので 答えるとすぐに手に入りますのでこちらの

52:27 方から実行してみてください はいではこちらちょっと5分間ぐらい時間 とってやりたいと思いますぜひ挑戦をして みてくださいどうぞ [音楽]

57:37 はいではじゃあ回答見ていきたいと思い ます回答はですねこちらから入手なんで ここをポチッとしてもらってどうだったか 皆さんの率直なところでお願いします これでであと感想ですね何かもう何でも いいんで一言お願いしますこれ回答すると 演習会とリンクが出てくるんでそれを クリックすれば見えます 了解ですにして送信と これですねこのリンクが出てきたらポチッ としてもらって このようなページが出てくるかと思います で下の方ですねここが 答えなんですけどここでコピーしてもいい んですがちょっと確実にコピーするために このローボタンですね右上のロボボタンを

58:23 押してこれ選択した方が間違えずにコピー できますこれをコピーして さっきのコラバッテリー コピペして作るは消しちゃっていいんで これ消してここに貼り付けるとはい それで実行すると はいここに出てきました これでセレクトボックス選んでもらって 選択ってやるとちゃんとそれぞれの天気 予報が見事に出てきたと思います いかがでしたでしょうかこれで天気予報の APIの本当にプチアプリですけど

59:10 完成したということになります 解説をするとまあ新しいことは何一つ出て きていないですもうほんと今までの 組み合わせですね基本的にはその 05セレクトのやつをまずコピペしてで その中にこのオンクリック中ですねここの 中の処理をここら辺を増やしたっていう形 ですねクリックされた時にさっきの httprequestを実行して表示さ せてるとそういった内容になります ちょっとアドバンス選手に関しては ちょっと 答え用意してないんですけども後で 興味のある方はやってみてください簡単に 音声 合成で読み上げなんかもできますはいで 最後10がですねあのお土産コーナーと いうことでこのコラボラトリーですね ここでしばらくはこれ残ってるんですけど

59:56 も多分1時間ぐらいすると消えちゃうん ですねそうするとせっかく皆さんが作った コードが消滅してしまう残念すぎるので このダウンロードこの横のボタンポチッと してくださいそうすると皆さんが作った コードがダウンロードできます なんかバーみたいな始まってはいこの右下 のとこに出てくると思うんでまあ皆さん これ展開をお願いします 特にWindowsの人は展開した方は 絶対いいですそのままクリックしてると 展開せずに実行になっちゃうんで全て展開 とか選んでもらって 展開したらさっきの09Apphtmlを ダブルクリックするとちゃんと開けるかと 思いますこんな形で これもあの今までずっとコラボでやって

1:00:42 ましたけど皆さんのもまさにローカル パソコンでも実行できるって事ですねはい こんな感じでですのでぜひですね続きは皆 さんのローカルのパソコンでエディターと かを使ってこの典型Piをより豪華なもの にしてみてください以上アルパカでした [音楽]