JavaScriptお試し

はじめに

次のキーを押すと、開発者ツールが開きます。

• Win - Ctrl+Shift+C
• Mac - Cmd+Shift+C

「Console」タブを開くと、JavaScriptコードを入力できるテキストフィールドが表示されます。

とりあえず動かしてみよう

次のJavaScriptコードをコンソールに貼って、Enterキーを押してみてましょう。

document.body.addEventListener('click', function () {
  window.alert('ページがクリックされました。');
});

うまく動かせたら、画面をクリックするとアラートダイアログがでます。

大丈夫だったらページを更新してください。アラートが出ない、元の状態に戻ります。

リロードするやり方は複数ありますが、次のキーを押すことをおすすめします。

• Win - Ctrl+Shift+R
• Mac - Cmd+Shift+R

基本的な文法

変数宣言 - 値（データ）に名前をつける

let hoge = 'text'; // 文字列

• let - 変数宣言が始まるよ
• hoge - hogeという名前にする
• = - hogeという名前をつける値がこの後に書かれます
• 'text' - 値は文字列の「text」です
• ; - １つのコードのおしまいです

文字列はシングルクオーテーション（'）か、ダブルクオーテーション（"）か、バッククオーテーション（`）でくくります。

値には文字列以外にもいろいろあります。

let piyo = 100;


let array = [100, 200, 300];


let obj = {
  name: 'Ecma Kawarabe',
  age: 168,
  height: 170,
};


let task1 = function () {

};

はじめの一歩はコンソールログ

console.log()は、コンソールに値を出力するための基本のキです。

次のコードを動かしてみましょう。

console.log(document.title);

ページのタイトルがコンソールにでたら成功！undefinedと表示されるのはいつものことなので、いまは気にしなくて大丈夫です。

数値 - 四則演算をしたいようなときに使います

let hoge = 100;

• let - 変数宣言が始まるよ
• hoge - hogeという名前にする
• = - hogeという名前をつける値がこの後に書かれます
• 100 - 値は数値の100です
• ; - １つのコードのおしまいです

コンソールで計算結果を出力してみましょう。

let hoge = 100;

console.log(hoge + 200); // > ?

let hoge = 100;

console.log(hoge - 50); // > ?

let hoge = 100;

console.log(hoge * 10); // > ?

let hoge = 100;

console.log(hoge / 2); // > ?

console.log(6 / 2 * (1 + 2)); // > ?

JavaScriptは小数点が苦手なことは覚えておきましょう。

let a = 100;
let b = 100 / 3;

console.log(a); // > 100
console.log(b); // > ?
console.log(b * 3); // > ?

console.log(33.3333 + 66.6666); // > ?
console.log(33.3333333 + 66.6666666); // > ?
console.log(33.333333333333333 + 66.666666666666666); // > ?
console.log(33.333333333333331 + 66.666666666666660); // > ?

配列 - 連番でたくさんの値を管理する

let hoge = [100, 'text', 200];

• let - 変数宣言が始まるよ
• hoge - hogeという名前にする
• = - hogeという名前をつける値がこの後に書かれます
• [ - 配列が始まるよ
• 100 - 数値の100が0番目の値
• , - 0番目の値はここで終わり
• 'text' - 文字列の「text」が1番目の値
• , - 1番目の値はここで終わり
• 200 - 数値の200が2番目の値
• ] - 配列が終わったよ
• ; - １つのコードのおしまいです

それぞれの値は、ブラケッツ（[]、角括弧）を使ってこんな感じで取得できます。

let hoge = [100, 'text', 200];

console.log(hoge[0]);
console.log(hoge[1]);
console.log(hoge[2]);
console.log(hoge[3]); // > ?

配列の長さは.lengthで取得できます。

オブジェクト - たくさんの値に名前をつけて管理する

let profile = {
  name: 'Ecma Kawarabe',
  age: 168,
  height: 170,
};

• let - 変数宣言が始まるよ
• profile - profileという名前にする
• = - profileという名前をつける値がこの後に書かれます
• { - オブジェクトが始まるよ
• name - nameという名前のデータを保存するよ（プロパティ名）
• 'Ecma Kawarabe' - 文字列の「Ecma Kawarabe」が値
• , - この値はここで終わり
• age - ageという名前のデータを保存するよ
• 168 - 数値の168が値
• , - この値はここで終わり
• height - heightという名前のデータを保存するよ
• 170 - 数値の170が値
• , - この値はここで終わり
• } - 配列が終わったよ
• ; - １つのコードのおしまいです

それぞれの値は、ピリオド（.、ドット）を使ってこんな感じで取得できます。

let profile = {
  name: 'Ecma Kawarabe',
  age: 168,
  height: 170,
};

console.log(profile.name);
console.log(profile.age);
console.log(profile.height);

オブジェクトのプロパティ名が、とあるルールだけで構成されてないときはクオートでくくります。

let obj = {
  'piyo-ponyo': 100,
};

console.log(obj['piyo-ponyo']); // > 100

console.logも、consoleというオブジェクトの中にある、logというデータをみています。

log()のパーレン（()丸括弧）は、関数の呼び出しを意味しています。

関数 - まとまった処理に名前をつける

let task1 = function () {
  let a = 100;
  let b = 100;

  console.log(200);
};

task1();

• let - 変数宣言が始まるよ
• task1 - task1という名前にする
• = - task1という名前をつける値がこの後に書かれます
• function () { - 関数が始まるよ
• } - 関数が終わったよ
• ; - １つのコードのおしまいです
• task1(); - 関数task1を呼び出します

「関数」が入っている変数は、その変数自体が「関数」と呼ばれます。

関数というのは、値に処理が入っている変数のことを指していると思って大丈夫です。

引数

関数には「引数」というものを渡せます。

関数に引き渡すための変数を「引数」と呼びます。

// 引数名として「arg1」を使います
let task1 = function (arg1) {
  let a = 100;

  console.log(a + arg1); // 引数に100を足してコンソールに表示させます
};

task1(100); // > 200

return文を使うと、計算結果を呼び出し元に返すことができます。

// 引数名として「arg1」を使います
let task1 = function (arg1) {
  let a = 100;

  return a + arg1;
};

let result = task1(100);

console.log(result); // > 200

/**
 * 受け取った値を2倍にして返します
 * @param {number} arg1 - 倍にする数字。初期値は 100
 * @returns {number} - 倍にした数字
 */
let task1 = function (arg1 = 100) {
  return 2 * arg1;
};

console.log(task1()); // > 200
console.log(task1(200)); // > 400
console.log(task1(500)); // > 1000

もっとシンプルに書けるアロー関数というのもあります👀

このコードは、１つ前のものと同じ意味です。

/**
 * 受け取った値を2倍にして返します
 * @param {number} arg1 - 倍にする数字。初期値は 100
 * @returns {number} - 倍にした数字
 */
let task1 = (arg1 = 100) => 2 * arg1;

console.log(task1()); // > 200
console.log(task1(200)); // > 400
console.log(task1(500)); // > 1000

DOM操作 - HTMLの要素をJavaScriptで触ります

HTMLの要素も変数にしまうことができます。

ターゲットのボタン

let btn = document.querySelector('#hoge'); // idにhogeを持つ要素を拾います

console.log(btn);
console.log(btn.textContent); // ボタンの中の文字列
console.log(btn.offsetWidth); // ボタンの横幅

let btn = document.querySelector('#hoge'); // idにhogeを持つ要素を拾います

btn.textContent = 'JavaScriptで文字列を変更した';
btn.style.width = '300px'; // 横幅を300px に

let btn = document.querySelector('#hoge'); // idにhogeを持つ要素を拾います

btn.addEventListener('click', function () { // クリックされたらアラートダイアログをだしてね
  alert('クリックされた');
});

let btn = document.querySelector('#hoge'); // idにhogeを持つ要素を拾います

btn.remove(); // button要素を削除

let btn = document.querySelector('#hoge'); // idにhogeを持つ要素を拾います

console.log(btn); // button要素が取れてることを確認

let target = document.querySelector('#target'); // idにtargetを持つ要素を拾います

console.log(target); // div要素が取れてることを確認

target.textContent = ''; // div要素の中身をからっぽに

target.append(btn); // div要素の中にbutton要素を追加

こういうDOM操作はいろんなことができます。詳しく知りたい人は検索してみよう。

• 要素の隣の要素、親、子など周りを探す（parentElement, nextElementSiblingなど）
• 要素を作成する（createElementなど）
• 要素を移動する（append、prependなど）
• 要素を削除する（removeなど）
• 要素をコピーする（cloneNodeなど）
• 要素の見た目を操作する（style.XXXXなど）
• 要素にイベントハンドラ（リスナ）を付与する（addEventListenerなど。何かが起こったらなにかをしてねというお願い。）
• HTMLを挿入する（insertAdjacentHTMLなど）

遊んでみよう

id属性値はplaygroundです。