2023-03-18 到達点メモ

2023-03-18 到達点メモ

  3月 18, 2023    nonoNaga

---

ひとまず、最近の関数はデフォルトで後から判定する方法（今回は配列のfindLastIndexの話）が用意されているということを忘れないようにしたい。

自力で実装すると複雑になってわかりにくくなる。というか、わかりにくかったのでfindLastIndexに変更した。

あと、解決策が載っているサイトがキャッシュ表示だったのもあったので、ちょっと雑でもいいから記録に残さねばならぬと思ったのが一つあった。

クラスのPieceのコンストラクタを呼び出す際に、以下のような画像をロードする関数を使っていたのですが、その中で使っているクラス内の関数がないというエラーがでてきた。

コード（省略しているが、drawPieceImageは宣言してある）

class Piece{

    constructor(x,y,length,index,context2D, horizontalElements, verticalElements){

        this.x = this.initPieceRandomPotion(x);

        this.y = this.initPieceRandomPotion(y);

        this.length = length;

        this.pieceNumber = index;

        this.context2D = context2D;

        this.isPieceSet = false;

        let image = new Image();

        image.src = "./images/sample_mini.png"

        image.onload = function () {

            this.image = image;

            this.drawPieceImage(horizontalElements, verticalElements);

        }

エラー内容

これがなぜそうなるのかが本当にわからなくて、onloadにマウスカーソルを移動させて表示されたポップウィンドウを見て漸くもしかしてこれってここのthisってクラスのthisじゃないんじゃねぇ？と気がつくことができた。

あーでもないこーでもないと色々パターンを試したり、調べ直したりすることで漸く下記のサイトを見つけることができた。

参考：JavaScriptのコールバックで クラスthis が参照できないの解決策 | PisukeCode - Web開発まとめ

上記のサイトによると二通りあるとのこと

１：bind関数で明示的にthisを指定する

        image.onload = function() {

            this.image = image;

            this.drawPieceImage(horizontalElements, verticalElements);

        }.bind(this);

２：アロー関数を使う

        image.onload = (e) => {

            this.image = image;

            this.drawPieceImage(horizontalElements, verticalElements);

        }

多分、最近だとアロー関数を使う人が多いから、今回のケースは見つかりにくかったんだろうなぁとはなんとなく思った。

気力があったら、これはまとめ直して独立記事としても上げてもいい気がしている。

すごく余談ではあるのだが、ここのonloadの詳細がMDNの方（近そうなのが、Windows:loadイベントのページ）では見つけられなくて、それっぽそうなのが、Unified XUL Platform MDN BackupのページにあったGlobalEventHandlers.onload - Web APIsが一番それっぽそうだった。
ただ、このサイトの立ち位置がよくわからなかったのでどこまで信用していいのかちょっとなぁという気分だったりする。
基本、困ったらMDNだよりにしていたので、別のサイトを探しておかねばなぁとは感じいている。

上記の問題以外にも描画タイミングのせいでエラーが表示されてその解決もあって疲れたので今日はここまで

Read More

2023-02-25 到達点メモ

2023-02-25 到達点メモ

  2月 25, 2023    nonoNaga

---

 今日は、クラス化の書き換えを行った。

それほど手間ではないだろうなぁとは思っていたが、結構あっさり片付いた。

クラス化するとこの処理は、Aのクラスに属するから、Aのクラスに入れたほうがいいだろう。とか、そもそも、生成時に呼び出す処理じゃねぇ？とか、余計な変数が減ってだいぶわかりやすくなったなど、思った以上に効果があった。

なんというか、概念を作るとそこに沿うように意識が向けられるように感じた。
ちゃんとやっている人には当たり前の話なのかもしれないが、まずはクラスを作ることから始めるのが良いように感じる。

あと、せっかくクラスを作ったので、そろそろファイルを分けるために、クラスごとにファイルを分けているのか？、仮にそうだとしたら、どのように名前を付けるのか？を調べてみた。

ざっくりReactのGithubを見てみたのだが、とりあえずそういうのはなさそうだった。

あと、MDNの方も調べていたのが、その際にMDNでフレームワークを使ったチュートリアルを載せているのを発見した。ざっとReactのページの部分をスクロールしただけだが、書きかけとかはなさそうだった。

検証が2020年のバージョンだったり、あんまり日本語化されていないが、ある程度参考にはなる気がする。

まじでMDNって凄いなぁと感心しつつ、今日はここまで

Read More

2023-02-22, 23 到達点メモ

2023-02-22, 23 到達点メモ

  2月 23, 2023    nonoNaga

---

 ピースごとに黒い枠線を追加し、最初にランダム配置をすることにした。

ランダムに配置をすると、いよいよジグソーパズルっぽくなってきた気がする

コードを書いていて思うのは、やはり公式サイト（もっともよく参考にしているMDNはJavaScriptの公式サイトではないが・・・）を見るのが大事だなと思った。

雑な書き方をしていても実行自体はできてしまうので、よく見るとこれっていらないんじゃ（実際にいらない）があったりする

例えば、今までずっと図形を書くときにbeginPath()とclosePath()が必要だと思っていたのだが、MDNを見る限りではこれらは線を描くときに必要なのであって、少なくともstrokeRect()やfillRect()を使うときには不要だった。
個人で書いた内容を見て終わり。はやっぱりまずいなぁこれ。
少なくとも公式（に近い）サイトを見て情報の裏取りは必要だし、検証も必要だなぁと。

■参考サイト

• CanvasRenderingContext2D.beginPath() - Web API | MDN
• CanvasRenderingContext2D.closePath() - Web API | MDN
• CanvasRenderingContext2D.strokeRect() - Web API | MDN
• CanvasRenderingContext2D.fillRect() - Web API | MDN

あと、そのうち、クラスに書き換えようと思っていたので、ちょっとクラスについてMDNで調べて以下の書き方ができることを確認した。

const Rectangle = class {

  constructor(height, width) {

    this.height = height;

    this.width = width;

  }

  aaa(value){

    return this.height = value;

  }

  area() {

    return this.height * this.width;

  }

};

console.log(new Rectangle(5, 8).area());

let test = new Rectangle(10, 5)

console.log(test.area());

console.log(test.aaa(100));

console.log(test.area());

console.log(test.area(1100));

というか、引数を設定していないところで引数を入れてもエラーを起こさないのは少しびっくりした。

■参考サイト

• クラス - JavaScript | MDN
• クラス式 - JavaScript | MDN

なんだか、疲れたので今日はここまで

Read More

2023-02-21 到達点メモ

2023-02-21 到達点メモ

  2月 21, 2023    nonoNaga

---

 今日もジグソーパズルの実装を進めた。

今回は、ドラッグ中のピースを一番前に表示する処理を作っていた。
実装自体は、ある程度検討はついていたので、苦戦せずに進めることができた。

データは配列で管理しており、配列でループして表示とやっていたので、対象のデータを一番うしろに持ってくることができれば解決できるだろうと思っていて実際その通りだった。

今回、少し覚えておいたほうがいいと感じたことは、今までsplice関数を使ったことがなかったので、MDNのサイト上で動作テストを行った。

すべてのページで動作テストが出来る訳では無いが、わざわざテスト用のファイルを作るのも少し面倒なので、MDN上で動きのテストができるなら、そちらで積極的にため下も良いかなと思った。

話は変わるが、よく言われることではあるが名前は大事だなと改めて思った。
今回で言えば、indexとnumberは違うと改めて感じた。
私の感覚の話になるが、indexは配列を指定するときに使うもので、numberは物体の番号（実体物？）で使っている。
前は全部名前をindexとか▲▲indexにしていたので、numberとindexで分けるべきところをごっちゃになっていて多分そのせいでバグが起きてしまったように感じている。
気の所為と言われてしまえば、そのなのかもしれないが、名前をちゃんとつけ直そうとしたからこそ、今回のバグはすっと発見できた気がする。

ほぼほぼ予定通りに進んだので、今日はここまで

Read More

2023-02-20 到達点メモ

2023-02-20 到達点メモ

  2月 20, 2023    nonoNaga

---

画像を分割して読み込む処理がもう少し苦戦すると思ったが、そんなことはなかった。

分割して読み込むにしても、分割データのパラメータ用の変数を新たに用意するのは嫌だったので、公式ドキュメントを見てgetImageData()の採用を一回考える
参考サイト：CanvasRenderingContext2D.getImageData() - Web APIs | MDN

狙いとしては、これ自体をdrawImage関数で使うimage代わりにできないかと考えたためだが、CORSの問題があったため、採用を断念

参考サイト：<canvas>利用時の getImageData() がエラー（The canvas has been tainted by cross-origin data.） : まだプログラマーですが何か？

色々考えたところ、すでにindexのデータは保持してあり、それを使って計算すれば求められることに気がついた。

具体的には、横の長さ×(index%横の要素数)と縦の長さ×Math.trunc((index/縦の要素数))でうまく行った。

なので、新しい変数は用意せずにdrawImageの部分を書き換えて対応できた。

計算の素晴らしさを感じつつ、今日はここまで。

Read More

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

今日はここまで

Read More

2023-02-18 到達点メモ

2023-02-18 到達点メモ

  2月 18, 2023    nonoNaga

---

すごく久しぶりにコードに触ったので、久しぶりに書く

というか、久しぶり過ぎてブログってどうやって書くんだっけ状態になってる……。

今回は、ジグソーパズルを作りたくなったので、いろいろ試したり、調べたり、ソースコードを読んだりしていた。

昔も今も全然JavaScriptに触っていないこともあり、かなり読み解くのに苦労した。

■学んだこと

• 基本ForはforEachに普通に置き換えることが出来る
• forEachでfor文のようなcontinueをやりたい場合は、returnを使えば良い
  参考：javascriptのforEach内でcontinueのように処理を飛ばす方法 | PisukeCode - Web開発まとめ
• document.getElementsByTagName()の返り値は、HTMLCollectionであり、配列ではない。具体的に言うとconcat()あたりで結合すると、[HTMLCollection(5), HTMLCollection(3)]みたいな結合になる
• array.fromを使えば、配列風オブジェクト（今回のケースではHTMLCollection）を配列に変換することが出来る
  参考：Array.from() - JavaScript | MDN
• 文字の繰り返しは、repeat()を使えば良い

■感じたこと

• 実際に手を動かしたり、試したりするのが一番勉強になる
• 名前をちゃんとつけたほうが良い。理解度がかなり変わる。今回はそれをかなり実感した。
• 必要ない変数はなるべく書かないほうが良い。変数がたくさんあると把握が大変。
• 参考にしようとしているコードの動きはなんとなく把握できた気がするが、まだコードを物にできていない気がする
• 具体的な根拠があるわけではないが、一からコードを書く力が昔より落ちた気がする。

勉強と遊びがなんとなく両立できた気がする。

それなりに満足したので今日はここまで

Read More