この前、マウスオーバーしたら色が変わるアニメーションを anime.js で作る方法の記事を書いた。 ack-ludum.hatenablog.com これをはてなブログ上で実現できないかなと思って色々試したところ、 以下のようなコードを書いたら上手くいった。 鬼門は anime.js…

概要 TestView を用いた MVVM (Model-View-ViewModel) パターン実装の続きに取り組む。 概要と事の経緯については、 0. Figma 奮闘記と JavaScript との邂逅を参照のこと。 0. Figma 奮闘記と JavaScript との邂逅 1. 最低限の環境構築とアニメーション 2. T…

概要 前回は、 JEST の導入と TDD (テスト駆動開発) を進めるだけで終わってしまった。 今回は、 TestView を経由して MVVM (Model-View-ViewModel) パターンを導入していこう。 概要と事の経緯については、 0. Figma 奮闘記と JavaScript との邂逅を参照の…

概要 ここでは、これまで作ってきた GUI モデルに MVVM (Model-View-ViewModel) パターンを導入する。 テストもできるようにする。というか、 TDD (テスト駆動開発) も導入しながら進めていく。 概要と事の経緯については、 0. Figma 奮闘記と JavaScript と…

概要 ここでは、紫微斗数という占いの命盤を作るための盤面を表す HTML/CSS と、 そこにアニメーションを加える TypeScript を書いてみる。 概要と事の経緯については、 0. Figma 奮闘記と JavaScript との邂逅を参照のこと。 0. Figma 奮闘記と JavaScript …

概要 ここでは、 JavaScript で作った環境を TypeScript に変換して、 Anime.js を使った簡単な Web アニメーションの試作を再現してみる。 概要と事の経緯については、 0. Figma 奮闘記と JavaScript との邂逅を参照のこと。 0. Figma 奮闘記と JavaScript …

概要 ここでは、 JavaScript の実行環境である Node.js をインストールして、 Anime.js を使って簡単な Web アニメーションを試作する。 概要と事の経緯については、 0. Figma 奮闘記と JavaScript との邂逅を参照のこと。 0. Figma 奮闘記と JavaScript と…

概要 知り合いからフロントエンド・バックエンド環境について話を聴く機会があり、 興味を持って調べてみた。 もともと占いソフト開発とか TODO ソフト開発とかに興味はあった。 その中で重要な GUI 要素として、 HTML は汎用的な GUI の候補とは認識してい…