目次
はじめに
学んだこと
1.ボタンと入力値取得の流れ
2.メッセージ出力の流れ
ソース
さいごに
はじめに
今回は「テッククルー / プログラミング学習」さんの下記動画をもとに、JavaScriptで簡易チャットアプリの作成をおこないました。
具体的な作成方法についてはこちらの動画で説明されているため、この記事では今回の簡易チャットアプリ作成で「学んだこと」を記録と復習のためにまとめてみようと思います。
※ これまでJavaScriptで作成したものの記事はこちら↓
学んだこと
1. ボタンと入力値取得の流れ
◆ 送信ボタン取得
<button id="sendBtn" class="btn btn-primary" type="button">送信</button>
// htmlのidをもとに送信ボタン取得
let sendBtn = document.getElementById('sendBtn');
◆ 送信ボタンがクリックされたときに動く関数作成
sendBtn.addEventListener('click', function() {
})
addEventListener()
通常の記載方法は「対象要素.addEventListener(種類, 関数, false)」だが、今回は無名関数を設定しているため「対象要素.addEventListener(種類, function() {})」と記載（falseは省略）
※上記関数内に、これより下に記載の処理追加
◆ 入力欄取得
<input id="inputMessage" type="text" class="form-control" placeholder="メッセージを入力してください" >
// htmlのidをもとにinputタグを保存
let inputMessage = document.getElementById('inputMessage');
◆ 入力値取得
// inputタグがもつ画面の入力値を変数に保存
let messageText = inputMessage.value;
◆ 入力値が空の場合に処理を中断
// 入力値が空かチェック
if (messageText == '') {
// 以降の処理実行されない
return;
}
◆ 送信ボタンが押された時に、入力欄の入力値をリセットする
// 入力欄が持っている値を空文字で上書き
inputMessage.value = '';
2. メッセージ出力の流れ
メッセージ用のdivタグ作成
◆ メッセージ用のdivタグを作成する関数作成
// メッセージ用のdivタグを作成する関数
function createMessageBox() {
}
※ 上記関数内に、これより下に記載の処理追加
◆ divタグを作成
let messageBox = document.createElement('div');
自分が送信者の場合「box-right」というクラスをdivに追加
相手が送信者の場合「box-left」というクラスをdivに追加
※ ここでは分岐の記載を省略しているため、実際のソースはソースを参照
// 要素に対してクラスを設定
messageBox.classList.add('box-right');
messageBox.classList.add('box-left');
メッセージ用のpタグ作成
◆ メッセージ用のpタグを作成する関数作成
function createMessage(messageText) {
}
※ 入力値は下記のように既に取得済みのため、上記引数の「messageText」には画面入力値が渡ってくる
※ 上記関数内に、これより下に記載の処理追加
let messageText = inputMessage.value;
◆ pタグのテキストに画面の入力値を設定
// 文字設定する時はtextContent使用
message.textContent = messageText;
◆ pタグに「message-box」というクラスを追加
message.classList.add('message-box');
自分が送信者の場合、pタグに「green」というクラスを追加
相手が送信者の場合、pタグに「white」というクラスを追加
※ ここでは分岐の記載を省略しているため、実際のソースはソースを参照
// 要素に対してクラスを設定
message.classList.add('green');
message.classList.add('white');
divタグにpタグを追加
// messageBoxの子要素として追加するためappendChildを使用
messageBox.appendChild(message);
appendChild()
親要素に子要素を追加し、HTMLタグの追加をおこなう
チャット画面のdivに新規メッセージのdivを追加
◆ チャット画面のdivタグを取得
<div id="room">
</div>
// htmlのidをもとにチャット画面のdivタグを取得
let room = document.getElementById('room');
◆ チャット画面のdivに新規メッセージのdivを追加
// roomの子要素として追加するためappendChildを使用
room.appendChild(messageBox);
※ pタグ（変数名：message）が設定されているdivタグ（変数名：messageBox）を、チャット画面のdivタグ（変数名：room）に追加
ソース
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="./assets/css/style.css">
<title>Chat</title>
</head>
<body>
<!-- 青い背景色になってるチャットアプリの画面 -->
<div id="room">
<div class="box-left">
<p class="message-box white">こんにちは</p>
</div>
<div class="box-right">
<p class="message-box green">こんにちは</p>
</div>
</div>
<div class="input-group chat-input">
<input id="inputMessage" type="text" class="form-control" placeholder="メッセージを入力してください" >
<div class="input-group-append">
<button id="sendBtn" class="btn btn-primary" type="button">送信</button>
</div>
</div>
<script src="./assets/js/app.js"></script>
</body>
</html>
JavaScript
// -- 変数を用意（true： 自分が送信/false： 相手が送信） --
// 送信者が自分かどうか保存する変数
let isMyself = true;
// ---------- 送信ボタンの取得 ----------
// idをもとに送信ボタン取得
let sendBtn = document.getElementById('sendBtn');
// ---- 送信ボタンがクリックされたときの処理 ----
sendBtn.addEventListener('click', function() {
// ---------- 入力欄を取得 ----------
// idをもとにinputタグを保存
let inputMessage = document.getElementById('inputMessage');
// ---------- 入力値を取得 ------------
// inputタグがもつ画面の入力値を変数に保存
let messageText = inputMessage.value;
// --- 入力値が空の場合に処理を中断 ---
// 入力値が空かチェックする
if (messageText == '') {
// 以降の処理実行されない
return;
}
// ------- メッセージ用のdivタグを作成する -------
// messageBoxにdivを入れる
let messageBox = createMessageBox();
// ------- メッセージ用のpタグを作成する -------
let message = createMessage(messageText);
// ------- divにpタグを追加する -------
// messageBoxの子要素として追加するためappendChildを使用
messageBox.appendChild(message);
// ---- チャット画面のdivタグを取得する ----
let room = document.getElementById('room');
// -- チャット画面のdivに新規メッセージのdivを追加する --
// 動作確認時Safariだとうまくいかず、Chromeで確認
room.appendChild(messageBox);
// -- 送信ボタンが押された時に、入力欄の入力値をリセットする --
// 入力欄が持っている値を空文字で上書き
inputMessage.value = '';
// ------- 送信されるたびに送信者を変更 -------
if (isMyself) {
// 自分が送信者の場合、次の送信者を相手にする
isMyself = false;
} else {
// 相手が送信者の場合、次の送信者を自分にする
isMyself = true;
}
// ------- メッセージ用のdivタグを作成する -------
function createMessageBox() {
// ---------- divを作成 ----------
let messageBox = document.createElement('div');
// 誰が送信者かチェック
if (isMyself) {
// 自分が送信者の場合
// 「box-right」というクラスをdivに追加（要素に対してクラスを設定）
messageBox.classList.add('box-right');
} else {
// 相手が送信者の場合
// 「box-left」というクラスをdivに追加（要素に対してクラスを設定）
messageBox.classList.add('box-left');
}
return messageBox;
}
// ------- メッセージ用のpタグを作成する -------
// pタグ作るとき文字の設定が必要
function createMessage(messageText) {
// ---------- pタグを作成 ----------
let message = document.createElement('p');
// pタグのテキストに画面の入力値を設定
// 文字設定する時はtextContent使用
message.textContent = messageText;
// pタグに「message-box」というクラスを追加
message.classList.add('message-box');
// 誰が送信者かチェック
if (isMyself) {
// 自分が送信者の場合
// pタグに「green」というクラスを追加
message.classList.add('green');
} else {
// 相手が送信者の場合
// pタグに「white」というクラスを追加
message.classList.add('white');
}
return message;
}
})
※完成したものはこのようになります↓
さいごに
今回はJavaScriptでの簡易チャットアプリ作成を通して学んだことをアウトプットしました。
今回の作成で、画面からの入力値をどのように受け取り、処理し、出力していくかの流れを学ぶことができました。
最後まで目を通していただきありがとうございました。私の記録が誰かの役に立つと嬉しいです。。