すべてのカテゴリ

毎度様でした。今日はJavaScriptの復習をしていました。これまでの自分は、「動くコードは書けるけど、なぜそう書くのか説明できない」という状態だったなと、改めて感じています。特にしんどかったのが、〇target〇current〇dataset〇indexOfといったものが、ある日突然まとめて出てくる瞬間でした。「え、なんで急にこんな変数が増えるの？」「今どこを見て、何をしてるの？」理解が追いつかず、頭のMPが一気に削られていく感覚でした。なぜこんなに疲れていたのか原因を振り返ってみると、毎回その場で流れを考えていたことが一番大きかったと思います。①クリックされた②どの要素？③今どんな状態？④次はどうする？⑤見た目を更新するこれを全部、毎回即興で考えていたんですよね。そりゃ疲れるはずだな、と。気づいたこと：「これ、全部同じ流れじゃないか？」あるときふと、あれ？これって毎回同じことを、同じ順番でやってない？と気づきました。整理してみると、流れはほぼ固定でした。①イベントが起きる②対象の要素を特定する③今の状態を取得する④次の状態を決める⑤render で見た目を反映するこれ、毎回同じ。違うのは中身だけで、構造は完全に同じでした。「型」として考えるようにした結果そこで、「理解しきってから使おう」ではなく、まずは型として覚えて使うことにしました。すると、どこで何が起きているか迷わない変数が増えても怖くならない脳の体力消費が明らかに減るという変化がありました。型があることで、考えるエネルギーを“理解”に回せるようになった感覚です。JavaScriptは魔法じゃなかった今回一番の学びは

WEBサイトに動きを加えたいと思うときほとんどの方はjavascriptやライブラリなんかを導入するのがセオリーだとおもわれますが、実はCSSだけでもjavascriptに負けないくらいのアニメーションを実装できたりするんです！今回はその中でも「え、！？」こんな複雑なものがCSSだけでとおもうようなものを4選程ご紹介しましたのでホームページ制作や学習の参考にしてみて頂けたら幸いです。