※このページはアフィリ広告を含みます。
₍^⩌ᴥ⩌^₎
JavaScrptの基本を活用して、リストにアイテムを追加するアプリを作成してみよう
₍ᐢ⓿ᴥ⓿ᐢ₎
₍ᐢ⓿ᴥ⓿ᐢ₎
₍^⩌ᴥ⩌^₎
そんなボランティアがいればいいね
₍^⩌ᴥ⩌^₎
こういのを作るよ
₍^⩌ᴥ⩌^₎
今回もHTML → CSS → JavaScrpt の順番で教えていくから。
₍^⩌ᴥ⩌^₎
まずは作成したhtmlのファイルに基本のコード書こう。
₍^⩌ᴥ⩌^₎
※あたらしく追加したコードは青色で書いてあるよ！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リストアプリ</title>
</head>
<body>
<header></header>
<main></main>
<footer></fooger>
</body>
</html>
₍^⩌ᴥ⩌^₎
書けたかな？
₍^⩌ᴥ⩌^₎
headerとfooterは今回使わないけど基本構造の習慣で入れておこう
₍^⩌ᴥ⩌^₎
次はメインコンテンツを追加してみよう
₍^⩌ᴥ⩌^₎
ページのタイトルと説明を含むヘッダーを作成し、ボタンとメッセージを含むメインセクションを追加しましょう。
₍^⩌ᴥ⩌^₎
※あたらしく追加したコードは青色で書いてあるよ！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リストアプリ</title>
</head>
<body>
<header></header>
<main>
<p>テキスト入力欄</p>
<input type="text" id="itemInput" placeholder="アイテムを入力">
<button id="addItemButton">追加</button>
<p>入力してらったテキストリスト</p>
<ul id="itemList"></ul>
<button id="addButton">新しい要素を追加</button>
<div id="container">新しい要素を追加するためコンテナ</div>
</main>
<footer></footer>
</body>
</html>
₍^⩌ᴥ⩌^₎
次はJavaScrptのコードを追加してみよう
₍^⩌ᴥ⩌^₎
※あたらしく追加したコードは青色で書いてあるよ！
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リストアプリ</title>
</head>
<body>
<header></header>
<main>
<button id="addButton">新しい要素を追加</button>
<div id="container">新しい要素を追加するためのコンテナ</div>
</main>
<footer></footer>
<script src="./script.js"></script>
</body>
</html>
JavaScript
document.getElementById("addItemButton").addEventListener("click", function() {
var input = document.getElementById("itemInput");
var inputValue = input.value;
if (inputValue.trim() !== "") {
var li = document.createElement("li");
li.textContent = inputValue;
document.getElementById("itemList").appendChild(li);
input.value = "";
} else {
alert("アイテムを入力してください！");
}
});
₍^⩌ᴥ⩌^₎
JavaScrptのコードを解説するよ
₍^⩌ᴥ⩌^₎
JavaScript
document.getElementById("addItemButton").addEventListener("click", function() {
//HTMLドキュメントで、最初に、ID additamButonを持つ要素を取得
//指定されたイベント（今回はクリック）が発生したら次を実行する
var input = document.getElementById("itemInput");
// ユーザーが入力したテキストを取得
var inputValue = input.value;
// 入力されたテキストを取得
if (inputValue.trim() !== "") {
// テキストが空でないか確認するために、trim()メソッドを使って前後の空白を消去し、空でなければリストに追加
var li = document.createElement("li");
// 新しいリストアイテムを作成
li.textContent = inputValue;
// 入力したテキストを設定
document.getElementById("itemList").appendChild(li);
// 作成したリストアイテムをリストに追加
input.value = "";
// アイテムが追加された後はinput.valueを空にして次の入力を受け付ける（入力のクリア）
} ,else {
// もしも条件が満たされなえれば
alert("アイテムを入力してください！");
// テキストボックスが空のままボタンがクリックされた場合、アラートでメッセージを表示
}
});
₍^⩌ᴥ⩌^₎
こんな感じになります
₍^⩌ᴥ⩌^₎
h要素は無くても動くよ
₍^⩌ᴥ⩌^₎
分かりにくいから追加しているだけ
₍^⩌ᴥ⩌^₎
分かりにくいからボタンのデザインを変更しよう
下の入力欄にテキストを記入後、追加ボタンでリストに追加
追加されたテキスト
₍^⩌ᴥ⩌^₎
ちょっとは入力欄ぽいかなCSSで編集してみたよ
₍^⩌ᴥ⩌^₎
何かの部品の一部とかにはなるかな
₍^⩌ᴥ⩌^₎
更新したら消えちゃうし、もっと色々覚えないと
₍^⩌ᴥ⩌^₎