2023-02-19 到達点メモ

2023-02-19 到達点メモ

  2月 19, 2023    nonoNaga

---

 昨日の続き。

ひとまず、ジグソーパズルの原型みたいなのはできた。
具体的に言うと以下のような感じ

見かけはあれだが、分割した画像と最初のピースの配置をランダムにすれば、ジグソーパズルはほぼほぼできたと思う。

ただ、もうちょっと作り込みたい感じではある。

■学んだこと、わかったこと

• 昨日の到達点メモで参考にしたネットのコードは、CSSのStyleの値を変化させて画像を移動させていた。元のタグの位置から計算しており、絶対座標の値ではなかったので、この方法は不採用にした
• canvasで描画したものをドラッグアンドロップをしている風に移動させる方法があったので、それを採用
  参考：【JavaScript】Canvas要素をドラッグ＆ドロップで動かす【ゲーム】 - TKGBlog
• for..ofやfor..inの存在を忘れていて自分の情けなさに泣く。結局使わなかったが・・・。
  いつもごっちゃになるのだが、for..inは使い方に注意が必要
  参考：for...in - JavaScript | MDN # 配列の繰り返しと for...in
• 配列で新しいキーを作るときに以下のやり方が入力支援を受けられて楽
  let test = [];//空配列の作成
  test.ptn = "___ptn____";
  
• 配列の値を取り出し、計算した結果、その配列のデータを知りたいときに、findやfindIndexを使うと面倒なforとかを使わなくて済む。
  今回は、「indexの値が知りたい」、「条件が一致すればそこで終了したい」があったのでfindIndexを採用。
  indexも知りたいし、値そのものも知りたい場合は、findIndexでindexを取得し、そのindexを配列に入れれば良い
• あと、for文を使うより、（コードが少ないせいもおそらくあるが）理解しやすい気がする

■感じたこと、思ったこと

• 一つずつ実装できそうなものを積み上げていくのが良かったと思う
• for文を使うのは最終手段じゃないんだろうかという気がしてきた。
  多分、他の構文を使ったほうがやりやすいし、見やすい気がする
• 参考にしているコードはあるが、ほぼほぼ一から書いているのでだいぶ中身がわかっているように感じている。そのせいか、昨日のコードみたいに自分のものじゃないコード感がほぼほぼない。
• うまくいかないときは一つ一つの値の確認が大事だと本当に感じた。
• 悩んだり、変に考え込むよりは作ったほうが早いし、思考が明確になる
• コードを書いていて久しぶりに達成感と楽しさを感じた。考えがうまくいくと楽しい。
• ここまで来るのに多分10時間ぐらい。一時は完成が見えなかったが、ここまでこれてよかった。
• どれくらいコードの量になるかは、想像できていなかったが、ライブラリなしで今のところ150行未満。意外とコンパクトにやれるもんだなと思った。

■参考サイト

配列を征する者はJSを制す。JavaScriptのスマートな配列操作テクニック - ICS MEDIA

今日はここまで