【お手軽フロントエンド】Alpine.jsで結婚式２次会の余興を作ってみた
この記事の内容
html1枚で動くルーレットが
制作時間8時間くらいで
できたよ🧘
github:https://github.com/nearkillit/slotmachine
誰でも使用はできますので、結婚式の２次会か会社のイベントで是非！
矢野くん結婚おめでとう
高校の親友の矢野くん（偽名）が結婚式を挙げるそうで、私は２次会のほぼ全てを依頼されました。
せっかくなので、フロントエンドの勉強がてらイベントが盛り上がりそうな何かを作ろうと思います😎
名前ビンゴ
名前ビンゴとは？
みなさん「名前ビンゴ」ってご存じでしょうか？
２次会とかでよくある（らしい）余興で、ゲームが始まる前に周りの初対面の人の名前を下記のような紙に書き込んでいって、最終的にビンゴの数字代わりに名前がランダムに選ばれて３マスどれか揃えたら景品がもらえるという神ゲーです。
名前ビンゴの辛いところ
名前ビンゴの辛いところが名前をランダムに選ぶ機構があまりないことです。（アプリとかはあるらしいけど、どうせならプロジェクターで大画面で見たいですよね！）
ということで、今回はその名前ルーレット部分をフロントエンドエンジニアっぽく作っていきたいと思います💆
名前ルーレット
どうやって表示するか
まあWebページでしょ☺️（即決）
フレームワーク(ライブラリ）を選ぶ
判断基準
- 簡単なやつ
- せっかくなら触ったことないやつ
- 学習コスト低いやつ
探索
- 簡単なやつ
- html1つで書きたい！！
- SPAでよくってよ
- Next.js❌
- Nuxt.js❌
- SvelteKit❌
- CDNでできるのがいいです
- React❌
- Svelte.js❌
- Riot.js❌
- SPAでよくってよ
- html1つで書きたい！！
- せっかくなら触ったことないやつ
- AngularJS❌
- Vue.js❌
- jquery❌
- 学習コスト低いやつ
- 触ったことがあるやつに似てるやつがいいな
- Alpine.js○（Vue.jsに似てる）
- 触ったことがあるやつに似てるやつがいいな
- 名前がいい
- Alpine.js◎（ドイツ語でアルプスの、っていう意味。クララー！）
結論
（ほぼなんとなく）Alpine.js
Alpine.js
特徴
シンプル。
軽量。
限りなくパワフル。
https://alpinejs.dev/
す、すげぇや😲
Vue.jsと比べてみたら
| Name | Size |
|---|---|
| Alpine.js | 14.5KB |
| Vue.js | 34.7KB |
確かに軽いかも🥳
Vue.jsと似てるところ
| Vue.js | Alpine.js | 短縮 |
|---|---|---|
| v-on: | x-on: | @ |
| v-bind | x-bind | : |
上の表を見たらわかりますが、大体vかxかくらいの違いですね！
マスタッシュ（{{}}）がAlpineではx-textとか、細かい違いはありますがこれはVueを触れたことがあれば使いやすい！しかも軽い！
詳細の違いは素晴らしい記事[1][2]があると思うので、割愛します🐱👀
作ってみて
所感
Vue.jsでよかったかも...😇
理由
- 軽いし覚えることも少なくてよかった
- Good👍
- 逆にAnimation部分の実装を全部手動で書かなくてはいけなかったのが大変だった（VueだとListのAnimationとか楽だった気がする[3]）
- Bad💋
結論
- ListのAnimationとか楽にやりたいなら
- 👉Vue.js
- 逆にそれ以外でかる〜くフロントエンドを実装したいなら
- 👉Alpine.js
となんとなく思いました。
大変だったところの解説
名前を左から右に流れているようにループさせるのが大変だった
解決策は文字で書くと大変なので図解した（Miro便利！）
何はともあれ
Alpine.js（とtailwindCSS）で、こんなものが１日でできるという事が分かりました！
すぐに使えて簡単なAlpine.js、是非おすすめです✌️
あと矢野くん末長くお幸せに
参考文献
Discussion