【JavaScript】クラスの定義（コンストラクタ）：名前を入力して、挨拶文を出力する

■クラスの定義

クラス（新しいオブジェクト）を作成することで、変数や複数の処理をまとめることができる。

クラスの定義、クラスのインスタンス方法は以下の通り。

// クラスの定義
class <クラス名> {
    // ここに処理を定義する。
}

// クラスのインスタンス
let <変数名> = new <クラス名>;

▼コンストラクタの定義

定義したクラス内に、コンストラクタを定義することが可能である。
コンストラクタとは、クラスがインスタンスする時に呼び出される初期処理として使用される。

// クラスの定義
class <クラス名> {
    // コンストラクタの定義
    constructor() {
        // ここにインスタンス生成時の初期処理を実装する。
    }
}

// クラスのインスタンス
let <変数名> = new <クラス名>;

■作成するプログラムの概要

・HTMLの画面にてJavaScriptを実装する。

・HTML画面起動時に、メッセージボックスにて、名前を入力してもらう。

・入力した名前を使用して、「こんにちは。私の名前は＜入力した名前＞です。」をHTMLへ出力する。

■フローチャート

▼メイン処理

▼挨拶作成クラス

■プログラム仕様

▼メイン処理

入力処理内容出力
【メッセージボックス】
名前		ユーザに名前を入力してもらう。–
–挨拶作成クラスをインスタンスする。–
–挨拶と名前を出力するメソッド呼び出し。–
–挨拶と名前を出力する。【HTML】
挨拶文+名前

▼挨拶作成クラス

 

処理名挨拶作成クラス
処理概要入力した名前と挨拶を連結してHTMLに出力する。
引数コンストラクタ：名前
戻り値挨拶と名前を出力するメソッド：挨拶文+名前

 

・コンストラクタ

入力処理内容出力
–名前をセットする。–

・挨拶と名前を出力するメソッド

入力処理内容出力
–挨拶文と名前を戻り値として返す。–

■サンプルコード

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>挨拶作成クラス</title>
</head>
<body>
    <!-- ここにjavascriptを実装する-->
    <script type="text/javascript">
        /*
        処理名
            挨拶作成クラス
        処理概要
            入力した名前と挨拶を連結してHTMLに出力する
        引数
            コンストラクタ：名前
        戻り値
            挨拶と名前を出力するメソッド：挨拶文+名前
        */
        class MakeGreeting {
            constructor(person_name){
                // 名前をセット
                this.person_name = person_name;
            }

            // 挨拶と名前を出力するメソッド
            say_hello(){
                return `こんにちは。私の名前は、${this.person_name}です。`;
            }
        }

        // ユーザに名前を入力してもらう
        let name = prompt('名前を入力してください：');

        // クラスのインスタンス
        let greeting = new MakeGreeting(name);

        // メソッドの呼び出し
        let msg = greeting.say_hello();

        // 結果の出力
        document.write(msg);

    </script>

</body>
</html>

■実行結果

・画面起動時、メッセージボックスを表示し、名前を入力する。

・挨拶文と名前を出力する。

コメント