JavaScriptで電話帳

はじめに

第2作目のプログラム。このまま練習用に書いたプログラムを公開し続ければ、100作目に到達する頃はかなり上達しているのでは。というわけで、これはまだまだ改善の余地があるが、とりあえず公開する。失敗や恥を恐れずアウトプットすることが大事（と自分に言い聞かせる）。尚、あくまでプログラミングの練習なのでデザインはほぼ意識していない。CSSも今回はあまりに雑なので載せない。

仕様

• シンプルな電話帳。名前、電話番号、アドレス、メモが登録できる。
• 登録した情報をFirst Nameから検索し、該当情報を表示する。

コード

index.html

<h1>Contact Book</h1>
<div class="container">
        <h2>Entry</h2>
        <form name="contactBook">
            <p>No.<span id="bookId">-</span></p>
            <p>First Name: <input type="text" name="FirstName"></p>
            <p>Middle Name: <input type="text" name="MiddleName"></p>
            <p>Last Name: <input type="text" name="LastName"></p>
            <p>Phone: <input type="text" name="Phone"></p>
            <p>Email: <input type="text" name="Email"></p>
            <p>Note:<br /><textarea name="Note"></textarea></p>
            <div class="button" id="entry_button">Entry</div>
            <div class="message" id="message"></div>
        </form>
    </div>

    <div class="container">
        <h2>Search</h2>
        <form name="searchForm">
            <p>First Name: <input type="text" name="Keyword"></p>
            <div class="button" id="search_button">Search</div>
            <p>Result:<br /><textarea name="Result"></textarea></p>
        </form>

main.js

"use strict";

        var Person = function(first, middle, last, phone, email, note){
            this.firstName = first;
            this.middleName = middle;
            this.lastName = last;
            this.phone = phone;
            this.email = email;
            this.note = note;
        };


        var CBform = document.forms.contactBook;
        var bookId = document.getElementById("bookId");
        var entry_button = document.getElementById("entry_button");
        var message = document.getElementById("message");
        var search_button = document.getElementById("search_button");
        var Sform = document.forms.searchForm;
        var result = Sform.Result;
        var yourContactBook = [];

        bookId.innerHTML = yourContactBook.length;

        entry_button.addEventListener("click", function(){ //電話帳への登録
            yourContactBook[yourContactBook.length] = new Person(CBform.FirstName.value, CBform.MiddleName.value, CBform.LastName.value, CBform.Phone.value, CBform.Email.value, CBform.Note.value);
            var passage = document.createElement("p"); //完了メッセージを出す
            var text = document.createTextNode("Entry has been Successful.");
            message.appendChild(passage);
            message.appendChild(text);
            setTimeout(function(){ //完了メッセージを消す
                message.removeChild(message.lastChild);
            }, 2000);
            CBform.FirstName.value = ""; //フォームをクリア
            CBform.MiddleName.value = "";
            CBform.LastName.value = "";
            CBform.Phone.value = "";
            CBform.Email.value = "";
            CBform.Note.value = "";
            bookId.innerHTML = yourContactBook.length; //Noを更新
        });

        search_button.addEventListener("click", function(){ //電話帳の検索
            for (var i = 0, len = yourContactBook.length; i < len; i++){
                if (yourContactBook[i].firstName === Sform.Keyword.value) { //FirstNameで検索
                    result.innerHTML =
                    "First Name: " + yourContactBook[i].firstName + "\n" +
                    "Middle Name: " + yourContactBook[i].middleName + "\n" +
                    "Last Name: " + yourContactBook[i].lastName + "\n" +
                    "Phone: " + yourContactBook[i].phone + "\n" +
                    "Email: " + yourContactBook[i].email + "\n" +
                    "Note: " + yourContactBook[i].note + "\n";
                } else {
                    result.innerHTML = "No match information."
                };
            };          
        });

課題

• フォームで不適切な入力があれば、エラーメッセージを返したい。
• 検索はFirst Nameからしか出来ないが、どの項目でも検索ができるようにしたい。
• 小文字の検索で、大文字の登録を拾いたい。
• id, class, parameterなどの名前の付け方が雑。

課題を挙げだすとキリがないが、電話帳と言うのであれば、ここら辺は必須かなあ。連想配列と正規表現をもっと勉強しないといけない。後、例のリーダブルコードの本を読もう。量を書きながらどんどん勉強すべし。