プロデミア

JavaScript

JavaScript

JavaScriptとは？

JavaScriptとは動的にコンテンツを更新したり、リッチなWebサイトを作成できるスクリプト言語です。HTMLを家の骨組みに例えるとCSSは壁や屋根などの外観、装飾です。その中でもJavaScriptは電気やガス、水道などのライフラインのイメージです。

！！！！！注意！！！！！

1-1 JavaScriptの使い方

・JavaScriptファイルを作成して書き込む

HTMLの時は○○.html CSSの時は○○.css という風に拡張子を設定していたと思います。それと同様に○○.js と拡張子をつけてファイルを作成することでJavaScript用の環境を作成することができます。

・HTMLファイルの中で読み込む

JavaScriptの記述量が少ない場合や小規模な開発の場合HTMLファイルに記述する場合があります。以下のコードにあるようにbodyの閉じタグの直前に<script></script>を埋め込みそのタグの中にJavaScriptを記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    
<script>
	// ここにJavaScriptを書く
</script>
</body>
</html>

1-2 早速JavaScriptを使ってみよう！

Cloud9に「Lesson2_JavaScript」というディレクトリを作成し、その中に「start」というフォルダを作成してください。

「start」フォルダが作成できたらその中身にindex.html と main.js という２つのファイルを作成しましょう。

index.html のひな型

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript</title>
</head>
<body>
    <script src="./main.js"></script>
</body>
</html>

下の写真のようになっていれば大丈夫です！

今回は主にCloud9を用いますが、他にもPhpStormやVSCodeといったエディタがあります。

Visual Studio Code – コード エディター | Microsoft Azure

試しに簡単なJavaScriptを作成してみましょう。

以下のコードを作成したmain.jsに書き込み、index.htmlをブラウザで読み込みましょう。

【もしもVSCodeを使っている方がいたら、右下にGo Liveというタブがあるはずなのでクリックしましょう。自動でブラウザに表示してくれるはずです。】

main.js

alert('hello JavaScript');

上の画像が表示されればOKです。OKを押した後でも画面を読み込めば何度でも表示させることができます。

今回使用したalert()は()の中に書き込んだ内容がウィンドウに表示されます。このウィンドウのことをダイアログといいます。実務内でもちょくちょく出てくる言葉なので覚えておきましょう。

またalertでは文字列だけでなく数値や算術演算子(+. -. %)なども用いることができます。

試しに実行してみましょう。

main.js

alert(200 * 3);

上記の様に表示されましたか？されていれば問題ありません。

もし200 * 3で表示されたらシングルクォーテーション(’’)もしくはダブルクォーテーション(””)で囲ってしまっていることが考えられます。クォーテーションで囲ってしまうと数値ではなく文字列として判別されるので計算されなくなります。

1-3 もっと簡単にJavaScriptを試してみる

これまでJavaScriptはmain.jsファイルを作成し、HTMLファイルを読み込み実行していました。

今後はデバックや確認などで少しだけJavaScriptを試してみたいという場面が増えてくるかと思います。そんなときに毎回ファイルを作成すると面倒ですよね。

そこでブラウザにはデベロッパーツールというものが存在します。ctri + shift + j または右クリック→検証で表示することができます。

デベロッパーツールを開いたらConsoleというタブが上のほうに存在するはずです。Consoleをクリックしてみましょう。以下の画像を参考に。

Consoleが開けたら以下のコードを入力してみましょう。

alert('hello JavaScript');

入力すると先ほどと同様にダイアログが表示されるかと思います。

ちなみに文字列の連結は以下のようにします。

alert('こんにちは' + '山田　太郎です');

1-4 console.logを使いこなそう

JavaScriptの機能の１つとしてconsole.log() という機能があります。(読み方：コンソールドットログ)　

console.logの役割は()に入れた文字列や変数、配列などをConsoleに出力してくれます。

今後実務においてこの変数には何が格納されているかな？正しく値が取れているかな？など確認の作業を必ず行います。その時のこのconsole.logをもちいてデバッグを行います。

日頃からconsole.logでデバックを行う癖をつけましょう。

デバッグとは？

コンピュータのプログラムの誤り（＝バグ）を見つけ、手直しをすることです。

早速、console.logを試してみましょう！

1-3と同様にConsoleにコードを入力してみましょう。

Console

console.log("hello world");

Consoleが以下のようになればOKです。

alertとの違いはダイアログとしてウィンドウに表示されるか、Consoleに出力されるかです。

2-1 変数の使い方

JavaScriptをはじめとするプログラミング言語には変数という機能があります。繰り返し使ったり、長いデータを格納できます。

JavaScriptでは３つの宣言方法があります。

・var

・let

・const

の３つです。

以下に、簡単に違いがわかる図を載せました。

詳しい違いや例を、これから一つずつ紹介します。

2-1-1 varについて

varは昔から存在し古いシステムでしばしば使用されています。宣言方法は以下のコードです。

var name = "山田　太郎";

console.log(name);
// >山田　太郎

上記の様にnameという変数の中に山田　太郎が格納されているためconsole.logでnameを表示させると山田　太郎が表示されます。

また、＝を用いていますが、これは数学的な意味の「等しい」という意味ではなくプログラムでは左辺に右辺の値を代入するという意味になります。

varでは上記の表にある通り再代入、再宣言が可能です。どういうことかというと、

var name = "山田　太郎";
name = "鈴木　一郎";

console.log(name);
// > 鈴木　一郎

上のように再代入が可能でnameに鈴木　一郎を入れるとname変数の中身が上書きされます。

また、再宣言に関しても、

var name = "山田　太郎";
var name = "鈴木　一郎";

console.log(name);
// > 鈴木　一郎

という風になり再宣言もできるようになっています。

しかしこの「再代入」されるということは、何千行とコードが書かれているファイルの中でもしも変数名が被ってしまうと、もともとあった変数が上書きされてしまうということです。結果的にシステムが正常に動かなくなってしまう可能性があります。そのため現在ではvarはあまり用いられずlet か constが用いられます。

2-1-2 let について

letは再代入は可能ですが、再宣言はできません。

var と同様に再代入は以下の通りです。

let name = "山田　太郎";
name = "鈴木　一郎";

console.log(name);
// > 鈴木　一郎

name = "鈴木　一郎"の部分でnameを上書きしています。

一方でletを再宣言してみると、

let name = "山田　太郎";
let name = "鈴木　一郎";

console.log(name);
// >Uncaught SyntaxError: Identifier 'name' has already been declared

上の通りUncaught SyntaxError: Identifier 'name' has already been declaredというエラーが出ます。これはnameという名前の変数はもう定義してるよ。というエラーです。

何度も述べた通り、letは再宣言することができません。変数は基本的にletで宣言するようにしましょう。

2-1-3 constについて

constは再代入も再宣言もできません。

constの再代入は以下の通りです。

const name = "山田　太郎";
name = "鈴木　一郎";

console.log(name);
// >Uncaught SyntaxError: Identifier 'name' has already been declared

エラーが出ます。同様に再宣言も、

const name = "山田　太郎";
const name = "鈴木　一郎";

console.log(name);
// >Uncaught SyntaxError: Identifier 'name' has already been declared

エラーが出ますね。constは再宣言も再代入もできないため定数などを宣言するときに用いられます。

3-1 関数の作り方

function 関数名(){
		//   ここに処理を書く
}

上のように関数を作成することができます。

関数名を考えるときは以下のことを意識しましょう。

  1. 関数に中身が想像できる名前を付ける
  2. 日本語はできるだけつけない
  3. 命名規則に沿った名前を付ける 

命名規則については、以下の3つのルールがあります。

  • キャメルケース camelCase　のように単語の先頭だけ大文字にする
  • スネークケース snake_case　のように単語間を＿でつなげる
  • ケバブケース kebab-case　のように単語間を-でつなげる

この３つのうちどれかを使用します。このレッスンではキャメルケースを用いますが、今後チーム開発が始まった場合は周りのコードを見てどのケースにするかを考えましょう。周りのコードはキャメルケースなのに自分だけスネークケースを使うなどということはやめましょう。

また２の日本語についてはどうしても日本語じゃないと伝わらないときは日本語にしましょう。
たとえば支払調書などの名前を組み込みたいとき英語にするとPayment Recordと一目で支払調書とはわからない英文になってしまいます。

3-2 関数の実行方法

先ほど3-1で関数の作成方法を学びましたが関数を書いただけでは実行はされません。

たとえば

main.js

function helloAlert(){
    alert('hello');
}

上にhelloAlert()というダイアログを表示するだけの自作関数を作成しました。

これをブラウザで読み込んでみるとなにも起こらないはずです。なぜなら関数を作成しただけで関数を呼び出せていないからです。

関数を呼び出すにはhelloAlert();という１文を追加しないといけません。

追加するとコードは以下のようになります。

main.js

function helloAlert(){
    alert('hello');
}

helloAlert();

この状態でファイルを実行してみてください。

無事にダイアログに’hello’が表示されているはずです。

また、関数を２回呼び出したいときはfunctionを２回書く必要はなく、helloAlert()を２回書くだけで２回実行されます。余裕があればやってみてください。

3-3 関数に引数を設定する

これまでの関数には引数がありませんでしたが、場合によっては関数に引数が設定される場合があります。
たとえば足し算する関数を用意しました。

main.js

function addNumber(num1, num2){
		let result = num1 + num2;
		return result;
}

console.log(addNumber(1, 5));
// >6
console.log(addNumber(17, 23));
// >40

今回は足し算する値は関数外から取得するので引数にnum1とnum2を設定します。

もしもnum1とnum2が関数内で設定されている場合は以下となります。

function addNumber(){
		let num1 = 5;
		let num2 = 10;

		let result = num1 + num2;
		return result;
}
console.log(addNumber());
// >15

しかしこれでは5 + 10しかできない関数になってしまうので意味ないですよね。
足し算に必要な値は必ず外部から取得し計算に用いられる値も異なるはずです。
よって外部の値が必要な時は必要な数だけ引数に変数を指定するようにしましょう。

また、作成した関数に返り値を求める場合必ずreturnを設定します。
今回は足し算の結果であるresultの値が欲しかったのでreturn result;としました。

たとえば、DBに保存するだけで終わり、などの関数は見返りを求めないのでreturnの設定はいりません。しかし、電話番号のハイフンを除く関数であればハイフンが除かれた後の電話番号が見返りとしてほしいはずです。
そういう場合はreturnを必ず使用します。

3-4 無名関数

無名関数は名前の通りfunctionの後に関数名を指定しなくてもよい関数です。
たとえば先ほどのhelloAlert関数を無名関数に直すと下のようになります。

const helloAlert = function(){
		alert('hello');
}

helloAlert();

変数を利用することで無名関数を作成することができます。
無名関数を呼び出すときは関数名ではなく変数名を利用して呼び出します。

自作関数を無名関数の大きな違いは関数の呼び出す場所が異なる点です。

自作関数ではどこで呼び出しても関数が実行されましたが無名関数では定義後でないと呼びだすことはできません。

実際に確認してみましょう。

main.js

helloAlert();

function helloAlert(){
    alert('hello');
}

helloAlert();

// 2回helloAlertが呼び出される

helloAlert();

const helloAlert = function(){
		alert('hello');
}

helloAlert();

// Uncaught ReferenceError: helloAlert is not defined

無名関数のほうでは関数定義前に関数を呼び出してしまうと上のようなUncaught ReferenceError: helloAlert is not definedというエラーが出て実行されません。
よって無名関数の時は関数宣言後に関数を呼び出すようにしましょう。

main.js これが正解となります。

const helloAlert = function(){
	alert('hello');
}

helloAlert();

4 条件分岐

4-1 if文の使い方

if文は、プログラム内で特定の条件が成り立っているかどうかを確認し、その条件に応じて異なる処理を行うための仕組みです。

JavaScriptだけでなく他のプログラミング言語にも使われている基本的な考えです。

では、JavaScriptでのif文の書き方を学んでいきましょう。

if(条件文){
  // trueだった場合の処理
} else {
  // falseだった場合の処理
}

ここで、if文の構造を見てみましょう。

if (条件) {：条件式が真の場合に実行されるコードブロックが始まります。
条件がtrueだった場合、{}の中にある処理が実行されます。
}：コードブロックの終わりを示します。

以下のサンプルコードを見てみましょう。

【例】

var num = 70;
if (num > 80) {
    console.log("numは80より大きいです。");
}else{
    console.log("numは80以下です。");
}

// >numは80以下です。

【　さらに詳しくifについて学ぶ　】

コード(条件文) 結果 備考
a == b a,bが同じならtrue 型は参照しない
a === b a,bが型まで同じならtrue 2と”2”は数値型と文字列型で違うためfalseになる

4-2 課題

Lesson2_JavaScriptフォルダの中に「kadai」フォルダを作成してください。
その中に「kadai_1.html」ファイルを作成し、以下の課題の回答を記述してください。

confirm() を用いて(自分で検索)以下の条件に沿うようなコードを作成してください。

①　ファイルを読み込むとダイアログに”あなたは20歳以上ですか？”というメッセージを表示させる。

②　OKを押した場合ダイアログに”お酒を飲めますね！”というメッセージを表示させる。

③　キャンセルが押された場合はダイアログに”20歳まで我慢しましょう！”というメッセージを表示させる。

完成例は以下のとおりです。

5 配列とループ

5-1 配列の宣言

配列の作成方法は大きく２つあります。

main.js

// 配列コンストラクタ
let array1 = new Array('朝', '昼', '晩');
// 配列リテラル
let array2 = ['朝', '昼', '晩'];

console.log(array1);
console.log(array2);

//  array1 ['朝', '昼', '晩']
//  array2 ['朝', '昼', '晩']

new Array or [] を用いると配列を作成することができます。

注意

let array1 = new Array(3);
let array2 = [3];

console.log(array1);
console.log(array2);

//  array1 [空 × 3]
//  array2 [3]

配列コンストラクタの場合、引数に数値を入れた場合、数値分の空配列ができてしまうので基本的には配列リテラルを用います。

配列の初期化は以下のように記載しましょう。

let array = [];

5-2 配列の編集

【 配列に要素を追加する方法 】

・先頭に追加する(unshift)

let array = ['赤', '青'];

array.unshift('緑');
console.log(array); 

// ['緑', '赤', '青']

・末尾に追加する(push)

let array = ['赤', '青'];

array.push('緑');
console.log(array); 

// ['赤', '青', '緑']

【 配列の要素を削除する方法 】

・先頭を削除(shift)

let array = ['赤', '青'];

array.shift();
console.log(array); 

// ['青']

・末尾を削除(pop)

let array = ['赤', '青'];

array.pop();
console.log(array); 

// ['赤']

5-3 配列にアクセスする方法

配列の中身を表示させる方法をご紹介します。

let flower = ["ひまわり", "あさがお", "チューリップ", "どくだみ"];

配列の中身を見る場合はインデックス番号を指定します。

普通ならば左から１，２，３という風に数えていきますが,
配列の場合、はじめは０から始まります。

よってひまわりを取得したい場合は、flower[0]とすると取得することができます。

let flower = ["ひまわり", "あさがお", "チューリップ", "どくだみ"];

console.log(flower[0]);
// ひまわり
console.log(flower[1]);
// あさがお
console.log(flower[2]);
// チューリップ
console.log(flower[3]);
// どくだみ
console.log(flower[4]);
// undefined

flower[4]は配列の中身が存在しないためundefinedとなります。

また、ループを用いることによって配列の中身を表示させることもできます。

for文の使い方

for (変数宣言; 繰り返し回数定義; どう繰り返すのか) {
  繰り返し処理
}

forを使って先ほどの配列をループで取得すると以下のようになります。

let flower = ["ひまわり", "あさがお", "チューリップ", "どくだみ"];

for (let i = 0; i<=3; i++){
		console.log(flower[i]);
}

//  ひまわり
//  あさがお
//  チューリップ
//  どくだみ

forEachメソッドを用いると、上より簡単に配列の中身を取り出すこともできます。

let flowers = ["ひまわり", "あさがお", "チューリップ", "どくだみ"];

function getFlower(flower){
		console.log(flower);
}

flowers.forEach(getFlower);

//  ひまわり
//  あさがお
//  チューリップ
//  どくだみ

6 HTML CSS操作

6-1 HTMLを操作する

JavaScriptはHTMLやCSSなどの要素を書き換えたり、削除追加したりできます。

まずはinputタグの取得を例として説明していきます。
「Lesson2_JavaScript」フォルダに新しく「operation」フォルダを作成し、その中にindex.htmlとmain.jsを新しく用意し以下のコードをコピーしてください。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript</title>
</head>
<body>
    <input type="hidden" name="hello" id="hello" value="こんにちは">
    <script src="./main.js"></script>
</body>
</html>

main.js

let hello = document.getElementById('hello').value;

console.log(hello);

実行するとConsoleに”こんにちは”と表示されるはずです。

document.getElementById('hello').value;この部分について順を追って説明します。

① documentについて

documentは表示されているブラウザのオブジェクトのことをいいます。
これは決まり文句みたいなところがあるのでそうなんだくらいで大丈夫です。

② getElementById(’id名’)について

HTMLのなかでidが設定されている場合対象のidの名前を（）に入れることによって対象の要素を取得できます。
今回であれば<input type=”hidden” name=”hello” id=”hello” value=”こんにちは”>が取得できています。

③ valueについて

valueは文字通り取得した要素のvalueを取得します。
document.getElementById('hello').valueで<input type=”hidden” name=”hello” id=”hello” value=”こんにちは”>のvalueである”こんにちは”が取得できます。

まとめると、document.getElementById('hello').valueというコードは、ブラウザの中にあるidがhelloの要素を取得してその中のvalueをとってくるという意味になります。

6-2 HTML要素を追加してみる

「Lesson2_JavaScript」フォルダに新しく「html」フォルダを作成し、その中に以下のように新しくindex.html と main.js を用意し、ひな形をコピーしてみてください。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript</title>
</head>
<body>
    <div id="text-area"></div>
    <script src="./main.js"></script>
</body>
</html>

main.js

document.getElementById('text-area').textContent = "こんにちは";

document.getElementById(‘text-area’)の部分は先ほどと同じです。ブラウザの中にあるidがtext-areaである要素を取得します。

textContent は対象の要素に対してHTMLを差し込むというメソッドです。
なので今回はidがtext-areaの要素に対し”こんにちは”という文章を差し込んでいます。

上のようにブラウザで表示されたらOKです。

6-3 クリックイベント

クリックイベントはJavaScriptの中でもトップレベルに使うことが多いです。
ボタンが押された時の処理などを制御することができます。

「Lesson2_JavaScript」フォルダに新しく「click」フォルダを作成しその中に新しくindex.html と main.js を作成しひな形をコピーしてください。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript</title>
</head>
<body>
    <input type="button" id="button" value="押してみて！">
    <script src="./main.js"></script>
</body>
</html>

main.js

const button = document.getElementById('button');

button.addEventListener('click', () => {
  alert('ドカーン！爆発した');
});

JavaScriptのaddEventListenerメソッドを使うと特定のイベントが起きるたびに呼び出される関数を設定することができます。第一引数にイベントの種類（今回はクリックイベント）そして、第２引数にイベントが実行されたときに動く関数を設定します。

 

6-4 CSSを操作する

JavaScriptはHTML要素だけでなくCSSも操作することができます。
たとえば押されたら背景色が変わるボタンや画像や要素を回転させたりできます。

実務でもしばしばJavaScriptでCSSを操作するタイミングがあります。ここでマスターしましょう。

「Lesson2_JavaScript」フォルダに新しく「css_operation」フォルダを作成しその中にindex.html を用意し以下のコードをコピーしてください。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript</title>
</head>
<body id="body">
    <input type="button" value="赤" onclick="changeBackgroundColor('#eb4034')">
    <input type="button" value="青" onclick="changeBackgroundColor('#6473f5')">
    <input type="button" value="緑" onclick="changeBackgroundColor('#2bb559')">
    <script>
        function changeBackgroundColor(color){
            document.getElementById('body').style.backgroundColor = color;
        }
    </script>
</body>
</html>

ブラウザで読み込んでみるとボタンが３つ出現するはずです。
自由に押してみてください。ボタンに書かれた色に背景色が変化するはずです。

以下、コードの説明をします。

今回はscriptタグをHTMLの中に記述しました。
JavaScriptではchangeBackgroundColorという関数を作成しています。中身を見てみましょう。

document.getElementById('body').style.backgroundColor = color;この部分の説明をします。

document.getElementById('body')はブラウザの中からbodyというidのついた要素を取得します。今回はこれでbodyタグが取得できています。

そしてstyleプロパティは要素のスタイル(CSS)を設定、取得するために使用します。
これでCSSをいじれるようになりました。

最後にbackgroundColorを指定することで背景色を設定できるようになりました。

さらに今回はaddEventListenerを用いないクリックイベントを利用しています。このことについても説明します。

HTMLのinputタグの中にonclick="changeBackgroundColor('#eb4034')"を記述しています。

タグの中にonclick=””を指定することで要素がクリックされたときに””の中に指定された関数を実行することができます。
流れは以下のとおりです。

ボタンが押される→onclickが発火しchangeBackgroundColorが実行される

また今回は引数に色コードをしているため、たとえば赤のボタンが押されたときは引数が”#eb4034”と設定されておりcolorに代入されます。

そして省略.backgroundColor = color部分で背景色に#eb4034が設定され色が変わります。

以下二つをこのセクションで学びました。

①JavaScriptでCSSを操作するときに用いるstyleプロパティ
②addEventListener以外のクリックイベント

6-5 課題

この章で学んだクリックイベントやCSS操作について自分でコード書いてみましょう。

先ほど作成した「kadai」フォルダ内に新しくJS-kadai6というフォルダを作成しその中にindex.htmlファイルとmain.jsファイルを作成しましょう。

下のindex.htmlをコピーし仕様書に沿ってJavaScriptを作成してください。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript課題</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #333;
            color: #fff;
            text-align: center;
            line-height: 200px;
            font-weight: bold;
            font-size: 30px;
            margin: 20px auto;
        }
        input{
            font-weight: bold;
            font-size: 21px;
            background-color: rgb(234, 249, 255);
            border: #6473f5 solid 5px;
            border-radius: 999px;
            padding: 10px 30px;
        }
    </style>
</head>

<body>
    <div class="test_area">
        <div class="box_wrapper">
            <div id="target" class="box">
                 写真とか
            </div>
        </div>
        <div class="input-area" style="text-align: center;">
            <input type="button" value="右へ90度回転" onclick="">
            <input type="button" value="左へ90度回転" onclick="">
        </div>
    </div>
    <script src="./main.js"></script>
</body>

</html>

【　仕様書　】

① onclick or addEventListenerどちらかを使う

② 90度回転ボタンが押されたら「写真とか」の黒正方形が回転するようにする

③ 回転に関するCSSは「CSS transform」で検索し自分で調べる

④ 関数名についても自分で命名を考える

  • 以下を参考にしてください！

    // degreeの初期値
let degree = 0;

function changeDeg(x) {
		//　target要素を取得する
    let target = ;
		//　現在の角度に引数で得た角度を足しdegreeに再代入する
    degree  = ;
		//　角度をCSSに追加する
    target = "rotate(" + + "deg)";
}

      target.style.transform = "rotate(" + degree + "deg)";

7 DOM

7-1 DOMとは？

「Document Object Model」の略で、Web上の文書のコンテンツと構造からなるオブジェクトのデータ表現です。
もう少し噛み砕いて説明すると、JavaScriptを用いてHTMLの要素を操作するための仕組みです。
DOMを利用することで、特定の目印を付けているHTMLの要素に対して、「こういう事をしたい」という処理が可能となります。

これまで学んできたように、HTMLは階層構造で記述を行います。 DOMも同様に、オブジェクトが以下のような階層構造を取ります。

ツリーを構成する個々の要素のことを「ノード」といいます。 ノードは「オブジェクト指向言語におけるオブジェクト」と同様に、それぞれ「メソッド」「プロパティ」といった属性を持っています。

また、階層構造の上位に位置するノードを「親ノード」、親ノードの下位に属するノードを「子ノード」と呼びます。

7-3 documentオブジェクトについて

6-1で利用したdocument.getElementById('hello').value;を再び解説します。

「document」とは、DOMの最上位に位置するノードとなります。 documentノードはgetElementById()というメソッドを有しており、文書内に存在するid プロパティが指定された文字列に一致する要素を返却します。

getElementById()はdocument オブジェクトに対してのみ利用可能で、他のノードのオブジェクトのメソッドとしては利用できません。

このように、階層を構成するノードはオブジェクトであり、それぞれがその種類に応じたプロパティや操作を公開しています。

7-4 DOM操作の例

それでは、いくつか具体的な例を見てみましょう。 「Lesson2_JavaScript」フォルダに新しく「dom」フォルダを作成し、その中にindex.html を用意し以下のコードをコピーしてください。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript</title>
</head>
<body>
    <input type="text" name="input_name"></input>
    <input type="button" id="button" value="押してみて！">
    <ul class="list_class" type="circle">
        <li>listA</li>
        <li>listB</li>
        <li>listC</li>
    </ul>
    <script src="./main.js"></script>
</body>
</html>

main.js

var button = document.getElementById('button');

button.addEventListener('click', () => {
    // ①セレクターを指定して要素を取得：querySelector()
    var input_name = document.querySelector("input[name='input_name']");
    console.log(input_name.value);

    // ②子要素を取得
    var list = document.querySelector('ul');
    var child_nodes_count = list.childElementCount; // 子要素の数を取得
    for(var i = 0; i < child_nodes_count; i++) {
        console.log(list.children[i].textContent);
    }

    // ③子要素を追加：appendChild()
    var li = document.createElement('li')
    li.textContent = 'listD';
    list.appendChild(li);

    // ④属性値の取得と更新：getAttribute()/setAttribute()
    var button = document.getElementById('button');
    var button_value = button.getAttribute('value');
    console.log(button_value);
    button.setAttribute('value', 'click me!');
});

よく使われるメソッドを紹介します。

①セレクターを指定して要素を取得：querySelector()

指定されたセレクターまたはセレクター群に一致する、文書内の最初の要素を返します。 セレクターとは、任意のエレメントをDOMから選び出すための書式です。 例では「input_name」というname属性があるinput要素を指定しています。 セレクターの詳細はLesson4のjQueryの講座で説明します。

②子要素の取得

querySelector()で取得した要素に含まれる子要素を取得しています。 list.childrenに子要素が配列で格納されているので、for分を用いてループして1件ずつ出力しています。

③子要素を追加：appendChild()

ulタグに新しく「listD」のliタグを追加しています。 appendChile()は子要素の最後尾に追加するメソッドとなります。

④属性値の取得と更新：getAttribute() / setAttribute()

button タグのvalue 属性を取得、更新しています。 今回はボタンをクリックすることで、ボタンの表記を更新しています。 value 属性以外にも使用することができるメソッドです。

7-5 課題

DOMの操作に使用するメソッドは、本講座で取り上げたメソッド以外にも数多く存在します。

7-4で使用したHTMLとJavaScriptに対して、ボタンをクリックした際に以下の操作を行うために必要なメソッドを調べて、実装してみてください。

  1. リストの白丸アイコンを、四角アイコンに変更する ※Document.getElementsByClassName()を使用
  2. リストの「listC」を削除する
  3. リストの上に、赤文字で「リスト一覧」と書かれたpタグを追加する
  4. input要素に入力された内容を、リストの一番上に追加する

8 フォーム

8-1 フォームについて学ぶ

フォームでのデータ受け取り方はすでに学んだ技術で実装することができます。
実際に試してみましょう。

以下のコードをコピー&ペーストして実行してみましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
  </head>
  <body>
    お名前 <input type="text" id="name">
    <button type="button" id="button">名前を入力してクリック</button>
    <div id="box"></div>
    <script>
			const button = document.getElementById('button');
			const input = document.getElementById('name');
			const box = document.getElementById('box');

			button.addEventListener('click', () => {
			  const name = input.value;
			  box.textContent = `こんにちは、${name}さん`;
			});
		</script>
  </body>
</html>

要素の取得、クリックイベント、HTML要素を差し込み、文字列の中で変数を扱う という今までやってきた内容でフォームの値が取得できています。

詳しく説明します。

addEventListenerでボタンがクリックされたときに動く関数を定義しています。関数の中にinputのvalueを取得する処理を記述しフォームの要素を取得しています。
最後にtextContentで取得したvalueをHTMLに表示しています。

以上がフォームからデータを受け取る方法です。

8-2 課題

電卓を作成してみましょう！

「kadai」フォルダの中にJS-kadai7という名のフォルダを作成しindex.html と main.jsを作成しindex.htmlをコピペしましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Kadai</title>
  </head>
  <body>
    <div>
      <input type="text" id="num1">
      <input type="text" id="num2">
    </div>
    <button type="button" id="button-add">+</button>
    <button type="button" id="button-sub">-</button>
    <button type="button" id="button-mul">*</button>
    <button type="button" id="button-div">/</button>
    <div id="box"></div>
    <script src="main.js"></script>
  </body>
</html>

【　仕様書　】

①　フォームから値を受け取りボタンにあった計算結果をid=”box”のdivタグの中に表示させてください。

②　読みやすいコードを意識してください。

③　関数を用いてください。

④　7 ÷ 0など計算できない値は「正しい値を入力してください」とHTMLに差し込んでください。

9 最終課題

9-1 複数のエラー、間違いを解決しよう

Consoleに出力されているエラーをすべて解消し、フォームに名前を入力しアラートを出すボタンを押すと「私の名前は○○です。」とアラートで表示されるようにしましょう。

エラー、間違いは合計で５つ存在します。

コードをよく見てJavaScriptの文法や規則を今一度確認しましょう。

また、Consoleにエラーが出ていなくても正常に動かない場合があります。どこかがまだ間違っているのでしっかりとコードを見直しましょう。

「kadai」フォルダ内にJS-kadai-final1というフォルダを作成しその中にindex.htmlとmain.jsを作成し以下コードをコピペしましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript｜最終課題その１</title>
</head>
<body>
    <input type="text" id="text">
    <input type="submit" id="submit" value="アラートに出す">
    <script src="./main.js"></script>
</body>
</html>

main.js

const submit = document.getElementById('text');

submit.addEventListener('click', () => {
    const name = document.getElementById('text').value

    alertMessage();

    const alertMessage = function(){
        alert('私の名前は${name}です。');
    }
)

正解の画像はこちら

9-2 配列をさらに深く理解しよう

フォームに入力されたハイフン付きの電話番号を取得しハイフンを取り除いた後、１つずつ配列に格納してください。

例）

012-3456-7899と入力されたら[‘0’, ‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’, ‘8’, ‘9’, ‘9’]と配列に格納される。

【　仕様書　】

①　確かめるボタンが押されたらConsoleに配列が表示されるようにしてください。

②　フォームには012-3456-7899を入力してください。Consoleに[‘0’, ‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’, ‘8’, ‘9’, ‘9’]が表示されたら正解です。

③　split()は使用せず繰り返し処理を用いてください。

「kadai」フォルダ内にJS-kadai-final2という名のフォルダを作成しindex.html と main.jsファイルを追加しindex.htmlをコピペしてください。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript｜最終課題その２</title>
</head>
<body>
    <input type="text" id="tel">
    <button id="confirm-btn">確かめる！</button>
    <script src="./main.js"></script>
</body>
</html>

以上で終わりです！お疲れさまでした！

投稿日

カテゴリー:

投稿者:

prodemia-admin-user

タグ:

コメント

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です