前編の続きです。
講座の後半は、jQueryの使い方を学び、その後8回目に発表する企画の制作を進めていきます。
5回目〜6回目…localStorageの使い方、jQueryの扱い方
JavaScriptの基礎が終わると次はlocalStorageの扱いやjQueryの内容に入っていきます。
5回目…localStorage、jQuery
- jQueryについて
- jQueryセレクタの使い方
- onClickなどのjQueryイベントの使い方
- localStorageの使い方
5回目はjQueryを使ったDOM操作、イベントの定義などを学んでいきます。
JavaScriptでHTML要素の編集、いわゆる「DOM操作」を行うのは少し手間ですが、jQueryを使うことでとても簡単にDOM操作を行うことが出来るようになります。
加えてlocalStorageの扱いも進めていきます。localStorageはいわばHDDのようなもので、サーバーのデータベースなどを使わずともブラウザの中にデータをずっと保存しておく事ができます。そうした機能を使うことで、今回はブラウザを何度立ち上げなおしてもデータが消えないメモアプリが作れるようになります。
6回目…ajaxの使い方
- jQueryのajaxの使い方
- localStorageの復習
6回目はajaxを使ってぐるなびAPIを叩いてみたりとハイレベルな事にも挑戦します。APIというのは企業などが用意しているデータを簡単にアクセス出来る仕組みです。また、そのAPIにアクセスするための仕組みをajaxをいいます。
例えば、このぐるなびAPIを使うと、実際のぐるなびのサイトで使われているレストラン情報を地域、カードが使えるか、ランチに対応しているかなどの条件を指定した上で自由自在に検索したり引っ張ってくることができます。
そんなAPIを気軽に叩けるのはjQueryの魅力ですね。APIを使ってデータを自らのアプリに取り込むことが出来れば質のいいアプリが簡単に作れるようになります。
最初はJSとjQueryの区別がつかなかったりと混乱もありました。このメソッドはjQueryが持っている関数なのか、JavaScriptが持っている関数なのか。それらの見分け方や調べ方なども、講師がしっかり解説していきます。
この6回でたくさんの事を覚えなくてはならなくて皆さん苦労していましたが、活発に質問を講師にしたり、自宅で復習をしっかり行い、復習で出た質問を次回講師に聞き、沢山努力をされていました。
7回目…作品制作
7回目の作品作りではかなり完成が見えてきた状態の作品まで作り込んでいました。
最終回に向けてもくもくと作業をしつつ、わからないところを講師陣に聞いて完成へと近づけていきます。
8回目…作品発表
そしていよいよ最終回。最後に作品発表を行いました。
皆さん様々なアプリを作っていました。
- 勤怠情報メモアプリ
- APIを用いた読書情報のメモアプリ
- JS, CSSの学習メモアプリ
- フォルダなどを用いたリッチなメモアプリ
読書情報のメモアプリはGoogle Books APIというAPIが使われており、非常に難しいことにチャレンジしていました。
また、フォルダを用いたリッチなアプリは、メモとフォルダのデータを上手く関連付けたり、コードも非常に綺麗に整理されていたりと、丁寧な作りのアプリになっていました。
作ったアプリはどれもそのまま普段使いに出来そうなもので、完成度の高さが伺えます。
JavaScript初心者のみなさんが8回の講座でここまでできるようになるんだと初めて参加してびっくりしました。ここで身につけた力はかならず実務で活きるものになるはずです。二ヶ月間本当にお疲れ様でした。