フロントエンドエンジニアを目指している、まゆ(@Ymayu_it)です。
フロントエンドエンジニアのもりけん(@terrace_tech)先生のツイートより、現場でよく作る機能が以下のものが多いようです。
現場でよく作る機能
・ログインログアウト
・登録、パスワード忘れ、メルアド変更
・検索
・ページネーション
・エラートースト、確認モーダル
・各種保存時バリデーション
・お知らせ
・お気に入り
・ファイルアップロード、ダウンロード
・バーチャライゼーション
・DnDでの並び替え、カスタマイズ— フロントエンドエンジニア (@terrace_tech) August 21, 2020
目標物として意識してJavaScriptを学んでいこうと思います。
JavaScriptのじゃんけんゲームを読んでみて

となったので前回に記事でまとめた動画をみてJavaScriptの頭に少しでもなるように半日ほどみました!
さっそく実践でどのように使われているのか、理解できるように…理解したい…!ので調べれるものは調べ、わからないところは考え、それでも不明なときは、もりけん先生に質問してみようと思います!
目次
じゃんけんゲームを作るときにどうやって作るのか
昨日エンジニアになった友人にじゃんけんゲームを理解しようとしている旨を話すと、
日本語でじゃんけんゲーム作るとどうやって作る?
と聞かれたので、日本語でじゃんけんゲームを一度作ってみようと思います。
日本語でじゃんけんゲームを作る
じゃんけんゲームは2人以上いて成り立つもので今回作成しようとしているものは
- プレイヤー
- コンピューター
なので、これを軸に考えていきます。
メモ
①コンピュータは、
- グー
- チョキ
- パー
をランダムに1つ出す設定をする。
②プレイヤー側は
- グー
- チョキ
- パー
のいづれかのボタンを1つ選ぶとコンピュータと勝負ができるような設定にする。
③コンピュータとプレイヤーの勝敗を決めるために、
- win
- draw
- loose
を表示する。
④勝利した方にスコアをつけてあげる
⑤再度、じゃんけんゲームが始められるような設定を作る
これがあっているかわかりませんが…この文章だと使えそうなJavaScriptは何かを挙げてみたいと思います。
日本語で作成したじゃんけんゲームで使えるJavaScriptは何かを挙げる
上記の日本語が合っているものと過程して…JavaScriptで使うであろうものをあげてみます。
- ramdom(0~1未満の乱数)
- if...else if命令(もしグーがでたら…)
これらをもとに作る…かな?
実際にyoutubeで紹介されていたコードをみてみます。
JavaScriptでじゃんけんゲームのコード
全然前に進めなかったyoutubeのじゃんけんゲームのコードをお借りしました。
app.js const game = () => { let pScore = 0; let cScore = 0; //Start the Game const startGame = () => { const playBtn = document.querySelector(".intro button"); const introScreen = document.querySelector(".intro"); const match = document.querySelector(".match"); playBtn.addEventListener("click", () => { introScreen.classList.add("fadeOut"); match.classList.add("fadeIn"); }); }; //Play Match const playMatch = () => { const options = document.querySelectorAll(".options button"); const playerHand = document.querySelector(".player-hand"); const computerHand = document.querySelector(".computer-hand"); const hands = document.querySelectorAll(".hands img"); hands.forEach(hand => { hand.addEventListener("animationend", function() { this.style.animation = ""; }); }); //Computer Options const computerOptions = ["rock", "paper", "scissors"]; options.forEach(option => { option.addEventListener("click", function() { //Computer Choice const computerNumber = Math.floor(Math.random() * 3); const computerChoice = computerOptions[computerNumber]; setTimeout(() => { //Here is where we call compare hands compareHands(this.textContent, computerChoice); //Update Images playerHand.src = `./assets/${this.textContent}.png`; computerHand.src = `./assets/${computerChoice}.png`; }, 2000); //Animation playerHand.style.animation = "shakePlayer 2s ease"; computerHand.style.animation = "shakeComputer 2s ease"; }); }); }; const updateScore = () => { const playerScore = document.querySelector(".player-score p"); const computerScore = document.querySelector(".computer-score p"); playerScore.textContent = pScore; computerScore.textContent = cScore; }; const compareHands = (playerChoice, computerChoice) => { //Update Text const winner = document.querySelector(".winner"); //Checking for a tie if (playerChoice === computerChoice) { winner.textContent = "It is a tie"; return; } //Check for Rock if (playerChoice === "rock") { if (computerChoice === "scissors") { winner.textContent = "Player Wins"; pScore++; updateScore(); return; } else { winner.textContent = "Computer Wins"; cScore++; updateScore(); return; } } //Check for Paper if (playerChoice === "paper") { if (computerChoice === "scissors") { winner.textContent = "Computer Wins"; cScore++; updateScore(); return; } else { winner.textContent = "Player Wins"; pScore++; updateScore(); return; } } //Check for Scissors if (playerChoice === "scissors") { if (computerChoice === "rock") { winner.textContent = "Computer Wins"; cScore++; updateScore(); return; } else { winner.textContent = "Player Wins"; pScore++; updateScore(); return; } } }; //Is call all the inner function startGame(); playMatch(); }; //start the game function game();
引用:Javascript Rock Paper Scissors Game Tutorial | Web Development Tutorial
randomとif...elseがありました!
が他にもたくさん!笑
constとlet
constは定数で数字が変わらないもので、letは変数で数字が変わるもののときに使う。
最初のconstという容器にはプレイヤーとコンピュータのスコアが入っている。
次のconstたちには
html
const startGame = () => {
const playBtn = document.querySelector(".intro button");
const introScreen = document.querySelector(".intro");
const match = document.querySelector(".match");
ゲームがスタートする容器と
ボタンを押してゲームをする容器
スクリーン画面にdocument上に…ん〜?
このあたりがわからないなぁ
document.querySelector
これが調べてもよくわからない…><
addEventListener
addは加えるでEventListenerは同一要素の同一イベントに対しても複数ひも付けられるイベントハンドラー??
classList.add
classListはプロパティでこれを使えるメンバーはaddがあって、addはリストに追加するもの。
forEach
this.style.animation
Math.floor
setTimeout(()
if ( === "") {
} else {}
おわりに
じゃんけんゲームがまだわからないのでJavaScriptの本を読んでいく!
もうちょっとわかりやすく書いた記事ないのかを探す!
崩して書いてくれているものを探すぞー!
あとJavaScriptについて理解が深まったら記事をちゃんとまとめて内容もキーワードも意識して作成しなおさないとブログの質が落ちる…
もりけん塾(@terrace_tech)