クリックやタップするとモナコインが回転しながらジャンプします。

ブツ

アニメーション

クリックやタップするとモナコインが回転しながらジャンプします。

けれど問題があります。

  • mpurseが起動して隠れちゃうせいで一瞬しかみえない
  • マウスホバーで回転させたかったんだけど所々の問題でボツになった
    • スマホはマウスホバーに相当するアクションがない
    • マウスホバー中にクリックしてもジャンプしないことがある

mpurseが起動して隠れちゃうせいで一瞬しかみえない

mpurseなしで送金できればいいんだけど。mpurseのコード解析しなきゃいけない。すごく大変そう。

マウスホバー中にクリックしてもジャンプしないことがある

これが解決したらマウスイベントだけには実装できたのに。でも解決できそうにない。そういう仕様なのかタイミング問題なのか。CSSアニメーションのことをよく知らない。ここに時間かけたくないので諦める。

減量

実際に使うときはどうせ同じ画像をひとつだけ使い回すはず。なのでどれかひとつだけを選ぶようにして埋め込みのBase64を減らすようにした。

それでもまだムダがある。

  • URL参照するときBase64回りのコードは不要だが、残ったまま（Base64の中身だけは空っぽ）
  • JavaScriptをMinifyしたい。でもブラウザで動作するライブラリがなかった。ES6対応である必要もありそうだし。

技術の話

ただのグチです。

減量

ちゃんとやるならNode.jsを使うべきなのだろう。webpackとか。でも使いたくない。環境構築が死ぬほど大変でコード書けなくなる。

生HTML,CSS,JSを勉強しながら書いている状況。そこでフレームワークに手を出したら最後。直接生コードをいじれなくなって思い通りに書けなくなってウガー！ってなる。

ブラウザのJSだけでMinifyできるライブラリは見つけられなかった。ES6にも対応できるようなのがほしいのだが。ちゃんと調査もできていない。こんなところにこれ以上力をかけたくない。

WebComponent

閉じタグを省略できない

HTMLで独自の要素を作れるのはいいのだが、閉じタグを省略できない。省略したらバグるっぽい。独自要素の名前は-をどこかに入れなければいけないルールがある。そのせいで名前が長くなる。閉じタグを省略できないルールとのコンボで冗長になりがち。ただでさえ<>があってウザイのに。

<mpurse-send-button to="MEHCqJbgiNERCH3bRAtNSSD9uxPViEX1nu"></mpurse-send-button>

私としては下のように書きたかったのになぁ。

<mpurse-send-button to="MEHCqJbgiNERCH3bRAtNSSD9uxPViEX1nu"/>

というかHTML自体が冗長すぎて嫌い。

イベント実装時はShaowDOMをカプセル化できない

せっかくWebComponentにしたのだからshadow DOMでカプセル化したかった。けど、アニメーションするときイベントをリッスンする必要があり、そのためにshadow DOMにアクセスする必要があった。これによりattachShadowするときclosedでなくopenにする必要にせまられた。カプセル化できないじゃん！　がっかりだよ。なにか方法ないのか。そういうものなのか。よくわかってない。WebComponent書いても、今の所ありがたみより面倒くささのほうが実感している。

ライブラリとの関係

たとえばWebComponent内にツールチップライブラリを含めたいとき、どうするか。

HTMLのほうで先に読み込ませることになる。原初的なやり方。そのせいでひとつのファイルにまとめられない。HTMLもどんどん汚くなってゆく。すごく嫌だけど、今の所はこれで妥協する。

ES Moduleでimportする方法がある。でも、環境によって動作しなかったりパフォーマンス問題がある。

それを解決するためにNode.jsでwebpackを走らせるなどしてひとつのファイルにバンドルする方法がある。これにて分散した各ファイルをダウンロードする必要がなくなり一発でゲットできるからネットワーク通信量が軽減できて応答が速くなる。このときコードをMinifyすればさらに高速になる。

Node.js

Node.jsを使って開発すべきなのだろう。でも依存したくない。これに手を出したら最後。永遠にコードを書くことなく環境構築をしつづけるハメになる。もう二度と触りたくないｗ　Node.js独自コードとか書きたくない。TypeScriptとかNode.jsのパーサがなければJSに変換できないのが嫌。

たぶんJS開発には次のようなフェーズがある。

  • 生JSだけで書く。実行環境を増やすためES Moduleも使わない
  • 生JSだけで書く。実行環境を犠牲にしてES Moduleを使う
  • Node.jsで書いてwebpackでバンドルする
  • Node.jsのTypeScriptで書いてwebpackでバンドルする

実行環境については上記のほかにトランスパイルだかポリフィルだかも考えなきゃいけないのか。それとも最近はES Moduleなどが使える環境が増えてきたし考慮しなくていいのか。常に最新と古い情報が入り乱れて錯綜している。アレもコレも頻繁にバージョンアップし、バージョンごとに設定やら何やらが変わって、すぐに動作しなくなる。その頻度・速度が尋常じゃない。あまりに考えること調査すること設定すること仕事が多すぎる。頭おかしくなる。なので当分は生HTML,生CSS,生JSだけを書く。

もう裸の<a><img>タグで書いたほうが早いのでは？　と何度も思いながら書いている。すごいストレス。

なんとか楽して以下のような条件を満たしたいのだが。最後の条件がムリなんだよなぁ。そのせいでHTMLが汚れる書き方をするハメになる。

  • HTMLコードがセマンティックに書けるようになる
  • CSSがカプセル化される
  • ShadowDOMがカプセル化される
  • 外部ライブラリと連携できる
  • 生JSだけで書ける
  • あらゆる環境で動作する

所感

たかがボタンひとつ作るだけで、なんでここまでしなきゃいけないの？　って感じ。不毛すぎる。

もういっそ後方互換はかなぐりすててES Module版で作ってみるかな。どれだけスマートなコードになるか比較してみて今後の方針を決めるか。

でも、世にあるライブラリをみると、結局すべてのモジュール・パターンを作ってたりする。苦行すぎる。本質的なコードだけを書きたいのに。余計なものが多すぎる。