JavaScriptでのDOM操作を例にしたコード作成のヒント

実装に一定量のコードを書く必要があるほど複雑なタスクに直面しているとします。

間違ったアプローチは、解決策のコード全体を一気に書いてから、検証を始めようとすることです。この場合、何も動作せず、大量のコードの中からエラーを探さなければならない可能性が高くなります。

正しいアプローチは、タスクを小さな基本的なステップに分割し、それぞれを実装してすぐにその正しさを確認することです。この方法であれば、どこかで間違えてもすぐに問題に気づき、修正することができます。

実際に試してみましょう。以下のような段落があるとします：

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>

数字が 3 で割り切れる段落を見つけ、それらの数字の合計を求めるというタスクに直面しているとします。

最初の小さなステップとして、これらの段落を配列として取得し、コンソールにその配列を表示して、正しく取得できたか確認することをお勧めします。やってみましょう：

let elems = document.querySelectorAll('p');
console.log(elems);

次の小さなステップとして、段落をループで処理し、それぞれを個別にコンソールに表示する必要があります：

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	console.log(elem);
}

そして今度は、ループ内で段落のテキストを表示しましょう：

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	console.log(elem.textContent);
}

では、数字が 3 で割り切れる段落のテキストを表示しましょう：

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	let text = +elem.textContent;
	
	if (text % 3 === 0) {
		console.log(text);
	}
}

正しい段落が取得できていることを確認したら、それらの数字の合計を始めることができます：

let elems = document.querySelectorAll('p');
let sum = 0;

for (let elem of elems) {
	let text = +elem.textContent;
	
	if (text % 3 === 0) {
		sum += text;
	}
}

console.log(sum);

年号のリストがあります：

<ul>
	<li>2000</li>
	<li>2004</li>
	<li>2021</li>
	<li>2022</li>
	<li>2025</li>
	<li>2031</li>
</ul>

各桁の合計が 6 になる年を取得してください。取得した年の合計を求めなさい。