JavaScriptで動かしてみよう
知っている人へ: 「確認しよう」のチェックリストだけやって次に進んでOKです。
C言語やPythonを知っている人へ: 変数・ループ・関数の書き方が違うだけで考え方は同じです。「ステップ1〜2は飛ばしてステップ3から」でもOKです。
このページで学ぶこと
- JavaScriptをHTMLに組み込んで実行できる
- 変数・関数・条件分岐・ループの基本がわかる
- ボタンのクリックなどイベントを使ってページを動かせる
- ブラウザの開発者ツールでデバッグできる
JavaScriptとは
JavaScript（JS）は、Webページに動きをつけるためのプログラミング言語です。
- ボタンをクリックしたら何かを表示する
- 入力した文字を別の場所に反映する
- サーバーからデータを取ってきて表示する
このコースでは JavaScript をベースとした React / Next.js を使うので、JS の基礎は必須です。
やってみよう
ステップ1: コンソールでJSを動かしてみる
まずはブラウザのコンソールで試しましょう。
- 開発者ツールを開く
- Windows:
F12 - Mac:
Cmd + Option + I
- Windows:
- 「Console」タブをクリックする
- 以下を入力して
Enterを押す
console.log("Hello, とんペディア!")Hello, とんペディア! と表示されれば成功。コンソールは JS を試すのに便利です。
続けて以下も試してみましょう。
1 + 1
"Hello" + " " + "World"
Math.max(3, 7, 2)ステップ2: JavaScriptの基本を押さえる
practice フォルダに script.js ファイルを作り、index.html の </body> の直前に以下を追加して読み込む。
<script src="script.js"></script>変数
// let: 後から変更できる変数
let name = "とんペディア"
let count = 0
// const: 変更しない定数（できるだけこちらを使う）
const maxCount = 10
console.log(name) // → とんペディア関数
// 関数の定義
function greet(name) {
return "こんにちは、" + name + "！"
}
// アロー関数（同じ意味、よく使う書き方）
const greet = (name) => {
return "こんにちは、" + name + "！"
}
// 呼び出し
console.log(greet("田中")) // → こんにちは、田中！条件分岐
const score = 75
if (score >= 80) {
console.log("合格")
} else if (score >= 60) {
console.log("もう少し")
} else {
console.log("不合格")
}配列とループ
const fruits = ["りんご", "みかん", "バナナ"]
// for...of ループ
for (const fruit of fruits) {
console.log(fruit)
}
// map（配列の各要素を変換して新しい配列を作る）
// Reactで頻出！
const messages = fruits.map((fruit) => fruit + "が好き")
console.log(messages)
// → ["りんごが好き", "みかんが好き", "バナナが好き"]オブジェクト
const user = {
name: "田中",
age: 19,
university: "東北大学"
}
console.log(user.name) // → 田中
console.log(user["age"]) // → 19ステップ3: ページを動かしてみる
index.html の <body> に以下を追加する。
<button id="btn">クリックしてね</button>
<p id="message"></p>script.js に以下を書く。
const button = document.getElementById("btn")
const message = document.getElementById("message")
button.addEventListener("click", () => {
message.textContent = "クリックされました！"
})ブラウザをリロード（Windows: F5 / Mac: Cmd + R）してボタンをクリックしてみましょう。
ステップ4: カウンターを作ってみよう
以下を使って、クリックするたびに数字が増えるカウンターを作ってみましょう。
HTML:
<h2 id="count">0</h2>
<button id="increment">+1</button>
<button id="reset">リセット</button>JS（自分で実装してみましょう。ヒントは下に）:
let count = 0
const countDisplay = document.getElementById("count")
// +1ボタンを押したら count を増やして countDisplay に反映する
// リセットボタンを押したら count を 0 に戻して countDisplay に反映する答えを見る（先に自分で試してみよう）
let count = 0
const countDisplay = document.getElementById("count")
document.getElementById("increment").addEventListener("click", () => {
count = count + 1
countDisplay.textContent = count
})
document.getElementById("reset").addEventListener("click", () => {
count = 0
countDisplay.textContent = count
})C言語・Python を知っている人へ
| JavaScript | C言語 | Python | |
|---|---|---|---|
| 変数 | let x = 1 | int x = 1; | x = 1 |
| 関数 | const f = (x) => x + 1 | int f(int x) { return x+1; } | def f(x): return x + 1 |
| 配列 | const a = [1, 2, 3] | int a[] = {1, 2, 3}; | a = [1, 2, 3] |
| 出力 | console.log(x) | printf("%d", x); | print(x) |
| 型 | 型宣言なし（動的型付け） | 型宣言必要 | 型宣言なし |
セミコロンは省略できます（省略するのが現代のスタイル）。
確認しよう
- コンソールで
console.logを実行できた -
let/const/ 関数 /if/ ループを書いた - ボタンをクリックしてページの内容を変えられた
- カウンターを自分で実装した
AIに聞いてみよう
「JavaScriptの map と forEach の違いを、具体的なコード例を使って説明してください」
次のステップ
Last updated on