ということで
【和歌山不動産の毎日自動物件価格調査＆価格下がったら即時メール連絡アプリ】
作りました！作れました！
とある和歌山不動産情報サイトの
気になる不動産複数件のその物件IDを入力すると
その物件価格を自動でひろう
記録する
その作業を毎日決まった時間に勝手に実行する
以前の価格より安くなった物件がでてくればメールする
こういうアプリ、プログラムができました！！！
AIにコードを書いてもらいましたが今の私はだいたいコードの意味がわかるようになったのでAIくんがまちがったところ、いや、バイブコーディングでは伝えきれなかった部分を認識し、修正できるようになりました！
わからないところはとにかくconsole.log連発！！！
完成後勉強するという学習方法
動くものはできた。なんとなく不具合はなさそう。
でも各コードが何をやっているのかしっかり理解しないと気持ち悪い。勉強にならない。ここからの発展もない
ということで完成後数時間かけて一行一行学習するということになりました。
この2行は、WebサイトのHTMLという「ノイズだらけのデータ」を、**人間が読みやすい「純粋なテキスト」に精製する仕上げの工程**です。1行ずつ、何が起きているのか分解して解説します。---### 1. `if (priceMatch && priceMatch[1])`これは、プログラムが途中で止まらないようにするための**「安全装置」**です。* **`priceMatch`**: もし「価格」という文字がページに見つからなかった場合、ここには `null`（空っぽ）が入ります。* **`priceMatch[1]`**: カッコ `()` で囲った中身が、正しく抜き出せているかを確認しています。この2つを `&&`（かつ）でチェックすることで、**「検索にヒットしなかった時に、中身を取り出そうとしてエラーになる」のを防いでいます。**---### 2. `.replace(/<[^>]*>/g, "")`ここが一番のテクニックです。抜き出したデータの中に残っている **HTMLタグをすべて消去** しています。`match` で取れた直後のデータが、例えば `<span>3,000</span>万円` だったとしましょう。このままでは数字の比較ができません。そこで正規表現を使ってお掃除します。* **`/<[^>]*>/`**:* `<` : 開始タグの記号。* `[^>]*` : `>` 以外の文字が0個以上続く（つまりタグの終わりまで）。* `>` : 閉じタグの記号。* **意味：** 「タグ（`<...>`）の形をしているものすべて」を指します。* **`g` (Global)**: 見つかった1箇所目だけでなく、**「ページ内のすべてのタグ」**を対象にします。* **`""`**: 見つかったタグを「空（無し）」に置き換えます。これで、`<span>` や `</span>` が消え、`3,000万円` だけが残ります。---### 3. `.trim()`最後にこれを行うことで、データの前後にある**「余計な空白や改行」**を削ぎ落とします。* **理由:** WebサイトのHTMLは、見た目を整えるためにタグの前後で改行されていたり、スペースが入っていたりすることが非常に多いです。* **効果:** `" 3,000万円 \n"` のようなデータが、きれいに `"3,000万円"` になります。---### まとめるとこの処理を通ることで、以下のような変化が起きます。1. **元データ:** `\n <td><span class="price">2,980万円</span></td> \n`2. **`match`後:** `<span class="price">2,980万円</span>`3. **`replace`後:** `2,980万円`4. **`trim`後:** `2,980万円`（完成！）これで、純粋な金額の文字列が手に入りました。この後 `parseInt` を使って数字を比較できるようになるわけですね。次は、この「3,000万円」という文字列を、どうやって「3000」という数字に変えて比較しているのか、そのあたりの仕組みも気になりますか？
こんな感じでわからない関数やオブジェクトについてAIカテキョくんにこまかーーーーく、教えてもらう作業です。
めっちゃ勉強になりました。今の私のレベルにちょうどいい背伸び感でした。
今日の成果物はそのモノの性質上公開できませんがこの感動をあなたにも！
コメントを残す