🌊

指定したひらがなが都道府県名に含まれているか調べてみて遊ぶだけ（やってみた）

2022/02/03に公開

Vue.js

Tailwind CSS

tech

下記の動画を見ていて、ひらがな指定していってそんなに都道府県名にヒットしないことある？と思ったので雑にシミュレーションしてみました。

多分なんのことやらという感じなので、まずは動画を見てください。

【ボドゲ実況】全年代で遊べる「あいうえバトル」で白熱バトル！！！！！ - YouTube

できたもの

ページそのものは下記です。

リポジトリはこちら。

https://github.com/yumechi/kotoba-asobi

試してみたこととか

Vue 3.x + TailWind CSS 3.x で作ってみた
- 1枚ぺらのhtmlファイルだけ置く形式なので、CDNから取っている
ひな形を適当に探して編集する
- 2系のものですが下記のサイトを参考にしました
- https://scrapbox.io/vue-yawaraka/VueのCDN版を使おう
Vueを書いていく
- 公式のガイドを読みながら書いてみました
- https://v3.ja.vuejs.org/guide/introduction.html
- 正直2系で軽くしか触ったことがなく、2系の知識で止まっていたので一部困る部分がありました
  - propsData | Vue.js
  - 一番引っかかってたのはこれですが、他もまだ知識が追いついていないのでアップデートが必要そうです…
都道府県のリストを作る
- 下記のサイトベースで取ってきて、一括置換をしました
- コピペで使える都道府県一覧リスト・県庁所在地一覧 HTMLタグ| Start Point
濁点の処理
- JavaScriptで濁音や半角カナの処理 - Qiita
- normalizeすればよかったようです
  - あまりちゃんと意識してなかったのですが、濁点って別のコードポイントになるんですね
小文字の処理
- 調べてもよさげなライブラリがなかったりだったので、無理やり置換して対応しました
TailWind CSSで装飾していく
- なんとなく入力欄を真ん中に持ってきて、レイアウトは2分割でいいかなと思って適当に置きました
- 公式ドキュメントしかほぼ見てないです
- https://tailwindcss.com/docs/installation

所感

Vue3書きやすいような気もする
- こういう一枚だけのページでちょっと動きつけてみるみたいのには向いてそう
- 自分の知識のアップデートしないと…
TailWind CSSいい感じ
- ベターBootStrapみたいな使い方くらいしかできてないけど…
- カラーリングとかclassの当て方とか、マージンの取り方とか学ぶことは多そうだけど、使いこなせばそれっぽくできそう
意外とゲーム展開によっては結構な文字数行っても確定しない
- 動画の宣言順に合わせて「きさともおやわまほなんてにかみ」と入れてみたが、その時点でも実は6候補残っている
  - もっと少ないと思っていた
  - 時間があれば解析したいかも
- 最適戦略とかもちょっと気になってしまう
簡易シミュレーションしたが、テキストボックスの結果を動的に反映してくれるのが良い
- Vueの良さというか、Webフロントの良さというか
- 真面目に動画のゲームを作るとかすると部屋決めてソケットで通信して、みたいなことになるんだろうか？
  - そういうチャットアプリケーションみたいなのもいつか作ってみるのは面白そう（そのうちのネタとする）

まとめ

久々に Vue 触って、TailWind CSSも試せて良かったです。（特にCSSは数年ぶりに真面目に向き合ったかも）
これから軽く動くもの作ってみよーって時にどんどん機能試してみたいですね。

できたもの

試してみたこととか

所感

まとめ

Discussion