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

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

新規登録して質問してみよう
ただいま回答率
85.53%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Node.js

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

セッション

Sessionはクライアントがサーバに送ったすべてのリクエストのことを指します。

JavaScript

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

保存

保存(save)とは、特定のファイルを、ハードディスク等の外部記憶装置に記録する行為を指します。

Q&A

解決済

1回答

10804閲覧

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

maskmelon

総合スコア63

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Node.js

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

セッション

Sessionはクライアントがサーバに送ったすべてのリクエストのことを指します。

JavaScript

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

保存

保存(save)とは、特定のファイルを、ハードディスク等の外部記憶装置に記録する行為を指します。

0グッド

1クリップ

投稿2020/08/24 05:57

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

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

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

HTML

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

JavaScript

1const searchButton = document.getElementById('search'); 2 3searchButton.onclick = () => { 4 const inputs = document.querySelectorAll('.age-inp'); 5 const keyval1 = [...inputs] 6 .filter((e) => e.value) 7 .map((e) => [e.name, e.value]); 8 9 const radioInputs = document.querySelectorAll('.gender-inp'); 10 const keyval2 = [...radioInputs] 11 .filter((e) => e.checked && e.value) 12 .map((e) => [e.name, e.value]); 13 14 const keyval = keyval1.concat(keyval2); 15 16 const searchParams = new URLSearchParams(keyval); 17 const href = `?${searchParams.toString()}`; 18 searchButton.setAttribute('href', href); 19}; 20

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

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

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

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

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

guest

回答1

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(クエリ文字列)変数を取得する方法

js

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

pug

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

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


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

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

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

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

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

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


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

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

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

ReactVue.jsAngularといったJSフレームワークと呼ばれるジャンルのツールです。

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

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

投稿2020/08/24 11:25

miyabi-sun

総合スコア21143

maskmelon👍を押しています

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

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

maskmelon

2020/08/25 17:07

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.53%

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

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

質問する

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Node.js

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

セッション

Sessionはクライアントがサーバに送ったすべてのリクエストのことを指します。

JavaScript

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

保存

保存(save)とは、特定のファイルを、ハードディスク等の外部記憶装置に記録する行為を指します。