外部ファイルの読み込み処理を作成する

[TakahiRoyte]

今現在クイズの問題はapp.jsファイル内に直書きjsonで書いています。今後はdata/ディレクトリ内のファイルを読み込むよう機能改善が必要です。TODOとDONEを整理します。

• DONE
  • JSONを読み込んで問題を表示する処理
  • 別ディレクトリ内のCSVファイルを読み込み処理
• TODO
  • 読み込んだCSVファイルをJSONに変換する処理（参考サンプル）
  • CSVファイルの問題の充実

CSVからJSONに変換するにあたり、今回配列をJSONで用いているため上記の参考サンプルだけではうまくいきません。配列の対応が必要になり、そこが若干手間取りそう。

また注意として、Fetch APIを利用することで単なるローカルファイルから開いた場合にファイル読み込みができなくなる点があります。この場合ローカルサーバーを立てる必要があります（どっかのWebサーバーでもかまいません）。

[TakahiRoyte]

もしくは、問題用のJSONファイルを簡単に作成できるWebアプリを作成するのもありかも。

[TakahiRoyte]

Quiz JSON Creator を作成したのでとりあえず簡単にJSONファイルは作成できるようになりました。

[TakahiRoyte]

とりあえずJSONをapp.jsから分離したい。

[HikaruNishi]

Fetch APIを利用した、外部ファイルの読み取りを実施してみます。

また注意点として、ローカルorWebサーバを立てなければならない点も把握いたしました。

[TakahiRoyte]

@HikaruNishi python 2.Xインストールしているならディレクトリまで移動して python -m SimpleHTTPServerでローカルサーバーが起動します。それで確認するのが楽かも。Python 3.Xはコマンドが若干違ったかな。

[HikaruNishi]

進捗を下記に記載いたします。加えて、一点質問もあります。

ローカル上ですが、外部ファイル（JSON）の読み取り＆画面表示の動作確認がとれました。
1点問題があります。
・画面上に外部ファイルから読み取った問題文が表示されない

上記について、対象ソースとコード行を下記に記載いたします。
■対象ソース
app.js
■対象コード行
131行目

軽く調べた感じ、単にJS上でオブジェクトのコピーができていないだけのようです。。。
JSあんまり触れたことないのでイマイチわかってないので、ご教授願えたらと思います。
質問内容
本システムにて、jqueryは使用されていますでしょうか。→//20161208追記　本質問は無視でいいです。

以上です。

[HikaruNishi]

研修中にお話した結果、どうやら非同期が原因のようです。
そこで、Promissを用いて同期処理ができないか試しています。
サンプルソースと使ったサイトを下記に記載いたします。

■サンプルソース

function hoge(){
   return new Promise(function(resolve,reject) {
       console.log('0');
     	window.setTimeout(function() {
         	console.log('1');
           resolve('届いた');
       },3000);
   });
}

hoge().then(function(result) {
               console.log(result);
 		console.log('result');
   })
   .catch(function(e) {
       console.error(e);
   });

■参考サイト
http://azu.github.io/promises-book/
https://liginc.co.jp/193027

[TakahiRoyte]

いいね！ちなみにマークダウンで複数行のコードを囲むときは(縦線は無視して）

| ```javascript
| var a = "hello markdown";
| var b = 5;
| ```

と書くと

var a = "hello markdown";
var b = 5;

シンタックスハイライトとインデントが反映されます。

参考： http://qiita.com/Qiita/items/c686397e4a0f4f11683d

[TakahiRoyte]

fetch API、iPhoneと古いAndroidのモバイルブラウザ対応していないね……
http://caniuse.com/#search=fetch

Fetchみたいな新しめのJS言語仕様はPolyfillというレガシーブラウザ向けのライブラリがあるので、
チームの外に展開するときは導入する必要がありそうです。
Polyfilは後回しで良いので開発時はChromeかFirefoxを使ってください！

[HikaruNishi]

メールでいただいたサンプルを元に作成＆ローカルサーバで実行したところ、画面に問題文・選択回答・解説文が表示されるようになりました。
しかし、問題数は５問設定しているにも関わらず、２問しか表示されません。。。
下記にコミットしましたので、ご確認いただけると幸いです。
https://github.com/HikaruNishi/quiz-vue/tree/add_external_file_reading
・app.js
・test.json

また、もしJSをデバッグできる環境をお持ちでしたら、連携していただきたいです。

[TakahiRoyte]

zipで落として展開したところfetchの部分で404エラーがでました。（file not found）
帰ったらまた細かいところ見てみます。

[HikaruNishi]

ありがとうございます。お手数をおかけし申し訳ございません。こちらでもデバッグ環境を構築し試したところ、fetchの箇所（app.js:73行目）にてエラーがでていました。

■エラー画面
`Error: TypeError {stack: "TypeError: Cannot read property 'replace' of undef…r.t (http://127.0.0.1:8000/lib/vue.min.js:7:9400)", message: "Cannot read property 'replace' of undefined
Please report this to https://github.com/chjj/marked."}

• Lexer.lex @/lib/marked.min.js:5
• Lexer.lex @/lib/marked.min.js:5
• marked @/lib/marked.min.js:5
• t._applyFilters @/lib/vue.min.js:6
• Ut.get @/lib/vue.min.js:6
• Ut.run @/lib/vue.min.js:6
• Wt @/lib/vue.min.js:5
• Bt @/lib/vue.min.js:5
• t @/lib/vue.min.js:6
  error!!!`
  ※最後の「error!!!」は自分で埋め込んだコードです。

エラーの出どころを追うと、libフォルダの「marked.min.js」からでした。（おそらく、ファイルパスの書き方が悪いのかな、と推測しております。。。）

また明日帰宅したら解析してみます。