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

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

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

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

Q&A

解決済

3回答

14120閲覧

【JavaScript】料金見積もりシミュレーターの作成方法について教えて下さい

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

0グッド

1クリップ

投稿2016/05/10 04:26

編集2016/05/10 04:41

①商品、
②場所、
③期間、を選ぶと、
料金を計算できる
フォームをJavaScriptで作成したいです。

それぞれの項目には
5つのオプションがあります。

ヒントを頂きたいのですが、
このようなフォームを作成する場合、
それぞれの組み合わせのIF文を作っておくのでしょうか?

例えば

If(商品1+場所1+期間1) {5000円};
If(商品2+場所2+期間2) {3000円};
If(商品3+場所3+期間3) {1000円};

コンビネーション分を作るのは面倒ですし、
将来商品が増えたら、また書き直さないといきません。

他に効率的な良い方法をご教示頂けますでしょうか。


簡単なイメージ

修正分

下記のような料金表があります。(例)

商品名 場所 期間 計算

すいか 山梨 5月 = 5000円
すいか 山梨 6月 = 6000円
すいか 山梨 7月 = 5000円
すいか 山梨 8月 = 4000円
すいか 山梨 9月 = 3000円

IF分でやると面倒なので、
スマートなやり方を探しております・・・

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

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

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

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

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

think49

2016/05/10 04:29

計算式がないと誰も回答できないと思うのですが、どのようなアルゴリズムで計算するのでしょうか。それによって最適解が変わると思います。
退会済みユーザー

退会済みユーザー

2016/05/10 04:42 編集

修正しました。 下記のような料金表があります。 商品名 場所 期間 計算 すいか 山梨 5月 = 5000円 すいか 山梨 6月 = 6000円 すいか 山梨 7月 = 5000円 すいか 山梨 8月 = 4000円 すいか 山梨 9月 = 3000円 IF分でやると面倒なので、 スマートなやり方を探しております・・・
退会済みユーザー

退会済みユーザー

2016/05/10 04:47

つまり計算はしなくていいというか、すでに料金はあります・・・
guest

回答3

0

自分だけで使うのか、それともある程度の範囲に公開するのか
によっても対応が変わってくるくるのかな、という気がします。

手掛かりはすでに出されていますので、ちょっと踏み込んだことを。
例えば、商品名/場所/期間に各々2桁の数字を割り当てます。
で、HTMLのコンボボックスで表示する際にキーとして持たせます。
計算がクリックされたら、各数字を連結して検索キーを作ります。
データとして検索キー付きの価格? を用意しておけば、
一発で必要なものが見つかっちゃったりしますが、
まあ、この辺は勉強されて詳しくなってからでしょうか。

投稿2016/05/10 12:47

takasima20

総合スコア7458

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

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

退会済みユーザー

退会済みユーザー

2016/05/11 04:02

ありがとうございます
guest

0

ベストアンサー

配列

配列にして for もしくは forEach で繰り返し処理させてみてはどうでしょうか。
データをCSVで持っておき、配列に変換するジェネレータを作っておくと管理が楽になりそうです。

JavaScript

1'use strict'; 2function calc (name, place, period) { 3 var products = [ 4 {name: 'すいか', place:'山梨', period: 5, cost: 7000}, 5 {name: 'すいか', place:'山梨', period: 6, cost: 6000}, 6 {name: 'すいか', place:'山梨', period: 7, cost: 5000}, 7 {name: 'すいか', place:'山梨', period: 8, cost: 4000}, 8 {name: 'すいか', place:'山梨', period: 9, cost: 3000} 9 ]; 10 11 // for 文か forEach で producs を繰り返し処理して3つの値が一致する商品を見つける 12}

CSVパーサ

管理面を考えるなら表データをcsvファイル化し、csvから配列に変換するCSVパーサを使うと良いと思います。
大分前に rfc4180.js を作りましたが、今見ると修正したい部分が多数あったので csv.js に作り直しました。

var csvString = '"すいか","山梨","5","7000"\r\n"すいか","山梨","6","6000"\r\n"すいか","山梨","7","5000"\r\n"すいか","山梨","8","4000"\r\n"すいか","山梨","9","3000"', array = CSV.parse(csvString); console.log(Object.prototype.toString.call(CSV)); // [object CSV] console.log(CSV.stringify(array) === csvString); // true console.log(JSON.stringify(array)); // [["すいか","山梨","5","7000"],["すいか","山梨","6","6000"],["すいか","山梨","7","5000"],["すいか","山梨","8","4000"]]

JSON.stringify(CSV.parse(csvString)) で配列初期化子を作り、静的HTML/JSに貼り付ける運用を想定しています。
csvファイルをGETして自動的に展開する方法もありますが、HTTPリクエストはタイムラグがあるので注意してください。
その方法を採用するなら csv.js と XMLHttpRequest を併用するか、RFC4180#fileToArray を利用するか。

更新履歴

  • 2016/05/10 18:40 CSVパーサの説明を追加

Re: sarah358 さん

投稿2016/05/10 04:54

編集2016/05/10 12:13
think49

総合スコア18156

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

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

退会済みユーザー

退会済みユーザー

2016/05/10 05:01

エクセルで料金表はあるので、それを、CSVやテキストにするのは簡単です。 例 2つのコラムにして、コンマで区切るとこんな感じです。 すいか山梨5月, 7000円, JavaScriptで外部ファイルにパースする方法について勉強します。 参考になるようなサイトなどもしご存知であれば、教えて頂くことは可能ですか?
think49

2016/05/10 12:13

CSVの扱いについて親記事に追記しました。
退会済みユーザー

退会済みユーザー

2016/05/11 04:02

ありがとうございます!!!!! ごめんなさい。一つだけ質問させてください。 自動的に展開する方法を希望しております。 問題はCSVファイルは、ネットワーク上に保存してあります。 XMLHttpRequestで試したらできませんでした。 ちなみにクロームを使っています。 セキュリティーの関係で読み込めないのでしょうか?
think49

2016/05/12 21:44 編集

XMLHttpRequest, fetch はhtmlファイルをダブルクリックして開いた状態では期待通りに動作しません。 どちらもHTTPリクエストするAPIですが、ローカルファイルでは通信しないからです。 ローカルテストする場合はApatch等のHTTPサーバをインストールしてhttp://127.0.0.1/で検証して下さい。
退会済みユーザー

退会済みユーザー

2016/05/12 07:40

ありがとうございました!!!!!!
guest

0

配列とかjsonデータとかに 商品の場所と時期による金額を持っておけば、
あとはデータを取り出して出力するだけ、、、になるかなと。

投稿2016/05/10 04:53

kaputaros

総合スコア1844

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

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

退会済みユーザー

退会済みユーザー

2016/05/10 05:02

エクセルで料金表があります。JSONデータに変換したら、パースしやすいでしょうか?それとも、CSVやテキストファイルと同じでしょうか?
kaputaros

2016/05/10 05:19 編集

jsonでも、連想配列でも、自分の好きなように構築できるので、どちらでもいいかとは思います。 json のパースをやっている処理をみつけたので、ご参考まで。 参考: JSON形式のデータをパースしてみる。 http://onthewaves.web.fc2.com/android/connection/com_json.html 元のデータがexcelということなので、マクロとかでjsonファイルを吐き出せるようにするといいかもしれないですね。 参考: JSONファイル作成ツールExcelで作ってみたよ http://blog.baca.jp/?p=239
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問