質問: やりたいこと ------ 以下のようなアプリを作ろうと考えています。 ![![スクリーンキャプチャ](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/bae94d6bd7701ec3db39e76829ebacc4.png) 機能 -- ・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というアウトプットが出るまでのプログラム間のフロー** になると思います。ひたすらに抽象的ですみません。 質問がこの体たらくなので回答内容の粒度は問いません。何か教えてくれればそれだけで嬉しいです。 もしくはこの本読んでおけば?みたいなものでも歓迎です。よろしくお願いします。
回答: 何ができればそこまで到達できるか、細分化すれば道筋とそれに必要な技術(というと大げさですが、要は手法・機能)が見えてくるはずです。 特に単位に対してその上の単位、下の単位での計算方法は決まっているはずですから、それによって分岐できれば良いわけです。 JavaScriptだけで対応する場合は下記。 1. 入力した情報(value1,unit1,unit2)を取得する 2. 取得した情報で単位の判定を行う(単位比較から元の単位からの割合を決定) 3. 元の単位からの割合に基づき、入力された数値を掛け算 4. 掛け算した結果をvalue2に設定する 1.入力した情報を取得する ============= JavaScriptの場合、例えば「情報が変更された」「キーが押された(上がった)」ことによって発動できればいいわけですよね。となるとキーワードは「JavaScript input 変更時 イベント」「JavaScript input 入力時 イベント」などがキーワードになります。 2.取得した情報で単位の判定を行う ================= unit1とunit2の関係性が鍵になります。提示の画像ではkgに対してtなので分かりやすいですが「何が入力されるか分からない」という前提があります。 ここからは発想ですが、何かしらで、1○○という単位を情報として持っておけば、そこから計算することにより入力された数値からどれくらいの数を掛ければ良いのかが決まります。 基準を適当にもっておいて。連想配列とかがいいでしょうね。 ``` //今回は重さのみ。単位の種類を増やすならもう1階層あった方が良い。 let 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などサーバー側の言語を利用する場合は「リクエスト」と「レスポンス」について理解をする必要がありますが、 ひとまず「入力フォームを送信」することで入力した情報がサーバー側の言語で受け取れるようになるのでその観点で対応していってはどうでしょうか。 処理の流れ的には同じです。取得して、計算して、設定する。