5/30 代表勉強通信～Javascript30を終えて①
こんばんは。代表の草場です。
JavaScript 30を終えました。JavaScript、まともに触ったことがなかったですが、だいぶ慣れました。簡単にまとめます。個人的には2倍速で聞くのがおすすめです。
１．JavaScript Drum Kit
クリックされた音がでるドラムの作成。addEventListener、querySelectorの使い方がよくわかりました。Chrome上で開発ツール使っていじることを覚えました。.classList.add()はこの後も多用されます。CSS部分はまだ知らないことばかり。thisの謎がまだ解明されずです。
２．CSS + JS Clock
ブラウザ上に時計を作る課題。CSSの使い方を詳しく勉強できる感じでした。Chrome上での開発ツールの細かい使い方への理解が深まりました。cubic-bezier、いいなあ。
３．Playing with CSS Variables and JS
ページのマージン、ベースの色、透明度をインタラクティブに変えるバーを作成。これもCSSの使い方がわかります。JavaScriptの場合はID指定は＃だが、CSでは–など。document.querySelectorAll()で返ってくるのはNodelistとのこと。Arrayの方が使いやすいらしい。基本的にはアロー関数が使われていて、かっこいいです（＝＞）。
４．Array Cardio Day 1
JavaScriptの基本のおさらいです。filter、map、sortなどの使い方。とても便利。
５．Flex Panels Image Gallery
FlexBoxについて。モダンでかっこいいです。CSSサイドの話がメインでした。CSSでclass指定するときは、.クラス名、と書くのですが、.クラス名 > ※とか、.クラス名 p:nth childrenとかが出てきました。直感的でわかりやすい書き方です。FlexBoxに関してはWesさんの専門講座があります。
６．Ajax Type Ahead
検索した言葉を含む文章が、色付きで表示されるサイト作成。Fetch APIが出てきます。Promise返してくるぜと。letとconstの使い方にも注意してねと。「…」で配列をスプレッドできることも学びでした。正規表現はまだまだ身につかないです。この時点でもthisの理解が進まず。頑張ろう。
７．Array Cardio Day 2
someとeveryについての復習です。楽しい。
８．Fun with HTML5 Canvas
canvasを駆使して、いろいろな色を描けるようにする課題。フラグを立てることの大切さを実感しました。座標の取り方を復習する必要ありです。addEventListener、かっこいいです。
９．１４ Must Know Dev Tools Tricks
console.logで使える技とか、console.warn()とかに関してです。地味にありがたい。
１０．Hold Shift to Check Multiple Checkboxes
ToDoリストで、シフト押しながらクリックすると途中のリストにもチェックが入るリストの作成。document.querySelectorを使い倒す感じです。thisのことも少しずつわかり始めました。フラグをうまく使えるといいなあ。inBetweenというフラグをtrueからfalseにするのに、
inBetween = !inBetween
というのがツボでした。
本日はここまで。
EVENTS
