初心者の方でも簡単に取り組める生JavaScriptを使用したWebアプリ開発について学んでいきましょう。
今回は、実装した経験を通して、必要だった最低限なコードをまとめようと思います。
JavaScriptで何ができる？
フレームワークやライブラリを使用せずにJavaScriptだけでも、多くのものを作ることができます。
- ToDoリスト: ユーザーがタスクを追加、表示、削除できるシンプルなToDoリストは、DOM操作やイベントハンドリングの基本を学ぶのに最適です。
- カルキュレーター: 基本的な数学的演算を行うカルキュレーターは、JavaScriptの基本的なロジック構築に役立ちます。
- クイズアプリ: 問題を提示し、選択肢から答えを選ばせるクイズアプリは、条件分岐、データ管理、ユーザーインターフェースの構築に有用です。
- 天気アプリ: ユーザーが場所を入力すると、その地域の天気を表示するアプリ。APIを使ったデータの取得と表示方法を学べます。
- ギャラリーやスライドショー: 画像やコンテンツを表示するギャラリーやスライドショーは、DOM操作やタイミング制御に関する知識が深まります。
簡単なWebアプリの作成
ステップ1: HTMLの基本
まずは、Webアプリの基盤となるHTMLを作成します。
以下は、基本的なHTMLの構造です。
<!DOCTYPE html>
<html>
<head>
<title>あなたのWebアプリ</title>
</head>
<body>
<h1>タイトル</h1>
<button id="myButton">クリックしてね</button>
<p id="demo"></p>
<script></script>
</body>
</html>
ステップ2: JavaScriptの基本
次に、ボタンをクリックした際に動作する簡単なJavaScriptのコードを書きます。scriptタグに以下のコードを追加します。
document.getElementById("myButton").onclick = function() {
document.getElementById("demo").innerHTML = "こんにちは！";
};
このコードは、ボタンがクリックされたときに、ページ上の<p>タグの中身を「こんにちは！」に変更します。
JavaScript サンプルコード
①ボタンクリックでHTML要素を変更する
このコードでは、ボタンをクリックすると<p>タグ内のテキストが変更されます。
<button id="changeTextButton">テキストを変更</button>
<p id="textToShow">ここに新しいテキストが表示されます。</p>document.getElementById("changeTextButton").onclick = function() {
document.getElementById("textToShow").innerHTML = "テキストが変更されました！";
};②入力フィールドからHTML要素を更新する
この例では、入力フィールドに入力されたテキストを読み取り、ボタンをクリックするとそのテキストで<p>タグを更新します。
<input type="text" id="inputField" placeholder="ここに入力">
<button id="updateButton">更新</button>
<p id="updatedText">入力されたテキストがここに表示されます。</p>document.getElementById("updateButton").onclick = function() {
var inputText = document.getElementById("inputField").value;
document.getElementById("updatedText").innerHTML = inputText;
};③要素の表示/非表示を切り替える
このコードでは、ボタンをクリックすると特定のコンテンツの表示と非表示を切り替えます。
<button id="toggleButton">表示/非表示</button>
<div id="toggleContent">このコンテンツを表示または非表示にします。</div>document.getElementById("toggleButton").onclick = function() {
var content = document.getElementById("toggleContent");
if (content.style.display === "none") {
content.style.display = "block";
} else {
content.style.display = "none";
}
};④リスト要素を動的に追加する
この例では、入力されたテキストをリストに新しいアイテムとして追加します。
<input type="text" id="listItemInput" placeholder="新しいアイテム">
<button id="addItemButton">アイテム追加</button>
<ul id="itemList"></ul>document.getElementById("addItemButton").onclick = function() {
var newItem = document.getElementById("listItemInput").value;
var li = document.createElement("li");
li.textContent = newItem;
document.getElementById("itemList").appendChild(li);
};⑤セレクトボックスの選択に基づいて画像を変更する
このスクリプトでは、セレクトボックスで選択された画像に応じて表示される画像が変更されます。
<select id="imageSelector">
<option value="image1.jpg">画像1</option>
<option value="image2.jpg">画像2</option>
<option value="image3.jpg">画像3</option>
</select>
<img id="displayedImage" src="image1.jpg">document.getElementById("imageSelector").onchange = function() {
var selectedImage = document.getElementById("imageSelector").value;
document.getElementById("displayedImage").src = selectedImage;
};⑥ユーザーの入力に応じて背景色を変更する
このコードでは、ユーザーが選択した色をWebページの背景色として適用します。
<input type="color" id="colorPicker">
<button id="applyColor">背景色を適用</button>document.getElementById("applyColor").onclick = function() {
var selectedColor = document.getElementById("colorPicker").value;
document.body.style.backgroundColor = selectedColor;
};⑦マウスオーバーでテキストのスタイルを変更する
このスクリプトは、マウスがテキストの上にある時にそのスタイルを変更します。
<p id="hoverText">マウスを乗せるとスタイルが変わります。</p>document.getElementById("hoverText").onmouseover = function() {
this.style.color = "red";
this.style.fontSize = "20px";
};
document.getElementById("hoverText").onmouseout = function() {
this.style.color = "black";
this.style.fontSize = "16px";
};まとめ
これらの例は、JavaScriptの基本的な使い方をカバーし、初心者が実際のWebアプリ開発に取り組む際に役立つと思います。
これからの記事では、さまざまなWebアプリの実装についてのプロセスについて詳しく解説していきます。
コメント