やりたいこと

TrelloのようなToDoアプリ（ボタンクリックでリスト・カードを追加でき、カードをクリックするとモーダルが表示され、中身を編集・削除できるアプリ）を作成しています。

jQueryを使わず、素のJavaScriptやjsonを勉強する目的で、jsonファイルをデータストアのように使って【ユーザーからの入力をjsonファイルに値を格納し、リロード時には、jsonファイルから値を取得して保存する】状態を作りたいと思いますが、何か良い方法はないでしょうか？

ディレクトリ構成
.
├── db.json　←このDB代わりになっているjsonファイルをmain.jsで使えるようにしたい
├── index.html
├── main.js
├── style.css

やりたいことの完成イメージ（一例）

ユーザーからの入力を受け付けたら、こんな感じにjsonファイルには値が入っていて、リロード時に値を取り出せるようにしたいです。

json
1{
2  "board-list": [
3    {
4      "list-title": "ToDo",
5      "list-cards": [
6        {
7          "card-title": "ホームページ制作",
8          "modal": {
9            "modal-title": "ホームページ制作",
10            "modal-detail": "～～さんの案件。3月末納期",
11            "modal-comments": ["要件ヒアリング", "スタイリングを検討"]
12          }
13        },
14        {
15          "card-title": "データベースの勉強する",
16          "modal": {
17            "modal-title": "データベースの勉強する",
18            "modal-detail": "SQLの本を使って勉強",
19            "modal-comments": ["1章完了", "2章完了"]
20          }
21        }
22      ]
23    },
24    {
25      "list-title": "作業中",
26      "list-cards": [
27        {
28          "card-title": "Paizaで勉強",
29          "modal": {
30            "modal-title": "Paizaで勉強",
31            "modal-detail": "C問題とB問題にチャレンジ",
32            "modal-comments": ["C問題クリア", "B問題スタート"]
33          }
34        },
35        {
36          "card-title": "家の掃除",
37          "modal": {
38            "modal-title": "家の掃除",
39            "modal-detail": "親が来るから掃除しなきゃ",
40            "modal-comments": ["掃除完了したぜ！"]
41          }
42        }
43      ]
44    }
45  ]
46}
47

試したこと

（追記）
以下の試したことは、Webサーバーないしコマンドライン上でしか動かないもののようでした????

https://teratail.com/questions/169421を参考に、Node.js上に、require関数を入れようとしたのですが、AWS権限エラー（？）でインストールができない状態です。Node.js上でないとjsonデータを取得・更新できないのでしょうか？

[ec2-user@]$ npm install require
npm ERR! code E401
npm ERR! Unable to authenticate, need: Bearer realm="****", Basic realm="****"
npm ERR! A complete log of this run can be found in:　****

以上になります。
その他不足な点があれば、ご教示くださいませ。
よろしくお願いいたします。

hoshi-takanori

2021/03/09 08:55

ブラウザ上の JavaScript では　require もファイルの読み書きもできないと思います。参考にされている記事はコマンドラインで動かすもの (または web サーバー) です。

yambejp

2021/03/09 09:25

nodeの質問ならNode.jsのタグ付をしてください

行動規範の内容に同意します

回答2件

ベストアンサー

「ブラウザのJSからファイルの書き込みは不可能」
これが基本なのでしばらくはこの認識でいい。

Electronみたいな特殊な条件下なら可能なこともある。

最近はFile System Access APIが作られてるけどまだ関係ない。
これはローカルファイルが対象。
https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API

ブラウザで表示してるフロント側と、サーバー側は明確な境界があるのでここを理解してないとできること・できないことが分からない。

投稿2021/03/09 11:50

退会済みユーザー

総合スコア0

ikutyan46

2021/03/09 23:28

kawaxさん、ご回答・アドバイスまでありがとうございます！「ブラウザのJSからファイルの書き込みは不可能」という認識でいきたいと思います。仰る通り、フロント側（JavaScript）とサーバー側（Node.js）の違いの理解ができていないですので、別途学習が必要ですね。ちなみに、本題は「jsonファイルをデータストアのように使って【ユーザーからの入力をjsonファイルに値を格納し、リロード時には、jsonファイルから値を取得して保存する】」状態を作りたいのですが、こちらを実現するには、何か良い方法はございますでしょうか？？

行動規範の内容に同意します