【超初心者向け】JavaScriptでWEBアプリケーションを作る

備忘録として、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`要素から書きましょうか。

```HTML:index.html

<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`要素だけ変えましょう。その方が楽だしミスもないです。

そして、その下にボタンを配置します。

```HTML:index.html
<button id="keisan_button"><p id="keisan">計算開始！</p></button>
```

思わず押したくなるようなボタンが出来上がったら、今度は計算結果を出力する場所を用意します。

```HTML:index.html
<p id="output">GDP: <span id="y"></span>億円</p>
```

これでHTMLの準備は完了です。

JavaScriptを書く前に、`body`の1番下に`script.js`を読み込むための「魔法の一文」を加えましょう。

```HTML:index.html
<script src="script.js"></script>
```

一応、`body`内のコードを全て書くとこうなります。

```HTML:index.html
<!-- 前略 -->
<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()`を作ります。

```JavaScript:script.js
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()`をボタンのクリック時に呼び出すコードを書きましょう。

```JavaScript:script.js
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でアプリ開発することのハードルが下がれば良いなと思っています。