最終更新日時:

jsonファイルを使って動的処理したい!

メイン画像

てかこの画像chatGPTに作ってもらったんだけどすごない???

経緯

私は最近は色々なバックエンドを構築してきました。
バックエンドとフロントエンドをつなぐ通信としてjson形式で通信してました。

Jsonデータを送るJSの画像 DBサーバと通信するためのJS。赤枠部分がAPIに送信するjsonデータ

しかし、DB使うまでのないデータの保存は jsonファイルを使えばよくね? と思ってしまいました。

ということで、今回はwebサイトにおけるjsonファイルの使い方をまとめていきます!

jsonの扱い方

jsonファイルを任意の場所に置きます。(私はhtmlファイルのカレントディレクトリに置きました)

plain text
とある私の非公開サイトのディレクトリ構造 /TOP |`--images | `-- |`--index.html |`--style.css |`--sys.js ここでjsonを読み込みhtmlへ `---data.json ////ここ////

上の例で言うとdata.jsonファイルをsys.jsで読みこむ。

Java Script
const res = await fetch("./data.json"); //読み込み adata = await res.json(); //json変換 ... console.log(item.title); //取り出し&出力

fetch関数でファイルから読み込み、jsonメソッドで変換して使用します。

jsonを動的処理に使う

本題に入りましょう。

例として、当ブログサイトのコメント機能を付けるとしたらで考えてみます。

結論から言うと、動的処理には不向きということです。
しかし、不向きなだけで作ることはできます。 詳しく説明しましょう。

不向きな理由

まず一つは、jsonファイルに書き込み出来ないという点です。
「え?JS使えば書き込みできるんじゃないの?」と思うかもしれませんが、JSで行えるのはファイルを 書き換える(置き換える) だけなのです。
「別に置き換えれるならそれでよくね?」
そう思う人もいるでしょう。しかし、これには重大な問題が発生します。

トランザクション処理の内容画像

このように、同時にファイルを書き換えてしまうとデータが消えてしまう...なんてことも。
この内容は トランザクション処理 という範囲で基本情報技術者にも出題されます。 ITパスに出るかどうかは覚えてないですぅ...
DBではトランザクション処理がしっかりしているので同時でもミスが起こりづらいってことなのです。

最適な使い方

それを踏まえて、どのような使い方が一番適しているのでしょうか。
まず前提として「データが少ない」ことや「検索や並び替えなどを付けない」使い方です。
これはDBのメリットになるので、これを付けるのであれば当然DBのほうが適しているでしょう。
DBの並べ替えについては別でブログを書いてますのでそちらも是非。
そして先ほどの トランザクション処理が必要ない使い方 がよい使い方でしょう。
例としては、

  • そのデータを自分or特定の一人しか編集しない
  • データの更新頻度が少ない

このような使い方の場合にはDBにしなくてもjsonファイルでも大丈夫でしょう。

まとめ

  • 基本はDBを活用すべき!
  • jsonファイルだとトランザクションなどの問題がある
  • 一部の使い方ではjsonを使っても良い場面もある
面倒くさがらず、DB使え!って感じだよね。頑張ります

おわぁぁぁりぃぃぃ!!