Open10

JS学習:Udemy 【JavaScript＆CSS】ガチで学びたい人のためのWEB開発実践入門（フロントエンド編）

そーみそーみ
  • JSで変数を定義するときは、「var,let,const」といった演算子を使用する
let name1 = 'Tom';
name1 = 'Tim'; //上書きができる
console.log('hello' + name1);

const name2 = 'Tom';
name2 = 'Tim'; //エラーとなる
console.log('hello' + name2);
  • var,letを使用した場合は、後から上書きをすることが可能だが、
  • constを使用した場合は後から上書きをすることはできない
  • 元々変数はvarだけだったが、JSのアップデートにより、letとconstができた
  • そのため、現在ではvarではなくletとconstの使用が推奨されている
そーみそーみ
  • データ型
  1. Number(数値)
  2. String(文字列)
  3. Boolean(真偽)
  4. Undefined(未定義)
  5. Null(空のオブジェクト)
  6. Symbol(JSのプリミティブ値(プロパティやメソッドを持たない値)の一つ。同じ値を作ることはできない？)
  • jsは動的型付け言語。変数に格納された値によって変数のデータ型が決まる
let variable = 'str';
console.log(typeof variable);
variable = 123;
console.log(typeof variable);
variable = true;
console.log(typeof variable);
variable = undefined;
console.log(typeof variable);
  • 静的型付け言語。宣言するときに変数の型を決定する
  • int num = 12;
  • numという変数は整数しか扱うことができない
そーみそーみ
  • 関数定義について
    なぜ関数を使うのか
    コンソールに名前を表示したい場合は、文字列をメソッド内に記述する
console.log('hello name');

この時、名前を動的に変えたいとする

  • 変数
let name1 = 'suzuki';
console.log('hello ' + name1);

この時、名前を一つだけでなく沢山の異なる名前を出力したい場合、毎回変数を記述するのは手間になる上にエラーの原因となる可能性がある
そこで関数を使用する

function hello(name1) {
  // let name1 = 'suzuki'; 変数名を引数に入れる
  //name1に値を渡すことでコンソールに違う名前を出力することができる
  console.log('hello ' + name1);
}
  • 関数を実行
hello('tanaka');
hello('satou');
hello('ichikawa');

関数を実行するときに引数()に値を入れると値が変数に格納され、値として使用できるようになる

そーみそーみ

引数は複数渡すこともできる

function hello(name1, age1) {
  console.log('hello ' + name1 + ', ' + age1);
}
hello('tanaka', 21);
hello('satou', 30);
hello('ichikawa', 17);
そーみそーみ

関数にはreturnという演算子が使用できる
関数の中でreturnの後に関数が実行された結果を実行元に返却することができる

function hello2(name1, age1) {
  return name1 + ', ' + age1; //hello2()に実行された結果「name1 + ', ' + age1」を返却する
}

返却される値を戻り値という

const returnValue = hello2('tanaka', 30); //変数に代入し、引数に値を入れる
console.log('hello ' + returnValue); //returnValueには値が入れられた戻り値(引数)の「name1 + ', ' + age1」が代入されている

returnは必須ではないが、戻り値を使って関数内の処理で別な処理を行うことができる
returnがない場合は関数内の処理を呼び出すことのみとなる
また、関数内に外で呼び出せる式がない場合、returnがないと値が返ってこない

function num1(a, b, c) {
  // console.log(a + b + c);
  a + b + c;
}
console.log(num1(1, 2, 3)); //undefined
console.log(num1(4, 5, 6)); //undefined
const total1 = num1(1, 2, 3) + num1(4, 5, 6);
console.log(total1); //NaN

function num2(a, b, c) {
  // console.log(a + b + c);
  return a + b + c;
}
console.log(num2(1, 2, 3)); //6
console.log(num2(4, 5, 6)); //15
const total2 = num2(1, 2, 3) + num2(4, 5, 6);
console.log(total2); //21
そーみそーみ

function以外での関数の呼び出し方法

  • 変数に代入(無名関数)
const hello3 = function (name1, age1) {
  console.log('hello ' + name1 + ', ' + age1);
}
hello3('tanaka', 21);
そーみそーみ
  • プロパティ
let hello = 'hello world1';
console.log(hello); //helloを表示される
console.log(hello.length); //lengthというプロパティを使用すると文字数だけ取得できる

変数を設定した時点で、プロパティという名前の領域が与えられる
名前の記法はドット記法(.~)で記述することで、変数に格納されているプロパティに関わる値を取得することができる

そーみそーみ
  • メソッド
let hello2 = 'hello world';
console.log(hello2);
console.log(hello2.toUpperCase()); //全て大文字で出力される
console.log(hello2.substring(0, 5)); //文字列を配列として0番目から数えて5文字目までを表示するメソッド
console.log(hello2.slice(0, 5)); //substring()と同じような機能を持つ
console.log(hello2.split('')); //文字を分割するメソッド。「''」だと全ての文字が一文字ずつ分割され、「' '」とすると半角スペースが空いている箇所で分割される

ブラウザにあらかじめ登録されている特定の処理をメソッド(ネイティブのメソッド)と呼ぶ
上記の場合は文字列のオブジェクトに対するメソッドとして使用されている
あらかじめ登録されているメソッドだけでなく、独自で定義することができるメソッドも存在する