Vue3 の Draggable を CDN で呼びたいのにがやり方が分からん全国の女子高生集まれ

こんだけいろいろ調べて試しているのに動かないのマ～？

と全国の女子高生達が困っているはず。

ろくな情報ヒットしないもんな。Node.js でやるのばっか。

ちょっと試したいだけだとか、ちょっとサイトで使いたいだけなのにビルドとかマジウザイわな。

今日は機嫌が良いからおっちゃんがちゃちゃっと教えたる。

普段だったら「甘えんな！！」つってドラゴンスクリューから四の字に行くと見せかけての STF を極めるとこだがな。

枕も済んだところで、早速コード。

doctype html
html(lang='ja')
  head
    title Vue3 Sortable Test
  body
    script(src='https://unpkg.com/vue@3.2.45/dist/vue.global.prod.js')
    script(src='https://cdn.jsdelivr.net/npm/vue-draggable-next@2.1.1/dist/vue-draggable-next.global.min.js')
    style
      :scss
        [v-cloak] {
          display: none;
        }
        .item {
          border: 1px solid #ccc;
          padding: 1rem;
          margin: .5rem;
          border-radius: .5rem;
          .handle {
            cursor: grabbing;
            margin-right: .5rem;
          }
        }
    #app(v-cloak)
      draggable(:list='items' @change='sorted' handle='.handle')
        .item(v-for='item in items')
          span.handle ■
          span {{ item.name }}
    script(type='module').
      Vue.createApp({
        data() {
          return {
            items: [
              { name: 'HOGE 1' },
              { name: 'HOGE 2' },
              { name: 'HOGE 3' },
            ],
          }
        },
        components: {
          draggable: VueDraggableNext.VueDraggableNext
        },
        methods: {
          sorted() {
            console.log(this.items)
          }
        }
      }).mount('#app')

ビルドウザいつっといて、pug だの scss だの使っているのは愛嬌。これ以外で書くと守護霊の怒りで体がビリビリ痺れるからしゃーない。

まぁそこは読み替えてくれ。大体わかんだろ(投げやり)。

とりあえず、vue と vue.draggable.next を CDN から呼ぶ。

メイウェザー選花束投げつけの愚行

ごぼうの党の奥野卓志とやらがメイウェザー戦で花束投げ捨てた件。

彼は420万を払って世界中のヘイトを集めたわけだ。

相当な金持ちである彼からするとはした金だろうが、あの愚行で日本人が世界中から「その程度の人種」と思われたわけである。

流石にこの件に関してはありとあらゆる日本人が怒っている。

一人を集中砲火して国民でいじめるのが嫌いな俺も頭に来ている。

メイウェザーは一見、金目的で来て悪態をついているだけに見えるかもしれない。

だがしかし、あれだけ実績を作った人間がわざわざ来てくれて客寄せパンダとしてゴミみたいな試合に付き合ってくれているのだ。

感謝しかないだろ・・・。

そもそも金の問題はそれだけ払っても儲かるぐらい集客出来る存在だからだろ？

それだけの実績を汗と努力と根性で勝ち取った人間なんだよ。

本来は、いくら金を積まれたってそんなもん行かねぇよ、と言うはずの人間なんだよ。相当な金をすでに持っているんだから。

もし負けたら名前に傷がつくだけだし、ボクシング界にだって「大した事無いな」とダメージが行くと言うマジでデメリットしか無いんだから。

そんなものに引退してもう5年経ったのに出てるんだぜ？

格闘技界を盛り上げたいとか、ファンを喜ばせたいとかそう言うモチベがねぇと出れねぇよ。

金だけで出てるわけねぇだろ。

そんな神様みたいな存在に対して何をやってんだこのボンクラは・・・。試合に泥を塗りやがって・・・クソが・・・。

そもそも RIZIN の運営もどんな人物かわかってたのかね。

やつは人の話は全く聞かなくて周りの迷惑も全く考えず自分の主張だけぶちまけるやつなんだよ。

ABEMA での討論を見て欲しい。もはや彼はタチの悪い小学生のような有様で周りも呆れ果てるしかない。

www.youtube.com

時間があれば全編映像も見て欲しいが EXIT の兼近がかなりの大人で常識人に見える。

マジで今回の件は腹が立った。

同じ日本人としてやつの行動は本当に恥ずかしいし、メイウェザーに対しては謝罪の気持ちしか無い。

メイウェザーの紳士的対応により結果として彼の株がバク上がりしている事だけがせめてもの救いだ。

祝!西九州新幹線開通！!(誰からも望まれていない？)

いよいよ明日開通するわけだが、どう言う事だかローカル TV のプロモーション番組は嬉野・武雄ばかりを扱っている。

この新幹線は、博多 <-> 長崎市 を結ぶ新幹線なんだが、今のところ 博多 <-> 武雄 は在来線の特急で、武雄 <-> 長崎間だけが新幹線なのだ。

なので、博多から長崎に行くには武雄で乗り継ぎが発生するわけだが、あくまで乗り継ぎなわけで。目的地は長崎市でしょ？？

武雄にはこんな温泉が～こんな食べ物が～、嬉野にはこんな温泉が～こんな食べ物がぁ～～とアホみたいにやっとるが、武雄までは在来線でしょ？？？

長崎市を扱わないといけないんじゃねぇの？？

と言ったところで長崎市には何も無いからな。わかるよ TV 製作陣の気持ち。

そうなんだよ。何もないんだよ、長崎市。佐世保だったらハウステンボスあるし、IR でワンチャン役に立つ新幹線になったかもしれないが、長崎市はなぁ。

まぁそんなハウステンボスも香港の企業が買収して IR 自体が危うい事になってるけども・・・。

九州新幹線は計画自体、昭和48年だからな。

てかどんだけかかっとんねん、って話。約50年だぜ？半世紀よ、半世紀。

そんなアホみたいに時間食ってたら状況むちゃくちゃ変わるて。なんでそんなに遅いの。リニアにしたってさぁ。なんなんこのポンコツ国家は。

Youtube 維新軍 VS TV 正規軍

Youtube 維新軍の筆頭候補であったオリラジが完全に TV の世界との決別を決意した。

【緊急会見】オリラジ吉本興業独立までの経緯（前編）

【緊急会見】オリラジ吉本興業独立までの経緯（後編）

これは日本の芸能史に残る出来事だ。飛龍革命と同等レベルの出来事である。まさか正規軍の藤森氏が正規軍のトップにつばを吐くとは。

Youtube 維新軍のメンツは以下だ。

結局 redux-thunk って何なのマジ？超ムカつくんですけど

ググってもろくな情報が出ずイライラしている諸氏に送るシリーズ。

redux-thunk の使用を推奨しているわけでは無いのであしからず。
無邪気キッズがインタネッツの情報に踊らされた結果導入->破綻しその尻拭いをする事になったおっちゃん達向け。
こちとらイライラをモチベとして書いているので、React ファンボーイは気分を害する恐れアリ。そっ閉じ願う。

で、こいつは何か？

Redux で async やるためのもの。そう、それだけ。バカ丸出し。

wolfbash.hateblo.jp

上記エントリーで書いたコードの async 部分を thunk に変えたものを示す。

Redux と React hooks どっち使ったら幸せになれるの？

結論としては React を使わない事が一番の幸せへの道。

React ファンボーイはそっ閉じの方向で、以下読むべからず。

簡単なものを作るのにもアホほど時間がかかるので膨大な予算が無駄に取れる贅沢プロジェクトで暇つぶししたい場合のみに使うと良い。

表示速度を上げるにもアホほど労力と精神力と工数を吸い取られ続けるし、大人数でやればやるほどダメになり表示速度と開発速度が共に劇的に遅くなって行く。

そもそもこんなもの Facebook みたいに1画面で多人数から飛んでくるデータをビシバシ表示していろんなやり取りするものの為に作られたのであって、そんなイカツイウェブアプリを作らなきゃならない状況が一般企業にどれほどあるか？そしてそんな無駄な金をドバドバ出せるところがどれほどあるか？って話。GAFA の F だよ？やつらは。

予算かけずさっさと動くものを作れ、バグ出すな、表示速度上げろ、とか簡単に言い出す連中が大半を占める中、使っちゃ駄目なんだってこんなもん。理想と現実をちゃんと見るべし。

やむなく涙ながらにどちらかを使わざるを得ない場合はしょうがなく React hooks を勧める。

wolfbash.hateblo.jp

上のエントリーで貼り付けたコードと、以下に示す React hooks のコードを見比べて欲しい。

ガタガタ抜かさず Redux の使い方だけ簡単に教えろ！

決して、React や Redux の使用を推奨するものでは無い事をご了承願いたい。

React/Redux なるものをヨダレ垂らした noob エンジニアがググった結果がいっぱい出てくる = 流行っている、と言う無邪気な理由だけで導入。
案の定大トラブルとなり、そいつは抜け、火消しとして入ったおっちゃん達が「なんっっじゃこりゃ・・・」と愚痴りつつ調べてもゴミみたいな内容しか HIT せず「こんなもん時間のありあまった暇人が使うもんだろ！こっちは仕事さっさと終えて子供とスマブラせなあかんねん！ぶち転がすぞ！！！」
と発狂しないようにするための処方箋(主に俺向け)。

これらは大量のエンジニアが暇を持て余した結果、現場に故意に混乱をもたらし知ってるやつがドヤ顔で相手を煽るための代物であり、決して使うべからず。
決して幸せにはなれない。多くの FB エンジニアもこっそりそう思っているはず。互換性の無さでエンジニアを殺しに来る Angular と Vue よりマシかな？程度。
嫌々ながら使うハメになってしまった可愛そうな人向けエントリーなので React/Redux ファンボーイは帰れ。

前置きが長い。本題に移る。React はわかっている事前提。

Redux の基本イメージは、Component に status と dispatcher をまとめてくっつけるもの。
status は Component をまたいで変化可能なグローバル変数的なもので、その status を変えるのが dispatcher だと思えば良い。
こう言うものを props に1つ1つ attribute として渡してると多層のコンポーネントになった時発狂するのでそれを回避するのが主目的。
くっつけたものはすべて props 経由で取得。

オブジェクトにオブジェクトをまたぐグローバルなメンバー変数とプライベートなメソッドをつける狂気的なものだと思ったら理解しやすい。
何じゃそりゃ、破綻するだろそんなもの、と思うかもしれないがその通りでちゃんとやらないと破綻する。

たったこれだけの事をやる代物に理解を阻害する素敵要素がふんだんに散りばめられている。

まずコードを見てもらいたい。