備忘録として、QiitaでJavaScriptの記事を書いていきたいと思います。相当初歩的な内容なので、暖かく見守っていただけると幸いです。
やりたいこと
私は経済学部に所属しているので、身近なGDPを計算する簡単なWEBアプリケーション（以下アプリ）を作成しようと思います。
↓これが完成品です↓
https://ryo-04.github.io/GDP
jQueryとかも一旦使わないピュアなJavaScriptでコードを書きますので、超初心者も安心です。
（自分も超初心者）
GDPの公式
GDPの計算の公式は、
Y = C + I + G + (X - M)
Y：GDP
C：民間消費
I：民間投資
G：政府支出（消費 + 投資）
X：輸出
M：輸入
こんな感じです。
「経済学興味ないよ」って方は、これを覚える必要はありませんが、一応UI（ユーザーインターフェイス）に説明として書くようにしましょう。
簡単な設計
それでは簡単にアプリの設計をしましょう。
とはいえ、面倒なので今回はデザインとかは完全にスキップしてCSSのファイルは作りません。
やりたいことは、C, I, G, X, Mを入力して、ボタンを押したらYが出力される、ってだけの処理。
必要な機能はざっと以下の通り。
・HTMLのinput要素
・計算開始用のボタン
・inputから数字を読み取って計算
・HTMLに計算結果を表示
やることはこれだけですね、単純で明快です。
ファイルを作る
では早速ファイルを作ります。
……とその前にフォルダ（ディレクトリ）を作って、適当に名前をつけます。
今回はGDPと名付けましょう（安直）。
GDP/index.html
GDP/script.js
この二つのファイルだけ作ったら、次はいよいよコードを書いていきます。
HTMLを書く
では、HTMLのコードを書いていきます。
まずはinput要素から書きましょうか。
<p>民間消費（C）: <input id="c" type="number" value=""></p>
<p>民間投資（I）: <input id="i" type="number" value=""></p>
<p>政府支出（G）: <input id="g" type="number" value=""></p>
<p>輸出（X）: <input id="x" type="number" value=""></p>
<p>輸入（M）: <input id="m" type="number" value=""></p>
1行目を書いたらコピペで5つに分身させて、id要素だけ変えましょう。その方が楽だしミスもないです。
そして、その下にボタンを配置します。
<button id="keisan_button"><p id="keisan">計算開始！</p></button>
思わず押したくなるようなボタンが出来上がったら、今度は計算結果を出力する場所を用意します。
<p id="output">GDP: <span id="y"></span>億円</p>
これでHTMLの準備は完了です。
JavaScriptを書く前に、bodyの1番下にscript.jsを読み込むための「魔法の一文」を加えましょう。
<script src="script.js"></script>
一応、body内のコードを全て書くとこうなります。
<!-- 前略 -->
<body>
<p>民間消費（C）: <input id="c" type="number" value=""></p>
<p>民間投資（I）: <input id="i" type="number" value=""></p>
<p>政府支出（G）: <input id="g" type="number" value=""></p>
<p>輸出（X）: <input id="x" type="number" value=""></p>
<p>輸入（M）: <input id="m" type="number" value=""></p>
<button id="keisan_button"><p id="keisan">計算開始！</p></button>
<p id="output">GDP: <span id="y"></span>億円</p>
<script src="script.js"></script>
</body>
JavaScriptを書く
次にアプリの機能を作っていきましょう。
私はJavaScript初学者なので、もっと良い記述方法もあると思いますが、とりあえず今は「動けばOK」精神で書きます。
まずはinput要素から数値を取り出して、計算結果を返すmath()を作ります。
function math(){
let c = parseInt(document.getElementById("c").value);
let i = parseInt(document.getElementById("i").value);
let g = parseInt(document.getElementById("g").value);
let x = parseInt(document.getElementById("x").value);
let m = parseInt(document.getElementById("m").value);
return c + i + g + (x - m);
};
変数c, i, g, x, mに、それぞれの数値を代入します。このコードもコピペ推奨です、コピペは神。
そして、returnで計算結果を戻り値として返します。
一応、parseIntで数値として取り出すよ〜的なこと書いたんですが、無くても大丈夫かも？（HTML側でtypeをnumberで指定しているため）
次に、このmath()をボタンのクリック時に呼び出すコードを書きましょう。
document.getElementById("keisan_button").onclick = function(){
let y = math();
document.getElementById("y").textContent = y;
};
なんか、この1行目はもっと綺麗に書ける気もするのですが、機能すれば良いのでとりあえずこれでよし。
ボタンがクリックされたら、先ほど作ったmath()を呼び出して変数yに代入。
その後、span id="y"に表示してねって感じ。
正直、ひとつのfunctionにまとめても書けるけど、どっちが良いのか分からなかったので2つに分けました。
一応、index.htmlのパスをコピーして、Chromeで確認してみてください。
終わりに
とりあえず簡単なアプリを作ることができました。
デザインとか、もう少し機能つけてみたりしたら需要あるかも？？
この記事を通して、JavaScriptでアプリ開発することのハードルが下がれば良いなと思っています。