LoginSignup
25
26

More than 1 year has passed since last update.

@dende-h(HIROYA SHITOGIDEN)

モダンJavaScript基本構文をまとめ（前半）

Last updated at Posted at 2021-10-25

モダンJavaScript基本構文をまとめ（前半）

講座で出た構文をcodesandboxで試したので、その内容のまとめ。

変数宣言

constとletでの変数宣言

今まで使われていたvarを使った変数宣言は、再宣言や再代入が可能だったため、意図せず変数を書き換えてしまいバグの温床となることがあった。

そこで新たにconstとletという変数宣言のコードが追加された。

  • letを用いた場合・・・（１）
    • 再宣言は不可だが、再代入は可能
    • 書き換える必要がある処理の際にはletを利用する
  • constを用いた場合・・・（２）
    • 再宣言、再代入ともに不可
    • そのため現在はほとんどconstで宣言をする
    • 配列やオブジェクトのプロパティを変更することは可能・・・（3）

確かにconstだけで大体良さそう。。。

/**
 * 変数宣言　varの場合、再宣言可能、再代入可能
 */
var food = "soba";
console.log(food); //soba

var food = "udon"; //再宣言可能
console.log(food); //udon

food = "somen"; //再代入可能
console.log(food); //somen

/**
 * 変数宣言　letの場合、再宣言不可、再代入可能・・・（1）
 */
let age = 34;
console.log(age); //34
//let age = "34歳"；
//エラー　再宣言不可

age = 35; //再代入可能
console.log(age); //35

/**
 * 変数宣言　constの場合、再宣言不可、再代入不可・・・（2）
 */
const address = "山梨";
console.log(address);

//const address = "静岡";
//エラー　再宣言不可

////address = "東京";
//エラー　再代入不可

/**
 * 配列やオブジェクトの場合constでも中身の変更は可能・・・（3）
 */
const introduction = [name, age, address];
console.log(introduction);
introduction[0] = "dende"; //[dende,"35","山梨"]
//配列の中身は変更可能

const myHobby = {
  sports: "capoeira",
  book: "少年ジャンプ",
  anime: "氷菓"
};
console.log(myHobby);
myHobby.anime = "新世界より"; //{sports: "capoeira", book: "少年ジャンプ", anime: "新世界より"}
//オブジェクトの中身も変更可能

//以上の動きから、メインで使う変数の宣言はconstとなる
//変更の必要があるものだけletで宣言となり、varはほぼ使わない

関数宣言、アロー関数、テンプレート文字列

＝＞が出てきたらアロー関数

従来の関数宣言ではfunctionが使われていた・・・（4）

アロー関数は「＝＞」を使って関数を宣言する。記号が矢印のように見えるためアロー関数と名付けられた。

(引数)　 = > 　｛　処理内容　｝の形で記述する・・・（5）

処理内容が一行で完結する場合、{ }とreturnを省略することができる・・・（6）

引数が一つの場合引数を囲む（）も省略できる・・・（7）

コードの冗長化を防ぎ短く記述できるが、上記の法則を知らないと読むのが難しい。

テンプレート文字列・・・（8）

従来文字列の結合では"A"+"B"という形で記述していた。

テンプレート文字列は文字列の中に${ ”ここにJavaScriptで記述する”}とすることで、+記号を使わずに文字列の結合をすることができる。

/**
 * 関数の宣言、実行(アロー関数の記法)
 * テンプレート文字列
 */

//以前の関数宣言の記述・・・（4）
const selfIntroduction = function greeting() {
  return `オス、おらの名めぇは${introduction[0]}ってんだ。得意技は${myHobby.sports}だ!`;
};
console.log(selfIntroduction()); 
//オス、おらの名めぇはdendeってんだ。得意技はcapoeiraだ!

******************************************************

//アロー関数の記述・・・（5）
    const selfIntroduction1 = () => {     //「=>」が矢印のように見えるのでアロー関数
  return `歳は今年で${introduction[1]}せぇだ。
            おすすめのアニメは${myHobby.anime}っちゅうぞ。おもしれぇからぜってぇ観てくれよな`;
};
console.log(selfIntroduction1()); 
//歳は今年で35せぇだ。おすすめのアニメは新世界よりっちゅうぞ。おもしれぇからぜってぇ観てくれよな

******************************************************

//{}内の処理が1行(1塊)で終わる場合は｛　｝とreturnを省略できる・・・（6）
const selfIntroduction2 = () =>
  `${introduction[2]}って山奥に住んでっぞ。${myHobby.book}は6年めぇから購読してっぞ！`;
console.log(selfIntroduction2());
//山梨って山奥に住んでっぞ。少年ジャンプは6年めぇから購読してっぞ！

******************************************************
//引数が一つの場合（）も省略できる・・・（7）
const comics = comic => `今のお勧めは${comic}だ！`;
console.log(comics("ドクターストーン"));
//今のお勧めはドクターストーンだ！

******************************************************

/**
 *テンプレート文字列について・・・（8）
 *
 *${}の中にはjavaScriptとして認識される。配列やオブジェクトにアクセスすることができる。
 *上記例では配列の中身や、オブジェクトのプロパティを取り出して、文字列と結合している。
 *従来の"A"+"B"で結合するより可読性が高い。
 */

四則演算

「++」「—」を使う際には、先に記述する場合と後に記述する場合で評価順が違うので、使用の際は注意。・・・（9）

前後の記述で出力内容が変わるのが普通に間違えそうで使いにくそう。

/**
 * 四則演算
 */
let add = 1 + 1; //足し算
let sub = 4 - 1; //引き算
const mul = 7 * 1; //かけ算
const div = 11 / 1; //割り算
const sur = 13 % 14; //除算の余り

const prime = [add, sub, mul, div, sur];
console.log(prime);

//1を足す・・・（9）
console.log(add++); //2　＋＋はまだ評価されていない
console.log(add); //3　前述の＋＋が反映されている
console.log(++add); //4　＋＋が評価された結果が反映される

//前に「++」をつけるか、後につけるかで出力結果が変わる。
//後につけた場合は評価されてからプラスされるので評価順に注意
//後述の減算についても同様

//1を引く
console.log(sub--);　//3
console.log(sub);　//2　
console.log(--sub);　//1

比較演算

if文などの分岐の際などに、trueとfalseの判定などで使用する。

「A==B」・・・文字列と数値であっても同じと見なされる・・・（10）

「A===B」・・・文字列と数値を厳密に区別して評価される・・・（11）

「! =」「! ==」の場合も同様・・・（12）（13）

基本は厳密評価を使う。Javaでは見たことないので間違えないよう注意。

/**
 * 比較演算(==と===、!=と!==の違い)
 */
const str2 = "2";

//「==」だと数値を文字列であっても同じだと評価される・・・（10）
if (add == str2) {
  console.log("trueです");
}

//「===」だと数値と文字列は違うものと区別される・・・（11）
if (add === str2) {
  console.log("trueです");
} else {
  console.log("trueではありません");
}

//「!=」だと数値を文字列であっても同じだと評価される・・・（12）
if (add != str2) {
  console.log("trueです");
} else {
  console.log("trueではありません");
}

//「!==」だと数値と文字列は違うものと区別される・・・（13）
if (add !== str2) {
  console.log("falseです");
} else {
  console.log("falseではありません");
}

//「!」は論理演算子として評価の結果を反転する意味を持つ
//大小比較は「＞」「＞＝」「＜」「＜＝」を使い評価する

論理演算

「＆＆」複数の理論式を使う際、「AかつB」の意味で使われる

「｜｜」こちらは「AまたはB」の意味で使われる

実際の処理は

  • ＆＆
    • 左側がtrueの場合右側を返し、falseの場合左側を返す・・・（14）
  • ｜｜
    • 右側がfalseの場合左側を返し、trueの場合右側を返す・・・（15）

単純に「かつ」「または」の意味で使われると思っていたので、上記のような使い方ができるのは知らなかった。○○の時は表示。○○の時は非表示のような処理ができそう。

三項演算子

  • A ? B : C
    • Aがtrueの場合Bを評価、falseの場合Cを評価する・・・（16）
    • 関数を入れても動作をしたので、2択の分岐ならif文やswitch文より簡単かも。
/**
 * 論理演算(&& || ! ? :)
 */

const trueFlag = true;
const falseFlag = false;

if (trueFlag && falseFlag) {
  console.log("じっこうされない");
} else {
  console.log("実行される"); //こちらが出力される
}

//「&&」は左側がtrueの場合右側を評価する・・・（14）
trueFlag && console.log("実行される");

if (trueFlag || falseFlag) {
  console.log("じっこうされない?"); //こちらが出力される
} else {
  console.log("実行される?");
}

//「||」は左側がfalseの場合右側を評価する・・・（15）
falseFlag || console.log("実行された");

/**
 *三項演算子
 */

//Ａ？Ｂ：Ｃ
//Ａがtrue判定ならＢを、false判定ならＣを返す・・・（16）

const case1 = trueFlag ? "truedeth" : "falsedeth";
console.log(case1); //truedeth

const case2 = falseFlag ? "trueデス" : "falseデス";
console.log(case2); //falseデス

truthyとfalsy

JavaScriptにおいて真偽値以外でも、暗黙的に真偽値に変化して評価される。

trueとして評価されるものをtruthy、falseとして評価されるものをfalsyと呼ぶ。

どちらにも属さないものは存在せず、falsy以外はすべてtruthyとなる。

falsyとして評価される値

falcy.png

/**
*truthyとfalsy
*/

//真偽値以外のtrue/false判定
//暗黙的に真偽値に変化して評価される

const val = "ABC";・・・（）

if (val) {
console.log("truthy");　//truthyと出力
}

//暗黙的にfalseと扱われるものをfalsyといい、それ以外をtruthyという
//どちらにも属さないというものは存在しない。
```

switch文

Reactではif文より使うそう。caseの後の「：」が「；」になっていてエラーになった。間違えやすいので注意。breakも忘れないように。それ以外は分かりやすい。

/**
 * switch文
 */
const calc = age + age;

switch (calc) {
  case 69:
    console.log("間違いです"); //実行されない
    break;
  case 70:
    console.log("正解です"); //ここが実行される
    break;
  default:
    console.log("ここは実行されません");
    break;
}

//caseごとに「：」で区切る
//breakを書き忘れると全てのコードが実行されてしまう
//fefaultは一致しない場合の処理をかく

（後半はこちら）=>｛https://qiita.com/dende-h/items/87094c8f3d5e8a8107d0｝

25
26
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
25
26