TypeScript & React & Firebase で何かつくってみる12 HTML基礎

Kentaro

今日は見た目は結構いじったが新技術は全然出てこない.
さすがに進捗がきつい.  だが, ここまでの連続投稿が途切れるのは悔しいのでショボくても書く.

React で いまさら HTMLの D&Dイベント を扱う

昨日参考にしたサイトで ドラッグアンドドロップ操作のハンドリングについて書かれていたので, 少し調べる.

素のHTMLなんてまともに書いたこと無いし, jQuery とか React を上辺で使ったことがあるだけなので, 基本的なことも結構知らない.

TypeScript & React だとコード補完もあるし型もあるし, 関数宣言にジャンプできるしで非常に便利だ.

D&Dをカードの移動 に使う. これで自由にカードを移動できるようになるはず. ついでに onClick を使って カードを裏返せるようにもしてみる.

{
 value.cards.map((card, i) => {
   return (
     <span
       key={`${key}-${i}`}
       style={surfaces[card.face].style}
       draggable={true}
       onDrop={(e) => {
         const v = JSON.parse(e.dataTransfer.getData('text')) as { deck: string, index: number };
         move(v.deck, v.index, key, i);
       }}
       onDragStart={(e) => {
         e.dataTransfer.effectAllowed = 'move';
         e.dataTransfer.setData('text', JSON.stringify({ deck: key, index: i }))
       }}
       onDragOver={(e) => e.preventDefault()}
       onClick={(e) => turnCard(key, i)}
     >
       {surfaces[card.face].name}
     </span>
   );
 })
}

いざ書いてみると大したこと無い. JSX と HTMLイベントってホント相性いいな. 

「React で D&D するならこんなライブラリが定番だ」って記事をあちこちで見たが, 上のコードとどう違うのだろうか.


React で いまさら CSS をあつかう

正直 CSS もあんまりよく知らない.
専門でないし, ちょっとツール作るくらいなら 小綺麗な UI ライブラリでなんとかなるので学ぼうと思ったこともない.

せっかくなので少し調べる.

一般的に style 属性を用いてスタイリングすることは公式ドキュメントの DOM Elements - React において推奨されていません。

と書かれているインラインスタイルを試す.
どうせおいおい UIライブラリで差し替えることになるだろうし.

CardSurface を拡張して CSS を保持させる.

type CardSurface = {
 name: string
 isFace: boolean
 style: React.CSSProperties
}

style 変数の型を  React.CSSProperties にするとコード補完が効くため便利だ. どんな要素を持っているのかすぐわかる.  

なんとなく使えそうな名前にアタリをつけてググって試行錯誤する.

画像1

あれ? 文字と背景色とボーダーぐらいなのに意外とトランプっぽくなったな.


今日はイマイチだった. 明日から土日だし明日以降の進捗に期待したい.

この記事が気に入ったらサポートをしてみませんか？