##やりたいこと
以下のようなアプリを作ろうと考えています。

![
##機能
・value 1箇所と、unit 2箇所が記入されると、ブランクのvalue箇所（この場合は左下）に
自動的に非同期で正しい数値（この場合は0.2)が記述される。
・自動で埋められた箇所にはアニメーションをつけたい。（一瞬だけそのフォームの枠が赤くなるなど）
・Googleでええやんってなりそうですが、これの利点は単位の種類（面積、重さ、etc)を指定しなくても自動で単位を判断してくれるとこ、そうなる予定。

##教えて欲しいこと
html,cssはかけました。ここからどうすればよいのでしょう？大まじめです。

・どうやってこのinputに書いた数値、文字列を標準入力として渡すのか
・これらを標準入力として受け取るプログラムは何で書くのか?JavaScript?Ruby?
・SinatraとかRailsみたいなwebフレームワークを使ったほうがいいのか

Progateやドットインストールという教材で言語単体の読み方・書き方は分かり、AtCoderやPaizaで入力⇄出力間のアルゴリズムの組み方はわかりましたが、肝心のこれらをどう組み合わせればよいのか、というところが分かっていません。
これらの教材はhtmlとJavaScript,Rubyなどを組み合わせて使う手法に関しては教えてはくれませんでした。

まとめますと、多分私が知りたいのは
上の画像の状態から0.2というアウトプットが出るまでのプログラム間のフロー
になると思います。ひたすらに抽象的ですみません。
質問がこの体たらくなので回答内容の粒度は問いません。何か教えてくれればそれだけで嬉しいです。
もしくはこの本読んでおけば？みたいなものでも歓迎です。よろしくお願いします。

行動規範の内容に同意します

回答4件

ベストアンサー

何ができればそこまで到達できるか、細分化すれば道筋とそれに必要な技術（というと大げさですが、要は手法・機能）が見えてくるはずです。

特に単位に対してその上の単位、下の単位での計算方法は決まっているはずですから、それによって分岐できれば良いわけです。

JavaScriptだけで対応する場合は下記。

入力した情報(value1,unit1,unit2)を取得する
取得した情報で単位の判定を行う（単位比較から元の単位からの割合を決定）
元の単位からの割合に基づき、入力された数値を掛け算
掛け算した結果をvalue2に設定する

1.入力した情報を取得する

JavaScriptの場合、例えば「情報が変更された」「キーが押された（上がった）」ことによって発動できればいいわけですよね。となるとキーワードは「JavaScript input 変更時イベント」「JavaScript input 入力時イベント」などがキーワードになります。

2.取得した情報で単位の判定を行う

unit1とunit2の関係性が鍵になります。提示の画像ではkgに対してtなので分かりやすいですが「何が入力されるか分からない」という前提があります。
ここからは発想ですが、何かしらで、1○○という単位を情報として持っておけば、そこから計算することにより入力された数値からどれくらいの数を掛ければ良いのかが決まります。
基準を適当にもっておいて。連想配列とかがいいでしょうね。

js
1//今回は重さのみ。単位の種類を増やすならもう1階層あった方が良い。
2let basic_setting = {'mg':0.001,'g':1,'kg':1000,'t':1000000};

unit1がkgでunit2がtなので、その2つのキーにより1000と1000000が取得できる。
あとはこの2つで割り算をすればvalue1からの割合が決まる

3.元の単位からの割合に基づき、入力された数値を掛け算

value1が取得できていて、元の単位からの割合が分かっているので、そちらを掛け算すれば結果が分かる。
四則演算の範囲です。

4.掛け算した結果をvalue2に設定する

「取得」の逆となります。「JavaScript input 初期値　設定」がキーワードになります。

蛇足：
Rubyなどサーバー側の言語を利用する場合は「リクエスト」と「レスポンス」について理解をする必要がありますが、
ひとまず「入力フォームを送信」することで入力した情報がサーバー側の言語で受け取れるようになるのでその観点で対応していってはどうでしょうか。
処理の流れ的には同じです。取得して、計算して、設定する。

投稿2019/02/12 02:09

m.ts10806

総合スコア80850

Sigma1630

2019/02/12 03:56

こう調べればいいんじゃないか、というところまで教えていただきありがとうございます！クライアント側のコード記述だけでもアプリは作れること理解しました

m.ts10806

2019/02/12 04:07

基本、何事も細分化です。細かければ細かいほど何が必要か、何を調べれば良いかがハッキリしてきます。

行動規範の内容に同意します

どうやってこのinputに書いた数値、文字列を標準入力として渡すのか

標準入力はコマンドラインプログラムで使うものなので、Webアプリケーションで出番はありません。

これらを標準入力として受け取るプログラムは何で書くのか?JavaScript?Ruby?

「計算して表示するだけ」のような機能性の場合、ブラウザ内のJavaScriptだけで完結させるのがいちばんシンプルです（通信をするようにも書けますが、手間なだけで特にメリットはないです）。

SinatraとかRailsみたいなwebフレームワークを使ったほうがいいのか

上述のように、JavaScriptだけで完結させられますので、これらのフレームワークは大げさなだけです。JavaScript側でVue、React、Riotなど何かしらのフレームワークを使うのは便利かもしれません（この程度ならDOMを直接叩く、あるいはjQueryでもそこまで困らずにできるかとは思いますが）。

投稿2019/02/12 00:08

maisumakun

総合スコア145184

m.ts10806

2019/02/12 02:18

無駄に壮大なじゃんけんアプリを作った人もいますので https://qiita.com/Sinhalite/items/03c55d01bb953bb327f4 あえて小難しい構成に挑むのは勉強の方向性としてはありかもしれませんね。

Sigma1630

2019/02/12 03:49

色々と用語の使い方に関しても教えて頂きありがとうございます！

行動規範の内容に同意します

javascript
1<!DOCTYPE html>
2<title></title>
3<meta charset="utf-8">
4<style>
5</style>
6
7<body>
8<form>
9  <p>
10    <input type="text" name="n0" value="">
11    <input type="text" name="u0" value="">
12  <p>
13    <input type="text" name="n1" value="">
14    <input type="text" name="u1" value="">
15</form>
16
17<script>
18
19  class DelayWork {
20    constructor (callBackFunc, wait = 500) {
21      this.callBackFunc = callBackFunc; // func.bind (this)
22      this.wait = wait;
23      this.timerID = null;
24    }
25
26    start (...arg) {
27      if (! this.timerID) {
28        let cbfunc = () => {
29          this.timerID = null;
30          this.callBackFunc (...arg);
31         };
32        this.timerID = setTimeout (cbfunc, this.wait);
33       }
34      return this;
35    }
36
37
38    stop () {
39      if (this.timerID)
40        clearTimeout (this.timerID);
41      this.timerID = null;
42      return this;
43    }
44  }
45
46  //_____________________________________________________
47
48
49  class DelayHandler {
50
51    constructor (handler, wait = 500) {
52      let cbFunc;
53      switch (Object.prototype.toString.call (handler)) {
54      case '[object Object]' :
55        if ('handleEvent' in handler)
56          if ('function' === typeof handler.handleEvent)
57            cbFunc = handler.handleEvent.bind (handler);
58        break;
59
60      case '[object Function]' :
61        cbFunc = handler; break;
62
63      default:
64        throw new Error ('Not handleEvent'); break;
65      }
66
67      this.handler = new DelayWork (cbFunc, this.wait);
68      this.wait = wait;
69    }
70
71
72    handleEvent (event) {
73      this.handler.stop ().start (event);
74    }
75  }
76  
77
78//_____________________________________________________
79  
80const
81  form = document.querySelector ('form'),
82  targets = [...form.querySelectorAll ('input[name^=n], input[name^=u]')];
83
84
85function ai (event, kara) {
86  console.log (kara.name);
87  targets.forEach (e => console.log (e.name, e.value));
88
89  /*....
90
91
92
93  */
94
95  kara.value = '?';
96  kara.style.cssText = 'border: red 2px solid';
97  (new DelayWork (() => kara.style.cssText = '', 1000)).start ();
98}
99
100
101function handler (event) {
102  let n = targets.filter (e => ! e.value.length);
103  if (1 === n.length)
104    if (event.target !== n[0])
105      ai (event, n[0]);
106}
107
108
109form.addEventListener ('input', new DelayHandler (handler), false);
110
111
112</script>

投稿2019/02/11 19:31

退会済みユーザー

総合スコア0

Sigma1630

2019/02/12 03:50

具体的なコードありがとうございます！

行動規範の内容に同意します

javascript
1<!DOCTYPE html>
2<title></title>
3<meta charset="utf-8">
4<style>
5</style>
6
7<body>
8<form>
9  <p>
10    <input type="text" name="n0" value="">
11    <input type="text" name="u0" value="">
12  <p>
13    <input type="text" name="n1" value="">
14    <input type="text" name="u1" value="">
15</form>
16
17<script>
18
19const
20  form = document.querySelector ('form'),
21  targets = [...form.querySelectorAll ('input[name^=n], input[name^=u]')];
22
23
24function ai (event, kara) {
25  console.log (kara.name);
26  targets.forEach (e => console.log (e.name, e.value));
27
28  /*....
29  
30  
31  
32  */
33  
34  kara.value = '?';
35  kara.style.cssText = 'border: red 2px solid';
36}
37
38
39function handler (event) {
40  let n = targets.filter (e => ! e.value.length);
41  if (1 === n.length)
42    if (event.target !== n[0])
43      ai (event, n[0]);
44}
45
46
47form.addEventListener ('input', handler, false);
48 
49 
50</script>