JavaScript初心者でも簡単に作れるゲームが知りたい！ ゲームの作り方の詳しい解説やソースコードも見たい！ 本記事の内容 ゲームの完成形とソースコード ゲームの作り方の解説 この記事は、JavaScriptの基礎文法を一通り学んで「実際に何かを作ってみたい！」 という方に向けたものになっています。 ライブラリなどは一切使わず、JavaScriptの基礎文法だけで作れるゲームを紹介します。 今回作るゲームはJavaScript初心者の方でも30分で作ることができます。 実際に手を動かして、JavaScriptの理解を深めていきましょう！ 1. 数字当てゲーム 簡単な「数字当てゲーム」を作っていきます。 1-1. 完成形とソースコード 以下が今回作るゲームの完成形です。 1~20までの数字を予想してスコアを競うゲームです。 表示されるヒントを頼りに正解の数字を予想していきます。 より少ない回数で数字を当てると高得点になります。 デモサイトで実際の動きを確認できます。 ソースコードはこちらから確認できます。 1-2. このゲームを作って学べること 今回の「数字当てゲーム」を作って学べることは以下の2つです。 JavaScriptのDOM操作 コードのリファクタリング 1-3. 用意するもの 以下の3つのファイルを用意しましょう。 index.html style.css script.js これらのファイルはこちらにあります。 2. まずはゲームの仕様を理解しよう コードを書く前に、まずはゲームの仕様を理解しましょう。 2-1. 仕様の確認 今回の「数字当てゲーム」は大きく3つの機能に分けることができます。 メイン機能 ユーザーが数字を入力してチェックボタンをクリックすると処理を実行 入力された値によって異なるメッセージを表示 入力された数字が不正解の場合、スコアを1減らしてゲーム続行 入力された数字が正解の場合、正解の数字を表示してゲーム終了 リセット機能 リセットボタンをクリックしてゲームを再スタート ハイスコア機能 ハイスコアを表示する 2-2. 必要な要素の確認 必要な要素は以下の7つです。 正解の数字(secretNumber) 入力された数字(inputNumber) スコア(score) メッセージ(message) チェックボタン(check) リセットボタン(reset) ハイスコア(highscore) 1. 正解の数字(secretNumber) 変数secretNumberに1~20までのランダムな数字を設定します。 正解した時にこの数字を表示させます。 2. 入力された数字(inputNumber) 変数inputNumberにユーザーにより入力された数字を代入します。 この値をもとに条件分岐を行います。 ...

この記事では、Visual Studio Codeのオススメの拡張機能を紹介していきます。(随時更新中) 1. 一般 Code Spell Checker Japanese Language Pack for Visual Studio Code Material Icon Theme Project Manager 2. HTML HTML CSS Support HTMLHint こちらのHTMLHintに移行推奨 Live Server Auto Complete Tag VSCodeの基本設定だけで代替可能(詳細) open in browser Live Serverがあればほぼいらない、<script type="module">で書いたJSファイルを読み込んでるhtmlファイルはfile:// プロトコル経由で開いても動作しない 3. Ruby Ruby LSP VSCode rdbg Ruby Debugger 3-1. Rails Slim slim使う場合はあったほうがいい 4. JavaScript ESLint Prettier JavaScript (ES6) code snippets IntelliCode Formatting Toggle 4-1. Vue.js Volar Vue3からはVolar、Vue2ならVetur 5. PostgreSQL PostgreSQL 6. Git Git History GitLens 7. Docker Docker 【参考】 ...

この記事ではMacユーザー向けに、Google Chromeのキーボードショートカットの中から特に使用頻度の高いものを紹介していきます。 1. タブとウィンドウのショートカット 操作 ショートカット 新しいウィンドウを開く ⌘ + n 新しいウィンドウをシークレットモードで開く ⌘ + shift + n 新しいタブを開いてそのタブに移動する ⌘ + t 閉じたタブを閉じた順序で再び開く ⌘ + shift + t タブの移動 ⌘ + option + ←または⌘ + option + → 現在のタブのページを戻る・進む ⌘ + ←または⌘ + → 現在のタブを閉じる ⌘ + w 2. Google Chrome 機能のショートカット 操作 ショートカット ページ内の文字列検索 ⌘ + f 文字列検索で一致する次の部分に移動する ⌘ + g 文字列検索で一致する前の部分に移動する ⌘ + shift + g デベロッパーツールを開く ⌘ + option + i 3. アドレスバーのショートカット 操作 ショートカット サイト名に www. と .com を追加して現在のタブで開く サイト名を入力 + control + enter アドレスバーに移動する ⌘ + l アドレスバーから予測候補を削除する shift + fn + delete 4. ウェブページのショートカット 操作 ショートカット 現在のページを再読み込みする ⌘ + r キャッシュを無視して現在のページを再読み込みする ⌘ + shift + r 現在のページの HTML ソースコードを表示する ⌘ + option + u 全画面表示モードをオンまたはオフにする ⌘ + control + f ページを 1 画面ずつ下にスクロールする space ページを 1 画面ずつ上にスクロールする shift + space 【参考】 ...

この記事ではTwitterのサイトのER図の書き方を解説します。 論理設計の対象はTwitterの一部の機能に限定し、ER図はIE記法で、Draw.ioで作成しました。 1. 対象の機能 ユーザを表示する ツイートする ツイートに返信する リツイートする 引用ツイートする フォローする フォロー一覧を表示する フォロワー一覧を表示する リストにユーザーを追加する リスト一覧を表示する リストをフォローする 2. ER図 3. テーブル定義 3-1. usersテーブル ユーザーの情報を管理するテーブル username @から始まるアカウント固有の識別名(ユーザー名) name 表示名(名前) bio 自己紹介 location 場所 website ウェブサイト date_of_birth 生年月日 profile_image プロフィール画像 header_image ヘッダー画像 3-2. tweetsテーブル ユーザーのツイートを管理するテーブル user_id ツイートしたユーザーのid content ツイート文 image ツイート画像 reply_to 返信の場合、返信先のツイートのidが入る 通常のツイートの場合はnull(または0)が入る quote_tweet_id 引用ツイートの場合、引用元のツイートのidが入る 通常ツイートの場合、null(または0)が入る 3-3. retweetsテーブル リツイートしたユーザーとリツイートされたツイートの関連を表すテーブル(誰がどのツイートをリツイートしたかの情報を持つテーブル) user_id リツイートしたユーザーのid tweet_id リツイートされたツイートのid 3-4. followsテーブル フォローしたユーザーとフォローされたユーザーの関連を表すテーブル(誰をフォローして誰にフォローされているかの情報を持つテーブル) follower_id フォローという行為をしたユーザーのid(誰かをフォローしたユーザーのid = 誰かのフォロワーになるユーザーのid) followee_id フォローの対象となるユーザーのid(誰かにフォローされているユーザーのid) 3-5. listsテーブル リストの情報を管理するテーブル ...

1. はじめに Visual Studio Codeの拡張機能であるAuto Complete Tagが提供する機能は、Visual Studio Codeの基本設定だけで代替可能です。 この記事では、拡張機能をインストールすることなく、HTMLタグの自動閉じタグ補完機能と自動タグ名変更機能を有効にする方法を紹介します。 2. Auto Complete Tag Visual Studio Codeの拡張機能にAuto Complete Tagというものがあります。 Auto Complete TagとはAuto Close TagとAuto Rename Tagの機能を合わせたもので、この拡張機能を有効にするとHTMLタグの自動閉じタグ補完(Auto Close Tag)と自動タグ名変更(Auto Rename Tag)ができるようになります。 2-1. Auto Close Tag 開始タグの閉じ括弧を入力すると、終了タグが自動的に挿入されます。 2-2. Auto Rename Tag 一方のHTMLタグの名前を変更すると、対になるHTMLタグの名前も自動的に変更されます。 3. 設定方法 3-1. 自動閉じタグ補完(Auto Close Tag) command + ,で設定を開く Auto Closing Tagsで検索 HTML: Auto Closing Tagsにチェックを入れて設定を有効にする settings.jsonを直接編集する場合は以下を記入。 { "html.autoClosingTags": true } 3-2. 自動タグ名変更(Auto Rename Tag) command + ,で設定を開く Editor: Linked Editingで検索 Editor: Linked Editingにチェックを入れて設定を有効にする settings.jsonを直接編集する場合は以下を記入。 ...

この記事ではgit addもgit commitもしていない、作業ツリー上のファイル(インデックスに登録されていないワークツリー上のファイル)の変更を取り消して元に戻す方法を紹介します。 1. 方法 $ git checkout -- <ファイル名> git checkout -- .で全てのファイルを指定 【参考】 git ローカルの変更を元に戻す方法 #Git - Qiita Git で変更を取り消して、元に戻す方法 (事例別まとめ) | WWWクリエイターズ https://docs.gitlab.com/ee/topics/git/numerous_undo_possibilities_in_git/ Git - git-checkout Documentation

この記事ではGitの派生元ブランチ(親ブランチ)の特定と変更方法を紹介します。 間違った親ブランチからブランチを作成してしまいコミットもしてしまった時などに有効です。 1. 派生元ブランチの特定方法 $ git show-branch | grep "*" | grep -v "$(git rev-parse --abbrev-ref HEAD)" | head -n 1 | awk -F'[]~^[]' '{print $2}' grep "*"：*がついてる行のみ表示 grep -v "$(git rev-parse --abbrev-ref HEAD)"：カレントブランチを除外 head -n 1：1行目を表示 awk -F'[]~^[]' '{print $2}’：ブランチ名のみ表示 2. 派生元ブランチの変更方法 2-1. git rebase –onto H---I---J topicB / E---F---G topicA / A---B---C---D main ↓ $ git rebase --onto main topicA topicB ↓ H'--I'--J' topicB / | E---F---G topicA |/ A---B---C---D main git rebase --onto <変更後の親ブランチ> <現在の親ブランチ> <移動するブランチ> rebaseによりコミットが改変されているため、リモートへのpushにはgit push -fが必要 2-2. git cherry-pick $ git checkout -b topicB-new master $ git cherry-pick <コミットid> 新しいブランチを作り、欲しいコミットだけをgit cherry-pickで移動させる 適用させたいコミット数が少ない場合に有効 【参考】 ...

OOP版はこちら↓ 【Ruby3.1】ボウリングのスコア計算プログラムをオブジェクト指向で作る - あまブログ 1. 実行環境 macOS Monterey 12.4 Ruby 3.1.0 2. ボウリングのスコア計算プログラムの要件 1ゲーム = 10フレーム 1フレーム = 2投 スペアのフレームの得点は次の1投の点を加算する。 ストライクのフレームの得点は次の2投の点を加算する。 10フレーム目は1投目がストライクもしくは2投目がスペアだった場合、3投目が投げられる。 ありえない投球数やありえない数字・記号がこない前提。 入力例：6,3,9,0,0,3,8,2,7,3,X,9,1,8,0,X,6,4,5 3. ソースコード ver1：自作→レビュー反映 ver2：ver1→他の人のコードを反映 3-1. ver1 #!/usr/bin/env ruby # frozen_string_literal: true score = ARGV[0] scores = score.split(',') shots = [] scores.each do |s| if s == 'X' shots << 10 shots << 0 else shots << s.to_i end end frames = [] shots.each_slice(2) do |s| frames << s end frames_point = [] frames.each_with_index do |frame, i| frames_point[i] = frame.sum if i < 9 if frame[0] == 10 frames_point[i] += frames[i + 1][0] frames_point[i] += if frames[i + 1][0] == 10 frames[i + 2][0] else frames[i + 1][1] end elsif frame.sum == 10 frames_point[i] += frames[i + 1][0] end end end puts frames_point.sum 3-2. ver2 #!/usr/bin/env ruby # frozen_string_literal: true shots = ARGV[0].split(',').map { |s| s == 'X' ? 10 : s.to_i } frame = [] frames = [] shots.each do |s| frame << s if frames.length < 10 if frame.length >= 2 || s == 10 frames << frame.dup frame.clear end else frames.last << s end end point = 0 (0..9).each do |n| point += frames[n].sum frames[n + 1] ||= [] frames[n + 2] ||= [] if frames[n][0] == 10 point += (frames[n + 1] + frames[n + 2]).slice(0, 2).sum elsif frames[n].sum == 10 point += frames[n + 1][0] end end puts point 4. ソースコード(ver2)の解説 4-1. 主な使用メソッド String#split Enumerable#map Array#length Array#dup Array#clear Array#last Array#slice Array#sum 4-2. 解説 4行目 shots = ARGV[0].split(',').map { |s| s == 'X' ? 10 : s.to_i } ARGV[0].split(',')で入力された文字列を,で分割して文字列の配列にする "6,3,9,0,0,3,8,2,7,3,X,9,1,8,0,X,6,4,5"が["6", "3", "9", "0", "0", "3", "8", "2", "7", "3", "X", "9", "1", "8", "0", "X", "6", "4", "5"]になる .map { |s| s == 'X' ? 10 : s.to_i }でXを数値の10に、それ以外を数値に変換する 結果、shotsには[6, 3, 9, 0, 0, 3, 8, 2, 7, 3, 10, 9, 1, 8, 0, 10, 6, 4, 5]が入る 6~18行目 frame = [] frames = [] shots.each do |s| frame << s if frames.length < 10 if frame.length >= 2 || s == 10 # frameに2投またはストライクの1投が入ったら frames << frame.dup frame.clear end else # 10フレーム目 frames.last << s end end shots[6, 3, 9, 0, 0, 3, 8, 2, 7, 3, 10, 9, 1, 8, 0, 10, 6, 4, 5]から、各フレーム毎に分割したframes[[6, 3], [9, 0], [0, 3], [8, 2], [7, 3], [10], [9, 1], [8, 0], [10], [6, 4, 5]]を作りたい ...

この記事ではGutHubでPull Requestを使った開発の流れを紹介します。 1. 準備 まずは開発用のリポジトリを作成します。 リポジトリの作成方法には以下の2つがあります。 リポジトリを自分で作る 既存のリポジトリをcloneする 1-1. リポジトリを自分で作る リポジトリの作成方法は、以下の手順を参照してください。 【Git】リポジトリの作成 | あまブログ 1-2. 既存のリポジトリをcloneする チーム開発等で既にリポジトリが存在する場合は、以下の手順でリモートリポジトリをcloneします。 $ mkdir <ディレクトリ名> $ cd <ディレクトリのパス> $ git clone <リポジトリのURL> ※リポジトリのURLの取得方法 2. 開発の流れ 以下の流れで行います。 リモートのmainをローカルのmainに反映させる 作業ブランチを作成する ファイルの編集・追加を行う(コードを書く) ファイルの編集・追加をローカルに反映させる 作業ブランチをリモートにpushする Pull Requestを作成する フィードバックを受ける Pull Requestをマージする 2-1. リモートのmainをローカルのmainに反映させる まずはリモートのmainブランチの状態をローカルのmainブランチに反映させる。(最新のmainの状態にする) $ git checkout main $ git pull origin main 2-2. 作業ブランチを作成する $ git checkout -b <ブランチ名> main 上記はmainブランチを派生元に指定。 2-3. ファイルの編集・追加を行う(コードを書く) 作成したブランチ上でコードを書く。 2-4. ファイルの編集・追加をローカルに反映させる 作業した内容をローカルの作業ブランチに反映させる。 $ git status $ git add <編集・追加したファイル名> $ git commit -m "<コミットメッセージ>" 2-5. 作業ブランチをリモートにpushする $ git push origin <ブランチ名> この時点でリモートに作業ブランチが作成される。 ...

この記事ではGitのリポジトリの作成方法を紹介します。 1. リモートリポジトリの作成 まず初めに、GitHub上にリモートリポジトリを作成します。 GitHubの「New repository」からリモートリポジトリを作成。 2. ローカルリポジトリの作成 次に自分のPC上にローカルリポジトリを作成します。 2-1. ディレクトリの作成 $ mkdir <ディレクトリ名> 2-2. ファイルの作成 作成したディレクトリに移動し、任意のファイルを作成します。 $ cd <ディレクトリ名> $ echo "# test" >> README.md 2-3. ローカルリポジトリの作成 $ git init 2-4. ファイルをローカルリポジトリに反映 $ git add README.md $ git commit -m "first commit" 3. ローカルリポジトリの内容をリモートリポジトリに反映 ローカルリポジトリの作業内容を、GitHub上のリモートリポジトリに反映させます。 3-1. リモートリポジトリの登録 使用するリモートリポジトリを登録します。 $ git remote add origin https://github.com/[ユーザ名]/[リモートリポジトリ名] 3-2. ローカルリポジトリの内容をリモートリポジトリに反映 ローカルリポジトリをリモートリポジトリにpushします。 $ git push -u origin main