sksk000

Tags

2 minute read

学んだこと

テンプレート文字列

従来では

  • 文字列結合するときは、+を使って結合を行っていた。
    • 結構面倒・・。
const name = 'User';
const age = 20;

const message = '私の名前は' + name + 'です。年齢は' + age + 'です。';
console.log(message);

現在では

  • ｀を利用し、文字列の結合を行う。
    • 変数の値を使いたい場合は${変数名}で、変数の値を出力することができる。
    • 先ほどの+で結合するやり方と異なり、書きやすく記述もスッキリしている。
const name = 'User';
const age = 20;

const message = `私の名前は${name}です年齢は${age}です。`;
console.log(message);

アロー関数

従来では

  • 以下の様に、関数をただ呼び出している。
function func(str) {
  return str;
}

console.log(func('func'));

現在では

  • アロー関数を用いて関数定義を行う。
    • const func = (引数,引数,...) => {関数の処理}で定義する。
    • 引数が 1 つしかない場合は引数のカッコを省略することができる。
      • const func = str =>{関数の処理}
      • プロジェクトでカッコを書くかどうかを統一しておくと、見やすい。
    • 戻り値のみ記述する場合、カッコと return 文を省略して書くことができる。
      • const func = str => str
    • オブジェクトを戻り値で返す場合、一行でまとめて記述することができる。
      • const func = (val1,val2) =>({hoge: "hogehoge", huga: "hugahuga"})
const func = (str) => {
  return str;
};

console.log(func('func'));

分割代入

従来では

  • 度々、オブジェクト.プロパティと書くため、オブジェクト名やプロパティ名が長ければ長いほど書くのが面倒。
const myprofile = {
  name: 'User',
  age: 20,
};

const message = `名前は${myprofile.name}です。年齢は${myprofile.age}です。`;
console.log(message);
// 名前はUserです。年齢は20です。

現在では

  • オブジェクト宣言後、const {オブジェクトのプロパティ,...} = オブジェクト名を行う
  • 定義後はオブジェクト名.プロパティ名ではなくプロパティ名だけで呼び出す事ができる。
const myprofile = {
  name: 'User',
  age: 20,
};

const { name, age } = myprofile;
const message = `名前は${name}です。年齢は${age}です。`;
console.log(message);
// 名前はUserです。年齢は20です。
  • 配列の場合も分割代入を行うことができる。
    • const [任意の変数名, ...] = 配列名 で配列に格納されているデータを取得することができる。
const myprofile = ['User', 20];
const [name, age] = myprofile;
const message = `名前は${name}です。年齢は${age}です。`;
console.log(message);
// 名前はUserです。年齢は20です。

デフォルト値

  • 関数宣言時に引数にデフォルト値を設定しない場合
    • 関数を呼び出し時に引数を設定しないと、引数には Undifind が設定されている。
    • 以下の様に関数宣言時に引数にデフォルト値を入れておくことで、関数呼び出し時に引数を設定せずともデフォルト値のままになる。
const sayHello = (name = 'ゲスト') => console.log(`こんにちは！${name}さん`);
sayHello();
// こんにちは！ゲストさん
  • 以下の様にデフォルト値を設定することも可能
const myprofile = {
  age: 20,
};
// 新しくオブジェクトにプロパティを宣言し、デフォルト値を設定する。
const { age, name = 'ゲスト' } = myprofile;
console.log(age);
console.log(name);
// 20
// ゲスト

三項演算子

  • React では頻繁に使用する。
  • 条件: trueの処理 : falseの処理で記述する。
const val = 1 > 0 ? 'true' : 'false';
console.log(val);
// この場合、trueと出力される。
  • 実際に入力している値が数値か文字列か判断する際に、三項演算子を使用してみる。
const num = '1300';
const formattednum =
  typeof num === 'number' ? num.toLocaleString() : '数値を入力してください';
console.log(formattednum);
// 数値であれば、コンマ区切りで数値を出力し、数値ではない場合は「数値を入力してください」と出力される。
  • 合計値が 100 超えているか超えていないかかの処理を三項演算子使って書いてみる
const checksum = (num1, num2) => {
  return num1 + num2 > 100 ? '100を超えています' : '許容範囲内です';
};

console.log(checksum(60, 50));
// 100を超えていますと出力された。

論理演算子の本当の意味を知る

truthy,falsy とは

  • javascript では、真偽値でなくとも if の対象にすることができる。
  • true のような値であれば truthy、false のような値であれば falsy という。
  • "ABC" 0 10 undifined null false NaN "" [] {}が truthy なのか falsy なのか理解するべき。
const val = 'ABC';
if (val) {
  console.log('valはtruthy');
} else {
  console.log('valはfalsy');
}
// この場合はvalはtruthyと出力される。

論理演算子

  • 下記の書き方は、通常通り論理演算を行い結果を出力する。
const flg1 = true;
const flg2 = false;
if (flg1 || flg2) {
  console.log('1か2はtrueになります');
}
if (flg1 && flg2) {
  console.log('1も2もtrueになります');
}

// この場合は1か2はtrueになりますが出力される。
  •   は左側が truthy のときその時点で返却する
    • falsy の場合は右側の値が返却される。
const num = 100;
const fee = num || '金額未設定です';
console.log(fee);

// 100と出力される。

const num = undefined;
const fee = num || '金額未設定です';
console.log(fee);

// 金額未設定ですと出力される。
  • &&は左側が falsy の場合はその時点で返却する。
    • truthy の場合は、右側が返却される。
const num = null;
const fee = num && 'なにか設定されました';
console.log(fee);
// なにか出力されましたと出力される。

const num = 100;
const fee = num && 'なにか設定されました';
console.log(fee);
// 100と出力される。

You May Also Enjoy