このブログはプログラム開発や学習などの際に役立つ知識や情報を発信するエンジニアのためのトータル技術ブログです。
ご意見やご要望にも積極的に答えていきますので、お気軽にお問い合わせください。

記事へのリクエストはこちら

① JavaScript で表計算アプリを作ってみる

HTML/CSS
スポンサーリンク
きつね先生
きつね先生

今日は JavaScript で表計算アプリをつくりましょう!

わんぽち
わんぽち

なんだかとっても難しそうだわん

きつね先生
きつね先生

そんなことないですよ! JavaScript のコードでHTML要素を生成して処理を記述するだけですよ!

にゃんみ
にゃんみ

DOM 操作ってやつかにゃ??

きつね先生
きつね先生

にゃんみちゃん詳しいですね! JavaScript の中でもよく使う機能なので是非マスターしましょう!

わんぽち
わんぽち

ドム?ガンダムのキャラクター??

 

こんにちは!あっきーです!

突然ですが、JavaScript の教本って同じようなもの多くないですか?

関数や配列、ループ処理など他の言語でも使う共通の機能の説明がほとんど。
あとは DOM 操作、API 、jQuery の説明がちょこっとだけ。

JavaScript ではそのちょこっとの部分をめっちゃ使います。
だけどその部分の解説が少ないと思うことが多々あります。

なので、今回は DOM 操作で HTML 要素を取得し、計算するというよくありそうな機能のコードを紹介してみようかと思います。

JavaScript の基礎を学んで何かアプリを作ってみたい人の参考にしていただけたらと思います!

スポンサーリンク

さいしょに

実はこれから公開しますコードは、僕が JavaScript を学んで間もないときに書いたコードです。

なので、控えめに言ってもいけてるコードとは言えません 笑
なかなかにはずかしいコードですが、あえて公開しようと思いました。

なぜかというとこれから JavaScript を学ぶ人へまずは「最もシンプルでわかりやすく動くコード」と考えたときにコンパクトにまとめるより、長くても何をしているかなんとなくわかるコードの方がいいと思ったからです。

なので今回のつくるアプリを連載形式で何パターンかの実装例をシェアしてみようかと思います!

気に入ったところだけ見るもよし、最初から見るもよし。
お好みで参考にしてください!

サンプルの動作確認

下の画像をクリックすると今回実装するアプリの動作が動画で確認できますのではじめに確認してください!

コードプレビュー

まずは自分のローカル環境で動作確認を行いたい人はしたの HTML コードと JavaScript のコードをテキストエディタにコピペしてファイルを作成してください。

※ HTML の宣言や body タグなどは省略してるので個々で追加しておいてください。

・index.html

<form action="#" name="frm1">
<table>
    <tr>
        <th>交通機関</th>
        <th>単価</th>
        <th>利用区分</th>
        <th>合計</th>
    </tr>
    <tr>
        <td>
            <select>
                <option>地下鉄</option>
                <option>従来線</option>
            </select>
        </td>
        <td>    
            <input type="text" name="row1_price">
        </td>
        <td>
            <select name="row1_sel_traffic" onChange="Calculation()">
                <option></option>
                <option>片道</option>
                <option>往復</option>
            </select>
        </td>
        <td>
            <input type="text" name="row1_total">
        </td>
    </tr>
    <tr>
        <td>
            <select>
                <option>地下鉄</option>
                <option>従来線</option>
            </select>
        </td>
        <td>    
            <input type="text" name="row2_price">
        </td>
        <td>
            <select name="row2_sel_traffic" onChange="Calculation()">
                <option></option>
                <option>片道</option>
                <option>往復</option>
            </select>
        </td>
        <td>
            <input type="text" name="row2_total">
        </td>
    </tr>
    <tr>
        <td>
            <select>
                <option>地下鉄</option>
                <option>従来線</option>
            </select>
        </td>
        <td>    
            <input type="text" name="row3_price">
        </td>
        <td>
            <select name="row3_sel_traffic" onChange="Calculation()">
                <option></option>
                <option>片道</option>
                <option>往復</option>
            </select>
        </td>
        <td>
            <input type="text" name="row3_total">
        </td>
    </tr>
    <tr>
        <td align="right" colspan="3"><strong>合計</strong>
        </td>
        <td>
            <input type="text" id="field_total" value="0">
        </td>
    </tr>
</table>
</form>
<form action="#" name="frm2">
<table>
    <tr>
        <th>宿泊等</th>
        <th>単価</th>
        <th>泊数(数量)</th>
        <th>合計</th>
    </tr>
    <tr>
        <td>
            <select>
                <option>宿泊</option>
                <option>食費</option>
                <option>地下鉄</option>
            </select>
        </td>
        <td>    
            <input type="text" name="row4_price">
        </td>
        <td>
            <select name="row4_sel_cost" onChange="Calculation2()">
                <option>0</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>
        </td>
        <td>
            <input type="text" name="row4_total">
        </td>
    </tr>
    <tr>
        <td>
            <select>
                <option>宿泊</option>
                <option>食費</option>
                <option>地下鉄</option>
            </select>
        </td>
        <td>    
            <input type="text" name="row5_price">
        </td>
        <td>
            <select name="row5_sel_cost" onChange="Calculation2()">
                <option>0</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>
        </td>
        <td>
            <input type="text" name="row5_total">
        </td>
    </tr>
    <tr>
        <td>
            <select>
                <option>宿泊</option>
                <option>食費</option>
                <option>地下鉄</option>
            </select>
        </td>
        <td>    
            <input type="text" name="row6_price">
        </td>
        <td>
            <select name="row6_sel_cost" onChange="Calculation2()">                   
                <option>0</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>
        </td>
        <td>
            <input type="text" name="row6_total">
        </td>
    </tr>
    <tr>
        <td align="right" colspan="3"><strong>合計</strong>
        </td>
        <td>
            <input type="text" id="field_total2" value="0">
        </td>
    </tr>
</table>
</form>
<form action="#" name="total">総合計
    <input type="text" id="all_total">
    <button id="button">確認</button>
</form>
<script src="app.js"></script>

・app.js

function Calculation() {
    var row1 = document.frm1.row1_price.value * document.frm1.row1_sel_traffic.selectedIndex;
    document.frm1.row1_total.value = row1;

    var row2 = document.frm1.row2_price.value * document.frm1.row2_sel_traffic.selectedIndex;
    document.frm1.row2_total.value = row2;

    var row3 = document.frm1.row3_price.value * document.frm1.row3_sel_traffic.selectedIndex;
    document.frm1.row3_total.value = row3;

    var total = row1 + row2 + row3;
    document.frm1.field_total.value = total;
}

function Calculation2 {
    var row4 = document.frm2.row4_price.value * document.frm2.row4_sel_cost.selectedIndex;
    document.frm2.row4_total.value = row4;

    var row5 = document.frm2.row5_price.value * document.frm2.row5_sel_cost.selectedIndex;
    document.frm2.row5_total.value = row5;

    var row6 = document.frm2.row6_price.value * document.frm2.row6_sel_cost.selectedIndex;
    document.frm2.row6_total.value = row6;

    var total2 = row4 + row5 + row6;
    document.frm2.field_total2.value = total2;
}

var button = document.getElementById('button');

button.addEventListener("click", function(e){
    e.preventDefault();

    var field_total = document.getElementById("field_total").value;
    var field_total2 = document.getElementById("field_total2").value;

    var sum = parseInt(field_total, 10) + parseInt(field_total2, 10);

    var all_total = document.getElementById("all_total");
    all_total.value = sum;
});

※ class などでコードが煩雑になり、見やすさが悪くなってしまいそうでしたので CSS に関する要素とコードは省略してますので見た目は動画と異なります。

解説

では、コードの解説をしてみようと思います。
HTML の方は今回はカテゴリー外ですので割愛させていただきます!

イベントハンドラで処理を定義する

イベントハンドラとはクリックやマウス操作など、ユーザーの行う特定の動作に対して処理を命令することを指します。

今回のコードでは以下の部分です。

//index.html
<select name="row1_sel_traffic" onChange="Calculation()">

//app.js
function Calculation(){
  //処理
}
・select 要素にイベントハンドラを埋め込み処理内容を定義。
・onClick は要素の内容が変更された時に起こるイベント処理を定義します。
・イベント定義によりセレクトボックスを操作することで function 関数の処理が走ります。

DOM 操作で HTML 要素の値を取得する

DOM 操作とは JavaScript で HTML 要素を取得、生成することです。

JavaScript では「document」オブジェクトを活用することで、Webページを構成しているHTML要素へプログラム上から簡単にアクセスできるのが特徴です。

今のところは DOM 操作の最初に記述するお作法的なものって考えておくといいかなと思います。

たぬきち仙人
たぬきち仙人

興味がある人はブラウザのデベロッパーツールで console.log(document) で document オブジェクトの構成をみると良いぞ。

今回のコードでは以下の部分です。

var row1 = document.frm1.row1_price.value * document.frm1.row1_sel_traffic.selectedIndex;
document.frm1.row1_total.value = row1;
・HTML 構造の順番に「.」でつなげて name 属性の値を取得します。

以下のような流れになってます。

document オブジェクト → 親要素である form 要素の name「frm1」→ 子要素である input 要素 の name 「row1_price」の値(value) の順番に取得。

同様に select 要素の値を取得し、両属性値をかけあわせ変数「row1」に代入。

合計に「row1」の値を代入。

あとは、行ごとに name に連番をつけていき同じ処理の繰り返しですね。

イベントリスナーで処理を定義する

イベントハンドラと同じイベントを定義する方法です。
せっかくなので最後にもう1パターンのイベントリスナーで総合計を求めました。

今回のコードでは以下の部分です。

var button = document.getElementById('button');

button.addEventListener("click", function(e){
    e.preventDefault();   

    var field_total = document.getElementById("field_total").value;
    var field_total2 = document.getElementById("field_total2").value; 

    var sum = parseInt(field_total, 10) + parseInt(field_total2, 10);
 
    var all_total = document.getElementById("all_total");
    all_total.value = sum;
});

イベントハンドラと異なる部分はHTML 要素にイベントを定義していません。
一般的によく使われる書き方の無名関数で設定する方法を利用してみました。

特徴としては、第1引数にイベントの種類を指定した後に第2引数へそのまま関数を記述しているのがポイントです。

単純な処理しか記述しないようなケースでは、関数を別で用意するよりもこちらの方がわかりやすいかと思います。

また、DOM 操作の方も name ではなく getElementById を使用し id値 を取得して合計値を求めています。

使い方は一緒なので理解できるかと思います。

おわりに

いかがでしたか?

今回は DOM 操作で要素の取得のみを行いましたが、生成もできますので、イベントハンドラなどとあわせて応用すればよくある「○○診断」みたいなユーザーの回答にあわせて診断結果を作ることとかできそうですね!

長々としたいコードになってしまったので、次回は ループなども含めてコンパクトにしたコードを紹介しようかと思います!

スポンサーリンク
あっきー

元キャバクラ店長から未経験でエンジニアに転職した異端児。

「週4の5時間勤務、月収100万円」を実現させ、ゆるりと生きることを目標に日々パソコンと奮闘している。

自分の経験を元に、未経験からでも挫折しないプログラミングの勉強方法や最新技術や情報などを発信していきます。

あっきーをフォローする
HTML/CSSJavaScript
\良い記事だったらシェアしてね!/
スポンサーリンク
駆け出しエンジニアのつぶやき