プログラミング初学者がゲーム効率化アプリ作ってみた話

プログラミング初心者でもイメージがわく開発日記

1. 思いついたキッカケ ―― ケンカをなくしたい！
   友達とオンラインゲーム（LoL）をしていたら、**「誰がどの役割をやる？」**で毎回モメる。

そこで「ボタンひとつでランダム決定できたらラクじゃない？」とひらめく。

目標：名前を入力 → 役職が自動で決まるシンプルなツール。

1. 使ったものは 3 つだけ
   目的 選んだもの ざっくり理由
   見た目を作る HTML “骨組み”を作る言語
   色や配置 CSS 文字サイズやボタン色を決める
   動きを付ける JavaScript ルーレットを回す／結果を表示

ポイント

わずか 1 ファイル（index.html） に全部まとめた。

ライブラリはゼロ。だからコピペしやすい。

1. 30分で動くものを作る手順
   骨組みを書く

html

決定

CSS で整える

css

body { font-family: sans-serif; }
button { padding: 12px; }
JavaScript でロジック

js

const roles = ["Top","Jungle","Mid","ADC","Support"];
document.getElementById("random").onclick = () => {
const r = roles[Math.floor(Math.random()*roles.length)];
document.getElementById("result").textContent = r;
};
ブラウザで開いて確認 ―― もう動く！

1. 改良ポイント（挫折ゼロでできる）
   役職を増やす → 配列に文字を追加するだけ。

見た目をオシャレに → ボタンに background: #333; color:#fff; を付ける。

スマホでも見やすく → max-width:600px; margin:auto; で中央寄せ。

初心者におすすめ：まずは数字や色を変えて遊ぶ → 動きが変わる感動を味わう。

1. 公開してみたら…
   GitHub にアップロード

Vercel でワンクリックデプロイ

友達にリンクを送る

「これ便利！」とその日のうちに好評 👍

1. さらに便利にした機能
   LoL だけでなく Valorant / Overwatch などにも対応。

右下に自分の X アカウント @toe78560468 を小さく表示 → 興味を持った人がフォローしてくれた！

1. これからチャレンジしたいこと
   やりたいこと やる理由（初心者メモ）
   役職数と人数が合わない時の自動調整 if 文を覚える練習になる
   多言語対応 (日本語/英語) HTML の lang を切り替える経験
   結果をTwitterに自動投稿 API の勉強になる

まとめ
小さく作ってすぐ試す → 楽しい＆バグが少ない。

HTML/CSS/JS だけで “自分のサービス” が作れる！

あなたも 「困っていること × ランダムボタン」 で、面白いツールを作ってみては？

DEMO
https://role-randomizer.vercel.app/

作者 X
@toe78560468