タイピングゲーム作成終わりに軽く思考整理したこと２

初めに

初めまして！こちらは先日投稿させていただいた記事 【開発43日目】思考整理と学習メモ の続きでございます！
よろしければこちらもご覧ください！

---

CSS

• pointer-events: none

  • noneを指定するとマウスやタッチ（スマホ）、ペン入力を無視する（透過させる）。
  • ※ホバーや onclick も無視されます。
  • スマホ対応ならこれ一択。

  • 補足: 下にあるボタンをクリックさせたいオーバーレイ（装飾用の枠など）を作る時に必須のプロパティです。

• display: none と visibility: hidden

  • display: none
    • DOMから完全に消える。
    • 今回のゲームでは、Canvas要素を取得する際に「Canvasがない（null）」というエラーになってしまうため、こちらは不採用としました。

    • 補足: display: none にすると要素が詰められる（レイアウトが変わる）ため、場所を確保したい場合には注意が必要です。

  • visibility: hidden
    • 存在はしている（見えないだけ）。
    • 要素を完全に消さずに隠したい時に使う。

    • 補足: 要素の「高さ」や「幅」はそのまま残り、透明人間がいるような状態になります。

VS Code & ターミナルコマンド

• Shift + Alt + F (Win) / Shift + Option + F (Mac)
  • インデント整形（フォーマット）。
• npx knip
  • デッドコード検出（使われていないコードを浮かび上がらせる）。
• npm audit fix
  • セキュリティ脆弱性の修正をしてくれる。

  • 補足: 便利なコマンドですが、依存関係のバージョンが勝手に上がってアプリが動かなくなることもあるため、実行後は必ず動作確認をしましょう。

NG表記

• マジックナンバー
  • コードの中に「3」や「100」など、意図がよく分からない数値が散らばっている状態。
  • 対策: 分かりやすい名前で定数として定義し、その値を使う。
  • （他人が見た時に「この数字なんだっけ？」となる記述は避ける）。

---

思考整理の続き：Git編

Gitの概念（発送作業のイメージ）

• git add .

  • 変更したファイルを全て「指定の場所（ステージングエリア）」に入れる。
  • . は「ここにあるファイル全部」という意味。
  • ※変更があったファイルだけをステージングしたい場合は git add -u が便利。
  • イメージ：箱詰め

• git commit -m "メッセージ"

  • セーブポイントを作る。-m はメッセージの意味。
  • イメージ：封をする（ラベル貼り）

• git push origin main

  • 押し出す（アップロード）。
  • イメージ：発送（トラックに乗せる）

• origin

  • 送り先（GitHubの場所）。
  • GitHubのリポジトリURLにつけたあだ名。URLを毎回打つのは間違いの元なので、慣習的に origin と呼びます。

• main

  • 送る部屋（メインの作業部屋の名前）。
  • 昔は master と呼ばれていましたが、今は main が主流。
  • ※ git main というコマンドがあるわけではなく、main ブランチに対して操作する時に使います。

• git pull origin main

  • 荷物の受け取り（ダウンロード）。
  • GitHubにある最新データを取り込み、手元のPCのデータと merge（合併）させる。
  • トラブル対応（コンフリクト解消など）でも使用しました。

• git status

  • ファイルの状態を確認する。
  • 赤字や緑字で「まだ箱に入ってないよ」「準備OKだよ」とヒントを教えてくれる。

---

開発知識メモ

HMR (Hot Module Replacement)

• コード変更時、変更された部分だけ即座にブラウザに反映させる機能。
• UI調整や状態追加（アニメーションなど）に便利。

• 補足: 通常のリロード（F5）だとゲームの状態もリセットされてしまいますが、HMRなら「入力中の文字などはそのまま」でデザインだけ変えられます。開発効率爆上がり機能です。

curl (カール)

• コマンドラインからURLにアクセスして、データを受け取ったり送ったりするコマンド。

• 補足: APIの動作確認テストなどで非常によく使います。

• 気付き: curl で簡単にデータが送れるということは、知識がある人は誰でもAPIを叩けるということ。そのため、機密情報を守るためのセキュリティ対策（RLSなど）が必須だと学びました。

DB (データベース)

• upsert (Update + Insert)
  • 上書き保存。
  • 中身を見て「あれば更新」「なければ新規作成」を自動判断して行ってくれる。
  • 自己ベスト更新時のデータ保存に使用。
• TRIGGER (トリガー)
  • DB内の自動化ロボット。特定の操作があった時に自動で処理を実行する。
  • ロジックが複雑になり、バグった時の原因究明が難しくなるので今回は不採用。
  • プレイ回数自動カウントや不正スコア監視などに使えるので、今後は活用していきたい。

その他ロジック改善

• プレイ回数自動カウント＋本日のスコア履歴（今後は実装していきたい）。
• toggle
  • remove と add を自動で切り替える機能。
  • 今回は処理の「確実性」を求めたので、横着せずに remove と add を明示的に使用した。

---

感想

• 今回のタイピングゲーム作成では毎日学びがありとても楽しかったですが、AIを活用していても苦しい壁は何度もありました。(入力処理とか！)
• 特に、JSでフロントをある程度完成させた後、「ノリでReact移行」を決断した時が一番しんどかったです😭
• Reactに関しては入門書も何も読んでいない状態だったので、コードが呪文に見えるし、UIは崩れるしで完全にパンクしました(笑)。
• ですが、この経験を通じて「いつかAI無しでも開発してやる！」となりました！覚えることは無限にありますが、一つずつ積み上げていこうと思えました。いきなりのゲーム作成はハードルが高かったですが、挑戦して本当によかったです！
• 今回学んだことや開発ストーリーを少しずつ発信していきますので、よろしければお付き合いください！
• 間違い等あれば遠慮なくお申し付けください！
• ここまで読んでいただきありがとうございました！