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

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

新規登録して質問してみよう
ただいま回答率
85.35%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

966閲覧

JavaScriptで作成したストップウォッチアプリで、fsモジュールを用いて経過時間を外部ファイルに保存したい

maskmelon

総合スコア63

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/06/17 19:18

編集2020/06/17 19:21

前提・実現したいこと

スタート、ストップ、クリアの3つのボタンのある簡単なストップウォッチアプリで、経過時間をmemory.jsonに保存し、ブラウザを更新しても更新前の経過時間から計測を再開できるようにしたいです。

手順としては、fsモジュールをインストールし、経過時間を示すelapsedTime変数をfs.writeFileSyncを用いてJSON形式でmemory.jsonに保存、アプリ起動時にreadFileSyncを用いて読み出したデータをelapsedTimeに代入するということを考えました。

発生している問題・エラーメッセージ

アプリが動かなくなる。(スタートボタンを押しても反応しない。)

該当のソースコード

javascript

1var timer = document.getElementById('timer'); 2var start = document.getElementById('start'); 3var stop = document.getElementById('stop'); 4var clear = document.getElementById('clear'); 5 6var startTime = 0; 7var elapsedTime = 0; 8var memoriedTime = 0; 9 10const fs = require('fs'); 11const fileName = './memory.json'; 12 13try { 14 const data = fs.readFileSync(fileName, 'utf-8'); 15 elapsedTime = parseInt(JSON.parse(data)); 16} catch (ignore) { 17 console.log(fileName + 'から復元できませんでした'); 18} 19 20function saveTime() { 21 fs.writeFileSync(fileName, JSON.stringify(elapsedTime), 'utf8'); 22} 23 24function updateTimeText() { 25 var m = Math.floor(elapsedTime / 60000); 26 var s = Math.floor(elapsedTime % 60000 / 1000) 27 var ms = elapsedTime % 1000; 28 29 m = ('0' + m).slice(-2); 30 s = ('0' + s).slice(-2); 31 ms = ('0' + ms).slice(-3); 32 33 timer.innerText = m + ':' + s + ':' + ms; 34 saveTime(); 35} 36 37function countUp() { 38 timerID = setInterval(() => { 39 elapsedTime = Date.now() - startTime + memoriedTime; 40 updateTimeText(); 41 }, 10); 42} 43 44start.addEventListener('click', () => { 45 startTime = Date.now(); 46 countUp(); 47 updateTimeText(); 48}); 49 50stop.addEventListener('click', () => { 51 clearInterval(timerID); 52 memoriedTime = elapsedTime; 53}) 54 55clear.addEventListener('click', function () { 56 elapsedTime = 0; 57 memoriedTime = 0; 58 timer.innerText = "00:00:000" 59}) 60

試したこと

javascript

1const fs = require('fs'); 2const fileName = './memory.json'; 3 4try { 5 const data = fs.readFileSync(fileName, 'utf-8'); 6 elapsedTime = parseInt(JSON.parse(data)); 7} catch (ignore) { 8 console.log(fileName + 'から復元できませんでした'); 9} 10 11function saveTime() { 12 fs.writeFileSync(fileName, JSON.stringify(elapsedTime), 'utf8'); 13}

この部分をコメントアウトすると動くのですが、原因が分かりません。やり方自体もやや冗長かもしれません。解決方法あるいは別の方法をご教示くださる方いらっしゃいましたらよろしくお願いします。

補足情報(FW/ツールのバージョンなど)

node.js
express

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

fsモジュールを用いて経過時間を外部ファイルに保存

まず、fsモジュールはNodeJS実行環境下で使えるモジュールですので、ブラウザ側では使えません。

fsモジュールをどうしても使いたいのであれば、サーバー側の以下の処理2つを学ぶ必要があります。

  • サーバー側でファイルの読込/保存を行う
  • ブラウザ-サーバー間で POST要求/応答の通信(ウェブフォーム/Ajax)を使う

(NodeJSで受信後のデータ処理)

ブラウザを更新しても更新前の経過時間から計測を再開できるようにしたい

単にレジュームしたいというのであれば、別の方法として、ブラウザ側のストレージを使う手法もあります。

外部ファイルに拘らずとも、記録を永続化し、レジューム機能を実現できます。

ファイルが必要であれば、ダウンロード処理やアップロード処理も学習する必要があります。


過去のご質問もそうでしたが、ブラウザ側 / サーバー(NodeJS)側を混同されているように思います。
それぞれに出来ること、出来ないことがありますので、まずは切り分けて整理しておくと成果を得やすいと思います。

投稿2020/06/17 22:06

AkitoshiManabe

総合スコア5434

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maskmelon

2020/06/19 16:09

前回ご指摘いただいた点について理解が不十分だったようです。Webストレージを使った方法で試してみます。丁寧な回答ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問