22
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

(ハンズオン用)HTMLをJavaScriptで効率よく組み立てる方法

Posted at

この記事は31億市場!? チャットの作り方[1日コース]の連載3コマ目です。

(初歩的な内容なので、ベテランの方は読み飛ばてください)

前回作ったコードを元に、修正を加えていきます。
よかったらハンズオンでやってみてください。

雰囲気的には↓こんな感じのことをします。
いわゆる、javascriptでDOMを操作する作業です。
(ごめんなさい、そういやjQueryも使ってます)

from_js_to_html.png

要は、htmlに直接書いていたコードをjavascript側から描画しています。

なぜこんな面倒臭いことをするかというと、場合によって表示するものを変えたいことがあります。
今回の例だと、吹き出しは場合によって表示されるものが異なりますよね。
その場合はいつも同じものを表示することができないため、このようにJavascriptでhtmlを作る必要があります。
(なお、今回はチャットの枠もJavascriptで作っています)

今回やること

前回作ったUIのhtmlをJavascript(jQuery)で動的に組み立てるようにしてみます。

これができると何が良い?

業務ではjavascriptから動的にhtmlを組み立てたり、変更を加えたりすることはよくあります。
ただし、1行1行描画すると効率が悪いのでhtmlを塊にして描画していきます。

htmlをjavascript側に移す

じゃあ早速やっていきます。
まずはindex.htmlと同階層にjsフォルダをつくり、その中にbmesse.jsをつくります。
フォルダの構成はこうなります。

/
├─index.html
├─css
│   └─bmesse.css
└─js
   └─bmesse.js

今後javascritファイルは全てこのjsフォルダに置くことにします。
その方がファイルが増えた時に見通しがいいので。
index.htmlのコードでは、body要素の最下部でbmesse.jsを読み込みます。
Viewの操作はjQueryで効率的に行いたいので、jQueryも読み込んでおきます。
(今回はGoogleにホストされているもの利用)

・・・
<body>
    ・・・
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/bmesse.js"></script>
</body>
</html>

●cssもまとめる

javascriptファイル同様に、cssもまとめます。
index.htmlと同階層にstyleフォルダをつくり、その中にbmesse.cssを移動。cssの置き場所が変わったので、index.htmlも書き換えます。

<head>
    ・・・
    <link type="text/css" rel="stylesheet" href="style/bmesse.css" />
</head>

●bmesse.jsの中身を作る

"use strict";//厳格モードで実装

/** 
 * id=your_containerに対してチャットUIを組み込む 
 **/
$(document).ready(function() {//htmlの描画が終わったら、処理を実行する記述

    //文字列(html要素)を格納できる配列を定義
    var chatDom =[];
    //文字列(この場合は引数のdom)を配列の要素として格納できる関数
    var p = function(dom){
        chatDom.push(dom);
    };

    //配列の要素として一つ一つ格納していき、最後にjoin関数で結合する
    //チャットの外側部分①
    p('<div id="bms_messages_container">');

        //ヘッダー部分②
        p('<div id="bms_chat_header">');
            p('<div id="bms_chat_user_status">');
                p('<div id="bms_status_icon">●</div>')
                p('<div id="bms_chat_user_name">ユーザー</div>');
            p('</div>');
        p('</div>');
              //タイムライン部分③
        p('<div id="bms_messages">');

            //メッセージ1(左側)
            p('<div class="bms_message bms_left">');
                p('<div class="bms_message_box">');
                    p('<div class="bms_message_content">');
                        p('<div class="bms_message_text">ほうほうこりゃー便利じゃないか</div>');
                    p('</div>');
                p('</div>');
            p('</div>');
            p('<div class="bms_clear"></div>');

            //メッセージ2(右側)
            p('<div class="bms_message bms_right">');
                p('<div class="bms_message_box">');
                    p('<div class="bms_message_content">');
                        p('<div class="bms_message_text">うん、まあまあいけとるな</div>');
                    p ('</div>');
                p('</div>');
            p('</div>');
            p('<div class="bms_clear"></div>');
        p('</div>');

        // テキストボックス、送信ボタン④
        p('<div id="bms_send">');
            p('<textarea id="bms_send_message"></textarea>');
            p('<div id="bms_send_btn">送信</div>');
        p('</div>');

        //jQueryのappend関数を使って、your_containerの直下にhtml要素を書き加える
        $('#your_container').append(chatDom.join(''));
});

これで、javascriptでhtmlを動的に書き換えることができたので、index.htmlに書かれているものはいらなくなりました。
削除するとindex.htmlはこんな感じになります。
スッキリしましたね。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" href="style/bmesse.css" />
    <title>チャットサンプル</title>
</head>
<body>
    <h3 id="me" user_id="1">あなたはユーザー1です</h3>
    <h3 id="partner">相手</h3>
    <div id="users">
        <button class="user" user_id="2">ユーザー2</button>
    </div>
    <br>
    <div id="your_container">
        <!-- ここにbmesseが動的に挿入される -->
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/bmesse.js"></script>
</body>
</html>

index.htmlを開いてチャットのUIが表示されればOKです。
出来上がったソースコードはここに置いておきますね。

吹き出しは実際には動的に書き加えられるものなので、まだまだ不十分ですね。
なので次回「はじめてのFirebase(データベースの基礎)」でそこを作っていきます。
Firebaseのデータベースを使って、リアルタイムに吹き出しを表示できるようにしていきます。

ではまた次回〜♪

(※連載一覧はこちら

22
22
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
22
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?