JavaScript 初心者向け

ここに記載されているコードは単体で動くようになっているのでイメージが湧かない場合は動かしてみてください。

HTMLでの読み込み

HTML上で動かす場合

sample.html

<script type = "text/javascript">
// ここにコードを書く
</script>

外部ファイルとして読み込む

sample.html

<script src="JavaScriptのファイルパス"></script>

コメントアウト

sample.js

1行の時
// これは例です

複数行の時
/*
これは例です
これは例です
*/

コンソールに出力

主にデバックで使用します。

sample.js

console.log('Hello World');
console.log("Hello World");

//文字列は、シングルorダブルクォーテーションで囲む

ダイアログ

sample.js

alert("Hello World!!"); 

数値と文字列の出力

sample.js

console.log(5 + 3); // 出力結果：8
console.log(5 - 3); // 出力結果：2
console.log(4 * 2); // 出力結果：8
console.log(4 / 2); // 出力結果：2
console.log(9 % 2); // 出力結果：1 ※余りの計算
console.log("5 + 3"); // 出力結果：5 + 3
console.log("5" + "3"); // 出力結果：53
console.log("あい" + "うえお"); // 出力結果：あいうえお
console.log("A" + "B" + "C"); // 出力結果：ABC

計算式の省略

sample.js

省略前       省略後
x = x + 1   x += 1
x = x - 1   x -= 1
x = x * 1   x *= 1
x = x / 1   x /= 1
x = x % 1   x %= 1

変数

変数とはプログラミング言語における値を入れておく箱のこと
変数名にはルールがあり「数字開始・アンダーバー・ローマ字・日本語」は、エラーが出るのでNG

sample.js

const name = "tanaka"; // 変数名はtanaka
console.log(name); // 出力結果：tanaka
/*--------------------------------------------------*/
const name = "tanaka";
console.log(name + tarou); // 出力結果：tanakatarou
/*--------------------------------------------------*/
const x = 1 + 100;
alert(x); // 出力結果：101

変数の種類

変数にはvar、let、constがあり現場で使用するのはlet、constを使う

const

再代入できない変数。

sample.js

const name = "yamada";
name = "tanaka";
console.log(name) // エラーになる

let

再代入できる変数。

sample.js

let name = "yamada";
name = "tanaka";
console.log(name) // 出力結果:tanaka

真偽値

「true（真）」と「false（偽）」2つの値のこと

sample.js

a === b // aとbが等しければtrue
a !== b // aとbが等しくなければtrue
a < b   // aの方がbより小さいときtrue
a <= b  // aの方がbより小さいまたは等しいときtrue
/*--------------------------------------------------*/
&& = かつ

xが2のとき
x > 1 && x < 3 //複数の条件がすべて真だからtrue
/*--------------------------------------------------*/
|| = または

xが2のとき
x < 1 && x < 3 //複数の条件のうち1つでも真だからtrue

条件分岐

if文を用いると「もし○○ならば○○を行う」という条件分岐が可能になる。elseは「もし○○なら○○を行う、そうでなければxxを行う」という処理ができるようになる。elseは日本語で「別の方法で、他に」の意味を持つ

if文

sample.js

if (条件式) {
    処理 // 条件式がtrueのとき実行
} else {
    処理 // 条件式がfalseのとき実行
}
/*--------------------------------------------------*/
const name = "yamada"
if (name === "yamada") {
    console.log("yamadaです") // 条件式がtrueのとき実行
} else if (name === "tanaka") {
    console.log("tanakaです") // 条件式1がfalseで、条件式2がtrueのとき実行
} else {
    console.log("yamadaでもtanakaでもないです") // 条件式1と2両方ともfalseのとき実行
}

switch文

sample.js

switch (対象) {
    case 値１: // 式の結果が値1に等しい場合に実行
        break;
    case 値2: // 式の結果が値2に等しい場合に実行
        break;
    default: // 式の結果がどれにも該当しない場合に実行
        処理
}
/*--------------------------------------------------*/
const food = "チョコレート"; // food === "チョコレート"のとき
switch (food) {
    case "チョコレート":
        console.log("チョコレートは食べ物です"); // 実行される
        break;
    case "コーラ":
        console.log("コーラは飲み物です");　 // 実行さない
        break;
    default:
        console.log("食べ物でも飲み物でもありません");
}

// bleakがあるのでswitch文を抜ける
// bleakがないと他のcase内の処理も実行される

繰り返し処理

繰り返し処理とは、一定の処理を自動で繰り返し行う処理のこと。JSでループ（繰り返し）処理をおこなうときは、while文とfor文の2種類がある。

while文

sample.js

while (条件式) {
    処理
}
/*--------------------------------------------------*/
let x = 1; // 変数の定義
while (x <= 5) { // 条件（条件式の真偽が判定される）
    console.log(x); // 繰り返す処理(条件式がtrueのとき処理が実行、falseのとき繰り返しが終了)
    x = x + 1; // 変数の更新（変数の値が更新され、再び条件に戻る）
}

for文

sample.js

for(変数の定義;条件式;変数の更新){
 処理
}
/*--------------------------------------------------*/
for (let x = 1; x <= 1; x += 1) {
    console.log(x); // 条件式がtrue（真）になるまで出力する
}

配列

配列を使うと複数の値をまとめて書くことができる。

sample.js

// 例えば、名前の値がいくつもある場合、配列を使うとシンプルになる
let name01 = "tanaka";
let name02 = "sasaki";
let name03 = "yamada";

// 配列の出力
let name1 = ["tanaka", "sasaki", "yamada"]
console.log(name1);

// 配列の要素を取り出す(インデックス番号：「0=tanaka」「1=satou」「2=yamada」)
let name2 = ["tanaka", "sasaki", "yamada"]
console.log(name2[0]); // 出力結果：tanaka

lengthメソッド

sample.js

const name = ["tanaka", "sasaki", "yamada"]
console.log(name.length); //出力結果：3

pushメソッド

sample.js

const name = ["tanaka","sasaki","yamada"]
name.push("suzuki")
console.log(name); // 出力結果：tanaka,sasaki,yamada,suzuki

連想配列

配列は複数の値を並べて管理するのに対して、連想配列はそれぞれの値にキーと呼ばれる名前をつけて管理する。

sample.js

[値1, 値2] // 配列
{
    キー1: 値1,
    キー2: 値2,
} // 連想配列
/*--------------------------------------------------*/
let fruit = {
    "name": "banana",
    "color": "yellow",
};
console.log(fruit.name); // 出力結果：banana
console.log(fruit.color); // 出力結果:yellow

アロー関数

関数とは、ある処理をまとめたプログラムのこと。同じ処理をまとめて定義し、何度も使い回しができるかたちにしたもの。

sample.js

const hello = () => {       // hello　= 関数名
    console.log("こんにちは")  // console.log("こんにちは") = 実行される処理
}
hello(); // 出力結果：こんにちは

引数

引数(ひきすう)とは関数に与える追加情報のようなもの。関数を呼び出すときに一緒に引数を渡すことで、関数の中でその値を利用することができる。

sample.js

const 関数名 = (引数名) => {
    処理
}
関数名(値); // 関数の呼び出し
/*--------------------------------------------------*/
const introduce = (name) => {
    console.log(name);
}
introduce("tanaka"); // 出力結果：tanaka
/*--------------------------------------------------*/
const introduce = (name, age) => {
    console.log("名前は" + name + "です");
    console.log(age + "歳です");
}
introduce("田中", 20); // 出力結果：名前はtanakaです。20歳です。

戻り値

関数の処理結果を呼び出し元で受け取る方法。呼び出し元で受け取る処理結果を戻り値と呼び、このことを「関数が戻り値を返す」と言う。

sample.js

const 関数名 = () =>  {
    return 値; // 「return 値」と書くことで、関数はその値を戻り値として返す。
}
/*--------------------------------------------------*/
const add = (a, b) => {
    return a + b;
}
sun = add(1, 3)   // 呼び出し部分
console.log(sun); // 結果４

DOM取得

DOMとは「Document Object Model」の略。直訳すると、「ドキュメントを物として扱うモデル」になる。プログラムからHTMLやXMLを自由に操作するための仕組み

sample.html

<input type="text" id="text_area">

sample.js

const textArea = document.getElementById("text_area")
console.log(textArea) // 出力結果:<input type="text" id="text_area">

値（value）を取得

sample.html

<input type="text" id="text_area" value="banana">

sample.js

const textArea = document.getElementById("text_area")
console.log(textArea.value) // 出力結果:banana

入力した値（value）を取得

sample.html

<input type="text" id="text_area">
<button id="send_button">送信</button>

sample.js

const textArea = document.getElementById("text_area") // inputタグのDOMを取得
const sendButton = document.getElementById("send_button") // buttonタグのDOMを取得

sendButton.addEventListener('click', () => {
    console.log(textArea.value) // 出力結果:入力された値
})