初めに
- 初めまして。未経験からエンジニアを目指している者です。
先日タイピングゲームについての記事を投稿させていただきました！そこで学んだことをざっくりまとめましたのでよろしければご覧ください！ - AIを活用して開発しましたが、分からないことがあったらメモで殴り書きして、寝る前とかに整理する方法は個人的にはすごくお勧めです！これに気づいたのがプロジェクト終盤あたりでほんとに損した😂
- また「ここ間違えて覚えてるよー」とか「ここは詳しくするとこうだよー」等あれば遠慮なくいってください！
1. 設計原則
-
DRY原則
- 同じコードやロジックを複数書かず、一箇所にまとめる
- コードの保守性や可読性の向上が見込める
- 重複に敏感になろう！
-
YAGNI原則
- 必要となる機能以外はやたらむやみに追加しない
- 複雑な設計になることを避け、コスト削減や保守性を高める
- バグのリスク低減や、スパゲッティコード化の防止
2. React -Hooks編-
-
useState（遅延初期化）
- 初期値に関数を渡すことで、遅延初期化を行うことができる
- 最初のレンダリングのみ実行され、重い処理のパフォーマンス最適化に使用される
-
JSON.parseなどの重い文字列解析 - 初期データとして毎回計算が必要なオブジェクトや配列
- 一度だけ実行したい、時間のかかる処理
- ※今回のタイピングゲームでは主に名前関連の処理、単語取得、画像のプリロードに使用
-
useEffect（副作用の制御）
- 描画（レンダリング）が終わった後に実行される
- 動的な計算を主に担当(副作用)
-
window.addEventListener、removeEventListener(キー入力を拾う、監視をやめる) -
setInterval、clearInterval(一定間隔で更新) - ランキングの取得やデータ送信
- BGMのループ再生など外側からやってくる処理で活躍
- ※ 依存関係の記述を誤ると無限ループが発生するから注意
-
useRef
- 書き換えても再レンダリングを起こしたくない値を管理
- メモ帳的な感じで使われる（値は保持するが、画面の更新はしない）
- DOMの直接アクセス ← canvasでアニメーション描画に使用
- リザルト演出のタイマーで確実に停止させるために使用 (
clearTimeout) - 直前の状態を保持する
- ※ここで値を変更しても画面は再描画されない。Stateとの使い分けが重要。
-
useCallback
- Reactは再レンダリングのたびに関数を新しく作り直してしまう為、一度作った関数を再利用するために使う
- データベースの保存処理などに使用
- 無駄な処理を減らすことが出来る為、アプリの動きが軽くなるが、かえってメモリを食ってしまう場合がある
- ※値が変わった時のみ作り直すというルールを決められるが、依存配列の設定を忘れると変数が古いまま更新されないバグが起きる
3. localStorage
- 保存できるのは文字列のみ
-
JSON.stringify()を使って配列やオブジェクトを文字列にする -
JSON.parse()で元に戻せる - ハイスコア時のリザルト詳細を保存する際に
stringifyを使用 - 保存された文字列をプログラムが扱える形にする為に
parseを使用 - ※
stringifyは文字列に変換するときコストがかかり、ラグの原因になるのでタイミングを絞るのが大事 - ※
parseはデータが壊れているとエラーでアプリ停止するので必ずtry...catchで囲む
その他メモ
-
idle
- 待機中を意味する
- タイピングゲームでは入力待ちの状態（CPUの負荷軽減に活用）
終わりに
長くなるので一旦ここで終わりにします。
もう一記事書いたら、エンジニアを目指すと決めたストーリーを語れたらなと思うので、よろしければお付き合いください！
ここまで読んでいただきありがとうございました！