JSONファイルをDBのように使用したい

質問タイトルの経緯

静的サイトを作成していて、同じ内容を複数ページに表示することが多いのでテキストなどを共通化したいと思いました。
データベースを使用すればいい話なんですが、更新頻度も高いのでローカルでも環境構築せずに確認をしたいんです。

そこで、テキストなどを格納したJSONファイルを用意して、ページに反映しようかと考えたのですが、その際のデメリットや問題点などがあれば教えていただきたいと思います。

kei344

2019/01/30 14:57

質問文が途切れていますので、修正してください。

m.ts10806

2019/01/31 19:51

途中で投稿してしまって編集中かと思ってたらそうでもなかったんですね…

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

回答4件

javascript
1<!DOCTYPE html>
2<title>?</title>
3<meta charset="utf-8">
4<style>
5label { color: green; margin: 1ex 1ex 1ex; font-weight: bold;}
6</style>
7
8<body>
9<div>
10  <label>KeyWord:</label>
11  <input type="search" id="keyword" autofocus>
12  <em>space で区切ることも可能</em>
13  <ul id="list"></ul>
14</div>
15<script>
16
17
18{
19
20  class A {
21    constructor (keyword, title, note) {
22      this.key    = keyword;
23      this.title  = title;
24      this.note   = note;
25    }
26  }
27
28  //_____________________________________________________
29
30  const
31    B_DEF_OPT = { };
32
33
34  class B {
35    constructor (dic = [ ], option = { }) {
36      this.dic     = dic;
37      this.option  = Object.assign ({ }, B_DEF_OPT, option);
38      this.current = [ ];
39      this.key     = '';
40    }
41
42
43    append (key, title, note) {
44      this.dic.push (new A (key, title, note));
45      return this;
46    }
47    
48
49    load (ary) {
50      for (let a of ary)
51        this.append (...a);
52      return this;
53    }
54    
55    
56    search (key = '') {
57      key = key.trim ();
58      let len = key.length;
59
60      if (len) {
61        if (0 === this.key.length || len < this.key.length)
62          this.current = this.dic.slice ();
63        
64        if (key !== this.key) {
65          key = key.replace(/[-/\^$*+?.()|[]{}]/g, '\$&');
66          let
67            [first, ...other] = key.split (/\s+/g),
68            str = first + other.map (k => `(?=.*${k})`),
69            reg = new RegExp (str, 'i');
70          this.current = this.current.filter (rec => reg.test (rec.key));
71          this.key = key;
72        }
73      }
74      else {
75        this.current = [ ];
76        this.key = '';
77      }
78
79      return this;
80    }
81
82  }
83
84  //_____________________________________________________
85  
86  const C_DEF_OPT = {
87    disp_row  : 100,
88    disp_wait : 100
89  };
90
91
92  class C extends B {
93
94    constructor (dic = [ ], output, option = { }) {
95      option = Object.assign ({ }, C_DEF_OPT, option);
96      super (dic, option);
97      this.output  = output;
98      this.timerID = null;
99    }
100    
101
102    display (rows = this.current.slice ()) {
103      return this.cls ().outByBit (rows);
104    }
105
106    
107    cls () {
108      if (this.timerID)
109        clearTimeout (this.timerID);
110
111      this.output.cls ();
112      return this;
113    }
114    
115    
116    outByBit (rows = []) {
117      this.output.out (rows.splice (0, this.option.disp_row));
118      if (rows.length)
119        this.timerID = setTimeout (this.outByBit.bind (this, rows), this.option.disp_wait);
120      return this;
121    }
122    
123  }
124
125  //_____________________________________________________
126
127
128  const D_DEF_OPT = { inkey_wait: 300 };
129
130
131  class D extends C {
132
133    constructor (dic, input, output, option = { }) {
134      option = Object.assign ({ }, D_DEF_OPT, option);
135      super (dic, output, option);
136      this.input      = input;
137      this.inkey_wait = option.inkey_wait;
138      this.timerID2   = null;
139      
140      input.addEventListener ('input', this, false);
141    }
142    
143
144    find (key = '') {
145      return this.search (key.trim ()).display ();
146    }
147    
148
149    handleEvent (event) {
150      if (this.timerID2) clearTimeout (this.timerID2);
151      this.timerID2 = setTimeout (this.find.bind (this, event.target.value), this.inkey_wait);
152    }
153
154  }
155
156  //_____________________________________________________
157
158  class E {
159    
160    constructor (target) {
161      this.target = target;
162    }
163    
164    
165    cls () {
166      for (let p = this.target, e; e = p.firstChild; e.remove ());
167      return this;
168    }
169    
170    
171    out (rows = []) {
172      let
173        doc = this.target.ownerDocument,
174        li    = doc.createElement ('li'),
175        label = doc.createElement ('label'),
176        span  = doc.createElement ('span'),
177        fgm   = doc.createDocumentFragment ();
178      
179      li.appendChild (label);
180      li.appendChild (span);
181      
182      this.target.appendChild (rows.reduce ((a, {title, note}) => {
183        label.textContent = title;
184        span.textContent  = note;
185        fgm.appendChild (li.cloneNode (true));
186        return a;
187      }, fgm));
188      
189      return this;
190    }
191  }
192  //_____________________________________________________
193
194 
195  this.Dictionary = D;
196  this.Display    = E;
197
198}
199
200//_____________________________________________________
201
202const
203  DIC = [
204    { key: 'array map',    title: 'Array.map',    note: '配列から新たに作成した配列を返す'},
205    { key: 'array filter', title: 'Array.filter', note: '配列から条件を満たす配列を返す'},
206    { key: 'array some',   title: 'Array.some',   note: '配列から条件を一つでも満たすと true を返す'},
207    { key: 'array reduce', title: 'Array.reduce', note: '配列評価しながら配列を返す'}
208  ],
209  DIC2 = `
210    array push      Array.prototype.push       配列の末尾に要素を追加する
211    array pop       Array.prototype.pop        配列の末尾の要素を削除する
212    array shift     Array.prototype.shift      配列の先頭の要素を削除する
213    array unshift   Array.prototype.unshift    配列の先頭に要素を追加する
214    array indexOf   Array.prototype.indexOf    要素のインデックスを取得する
215    array splice    Array.prototype.splice     インデックス位置を指定して要素を削除する
216    array slice     Array.prototype            配列のコピー
217  `;
218
219let 
220  inp = document.querySelector ('#keyword'),
221  out = new Display (document.querySelector ('#list')),
222  dic = new Dictionary (DIC, inp, out);
223
224dic.load (
225  DIC2
226  .trim ()
227  .split (/\r|\n|\r|\n/)
228  .map (s =>
229    s.trim ()
230     .split (/\t|\s{2,}/g)
231     .map (s => s.trim ())
232  )
233);
234
235</script>
236

投稿2019/02/01 06:14

編集2019/02/01 09:04

退会済みユーザー

総合スコア0

静的サイトジェネレータを調べてみると良いです。
JSON ではないケースがほとんどですが、構造化された文章をテンプレートにあてはめて、静的サイトを構築できます。

投稿2019/02/01 06:17

退会済みユーザー

総合スコア0

ベストアンサー

質問の経緯が途中で切れていてよく分かりませんが、「静的サイトを作成していて、同じ内容を複数ページに表示することが多いのでテキストなどを共通化したい」、これが目的であれば、お求めのものはテンプレートエンジンではないでしょうか。
handlebarsやmustache、ejsなどで検索してみてください。
テンプレートエンジンでどんな事をするかというと、以下のような二種類の情報を…
テンプレートファイル：

handlebars
1<html>
2  <head><title>{{myTitle}}</title></head>
3  <body>{{myContents.mySentence}}</body>
4</html>

コンテキスト(JSONファイルを読み込むのでもvar foobar = {〜〜}などとJSオブジェクトを用意するのでも可)：

json
1{
2  "myTitle": "タイトル",
3  "myContents": {
4    "mySentence": "ハロー"
5  }
6}
7

上記ふたつをテンプレートエンジンに渡すと以下のようなhtmlファイルを生成してくれるものです。

HTML
1<html>
2  <head><title>タイトル</title></head>
3  <body>ハロー</body>
4</html>
5

あなたはテンプレートとJSONを管理し、修正するたびにテンプレートエンジン実行して生成したhtmlファイルをアップすればよいです。
テンプレートエンジンで処理させるためにnode環境が要りますがDBの環境は必要ありません。

投稿2019/01/31 19:42

shinji709

総合スコア805

更新頻度が高いのでしたらむしろJSONなどのファイルをDBがわりにするのは不適当に思います。
DBの可視化ツールなら幾らでもありますし、インストールして接続設定だけすれば良いものが殆どです。

「静的サイト」で「更新頻度が高い」というのが良く分からないですが。。
いっそのことWordPressなどCMS入れた方が良いのでは？

投稿2019/01/30 12:41

m.ts10806

総合スコア80850

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

JSONファイルをDBのように使用したい

質問タイトルの経緯

関連した質問