【JavaScript 4-3】まとめ｜ボタン・入力・DOM操作の基礎を振り返る（初心者向け）

• JavaScript基礎編で学んだ内容を整理できる
• ボタン・入力・DOM操作の流れを振り返れる
• どのコードが何の役割だったか確認できる
• 次に作れるミニ制作のイメージが持てる
• モダンJavaScriptへ進む前の土台を確認できる

JavaScriptは、HTMLに読み込ませて使います。

基本形はこのような形でした。

<scriptsrc="js/script.js"></script>

<scriptsrc="js/script.js"></script>

この1行で、
js フォルダの中にある script.js を読み込んでいます。

JavaScriptが動かない時は、
まずこの読み込みが正しいかを確認しました。

変数は、値に名前をつけるために使いました。

たとえば、

const userName = "toshi";
let count = 0;

const userName = "toshi";
let count = 0;

のような形です。

最初は、次の理解で十分です。

クリック回数のように増える値は let。
ボタンや表示場所を取得して入れておくような値は const。

このくらいの感覚から始めて大丈夫です。

条件によって表示を変えるために、
if を使いました。

if (count >= 3) {
  message.textContent = "3回以上クリックされました。";
}
else {
  message.textContent = "まだ3回未満です。";
}

if (count >= 3) {
  message.textContent = "3回以上クリックされました。";
}
else {
  message.textContent = "まだ3回未満です。";
}

これは、

• count が3以上なら if 側
• そうでなければ else 側

という分け方でした。

配列は、複数の値をまとめるために使いました。

const topics = ["HTML", "CSS", "JavaScript", "PHP"];

const topics = ["HTML", "CSS", "JavaScript", "PHP"];

配列は、0番目から数えます。

topics[0]; // HTML
topics[1]; // CSS

topics[0]; // HTML
topics[1]; // CSS

オブジェクトは、関連する情報をまとめるために使いました。

const profile = {
  name: "toshi", ageGroup: "40代", favorite: "HTMLとCSS"
};

const profile = {
  name: "toshi", ageGroup: "40代", favorite: "HTMLとCSS"
};

値を取り出す時は、
次のように書きました。

profile.name
profile.favorite

profile.name
profile.favorite

入力欄に書かれた内容は、
value で取得しました。

const userName = nameInput.value.trim();

const userName = nameInput.value.trim();

このコードでは、

• nameInput.value で入力欄の中身を取得する
• trim() で前後の空白を取り除く

という流れになっています。

JavaScriptが動かない時は、
console.log で途中確認をしました。

console.log("script.js が読み込まれました。");
console.log(message);
console.log("ボタンが押されました。");

console.log("script.js が読み込まれました。");
console.log(message);
console.log("ボタンが押されました。");

console.log は、画面本文ではなく、
開発者ツールのコンソールに表示されます。

• script.js が読み込まれているか
• id名が合っているか
• ボタンのクリック処理まで届いているか
• 変数の中身が思った通りか
• エラーが出ていないか

JavaScriptは、最初から全部を暗記しようとすると大変です。

最初は、次のように
使う場面 で思い出せれば大丈夫です。

toshi

忘れても大丈夫です。
「どの記事に戻ればよいか」が分かっていれば、
それも学習の力です。

実務では、JavaScriptにももっと今風の書き方があります。

たとえば、

• script type="module"
• import / export
• const を中心にした整理
• アロー関数
• querySelector
• データと表示の分け方

などです。

ただし、この基礎編では、
まず「HTMLを見つけて、ボタンや入力に反応して、表示を変える」ことを優先しました。

モダンJavaScriptの書き方は、
基礎に慣れてきたあとで、別章として整理していきます。

• JavaScriptはHTMLに読み込んで使う
• addEventListenerでボタン操作に反応できる
• textContentで画面の文字を書き換えられる
• ifで条件によって表示を変えられる
• functionで処理をまとめられる
• 配列とオブジェクトでデータを整理できる
• input.valueで入力内容を取得できる
• console.logで動作確認ができる

ここまでできたらOKです。

・ JavaScript基礎編の全体像を振り返れた
・ ボタン・入力・DOM操作の流れを整理できた
・ どのコードが何の役割か確認できた
・ 次の制作テーマを考えられるようになった
・ モダンJavaScriptへ進む前の土台ができた

JavaScript基礎編は、ここで一区切りです。

次に進むなら、方向は2つあります。

1つ目は、
ここまでの基礎を使って、さらに小さな制作を増やす道です。

2つ目は、
モダンJavaScript入門として、今風の書き方を少しずつ整理していく道です。

まずは、基礎で作れる小さな制作を増やしてから、
モダンJavaScriptへ進むと理解しやすくなります。

番外編：ToshiLab Tools制作メモ

JavaScript基礎編で触れた「ボタン操作」「入力内容の取得」「表示の切り替え」は、小さな便利ツール作りにもつながります。

ToshiLab Toolsを作った流れや、学習中に自作ツールを作る考え方をまとめました。

番外編：ToshiLab Tools制作メモ

WEBプログラミング番外編：ToshiLab Toolsを作った流れ｜学習中に使える便利ツールを自作する考え方

この記事の内容は、JavaScript 4-3 の一例として zip ファイルを用意しています。

まとめ回なので、
新しい大きな制作ではなく、
ここまでの基礎を振り返る確認用のページとして使う想定です。

最初はそのまま開いて確認し、
そのあとで表示文やボタンの内容を少し変えてみると進めやすいです。

“正解を暗記するもの”ではなく、
「こういう形でも作れる」という確認用として使ってください。

javascript-04-03-example.zip
└─ javascript-04-03-example/
├─ index.html
├─ css/
│ └─ style.css
└─ js/
└─ script.js