Translate

BTemplates.com

Powered by Blogger.

2023幎2月25日土曜日

2023-02-25 到達点メモ

  2月 25, 2023    

 ä»Šæ—¥ã¯、クラス化の曞き換えを行った。

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

クラス化するずこの凊理は、Aのクラスに属するから、Aのクラスに入れたほうがいいだろう。ずか、そもそも、生成時に呌び出す凊理じゃねぇ？ずか、䜙蚈な倉数が枛っおだいぶわかりやすくなったなど、思った以䞊に効果があった。

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

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

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

あず、MDNの方も調べおいたのが、その際にMDNでフレヌムワヌクを䜿ったチュヌトリアルを茉せおいるのを発芋した。ざっずReactのペヌゞの郚分をスクロヌルしただけだが、曞きかけずかはなさそうだった。

怜蚌が2020幎のバヌゞョンだったり、あんたり日本語化されおいないが、ある皋床参考にはなる気がする。

たじでMDNっお凄いなぁず感心し぀぀、今日はここたで


   /

  No Comments

2023幎2月23日朚曜日

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

  2月 23, 2023    

 ãƒ”ヌスごずに黒い枠線を远加し、最初にランダム配眮をするこずにした。


ランダムに配眮をするず、いよいよゞグ゜ヌパズルっぜくなっおきた気がする

コヌドを曞いおいお思うのは、やはり公匏サむト（もっずもよく参考にしおいるMDNはJavaScriptの公匏サむトではないが・・・）を芋るのが倧事だなず思った。

雑な曞き方をしおいおも実行自䜓はできおしたうので、よく芋るずこれっおいらないんじゃ（実際にいらない）があったりする

䟋えば、今たでずっず図圢を曞くずきにbeginPath()ずclosePath()が必芁だず思っおいたのだが、MDNを芋る限りではこれらは線を描くずきに必芁なのであっお、少なくずもstrokeRect()やfillRect()を䜿うずきには䞍芁だった。
個人で曞いた内容を芋お終わり。はやっぱりたずいなぁこれ。
少なくずも公匏（に近い）サむトを芋お情報の裏取りは必芁だし、怜蚌も必芁だなぁず。

■参考サむト


あず、そのうち、クラスに曞き換えようず思っおいたので、ちょっずクラスに぀いお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));

ずいうか、匕数を蚭定しおいないずころで匕数を入れおも゚ラヌを起こさないのは少しびっくりした。

■参考サむト
なんだか、疲れたので今日はここたで

   /

  No Comments

2023幎2月21日火曜日

2023-02-21 到達点メモ

  2月 21, 2023    

 ä»Šæ—¥ã‚‚ゞグ゜ヌパズルの実装を進めた。

今回は、ドラッグ䞭のピヌスを䞀番前に衚瀺する凊理を䜜っおいた。
実装自䜓は、ある皋床怜蚎は぀いおいたので、苊戊せずに進めるこずができた。

デヌタは配列で管理しおおり、配列でルヌプしお衚瀺ずやっおいたので、察象のデヌタを䞀番うしろに持っおくるこずができれば解決できるだろうず思っおいお実際その通りだった。

今回、少し芚えおおいたほうがいいず感じたこずは、今たでsplice関数を䜿ったこずがなかったので、MDNのサむト䞊で動䜜テストを行った。

すべおのペヌゞで動䜜テストが出来る蚳では無いが、わざわざテスト甚のファむルを䜜るのも少し面倒なので、MDN䞊で動きのテストができるなら、そちらで積極的にため䞋も良いかなず思った。

話は倉わるが、よく蚀われるこずではあるが名前は倧事だなず改めお思った。
今回で蚀えば、indexずnumberは違うず改めお感じた。
私の感芚の話になるが、indexは配列を指定するずきに䜿うもので、numberは物䜓の番号（実䜓物？）で䜿っおいる。
前は党郚名前をindexずか▲▲indexにしおいたので、numberずindexで分けるべきずころをごっちゃになっおいお倚分そのせいでバグが起きおしたったように感じおいる。
気の所為ず蚀われおしたえば、そのなのかもしれないが、名前をちゃんず぀け盎そうずしたからこそ、今回のバグはすっず発芋できた気がする。

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

   /

  No Comments

2023幎2月20日月曜日

2023-02-20 到達点メモ

  2月 20, 2023    

画像を分割しお読み蟌む凊理がもう少し苊戊するず思ったが、そんなこずはなかった。


分割しお読み蟌むにしおも、分割デヌタのパラメヌタ甚の倉数を新たに甚意するのは嫌だったので、公匏ドキュメントを芋お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の郚分を曞き換えお察応できた。

蚈算の玠晎らしさを感じ぀぀、今日はここたで。

   /

  No Comments

2023幎2月19日日曜日

2023-02-19 到達点メモ

  2月 19, 2023    

 æ˜šæ—¥ã®ç¶šã。

ひずたず、ゞグ゜ヌパズルの原型みたいなのはできた。
具䜓的に蚀うず以䞋のような感じ


芋かけはあれだが、分割した画像ず最初のピヌスの配眮をランダムにすれば、ゞグ゜ヌパズルはほがほができたず思う。
ただ、もうちょっず䜜り蟌みたい感じではある。


■孊んだこず、わかったこず
  • 昚日の到達点メモで参考にしたネットのコヌドは、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行未満。意倖ずコンパクトにやれるもんだなず思った。

■参考サむト



今日はここたで

   /

  No Comments

2023幎2月18日土曜日

2023-02-18 到達点メモ

  2月 18, 2023    

すごく久しぶりにコヌドに觊ったので、久しぶりに曞く
ずいうか、久しぶり過ぎおブログっおどうやっお曞くんだっけ状態になっおる……。

今回は、ゞグ゜ヌパズルを䜜りたくなったので、いろいろ詊したり、調べたり、゜ヌスコヌドを読んだりしおいた。
昔も今も党然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()を䜿えば良い


■感じたこず
  • 実際に手を動かしたり、詊したりするのが䞀番勉匷になる
  • 名前をちゃんず぀けたほうが良い。理解床がかなり倉わる。今回はそれをかなり実感した。
  • 必芁ない倉数はなるべく曞かないほうが良い。倉数がたくさんあるず把握が倧倉。
  • 参考にしようずしおいるコヌドの動きはなんずなく把握できた気がするが、ただコヌドを物にできおいない気がする
  • 具䜓的な根拠があるわけではないが、䞀からコヌドを曞く力が昔より萜ちた気がする。

勉匷ず遊びがなんずなく䞡立できた気がする。
それなりに満足したので今日はここたで

   /

  No Comments

登録: 投皿 (Atom)