koki61jun
@koki61jun (Koki Y)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

jsで処理を記憶させてプログラム終了時に記憶した物を表示させたい。

javascriptで処理Aと処理Bを用意して、ユーザーから任意で受けたAかBの処理を記憶かつ表示する。プログラムの終了指示を受けたら記憶していたAとBの処理結果を順番に表示するプログラムをしたいです。

具体的に現実させたい処理内容を図解してみました。

IMG_0047.jpg

予想コード

functionA(){
 処理a
 処理結果1
 }
 functionB(){
 処理b
 処理結果2
 }
 functionC(){
 結果保存[1212122121]
 HTMLで保存結果を表示
 }

 1212122121の部分はユーザーよって受け取ったもの

似ている処理に

• クッキーに保持
• localstrageい保持
• パラメータとして保持
• ファイルに保持
• マルチスレッド
を調べてみたのですがいまいちやりたいことと少し違うので他の知識があれば教えていただきたいです。

0

3Answer

回答でなくお尋ねすることをお許しください。

  • 「図解」について
    • 「記憶」は、手順の開始から終了までの間だけ保存されれば良く、終了後はサーバから削除されるという理解で正しいでしょうか?
    • 開始から終了までのスパンは、日を改めるようなものでしょうか? あるいは、さほど時間を空けずに連続するようなものでしょうか?
  • 「似ている処理」について
    • 「やりたいことと少し違う」というのは、具体的にどこがどのように異なると感じられたのでしょうか?
    • どんな些細なことでも構いませんので、そのように感じた理由を個別に教えてください。
2Like

図から起してみました。こんなことです?

// 初期状態: valueは結果表示用、historyは履歴の記録用
const initState = 
  {value: undefined, history: []}

// メッセージ: 処理A、処理B、終了処理を定義:
const A = Symbol("A")
const B = Symbol("B")
const End = Symbol("End")

// 更新:
// 状態とメッセージをうけとって、状態を更新しつつ、結果を返す:
const innerAction = state => msg => 
  ( state = 
     msg === A ? 
        addToHist(state)(funcA())
      : msg === B ?
        addToHist(state)(funcB())
      : msg === End ?
        resetHist(state)
      : noOp(state)
  ).value

// (初期状態を部分適用) メッセージを受け取って、状態を更新しつつ、結果を返す
const action = innerAction(initState)

// 状態と値をとって、新しい状態を返す:
const addToHist = state => value => 
  ({value: value, history: [...state.history, value] })

// 状態をとって、新しい状態を返す:
const resetHist = state =>
  ({value: state.history, history: [] })
const noOp = state =>
  ( {...state, value: undefined })

// 処理A、Bの関数の例:実行すると"何か"を返す:
const funcA = () => "resA"
const funcB = () => "resB"

// 使用例:
action(A)  //  'resA'
action(B)  //  'resB'
action(A)  //  'resA'
action(End)  //  [ 'resA', 'resB', 'resA' ]
action(B)  //  'resB'
action(End)  //  [ 'resB' ]

フロント側だけですけどね。これだけでもけっこういろんなことができるんじゃないかなあ。

クロージャを使って、指示に従って処理を実行しつつ状態を管理できます。

これは自前で 超適当に実装してますが、こんなことをお手軽かつ安全、大規模にやりたければ、The Elm Architecture (TEA)あたりで検索して、ピンときたフレームワーク/言語を使ってみるってのがいいと思います。

追記:
更新して表示する部分も含めて、もうちょっとまじめに codepen でやってみました。

See the Pen rNWVrZo by ttatsf (@ttatsf) on CodePen.

※ 素のJSで自前で状態管理の仕組みをやろうとしてるのでどうしても謎っぽいところが出てきます。参考程度にご覧ください。

さらに追記:
三目並べを作ってみました。

See the Pen TicTacToe by ttatsf (@ttatsf) on CodePen.

簡単ですが解説:
https://qiita.com/ttatsf/items/31d408893f33b2862007

本格的にやるには Elm/Vue/React/Svelteあたりでよさげだなと思うものに入門されるのがいいかと思います。

2Like

Comments

  1. @koki61jun

    Questioner

    ありがとうございます。参考にします。

一番重要なやりたいことが書かれていないので、エスパー的な立ち回りで、予想して回答します。

おそらく書かれている予想コード内HTMLで保存結果を表示が最もやりたいことなのではないでしょうか?

そうすると、HTMLファイルの生成、及び書き出しが必要です。

  • HTMLファイル生成

    • 安価な学習コストであれば.ejs
    • ガチでいくなら.tsx
    • を学びます。
  • 書き出し

  • node fs 書き出し

  • で調べます。

なお、プログラム終了までの中間処理は
https://github.com/flatiron/prompt
などのcli系のライブラリーを使うと、手早いかと思います。

中間処理もリッチな表現にしたいのであれば、それは単なるWebアプリケーションです。
その場合はWebアプリケーション 入門とかでググります。

2Like

Your answer might help someone💌