🌊

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

2022/02/02に公開約2,000字

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

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

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

できたもの

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

https://www.yumechi.work/kotoba-asobi/index.html

リポジトリはこちら。

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

試してみたこととか

  • Vue 3.x + TailWind CSS 3.x で作ってみた
    • 1枚ぺらのhtmlファイルだけ置く形式なので、CDNから取っている
  • ひな形を適当に探して編集する
  • Vueを書いていく
    • 公式のガイドを読みながら書いてみました
    • https://v3.ja.vuejs.org/guide/introduction.html
    • 正直2系で軽くしか触ったことがなく、2系の知識で止まっていたので一部困る部分がありました
      • propsData | Vue.js
      • 一番引っかかってたのはこれですが、他もまだ知識が追いついていないのでアップデートが必要そうです…
  • 都道府県のリストを作る
  • 濁点の処理
  • 小文字の処理
    • 調べてもよさげなライブラリがなかったりだったので、無理やり置換して対応しました
  • TailWind CSSで装飾していく
    • なんとなく入力欄を真ん中に持ってきて、レイアウトは2分割でいいかなと思って適当に置きました
    • 公式ドキュメントしかほぼ見てないです
    • https://tailwindcss.com/docs/installation

所感

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

まとめ

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

Discussion

ログインするとコメントできます