画面遷移後に値を保持する方法（Node.js）

Question

ユーザーが指定した条件に応じてデータを取得してグラフを描画する機能を実装しています。サーバー側の言語はNode.jsを使っています。

決定ボタンを押すと入力された指定条件をクエリパラメータに変換して画面遷移をするという仕組みになっています。

入力内容を画面遷移後にも保持したいのですが、どのような方法が考えられるでしょうか？
自分で調べてみると入力内容をセッション変数に保存するというものが多く出てきたのですが、フォーム送信の場合を想定したものが多く、自分のケースに当てはまるのかよく分からなかったので質問させていただきました。

 <div class="search-box col-md-6">
      <p>[ 条件を指定してデータを取得する ]</p>
      <div class="search-items">
          <div class="radio-inputs">
              <input type="radio" name="gender" value="male" class="gender-inp">
              <label for="inq1">男性</label>
              <input type="radio" name="gender" value="famale" class="gender-inp">
              <label for="inq2">女性</label>
              <input type="radio" name="gender" value="" class="gender-inp">
              <label for="inq3">指定なし</label><br>
          </div>
          <input type="text" name="minAge" class="age-inp"><span>才 〜</span><input type="text" name="maxAge" class="inp age-inp"><span>才</span><br>
          <a class="btn btn-secondary search" id="search">決定</a>
      </div>
 </div>

const searchButton = document.getElementById('search');

searchButton.onclick = () => {
  const inputs = document.querySelectorAll('.age-inp');
  const keyval1 = [...inputs]
    .filter((e) => e.value)
    .map((e) => [e.name, e.value]);

  const radioInputs = document.querySelectorAll('.gender-inp');
  const keyval2 = [...radioInputs]
    .filter((e) => e.checked && e.value)
    .map((e) => [e.name, e.value]);

  const keyval = keyval1.concat(keyval2);

  const searchParams = new URLSearchParams(keyval);
  const href = `?${searchParams.toString()}`;
  searchButton.setAttribute('href', href);
};

Answer 1

質問文をざっと読んだ限り
取れる手段は下記の3通りしかありません。

• 通信を受け取ったWebサーバが動的なHTMLを生成する際、HTML内に埋め込む
• クライアント(ブラウザ越しにアクセスしている利用者)側のマシンにデータを保存させる
• そもそも画面遷移させない

一つずつみていきましょう。

---

通信を受け取ったWebサーバが動的なHTMLを生成する際、HTML内に埋め込む

画面遷移後のHTMLをどこかしらで投げ返すわけですが、
それにリクエストの情報を埋め込みます。
例えば性別の情報を埋め込みたいのであれば<input id="sex" type="hidden" value="male">みたいなタグをどっかに埋め込んで後からJavaScriptで回収すれば良いでしょう。

仮にExpress.js + Pugなら下記のような連携になります。

Node.js上のExpress.jsでGET（クエリ文字列）変数を取得する方法

app.get('/hoge', (req, res) => {
  res.render('hoge', { sex: req.params.sex })
})

input#sex(type="hidden" value=sex)

これは一時的にしか使わないエントリーフォームや、
ゲーム計算機等でよく使われる手法です。

---

クライアント(ブラウザ越しにアクセスしている利用者)側のマシンにデータを保存させる

WebブラウザにはクッキーやlocalStorageといった機能が用意されています。
利用用途はどちらも少量の文字列を一時領域に保存するという使い方です。

使い方は調べてください。

質問文にあったセッションというのはクッキーとWebサーバ上でのあわせ技で、
ログインを伴う必要のあるサービスで取る最もポピュラーな手段です。

なんの事はない、ユーザーのログイン時のIDとパスワードのセットが正しければ、
一時的に発行した許可証文字列(ランダム数十文字)をクッキーにもたせておいて、
2度目以降のアクセスはそのランダム文字列を使って今ログイン中のユーザーですか？を確かめるための機能です。

なので、クッキーやローカルストレージはそれなりに質問文の要件には合致するでしょうが、
セッションが必要なサービスはログインが必要なサービスか否か程度なので自ずと分かるでしょう。

---

そもそも画面遷移させない

別に冗談を言ってるわけではありません。

画面遷移を行うとJavaScriptの値が持ち越せないのであれば、
JavaScript上で擬似的な画面遷移をエミュレートしてやれば良いじゃんという思想はあり、
しかも既に一般的になっています。

React、Vue.js、AngularといったJSフレームワークと呼ばれるジャンルのツールです。

これらのJSのフレームワークは「変数スコープ」と「HTML風のテンプレート」を所持しています。
JSフレームワークが用意している変数の変更方法のお作法に乗っ取り値を更新すると、
勝手に「HTML風のテンプレート」を元にDOMツリーを最新のものに更新してくれます。

画面遷移のエミュレートもあり、
複数の「HTML風のテンプレート」を差し替える事も行えます。
この機能をルータと呼び、HTML5で用意されているURLバーの値を更新したりページのアンドゥ・リドゥ機能すらを駆使した画面遷移っぽい事まで実現してくれます。

Comments

[maskmelon]

詳しい回答をくださりありがとうございます。
最初の方法でうまく値を保持することができました。
Reactなどのフレームワークはこういう時に便利なんですね。
クッキーやローカルストレージを使う方法も試してみたいと思います。
勉強になりました。ありがとうございました。