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

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

ただいまの
回答率

90.36%

  • JavaScript

    18713questions

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

  • HTML

    10323questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Ruby

    8746questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • CSS

    6726questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Webサイト

    1193questions

    一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

html/css/JavaScript/ruby が各々単体では読める&書ける人間がアプリを作りたい

解決済

回答 4

投稿

  • 評価
  • クリップ 1
  • VIEW 516

Sigma1630

score 13

やりたいこと

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

![スクリーンキャプチャ

機能

・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というアウトプットが出るまでのプログラム間のフロー
になると思います。ひたすらに抽象的ですみません。
質問がこの体たらくなので回答内容の粒度は問いません。何か教えてくれればそれだけで嬉しいです。
もしくはこの本読んでおけば?みたいなものでも歓迎です。よろしくお願いします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 4

checkベストアンサー

+3

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

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

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/02/12 12:56

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

    キャンセル

  • 2019/02/12 13:07

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

    キャンセル

+3

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

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

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

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

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

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/02/12 11:18

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

    キャンセル

  • 2019/02/12 12:49

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

    キャンセル

+2

<!DOCTYPE html>
<title></title>
<meta charset="utf-8">
<style>
</style>

<body>
<form>
  <p>
    <input type="text" name="n0" value="">
    <input type="text" name="u0" value="">
  <p>
    <input type="text" name="n1" value="">
    <input type="text" name="u1" value="">
</form>

<script>

  class DelayWork {
    constructor (callBackFunc, wait = 500) {
      this.callBackFunc = callBackFunc; // func.bind (this)
      this.wait = wait;
      this.timerID = null;
    }

    start (...arg) {
      if (! this.timerID) {
        let cbfunc = () => {
          this.timerID = null;
          this.callBackFunc (...arg);
         };
        this.timerID = setTimeout (cbfunc, this.wait);
       }
      return this;
    }


    stop () {
      if (this.timerID)
        clearTimeout (this.timerID);
      this.timerID = null;
      return this;
    }
  }

  //_____________________________________________________


  class DelayHandler {

    constructor (handler, wait = 500) {
      let cbFunc;
      switch (Object.prototype.toString.call (handler)) {
      case '[object Object]' :
        if ('handleEvent' in handler)
          if ('function' === typeof handler.handleEvent)
            cbFunc = handler.handleEvent.bind (handler);
        break;

      case '[object Function]' :
        cbFunc = handler; break;

      default:
        throw new Error ('Not handleEvent'); break;
      }

      this.handler = new DelayWork (cbFunc, this.wait);
      this.wait = wait;
    }


    handleEvent (event) {
      this.handler.stop ().start (event);
    }
  }


//_____________________________________________________

const
  form = document.querySelector ('form'),
  targets = [...form.querySelectorAll ('input[name^=n], input[name^=u]')];


function ai (event, kara) {
  console.log (kara.name);
  targets.forEach (e => console.log (e.name, e.value));

  /*....



  */

  kara.value = '?';
  kara.style.cssText = 'border: red 2px solid';
  (new DelayWork (() => kara.style.cssText = '', 1000)).start ();
}


function handler (event) {
  let n = targets.filter (e => ! e.value.length);
  if (1 === n.length)
    if (event.target !== n[0])
      ai (event, n[0]);
}


form.addEventListener ('input', new DelayHandler (handler), false);


</script>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/02/12 12:50

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

    キャンセル

+1

<!DOCTYPE html>
<title></title>
<meta charset="utf-8">
<style>
</style>

<body>
<form>
  <p>
    <input type="text" name="n0" value="">
    <input type="text" name="u0" value="">
  <p>
    <input type="text" name="n1" value="">
    <input type="text" name="u1" value="">
</form>

<script>

const
  form = document.querySelector ('form'),
  targets = [...form.querySelectorAll ('input[name^=n], input[name^=u]')];


function ai (event, kara) {
  console.log (kara.name);
  targets.forEach (e => console.log (e.name, e.value));

  /*....



  */

  kara.value = '?';
  kara.style.cssText = 'border: red 2px solid';
}


function handler (event) {
  let n = targets.filter (e => ! e.value.length);
  if (1 === n.length)
    if (event.target !== n[0])
      ai (event, n[0]);
}


form.addEventListener ('input', handler, false);


</script>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

  • ただいまの回答率 90.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

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

  • JavaScript

    18713questions

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

  • HTML

    10323questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Ruby

    8746questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • CSS

    6726questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Webサイト

    1193questions

    一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。