CSSとJSを別のファイルに移す
教材①の最後になると、だんだんCSSとJSのコードが増えてきて、読みづらくなってきていますね(これを可読性が低いと言います)。実際のホームページには更に大量のHTMLタグが記述されていますし、CSSもJSも何倍ものコードが書かれています。それを一つのファイルに書いておくのは良くないですよね。本格的にJSを学ぶ前に、HTMLのファイルから、CSSとJSを別のファイルに移して読みやすくし、変更もしやすくする方法を学びます。
前に出てきたsample03.htmlのCSSとJSを他のファイルに出してみましょう。
- jsworkフォルダの中に、cssとjsというフォルダを作成してください。
- jsworkの上で右クリックし、sample03a.htmlを作成し以下のコードを貼り付けて保存してください。
<!--
sample01のCSSとJSを別のファイルに出すサンプルです
このページの(DOCTYPE = document type)ドキュメントタイプはHTMLです
つまり、このファイルはHTMLで書かれていますよ、という宣言です
-->
<!DOCTYPE html>
<!-- ここからHTMLを書きますよ、という意味です -->
<html>
<!--
headタグの中には、ホームページを表示する前提条件を書きます
ここに書かれたことは画面に表示はされませんが、文字化けを防ぐなど大事な役割があります
-->
<head>
<!-- 日本語を表示する方法を指定しています -->
<meta charset="UTF-8">
<!-- ブラウザーのタブに表示されるタイトルです -->
<title>サンプル02</title>
<!--
指定ファイルをCSSとして読み込みます
HTMLがある階層のcssフォルダの中のsample03a.cssを読み込みます
-->
<link href="css/sample03a.css" rel="stylesheet" />
</head><!-- headタグここまで -->
<!-- bodyタグの中に書かれたものが画面に表示されます -->
<body>
<!-- 大きな文字で見出しを書くタグです -->
<h1>これは見出しです</h1>
<!-- この段落には、ptag1というidがセレクタとして定義されています -->
<p id="ptag1">一つ目の段落です</p>
<!-- ここから下の三つ段落には、ptagsというclassがセレクタとして定義されています -->
<p class="ptags">二つ目の段落です</p>
<p class="ptags">三つ目の段落です</p>
<p class="ptags">四つ目の段落です</p>
<!--
指定ファイルをJSとして読み込みます
HTMLがある階層のjsフォルダの中のsample03a.jsを読み込みます
-->
<script src="js/sample03a.js"></script>
</body><!-- bodyタグここまで -->
</html><!-- htmlタグここまで -->
- 同様に、cssフォルダの中にsanitize.cssを作成し、githubからコードをコピーして貼り付けてください
リンク先: sanitize.css
sanitize.cssは、ブラウザの画面表示をリセットするためのcssです。色々なホームページをサーフィンしていると、ごくたまに前のページのCSS設定が残ってしまい、正常に画面が表示されなくなってしまう、という現象が起こるので、それを回避するために一旦CSSの設定を初期値に戻すために使われます。
- 同様に、cssフォルダの中にsample03a.cssを作成し、以下のコードを貼り付けて保存してください。
/*
CSSのコメント(説明)はこう書きます
これは1.HTMLタグをそのままセレクタとして利用した例です
この書き方だと、h1タグの文字は全て暗い赤色で表示されます
*/
h1 {
/* 文字色を変更 */
color: darkred;
/* 文字を画面中央に表示 */
text-align: center;
}
/*
idをセレクタとして利用する例です
#abcと書くことで、
idセレクタがptag1の部品に{}内のデザインをあてるという意味になります
*/
#ptag1 {
/* 文字色を変更 */
color: rgb(0, 0, 255);
font-size: 24px;
}
/*
classをセレクタとして利用する例です
.xyzと書くことで、
classセレクタがptagsの部品に{}内のデザインをあてるという意味になります
*/
.ptags {
/* 文字色を変更 */
color: rgb(0, 64, 0);
font-size: 20px;
}
- 同様に、jsフォルダの中にsample03a.jsを作成し、以下のコードを貼り付けて保存してください。
// h1タグのエレメントを取ってくる
const elH1 = document.querySelector("h1");
elH1.innerText = "JSでh1の文章を変更しました";
// ptag1というidを持つエレメントを取ってくる
const elP1= document.querySelector("#ptag1");
elP1.innerText = "JSでptag1の文章を変更しました";
// ptagsというclassを持つエレメントのうち最初に見つかったものを一つだけ取ってくる
const elP2= document.querySelector(".ptags");
elP2.innerText = "JSでptagsの文章を変更しました";
sample03a.htmlをLive Serverで表示し、CSSとJSが正常に動作しているか確認してみましょう。
HTMLファイルが短くなって、読みやすくなりましたね。また、CSSとJSは別ファイルにしたことで不要なインデントが無くなり、こちらも読みやすくなっていることにも注目してください。
便利なJSのライブラリを積極的に利用しましょう
JSは長い歴史の中で進化を繰り返してきました。その過程で「ライブラリ」と呼ばれる便利なものが多数開発されています。ライブラリとは、よく使う機能や一から自分で作るのに手間がかかる機能をまとめて手軽に使えるようにしたもので、初学者にとっても経験を積んだ技術者にとっても非常に有用です。ゼロからすべてをコーディングする必要がなくなり、時間を節約しつつ、高品質なコードを書くことができるからです。
なぜライブラリを使うのか?
- 時間の節約: ライブラリを使うことで、一般的な機能や操作を簡単に実装できます。例えば、アニメーションの作成やDOM操作(HTML要素の操作)など、複雑なコードを書く必要がありません。
- コードの簡潔化: ライブラリは、頻繁に使われる機能をシンプルなAPI(アプリケーションプログラミングインターフェース)として提供します。これにより、コードが短く読みやすくなります。
- 信頼性: 多くのライブラリはコミュニティや企業によって開発・メンテナンスされており、バグが少なく、安心して使うことができます。
jQueryの導入
まず、jQueryをHTMLファイルに追加します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フェードアウトの例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#message {
width: 300px;
padding: 10px;
background-color: #f9f9f9;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="message">これはフェードアウトするメッセージです。</div>
<button id="fadeButton">フェードアウト</button>
<script>
$(document).ready(function() {
$('#fadeButton').click(function() {
$('#message').fadeOut('slow');
});
});
</script>
</body>
</html>
このコードでは、ボタンをクリックすると、メッセージがゆっくりとフェードアウトします。
郵便番号から住所を検索
次に、JavaScriptを使って、郵便番号から住所を検索する機能を実装します。ここでは、Web APIを使用して、郵便番号から住所を取得します。
郵便番号APIの使用
郵便番号APIを使用して、郵便番号に対応する住所を取得します。以下は、そのための基本的なコードです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>郵便番号から住所を検索</title>
</head>
<body>
<h1>郵便番号から住所を検索</h1>
<input type="text" id="zipcode" placeholder="郵便番号を入力">
<button id="searchButton">検索</button>
<div id="address"></div>
<script>
document.getElementById('searchButton').addEventListener('click', function() {
let zipcode = document.getElementById('zipcode').value;
fetch(`https://api.zipaddress.net/?zipcode=${zipcode}`)
.then(response => response.json())
.then(data => {
if (data.code === 200) {
document.getElementById('address').textContent = data.data.fullAddress;
} else {
document.getElementById('address').textContent = '住所が見つかりませんでした。';
}
})
.catch(error => {
console.error('エラーが発生しました:', error);
document.getElementById('address').textContent = 'エラーが発生しました。';
});
});
</script>
</body>
</html>
このコードでは、ユーザーが郵便番号を入力し、検索ボタンをクリックすると、対応する住所が表示されます。
演習
ここまで学んだ内容を基に、いくつかの演習を行いましょう。
演習1: 確認メッセージ
ユーザーがボタンをクリックすると確認メッセージを表示し、OKをクリックすると特定のメッセージを表示するページを作成します。
演習2: フェードアウト
ページ上の複数の要素をフェードアウトさせる機能を実装します。異なる速度でフェードアウトするように設定してみましょう。
演習3: 郵便番号検索
郵便番号検索機能を拡張し、住所だけでなく、都道府県や市区町村も表示するようにします。
今後に役立つ予備知識
JavaScriptライブラリの紹介
JavaScriptライブラリを使用することで、開発の効率を大幅に向上させることができます。ここでは、代表的なライブラリについて紹介します。
jQuery
jQueryは、DOM操作、イベント処理、アニメーション、Ajaxなどの機能を簡単に実装できるライブラリです。以下は、基本的な使用例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQueryの基本例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1 id="title">jQueryの例</h1>
<button id="changeTitle">タイトルを変更</button>
<script>
$(document).ready(function() {
$('#changeTitle').click(function() {
$('#title').text('タイトルが変更されました');
});
});
</script>
</body>
</html>
Lodash
Lodashは、配列、オブジェクト、文字列などの操作を簡単に行うためのユーティリティライブラリです。以下は、Lodashの使用例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lodashの基本例</title>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
</head>
<body>
<h1>Lodashの例</h1>
<script>
const array = [1, 2, 3, 4, 5];
const evens = _.filter(array, function(num) {
return num % 2 === 0;
});
console.log(evens); // [2, 4]
</script>
</body>
</html>
Web APIの活用
Web APIを使用することで、外部のサービスと連携し、データの取得や送信が可能になります。ここでは、基本的な使用方法を紹介します。
Fetch API
Fetch APIは、HTTPリクエストを行い、レスポンスを処理するためのモダンな方法です。以下は、基本的な使用例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fetch APIの基本例</title>
</head>
<body>
<h1>Fetch APIの例</h1>
<script>
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(data => {
console.log(data);
document.body.innerHTML += `<p>Title: ${data.title}</p>`;
})
.catch(error => console.error('エラー:', error));
</script>
</body>
</html>
フレームワークの基本知識
JavaScriptフレームワークを使用することで、大規模なアプリケーションを効率的に開発できます。ここでは、代表的なフレームワークを紹介します。
React
Reactは、ユーザーインターフェースを構築するためのJavaScriptライブラリです。コンポーネントベースのアーキテクチャを採用しており、再利用可能なUI部品を作成することができます。
// 簡単なReactコンポーネントの例
import React from 'react';
import ReactDOM from 'react-dom';
function App() {
return (
<div>
<h1>Hello, React!</h1>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
Vue.js
Vue.jsは、シンプルで使いやすいJavaScriptフレームワークです。リアクティブなデータバインディングとコンポーネントベースの構造を提供します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.jsの基本例</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'こんにちは、Vue.js!'
}
});
</script>
</body>
</html>
Angular
Angularは、Googleが開発したJavaScriptフレームワークで、大規模なシングルページアプリケーションの構築に適しています。TypeScriptを使用して開発されており、強力な型システムを提供します。
// 簡単なAngularコンポーネントの例
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<h1>{{ title }}</h1>`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'こんにちは、Angular!';
}
予約語は、変数名や関数名として使用できない
JavaScript で要素に CSS のスタイルを適用する方法について説明します。
単一のスタイルを適用する
特定の要素に単一の CSS プロパティを適用するには、次のようにします。
```html
### 複数の CSS プロパティを適用するためにCSSクラスを追加する
スタイルを適用する別の方法として、CSS クラスを追加する方法があります。これにより、あらかじめ定義したスタイルを適用できます。
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSSのスタイルをJavaScriptで適用する</title>
<style>
#myElement {
width: 200px;
height: 200px;
background-color: lightgray;
}
.highlight {
background-color: yellow;
border: 2px solid red;
color: black;
font-size: 20px;
}
</style>
</head>
<body>
<div id="myElement"></div>
<button id="applyStyle">スタイルを適用</button>
<script>
const myElement = document.querySelector('#myElement');
const applyStyleButton = document.querySelector('#applyStyle');
applyStyleButton.addEventListener('click', () => {
myElement.classList.add('highlight');
});
</script>
</body>
</html>
```
これらの方法を使うことで、JavaScript を使用して柔軟に要素のスタイルを操作することができます。具体的な状況に応じて適切な方法を選択してください。
JavaScriptの予約語は、変数名や関数名として使用できないキーワードです。これらのキーワードは、JavaScriptの構文で特別な意味を持つため、プログラム中で別の目的で使用することはできません。以下は、JavaScriptの予約語のリストです。
abstract, boolean, break, byte, case, catch, char, class, const, continue, debugger, default, delete, do, double, else, enum, export, extends, false, final, finally, float, for, function, goto, if, implements, import, in, instanceof, int, interface, let, long, native, new, null, package, private, protected, public, return, short, static, super, switch, synchronized, this, throw, throws, transient, true, try, typeof, var, void, volatile, while, with, yield
addEventListenerメソッドの第二引数はコールバック関数です。
コールバック関数とは、他の関数に引数として渡される関数のことです。この関数は、特定のイベントや条件が発生したときに実行されます。
例えば、addEventListenerを使ってボタンがクリックされたときに実行する関数を設定する場合、この関数がコールバック関数です。コールバック関数は、非同期処理やイベント駆動プログラミングでよく使われます。
関数を変数に代入することができる。
JavaScriptでは、関数を変数に代入することができます。これは、JavaScriptが関数をファーストクラスオブジェクトとして扱うためです。関数を変数に代入することで、その変数を通じて関数を呼び出すことができます。
例: 関数を変数に代入する
以下に、具体的なコード例を示します。
// 関数を定義
function greet() {
console.log("Hello, world!");
}
// 関数を変数に代入
const greeting = greet;
// 変数を通じて関数を呼び出す
greeting(); // "Hello, world!" と表示される
この例では、greet
という関数を定義し、その関数をgreeting
という変数に代入しています。その後、greeting
を使って関数を呼び出しています。
無名関数 (匿名関数) を変数に代入する
無名関数 (匿名関数) も直接変数に代入することができます。
// 無名関数を変数に代入
const sayHello = function() {
console.log("Hello!");
};
// 変数を通じて関数を呼び出す
sayHello(); // "Hello!" と表示される
アロー関数を変数に代入する
アロー関数も変数に代入することができます。
// アロー関数を変数に代入
const add = (a, b) => {
return a + b;
};
// 変数を通じて関数を呼び出す
console.log(add(2, 3)); // 5 と表示される
実用例: 高階関数
関数を変数に代入できる特性を利用して、高階関数を作成することができます。高階関数とは、関数を引数として受け取ったり、関数を戻り値として返す関数のことです。
// 関数を引数として受け取る高階関数
function repeat(operation, num) {
for (let i = 0; i < num; i++) {
operation();
}
}
// 実行したい関数を定義
const sayHi = () => {
console.log("Hi!");
};
// 高階関数を呼び出す
repeat(sayHi, 3); // "Hi!" が3回表示される
この例では、repeat
という高階関数がoperation
という関数を引数として受け取り、指定された回数だけその関数を実行します。
JavaScriptでは、関数を変数に代入することができます。変数に関数を代入することによりコードの柔軟性と再利用性が向上します。無名関数やアロー関数も同様に変数に代入でき、高階関数を使って関数を引数として渡したり、戻り値として返したりすることも可能です。
イベントのeについて
イベントオブジェクト(通常 e
と略される)は、イベントハンドラーの引数として使われるイベントオブジェクトを指します。このイベントオブジェクトは、ユーザーがウェブページ上で何らかのアクション(クリック、キー押下、マウス移動など)を行ったときに、関連する情報を提供します。
イベントオブジェクトの役割
イベントオブジェクトには、イベントが発生した要素や、そのイベントに関連する詳細な情報が含まれます。例えば、マウスイベントの場合はマウスの位置や押されたボタンの情報、キーボードイベントの場合は押されたキーの情報などが含まれます。
イベントオブジェクトの使用例
- クリックイベントの例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>クリックイベントの例</title>
</head>
<body>
<button id="clickButton">クリックして下さい</button>
<script>
const button = document.getElementById('clickButton');
button.addEventListener('click', function(e) {
console.log('クリックされました');
console.log('イベントオブジェクト:', e);
console.log('クリックされた要素:', e.target);
});
</script>
</body>
</html>
- キーボードイベントの例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>キーボードイベントの例</title>
</head>
<body>
<input type="text" id="inputField" placeholder="キーを押して下さい">
<script>
const inputField = document.getElementById('inputField');
inputField.addEventListener('keydown', function(e) {
console.log('キーが押されました');
console.log('押されたキー:', e.key);
});
</script>
</body>
</html>
主なプロパティ
イベントオブジェクトには多くのプロパティがありますが、主なものをいくつか紹介します。
type
: イベントの種類を表します(例: "click"
, "keydown"
)。
target
: イベントが発生した要素を指します。
currentTarget
: 現在イベントを処理している要素を指します。
preventDefault()
: イベントのデフォルトの動作をキャンセルします。
stopPropagation()
: イベントの伝播を停止します。
例:preventDefault
とstopPropagation
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>イベントの制御</title>
</head>
<body>
<a href="https://example.com" id="link">リンク</a>
<script>
const link = document.getElementById('link');
link.addEventListener('click', function(e) {
e.preventDefault(); // リンクのデフォルトの動作(ページ遷移)をキャンセル
console.log('リンクがクリックされましたが、ページ遷移はキャンセルされました');
});
</script>
</body>
</html>
以上のように、e
は、イベントの発生に関連する情報を提供し、イベントの制御を可能にする非常に重要な要素です。
イベントの種類と発生タイミング。
よく使われるJavaScriptのイベント名と発生するタイミングをまとめました。
イベント名 | 発生するタイミング |
---|
click | 要素がクリックされたとき |
dblclick | 要素がダブルクリックされたとき |
mouseover | 要素の上にマウスポインタが乗ったとき |
mouseout | 要素の上からマウスポインタが外れたとき |
mousemove | マウスポインタが要素上で動いたとき |
mousedown | マウスボタンが押されたとき |
mouseup | マウスボタンが離されたとき |
keydown | キーボードのキーが押されたとき |
keyup | キーボードのキーが離されたとき |
keypress | キーボードのキーが押されたとき(入力可能なキーのみ) |
focus | 要素がフォーカスを受け取ったとき |
blur | 要素がフォーカスを失ったとき |
change | フォームの値が変更されたとき |
submit | フォームが送信されたとき |
reset | フォームがリセットされたとき |
resize | ウィンドウや要素のサイズが変更されたとき |
scroll | 要素がスクロールされたとき |
load | ページやリソースが読み込まれたとき |
unload | ページが閉じられるとき |
abort | リソースの読み込みが中断されたとき |
error | エラーが発生したとき |
contextmenu | コンテキストメニュー(右クリックメニュー)が開かれたとき |
input | フォーム要素の値が入力されたとき |
touchstart | タッチスクリーンでタッチが始まったとき |
touchend | タッチスクリーンでタッチが終わったとき |
touchmove | タッチスクリーンでタッチが動いたとき |
touchcancel | タッチスクリーンでタッチがキャンセルされたとき |
他にも多くのイベントが存在します。
タイマー処理
JavaScriptのタイマー処理には、主にsetTimeout
とsetInterval
という2つの関数が使われます。これらの関数は、指定した時間後に関数を実行するために使用されます。
setTimeout
setTimeout
は、一度だけ指定した遅延時間後に関数を実行します。
// 5秒後にメッセージを表示する
setTimeout(() => {
console.log('5秒が経過しました');
}, 5000);
setInterval
setInterval
は、指定した間隔で繰り返し関数を実行します。
// 1秒ごとにメッセージを表示する
setInterval(() => {
console.log('1秒経過');
}, 1000);
タイマーを止める
タイマーを止めるためには、setTimeout
やsetInterval
の戻り値を使って、clearTimeout
やclearInterval
を呼び出します。
// setTimeoutの例
const timeoutId = setTimeout(() => {
console.log('5秒が経過しました');
}, 5000);
// タイマーを止める
clearTimeout(timeoutId);
// setIntervalの例
const intervalId = setInterval(() => {
console.log('1秒経過');
}, 1000);
// タイマーを止める
clearInterval(intervalId);
実際の使用例
例えば、10秒間カウントダウンするタイマーを作成する場合、次のようにします。(sample)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>カウントダウンタイマー</title>
</head>
<body>
<div id="timer">10</div>
<script>
let timeLeft = 10;
const timerElement = document.querySelector('#timer');
const countdown = setInterval(() => {
timeLeft--;
timerElement.textContent = timeLeft;
if (timeLeft <= 0) {
clearInterval(countdown);
alert('カウントダウン終了');
}
}, 1000);
</script>
</body>
</html>
上記のコードでは、setInterval
を使って1秒ごとにtimeLeft
を減少させ、その値をHTML要素に表示します。timeLeft
が0になったらclearInterval
を呼び出してタイマーを止め、アラートを表示します。
タイマー処理を使うと、さまざまなインタラクティブな機能を実装することができるので、ぜひ試してみてください。
よくあるエラーメッセージ3選。
JavaScriptでディベロッパーツールのコンソールに出るエラーメッセージの種類は、一般的に以下のように分類されます。これらのエラーメッセージは、開発者がコードの問題を特定して修正するのに役立ちます。
- シンタックスエラー(SyntaxError)
- 説明: コードに構文上の誤りがあると発生します。
- 例:
SyntaxError: Unexpected token '}'
- 参照エラー(ReferenceError)
- 説明: 存在しない変数を参照しようとすると発生します。
- 例:
ReferenceError: x is not defined
- タイプエラー(TypeError)
- 説明: 変数や値の型が期待されるものと異なる場合に発生します。
- 例:
TypeError: x is not a function
HTMLに文字列をインサートする方法。
JavaScriptでHTMLに文字列をインサートする方法を紹介します。
1. textContent
プロパティを使用する方法
textContent
プロパティを使用すると、指定したHTML要素の中身をテキストとして挿入できます。HTMLタグを無視し、文字列をそのまま挿入します。 (sample)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Insert String Example</title>
</head>
<body>
<div id="content"></div>
<script>
const content = document.querySelector('#content');
const message = '<p>Hello, World!</p>';
content.textContent = message;
</script>
</body>
</html>
2. innerHTML
プロパティを使用する方法
innerHTML
プロパティを使用すると、指定したHTML要素の中身を文字列として挿入できます。先のtextContentプロパティとの違いは、HTMLのタグも指定できる点です。 (sample)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Insert String Example</title>
</head>
<body>
<div id="content"></div>
<script>
const content = document.querySelector('#content');
const message = '<p>Hello, World!</p>';
content.innerHTML = message;
</script>
</body>
</html>
3. appendChild
() メソッドを使用する方法
appendChild
()メソッドを使用して、テキストノードやHTML要素を挿入することができます。要素は、親要素の最後に追加されます。 (sample)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>appendChild メソッドの例</title>
</head>
<body>
<div id="container">
<!-- 新しい要素がここに追加されます -->
</div>
<script>
// 親要素を取得
const container = document.getElementById('container');
// 新しい要素を作成
const newParagraph = document.createElement('p');
newParagraph.textContent = 'これは新しい段落です。';
// 親要素の最後の子要素として新しい要素を追加
container.appendChild(newParagraph);
</script>
</body>
</html>
4. insertAdjacentHTML
() メソッドを使用する方法
insertAdjacentHTML
()メソッドを使用すると、指定した位置にHTMLを挿入できます。appendChild
()メソッドとは違い、位置はbeforebegin
, afterbegin
, beforeend
, afterend
の4つの位置を指定できます。 (sample)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Insert String Example</title>
</head>
<body>
<div id="content">
<p>赤福</p>
<p>ぴよりん</p>
<p>うなぎパイ</p>
</div>
<script>
const content = document.querySelector("#content");
const message1 = "<p>お土産リスト</p>";
content.insertAdjacentHTML("beforebegin", message1);
const message2 = "<p>へんばもち</p>";
content.insertAdjacentHTML("afterbegin", message2);
const message3 = "<p>東京バナナ</p>";
content.insertAdjacentHTML("beforeend", message3);
const message4 = "<p>以上</p>";
content.insertAdjacentHTML("afterend", message4);
</script>
</body>
</html>
以下の図と照らし合わせて理解して下さい。
JavaScriptの配列。
JavaScriptの配列は、複数の値を一つの変数にまとめて格納するためのデータ構造です。
配列の作成方法
- リテラル表記
const fruits = ["Apple", "Banana", "Cherry"];
- Arrayコンストラクタを使用
const fruits = new Array("Apple", "Banana", "Cherry");
配列の要素には、異なる型の値(数値、文字列、オブジェクト、他の配列など)を混在させることができる点が一般的な静的型付け言語(JavaやCなど)とは違います。
配列のアクセスと操作
- 要素へのアクセス
配列の要素は、インデックス(0から始まる)を使ってアクセスします。
console.log(fruits[0]); // Apple
console.log(fruits[1]); // Banana
console.log(fruits[2]); // Cherry
- 要素の変更
fruits[1] = "Blueberry";
console.log(fruits[1]); // Blueberry
- 配列の長さ
配列の長さは length
プロパティで取得できます。
console.log(fruits.length); // 3
配列のメソッド
JavaScriptには配列を操作するための多くのメソッドがあります。以下に主なメソッドを紹介します。
- 追加と削除
push()
: 配列の末尾に要素を追加します。
pop()
: 配列の末尾から要素を削除します。
unshift()
: 配列の先頭に要素を追加します。
shift()
: 配列の先頭から要素を削除します。
fruits.push("Dragonfruit"); // 末尾に追加
console.log(fruits); // ["Apple", "Blueberry", "Cherry", "Dragonfruit"]
fruits.pop(); // 末尾から削除
console.log(fruits); // ["Apple", "Blueberry", "Cherry"]
fruits.unshift("Strawberry"); // 先頭に追加
console.log(fruits); // ["Strawberry", "Apple", "Blueberry", "Cherry"]
fruits.shift(); // 先頭から削除
console.log(fruits); // ["Apple", "Blueberry", "Cherry"]
- 要素の検索とフィルタリング
indexOf()
: 特定の要素の最初のインデックスを返します。存在しない場合は -1
を返します。
includes()
: 配列に特定の要素が含まれているかどうかをチェックします。
find()
: 条件に一致する最初の要素を返します。
filter()
: 条件に一致する全ての要素を配列として返します。
console.log(fruits.indexOf("Banana")); // -1
console.log(fruits.includes("Apple")); // true
const result = fruits.find(fruit => fruit.startsWith("B"));
console.log(result); // Blueberry
const filtered = fruits.filter(fruit => fruit.length > 5);
console.log(filtered); // ["Blueberry", "Cherry"]
- 変換と集計
map()
: 各要素に対して関数を適用し、新しい配列を返します。
reduce()
: 配列の全要素に対して関数を適用し、一つの値に集約します。
const uppercased = fruits.map(fruit => fruit.toUpperCase());
console.log(uppercased); // ["APPLE", "BLUEBERRY", "CHERRY"]
const totalLength = fruits.reduce((sum, fruit) => sum + fruit.length, 0);
console.log(totalLength); // 19
- 並び替え
sort()
: 配列をソートします。デフォルトでは文字列としてソートします。
reverse()
: 配列の順序を逆にします。
fruits.sort();
console.log(fruits); // ["Apple", "Blueberry", "Cherry"]
fruits.reverse();
console.log(fruits); // ["Cherry", "Blueberry", "Apple"]
- 結合とスライス
concat()
: 配列を結合します。
slice()
: 配列の一部を抜き出して新しい配列を作成します。
splice()
: 配列の要素を追加・削除・置換します。
const moreFruits = ["Dragonfruit", "Elderberry"];
const allFruits = fruits.concat(moreFruits);
console.log(allFruits); // ["Cherry", "Blueberry", "Apple", "Dragonfruit", "Elderberry"]
const someFruits = allFruits.slice(1, 3);
console.log(someFruits); // ["Blueberry", "Apple"]
allFruits.splice(2, 1, "Fig");
console.log(allFruits); // ["Cherry", "Blueberry", "Fig", "Dragonfruit", "Elderberry"]
多次元配列
JavaScriptでは配列の要素として他の配列を持つことができます。これにより多次元配列を作成できます。
const matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
console.log(matrix[1][2]); // 6
配列とループ
配列の各要素に対してループ処理を行うには、for
ループや forEach
メソッドを使用します。
// forループ
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
// forEachメソッド
fruits.forEach(fruit => {
console.log(fruit);
});
まとめ
JavaScriptの配列は非常に強力で柔軟なデータ構造です。配列を利用することで、データの格納、操作、検索、変換が効率的に行えます。配列のメソッドを使いこなすことで、複雑なデータ処理も簡単に実現できます。
Google ChromeでJavaScriptをデバッグ
Google ChromeでJavaScriptをデバッグする方法を説明します。
ステップ 1: DevToolsを開く
- Chromeを開きます。
- デバッグしたいウェブページにアクセスします。
- 右クリックしてコンテキストメニューを開き、「検証」を選択します。または、F12を押してDevToolsを開きます。
ステップ 2: コンソールタブの使用
- DevToolsの「Console」タブをクリックします。
- ここで、JavaScriptのコードを直接入力して実行したり、エラーメッセージを確認したりできます。
ステップ 3: ソースタブの使用
- 「Sources」タブをクリックします。
- 左側のファイルツリーからデバッグしたいJavaScriptファイルを探します。
- ファイルをクリックすると、その内容が中央のペインに表示されます。
ステップ 4: ブレークポイントの設定
- デバッグしたい行番号をクリックすると、ブレークポイントが設定されます。ブレークポイントが設定された行には青いマーカーが表示されます。
- ページを再読み込み(
F5
)すると、設定したブレークポイントで実行が一時停止します。
ステップ 5: デバッガーのコントロール
- 一時停止した状態で、上部のコントロールパネルを使用してコードをステップ実行します。
Resume script execution (F8)
:スクリプトの実行を再開します。
Step over next function call (F10)
:次の関数呼び出しをステップオーバーします。
Step into next function call (F11)
:次の関数呼び出しにステップインします。
Step out of current function (Shift+F11)
:現在の関数からステップアウトします。
ステップ 6: ウォッチ式とコールスタック
- 「Watch」セクションを使用して、変数や式の値を監視できます。
Add expression
ボタンをクリックして監視したい変数や式を入力します。
- 「Call Stack」セクションには、現在の実行中の関数のスタックトレースが表示されます。
ステップ 7: コンソールからのデバッガー
debugger;
ステートメントをコードに追加すると、その行で実行が一時停止します。
- コンソールから
console.log()
を使用して変数の値を出力し、実行の流れを追跡することもできます。
ステップ 8: ネットワークのデバッグ
- 「Network」タブでネットワークリクエストを監視し、JavaScriptがどのようにサーバーと通信しているかを確認できます。
例
以下は、実際のコードでの使用例です。
以下の例では、debugger;
ステートメントを使用して、ボタンがクリックされたときに実行が停止するようにしています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript Debug Example</title>
</head>
<body>
<h1>JavaScriptデバッグの例</h1>
<button id="testButton">クリックしてテスト</button>
<script>
document.getElementById('testButton').addEventListener('click', function() {
debugger; // ここで実行が停止します
let message = "ボタンがクリックされました";
console.log(message); // コンソールにメッセージを表示
alert(message);
});
</script>
</body>
</html>
画像の遅延読み込みのサンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>スクロールに合わせて画像を表示</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
section {
padding: 50px;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
img {
max-width: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
img.visible {
opacity: 1;
}
nav {
position: fixed;
top: 0;
width: 100%;
background: #333;
color: #fff;
padding: 10px;
text-align: center;
}
nav a {
color: #fff;
margin: 0 15px;
text-decoration: none;
}
</style>
</head>
<body>
<nav>
<a href="#section1">セクション1</a>
<a href="#section2">セクション2</a>
<a href="#section3">セクション3</a>
<a href="#section4">セクション4</a>
</nav>
<section id="section1" style="background-color: #f4f4f4;">
<h2>セクション1</h2>
<img src="https://picsum.photos/id/1011/800/600" alt="ランダム画像1">
</section>
<section id="section2" style="background-color: #ccc;">
<h2>セクション2</h2>
<img src="https://picsum.photos/id/1012/800/600" alt="ランダム画像2">
</section>
<section id="section3" style="background-color: #a4a4a4;">
<h2>セクション3</h2>
<img src="https://picsum.photos/id/1013/800/600" alt="ランダム画像3">
</section>
<section id="section4" style="background-color: #f4f4f4;">
<h2>セクション4</h2>
<img src="https://picsum.photos/id/1014/800/600" alt="ランダム画像4">
</section>
<script>
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// 画像の遅延表示
function lazyLoad() {
const images = document.querySelectorAll('img');
images.forEach(image => {
const rect = image.getBoundingClientRect();
if (rect.top < window.innerHeight && rect.bottom >= 0 && !image.classList.contains('visible')) {
image.classList.add('visible');
}
});
}
window.addEventListener('scroll', lazyLoad);
window.addEventListener('load', lazyLoad); // 初回読み込み時にもチェック
</script>
</body>
</html>
画像ギャラリーのサンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画像ギャラリー</title>
<style>
body {
font-family: Arial, sans-serif;
}
.gallery {
display: flex;
flex-wrap: wrap;
}
.gallery img {
width: 150px;
height: 150px;
object-fit: cover;
margin: 5px;
cursor: pointer;
transition: transform 0.2s;
}
.gallery img:hover {
transform: scale(1.1);
}
#selectedImage {
width: 100%;
max-width: 500px;
margin: 20px auto;
display: block;
}
</style>
</head>
<body>
<h1>画像ギャラリー</h1>
<div class="gallery" id="gallery"></div>
<img id="selectedImage" src="" alt="選択された画像">
<script>
document.addEventListener('DOMContentLoaded', () => {
// 画像のURLを格納する配列
const images = [
'https://picsum.photos/id/237/200/200',
'https://picsum.photos/id/238/200/200',
'https://picsum.photos/id/239/200/200',
'https://picsum.photos/id/240/200/200',
'https://picsum.photos/id/241/200/200'
];
const gallery = document.getElementById('gallery');
const selectedImage = document.getElementById('selectedImage');
// ギャラリーを生成する関数
function renderGallery() {
gallery.innerHTML = ''; // ギャラリーをクリア
images.forEach((src) => {
const img = document.createElement('img');
img.src = src;
img.addEventListener('click', () => {
selectedImage.src = src;
});
gallery.appendChild(img);
});
}
// 初期のギャラリーをレンダリング
renderGallery();
});
</script>
</body>
</html>
数値のカウントアップのサンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>カウントアップの例</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
section {
padding: 50px;
height: 100vh;
}
.counter {
font-size: 48px;
font-weight: bold;
text-align: center;
margin-top: 50px;
}
nav {
position: fixed;
top: 0;
width: 100%;
background: #333;
color: #fff;
padding: 10px;
text-align: center;
}
nav a {
color: #fff;
margin: 0 15px;
text-decoration: none;
}
</style>
</head>
<body>
<nav>
<a href="#section1">セクション1</a>
<a href="#section2">セクション2</a>
<a href="#section3">セクション3</a>
</nav>
<section id="section1" style="background-color: #f4f4f4;">
<h2>セクション1</h2>
<p>ここにセクション1のコンテンツが入ります。</p>
</section>
<section id="section2" style="background-color: #ccc;">
<h2>セクション2</h2>
<p>ここにセクション2のコンテンツが入ります。</p>
<div class="counter" data-target="1000">0</div>
</section>
<section id="section3" style="background-color: #a4a4a4;">
<h2>セクション3</h2>
<p>ここにセクション3のコンテンツが入ります。</p>
</section>
<script>
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// カウントアップ関数
function countUp(element) {
const target = +element.getAttribute('data-target');
const count = +element.innerText;
const increment = target / 200; // カウントアップの速度を調整
if (count < target) {
element.innerText = Math.ceil(count + increment);
setTimeout(() => countUp(element), 100);
} else {
element.innerText = target;
}
}
// 要素が表示されたときにカウントアップを開始
function checkScroll() {
const counters = document.querySelectorAll('.counter');
counters.forEach(counter => {
const rect = counter.getBoundingClientRect();
if (rect.top < window.innerHeight && rect.bottom >= 0) {
countUp(counter);
}
});
}
window.addEventListener('scroll', checkScroll);
window.addEventListener('load', checkScroll); // 初回読み込み時にもチェック
</script>
</body>
</html>
文字のタイプライター効果のサンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>タイプライター効果の例</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
section {
padding: 50px;
height: 100vh;
}
.typewriter {
font-size: 24px;
font-weight: bold;
border-right: 0.15em solid orange;
white-space: nowrap;
overflow: hidden;
}
nav {
position: fixed;
top: 0;
width: 100%;
background: #333;
color: #fff;
padding: 10px;
text-align: center;
}
nav a {
color: #fff;
margin: 0 15px;
text-decoration: none;
}
</style>
</head>
<body>
<nav>
<a href="#section1">セクション1</a>
<a href="#section2">セクション2</a>
<a href="#section3">セクション3</a>
</nav>
<section id="section1" style="background-color: #f4f4f4;">
<h2>セクション1</h2>
<p>ここにセクション1のコンテンツが入ります。</p>
</section>
<section id="section2" style="background-color: #ccc;">
<h2>セクション2</h2>
<p class="typewriter" data-text="ここにタイプライター効果で表示されるテキストが入ります。"></p>
</section>
<section id="section3" style="background-color: #a4a4a4;">
<h2>セクション3</h2>
<p>ここにセクション3のコンテンツが入ります。</p>
</section>
<script>
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// タイプライター効果関数
function typeWriter(element, text, i) {
if (i < text.length) {
element.innerHTML += text.charAt(i);
i++;
setTimeout(() => typeWriter(element, text, i), 100);
}
}
// 要素が表示されたときにタイプライター効果を開始
function checkScroll() {
const typewriters = document.querySelectorAll('.typewriter');
typewriters.forEach(typewriter => {
const rect = typewriter.getBoundingClientRect();
if (rect.top < window.innerHeight && rect.bottom >= 0 && typewriter.innerHTML === "") {
const text = typewriter.getAttribute('data-text');
typeWriter(typewriter, text, 0);
}
});
}
window.addEventListener('scroll', checkScroll);
window.addEventListener('load', checkScroll); // 初回読み込み時にもチェック
</script>
</body>
</html>