【JavaScript 2-4】オブジェクトの入口｜関連するデータをまとめて扱う（初心者向け）
toshi
ToshiLab
【JavaScript 1-2】最初の1行を動かす｜scriptタグで“変化する感覚”をつかむ（初心者向け）
toshi
記事内に商品プロモーションを含む場合があります
前回は、
JavaScriptで「ボタンを押すと文字が変わる」ようなことができる、
という全体像を見ました。
今回はその一歩手前に戻って、
**JavaScriptをHTMLにどう読み込むのか**
を確認します。
JavaScriptは、HTMLファイルに勝手に混ざるわけではありません。
HTML側で、
**ここでJavaScriptを読み込むよ**
と伝えるために使うのが、
**scriptタグ**です。
- 「JavaScriptは scriptタグでHTMLに読み込ませます
-
最初はこの理解で大丈夫です。
- HTML：ページの中身を書く
- CSS：linkタグで読み込む
- JavaScript：scriptタグで読み込む
CSSでは、
<link rel=”stylesheet” href=”style.css” />
のように書きました。
JavaScriptでは、
<script src=”script.js”></script>
のように書きます。
今回は、
この scriptタグを使って、
最初の1行を動かしてみます。
Q
目次
ここまでできればOK
今回のゴール
- scriptタグでJavaScriptを読み込める
- console.log でJavaScriptが動いたことを確認できる
- JavaScriptファイルを分けて読み込む感覚が分かる
- 次の変数の入口へ進む準備ができる
scriptタグとは？
| 書き方 | 役割 |
|---|---|
| scriptタグ | JavaScriptをHTMLに読み込ませる |
| src | 読み込むJavaScriptファイルの場所を書く |
| scriptタグの位置 | 読み込むタイミングに関係する |
scriptタグは、
HTMLにJavaScriptを読み込ませるためのタグです。
CSSを読み込む時に linkタグを使ったように、
JavaScriptを読み込む時は scriptタグを使います。
たとえば、
<script src="js/script.js"></script>と書くと、
jsフォルダの中にある script.js を読み込みます。
コピペOK
まずは完成形を見る
今回は、HTMLファイルとJavaScriptファイルを分けて作ります。
フォルダ構成は、まずこの形で考えると分かりやすいです。
javascript-01-02-example/
├─ index.html
└─ js/
└─ script.jsまずは
index.html をこの形で作ります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JavaScript 1-2</title>
</head>
<body>
<h1>JavaScriptの最初の1行</h1>
<p id="message">まだJavaScriptは動いていません。</p>
<script src="js/script.js"></script>
</body>
</html>次に、下の1行を書きます。
jsフォルダの中の script.js に1行書く。
console.log("JavaScriptが読み込まれました。");
まずは見た目を変える前に、
「JavaScriptが読み込まれている」と確認する
ところから始めます。
“動作確認メモ”のように使う
console.log
console.log は、
ブラウザの開発者ツールに文字を表示するための書き方です。
画面の本文に直接出るわけではありません。
でも、
JavaScriptがちゃんと読み込まれているか確認したい時に便利です。
console.log("JavaScriptが読み込まれました。");この1行が確認できれば、
scriptタグでJavaScriptが読み込めている可能性が高いです。
console.log の結果を見る方法
console.log() は、ページ上に文字を表示する命令ではありません。
ブラウザの「Console（コンソール）」という場所に、確認用の文字を出す命令です。
確認するときは、次の手順で見ます。(ブラウザはChrome)
- 作成した
index.htmlをブラウザで開く - キーボードで
F12を押す - 上のタブから「Console」を開く
Windows の Chrome では、Ctrl + Shift + J でも Console を開けます。
Mac の場合は、Command + Option + J です。
Console に
JavaScriptが読み込まれました。
のように表示されていれば、JavaScript は読み込まれています。
今は、Console の細かい使い方まで覚えなくて大丈夫です。
少し変えてみる
画面の文字
次に、画面上の文章もJavaScriptで変えてみます。
script.js を下のように変更してください。
console.log("JavaScriptが読み込まれました。");
const message = document.getElementById("message");
message.textContent = "JavaScriptで文字が変わりました。";これで、HTML側の
<p id="message">まだJavaScriptは動いていません。</p>の文字が、
JavaScriptによって書き換わります。
変化のポイント
どこを見ればいい？
| 見る場所 | 起きていること |
|---|---|
| script src=”js/script.js” | JavaScriptファイルを読み込んでいる |
| console.log | JavaScriptが動いたか確認している |
| id=”message” | JavaScriptで探す目印になっている |
| getElementById | idの付いた要素を探している |
| textContent | 表示される文字を書き換えている |
今回の流れは、かなり大事です。
HTMLに id を付ける。
JavaScriptでその id を探す。
見つけた場所の文字を書き換える。
この流れが分かると、
次のボタンクリックやDOM操作にも進みやすくなります。
scriptタグは body の最後に置くと分かりやすいです
| 置く場所 | 初心者向けの見方 |
|---|---|
| head内 | 少し注意が必要 |
| bodyの最後 | HTMLを読み込んだあとに JavaScriptを動かしやすい |
今回は scriptタグを body の最後に置いています。
※HTMLより抜粋
<script src="js/script.js"></script>
</body>これは、
HTMLの要素が読み込まれたあとにJavaScriptを動かしやすいからです。
最初は、
**scriptタグはbodyの最後**
くらいで覚えておくと進めやすいです。
HTML・CSS・JavaScriptの読み込みを整理する
| ファイル | 読み込み方 |
|---|---|
| CSS | linkタグで読み込む |
| JavaScript | scriptタグで読み込む |
| 画像 | imgタグで読み込む |
HTMLは、いろいろなファイルを読み込んでページを作ります。
CSSは見た目。
JavaScriptは動き。
画像は表示素材。
それぞれ読み込み方が違います。
今回はその中で、
JavaScriptを読み込む scriptタグを確認しました。
少しだけ変えてみる（練習）
- console.log の文字を変えてみる
- pタグの最初の文字を変えてみる
- JavaScriptで書き換える文字を変えてみる
- id=”message” を別名にして、JavaScript側も合わせてみる
- script src のパスをわざと間違えて、動かなくなるか確認してみる
あえて少し壊してみると、
「どこが合っていないと動かないのか」
が見えやすくなります。
ここだけ確認
よくあるつまずき
- 「つまずき①：console.log がどこに出るか分からない」
-
console.log は、ページ本文ではなく開発者ツールのコンソールに表示されます。
ブラウザ上で右クリックして「検証」を開き、
「Console」や「コンソール」というタブを見ます。最初は少し分かりにくいですが、
JavaScriptの確認ではよく使います。
Q
- 「つまずき②：文字が変わらない」
-
まずは id 名を確認します。
HTML側が、
HTML<p id="message">まだJavaScriptは動いていません。</p>なら、JavaScript側も
JavaScriptdocument.getElementById("message")のように同じ名前にします。
message の文字(id)がずれていると、対象を見つけられません。
Q
- 「つまずき③：script.js が読み込まれない」
-
scriptタグのパスを見直します。
今回の構成では、
TeXindex.html js/script.jsなので、HTMLから見た書き方は
HTML<script src="js/script.js"></script>になります。
フォルダ名やファイル名が違うと読み込まれません。
Q
- 「つまずき④：headにscriptを書いたら動かないことがある」
-
HTMLの要素を読み込む前にJavaScriptが動くと、
対象を見つけられないことがあります。最初は scriptタグを body の最後に置く形で進めると分かりやすいです。
慣れてきたら defer や module も扱います。
Q
ここだけ押さえればOK
今回のまとめ
- JavaScriptは scriptタグでHTMLに読み込ませる
- console.log でJavaScriptが動いたか確認できる
- id を使うとHTMLの要素をJavaScriptで探せる
- textContent で表示される文字を変えられる
- 最初は scriptタグを body の最後に置くと分かりやすい
一例zipについて
JavaScript 1-2
この記事の内容は、JavaScript 1-2 の一例として zip ファイルを用意してます。
最初はそのまま開いて動きを確認し、
そのあとで console.log の文字や、画面に表示される文章を少し変えてみると
進めやすいです。
“正常動作するコードを暗記する”ではなく、
「こういう形でも作れる」という確認用として使ってください。
できた判定
今日のゴール確認
ここまでできたらOKです。
- scriptタグでJavaScriptを読み込めた
- console.log で動作確認ができた
- JavaScriptで画面の文字を変えられた
- 次の JavaScript 1-3 に進む準備ができた
次に読む
JavaScript 1-3へ
今回は、scriptタグを使ってJavaScriptを読み込み、
最初の1行を動かすところまで進みました。
次は、
値を入れて使うための入口として、
const と let をやさしく見ていきます。
PR：最初の1冊（必要な方だけ）
PR：JavaScriptの最初の学習に使いやすい参考(必要な方だけ)
この段階では、まず記事内のコードだけで進めて大丈夫です。
※価格や在庫は変わるため、最終確認はリンク先でお願いします。
リンク
ABOUT ME
C型肝炎や感染症の闘病を経て現在通院中
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
