ほんきでJavaScriptの様子。後半戦!!

みなさんこんにちは。
学校事業部の古谷です。

今回は、前回の続き『ほんきでJavaScript』の後半の授業の様子をお届けいたします。
前半の様子はこちらです。
前半は主に基礎の部分を一つ一つ丁寧に学んでいく内容でしたが、後半は、習ったスキルをまた積み重ね合体させていく作業で、前半でやった基礎を振り返りながら、チャレンジしていきました。
日頃使ってない頭をフル回転させ、いつも授業が終わる頃には抜け殻のようでしたが、それと同時に達成感も感じました^^

では早速5回目の様子からレポートしていきます。

5回目 localStorage

最初はもちろん前回の復習から。
append(追加)と、thisの書き方をもう一度やって行きました。
その後はlocalStorageについてです。

  • append
  • this
  • localStorage

最初はlocalStorageの簡単な書き方から。
こちらはサンプルなので動かないですが、下記のようなものHTML上で作っておいて『テキストボックスにテキストを入力し、追加ボタンが押された段階で、localStorageに保存(setItem)し、<p>に表示。そして、ブラウザを更新し、再表示ボタンを押すと(getItem)また先ほど表示されていたものが<p>に表示される』というシンプルなものから勉強していきました。


<p>表示させる</p>

その後は、配列を使ってデータをlocalStorageに保存して行く書き方を学びました。
配列としてブラウザに表示させ、文字列にしlocalStorageに保存。そして文字列を呼び出し、配列に戻してブラウザに表示。この流れを何度も繰り返し覚えて行きました。

やはり最初はこの流れを理解するのに時間がかかりましたが、localStorageの概念をゆっくりわかりやすく教えてもらいました。

6回目 object api

6回目ももちろんlocalStorage。前回の復習から行っていきました。復習はいつも補助講師は岩本くん(クスール)が担当してくれています。
お題をもらって、前回習ったlocalStorageをもう一度最初からやっていきました。

  • localStorage
  • object
  • api

その後はobjectの概念をまなび、APIの内容に入っていきました。

今回サンプルで使用したAPIは『楽天トラベル』。
https://webservice.rakuten.co.jp/api/simplehotelsearch/

APIに繋げ、オブジェクト形式で書かれている情報を確認し、その情報を表示していきました。
テキストボックスに『地域(例:大阪)』を入力し、検索ボタンを押すと、<li></li>にホテル情報(ホテル名、アクセス、画像、リンク)を表示させました。

    <li>リストで表示</li>

いろいろなサイトなどもこうやって情報を表示させているんだなと、興味深かったです。しかし細かい部分を、完璧に理解するのはなかなか難しい。。。
この書き方は忘れたくないので、きちんと最終作品にもAPIを入れたいようと心に決めました。

7回目 メモ帳追加機能

この日は、objectの復習からやっていきました。
その後は、いつも授業のサンプルで使っているメモ帳に、カテゴリー分け機能を追加していきました。

  • objectの復習
  • カテゴリー機能追加
  • 作品制作

仕事・家・その他、というカテゴリーを選択し、メモを種類別にできる機能です。
またメモを追加した日付も記憶できる、日付を表示できる機能も追加していきました。

その後は自身の作品の制作時間でした。

8回目 作品発表

この日は18時からスタート予定の発表会まで、制作時間にあてました。
わからない部分を講師にたくさん聞き、作品完成を目指し進めていきました。

  • 作品制作
  • 作品発表

結構一人で考えるにはまだ難しい部分など講師と一緒に作っていったり、もうちょっとメモ帳として足すべきところなど指摘してもらったりし、みなさん進めていきました。

そして18時ごろ発表会を行っていきました。
メモ帳の機能を紹介していただき、頑張ったところ、出来なかったところなど、お話していただきました。

受講生同士の質問もあり、「その部分をどのようにつくったのか」など質問をもらいました。

講師からも、この先の改善点や、もっと必要な機能や、JavaScriptの指摘など、アドバイスをいただきました。

みなさん妥協せず頑張って作られていて、素晴らしかったです。

約2ヶ月ほどの全8回の『ほんきでJavaScript』が終了しました。
私も受講させていただきましたが、長いような短いような期間でした。
しっかりJavaScriptの基礎の基礎から学ぶことができ、基礎の分を復習を重ね、いろんな言語に対応していきたいので、もうちょっと勉強していきたいなと思います。
他の受講生の方からも、難しかったけど楽しかったと感想をいただき、充実した2ヶ月だったんだなと、とても嬉しく思います。


※総評中の様子


次回開催講座『ほんきでHTML』 受講生募集中!

5月20日から『ほんきでHTML』を開催します。 デザイナーの方など、これからHTML/CSSを本格的に学びたい方や、Web業界への転職を考えている方、ゼロからのハンドコーディングに自身のない方、などにおすすめです。

<期間> 日曜開催 全8回
2018年5月20日〜7月8日

<時間>
14:00〜19:00 

ご興味お持ちの方はお気軽にお問い合わせください。
http://cshool.jp/course/honki-de-html/