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

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

ただいまの
回答率

90.48%

  • JavaScript

    16957questions

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

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 2,600

sarah358

score 48

①商品、
②場所、
③期間、を選ぶと、
料金を計算できる
フォームを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分でやると面倒なので、
スマートなやり方を探しております・・・

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • think49

    2016/05/10 13:29

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

    キャンセル

  • sarah358

    2016/05/10 13:40 編集

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

    キャンセル

  • sarah358

    2016/05/10 13:47

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

    キャンセル

回答 3

checkベストアンサー

0

 配列

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

'use strict';
function calc (name, place, period) {
  var products = [
    {name: 'すいか', place:'山梨', period: 5, cost: 7000},
    {name: 'すいか', place:'山梨', period: 6, cost: 6000},
    {name: 'すいか', place:'山梨', period: 7, cost: 5000},
    {name: 'すいか', place:'山梨', period: 8, cost: 4000},
    {name: 'すいか', place:'山梨', period: 9, cost: 3000}
  ];

  // for 文か forEach で producs を繰り返し処理して3つの値が一致する商品を見つける
}

 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 14:01

    エクセルで料金表はあるので、それを、CSVやテキストにするのは簡単です。
    例 2つのコラムにして、コンマで区切るとこんな感じです。
    すいか山梨5月, 7000円,

    JavaScriptで外部ファイルにパースする方法について勉強します。
    参考になるようなサイトなどもしご存知であれば、教えて頂くことは可能ですか?

    キャンセル

  • 2016/05/10 21:13

    CSVの扱いについて親記事に追記しました。

    キャンセル

  • 2016/05/11 13:02

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

    キャンセル

  • 2016/05/11 14:13

    同一ドメイン上にcsvファイルがあるのであれば XMLHttpRequest で実装可能だと思います。
    http://uhyohyo.net/javascript/13_1.html
    Fetch APIを使うともっと楽ですが、IE11-, Edge14 が未対応なので Polyfill が必要ですね。
    http://qiita.com/tomoyukilabs/items/9b464c53450acc0b9574
    http://caniuse.com/#feat=fetch

    キャンセル

  • 2016/05/12 13:26 編集

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

    キャンセル

  • 2016/05/12 16:40

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

    キャンセル

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/10 14:02

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

    キャンセル

  • 2016/05/10 14:15 編集

    jsonでも、連想配列でも、自分の好きなように構築できるので、どちらでもいいかとは思います。

    json のパースをやっている処理をみつけたので、ご参考まで。
    参考:
    JSON形式のデータをパースしてみる。
    http://onthewaves.web.fc2.com/android/connection/com_json.html

    元のデータがexcelということなので、マクロとかでjsonファイルを吐き出せるようにするといいかもしれないですね。
    参考:
    JSONファイル作成ツールExcelで作ってみたよ
    http://blog.baca.jp/?p=239

    キャンセル

  • 2016/05/10 20:12

    ありがとうございます!
    配列に関しては下記のサイトも見つけました。
    http://uxmilk.jp/11586
    http://www.hp-stylelink.com/news/2014/08/20140826.php

    キャンセル

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/11 13:02

    ありがとうございます

    キャンセル

関連した質問

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

  • JavaScript

    16957questions

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