削除

削除ができるようにしたい。ほんとはパスワードとか入れて書き込んだ本人であるかのチェックが必要なんだろうけど、まずはボタン一発即削除という形で作りたい。

ID的な要素を追加する

見通しが立っていないがあると便利そうなので追加したい。どの程度のスペックが必要なIDかというのはなんか色々あるみたいだが時間でいいやと思った。

Date.now() - JavaScript | MDN

Date.now() メソッドは、UTC (協定世界時) での 1970 年 1 月 1 日 0 時 0 分 0 秒 から現在までの経過時間をミリ秒単位で返します。

developer.mozilla.org

ちゅーことでapp.post内を

var obj = {
    id: Date.now(),
    contents: {
      name: req.body['user_name'],
      msg: req.body['user_message'],
      dt: (new Date()).toJSON()
    }
  }

こう変えた。それに伴って

 for (let row of data) {
    s += `
        <p>${row['contents']['msg']}</p>
        <p><button type="button" id="${row['id']}" onclick="delbtn()">削除</button> 名前:${row['contents']['name']} 日時: ${row['contents']['dt']}</p>
        <hr>
        `
    }

こうした。

HTTP DELETEメソッドを使う

ボタンを押したらidを伴ってサーバー側に飛ばすイメージで書く。

function delbtn() {
            let id = event.target.id
            fetch('https://dalomo.net/nodebbs/msg/' + id, {
                    method: 'DELETE'
                })
                .then(res => location.reload())
        }

これ、VSC使ってたらほぼ書いてくれた。いつの間にか未来いたわ。

eventがクリックイベントの要素が入っとるらしい。そこのidを取得

Event: target プロパティ - Web API | MDN

target は Event インターフェイスの読み取り専用プロパティで、イベントが配信されたオブジェクトへの参照です。これは、イベントのバブリングまたはキャプチャ段階でイベントハンドラーが呼び出されたときの Event.currentTarget とは異なります。

developer.mozilla.org

HTMLのみでDELETEメソッドを使う方法がわからなかったので、Javascriptのfetchを使う

フェッチ API の使用 - Web API | MDN

フェッチ API は、リクエストやレスポンスといったプロトコルを操作する要素にアクセスするための JavaScript インターフェイスです。グローバルの fetch() メソッドも提供しており、簡単で論理的な方法で、非同期にネットワーク越しでリソースを取得することができます。

developer.mozilla.org

そのままほっとくと画面が更新されなかったのでリロードを入れてみた。これもっとスマートな方法ないのかな。

受け取ったリクエストをサーバーで処理する

app.delete('/nodebbs/msg/:id', (req, res) => {
  const id = req.params.id
  const obj = JSON.parse('[' + fs.readFileSync('log.json', 'utf8') + ']')
  const newObj = obj.filter(item => item.id != id)
  fs.writeFileSync('log.json', JSON.stringify(newObj).slice(1).slice(0,-1), 'utf8')
  res.end()
})

こ、これもほぼ自動的に作られた…。やべーな未来。でもあんま理解度が高くないからこれが合ってるのか分からないんですよね。。。

app.deleteでDELETEメソッドのリクエストを処理できる。ルートパスにパラメータを含めて、req.params.idで取得できる。

Express でのルーティング

expressjs.com

JSONを読み込んで、obj.filter(item => item.id != id)のところ、これ勝手にAIが作ったコードなんだけどidでフィルターかけるんだけど削除したいid除外でフィルタかけるんだよね。全然発想持ってなかったわ。考えてたのはidでなんか検索とかして、その要素のみ削除みたいな感じで考えてた。すげーよ、こっちのが全然スマートな解決だわ。

Array.prototype.filter() - JavaScript | MDN

filter() は Array インスタンスのメソッドで、指定された配列の中から指定された関数で実装されているテストに合格した要素だけを抽出したシャローコピーを作成します。

developer.mozilla.org

で、文字列に変換して、最初と最後の[]を削除して、ファイルを書き出し。でres.end()で終了。できたー。

ミリ秒単位なので自分の場合はほぼ起こらないと思うけど、例えば削除のために読み込んでる途中で新規書き込みがあったりすると、削除後のファイル書き込みによって、新規が無い状態での上書きがされるので、新規がどっかいくみたいなことは起こりうる。こういうのを防ぐためにDBとかの仕組みがあったりすのかなぁとか思った。