モダンJavaScriptについて

モダンJavaScript

仮想DOMを用いるライブラリの使用

DOMとは

• Document Object Modelの略
• HTMLなどの文書をツリー構造として表現したもの
• コード上から文書の構造を読んだり、要素を変更することが可能。

仮想DOM

• DOMを直接操作せず、JS上で仮想DOMを操作し、差分のみDOMに反映する
• パフォーマンスの向上につながる

パッケージマネージャー(npm/yarn)の使用

• ソフトウェアのインストール、更新、設定、削除などを予め定義されたプロセスに従って自動化するツールのこと。

できること

• 依存関係を解決してくれる
• import先が明示的にわかる
• 公開されているパッケージやコマンドを利用可能

package.json

• 設計書的な役割
• プロジェクトで使用している依存関係とそのバージョン、スクリプト等が定義されている

package-lock.json

• プロジェクトの依存関係のバージョン情報を記録するファイル
• このファイルにより、別環境でも全ての依存パッケージが全く同じバージョンでインストール可能となる。

node_modules

• npm installを実行すると作成されるディレクトリ
• package.jsonで定義した全てのパッケージがインストールされる。
• 実際のパッケージのコードが格納されている。
• サイズが膨大でGitにはあげない

ES2015以降の記法

let, constの変数宣言

• 元々はvarで変数を宣言していた
  var宣言は上書き・再宣言が可能。
• letは上書き可能、再宣言が不可能
• constは上書き・再宣言が不可能
• ※オブジェクト・配列について、プロパティの変更は可能
• 一般的なルールとしては、可能な限りconstを使用し、その値が必要に応じて変更される場合に限りletを使用します。

テンプレート文字列

• 文字列の中にjs構文を使用可能にするための表現
• `で囲み、${}の中に変数等を使用する。

アロー関数

• 関数を短く簡潔に書くための構文
• 標準的な関数定義:

function add(a, b) {
  return a + b;
}

• アロー関数例：

const add = (a, b) => {
  return a + b;
}

• 引数が1つの場合は()を省略可能
• returnが単一式の場合、{}とreturnを省略可能
  const add = (a, b) => a + b;

分割代入

• 配列やオブジェクトからデータを取り出し、個々の変数に割り当てるための便利な構文
• オブジェクトの例
  personオブジェクトのname,ageプロパティをそれぞれ同名の変数に割り当てている

const person = { name: "John", age: 30};
let { name, age } = person;

• 配列の例
  numbersの要素を変数a,cに割り当てている。（aに1,
  cに3が入る）

let numbers = [1, 2, 3, 4];
let [a, , c] = numbers;

デフォルト値

• 関数の引数が未指定の場合に備え、デフォルトの値を設定するための方法
• 例(nameを指定しない場合、デフォルトのWorldが使用される)

function greet(name = "World") {
    console.log(`Hello, ${name}!`);
}

greet("John");  //出力：Hello, John!
greet();  //出力：Hello, World!

• 分割代入時の例

let person = { name: "John" };
let { name, age = 30 } = person;

console.log(name); // "John"
console.log(age);  // 30

オブジェクトの省略記法

• 変数名とプロパティ名が一致する場合、そのプロパティを定義する際に値を省略できる
• 例

let name = "John";
let age = 30;

// 従来の方法
let person = { name: name, age: age };

// 省略記法
let person = { name, age };

スプレッド構文

• 配列やオブジェクトを個々の要素やプロパティに展開するための機能
• ...（ドット3つ）を使用する
• オブジェクトの結合例

let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3 }; // obj2は {a: 1, b: 2, c: 3}

console.log(obj2); // 出力: {a: 1, b: 2, c: 3}

• 配列の切り出し例

let arr1 = [1, 2, 3, 4, 5];
let [a, b, ...arr2] = arr1;

console.log(a); // 1
console.log(b); // 2
console.log(arr2); // [3, 4, 5]

• 配列のコピー例(onj1,obj2は参照先が異なる)

let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1 };

obj2.c = 3;

console.log(obj1); // { a: 1, b: 2 }
console.log(obj2); // { a: 1, b: 2, c: 3 }

配列処理

• mapメソッドは配列の全ての要素に対して与えられた関数を実行し、その結果から新しい配列を作成する
• 例

let numbers = [1, 2, 3, 4, 5];
let squared = numbers.map(number => number * number);

console.log(squared); // 出力：[1, 4, 9, 16, 25]

• filterメソッドは、配列全ての要素に対し与えられたテスト関数を実行し、その結果がtrueである要素から新しい配列を作成する
• 例

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(number => number % 2 === 0);

console.log(evenNumbers); // 出力：[2, 4]

• 2つ目の引数にindexを指定することも可能

let fruits = ["apple", "banana", "cherry"];

fruits.map((fruit, index) => {
  console.log(`The fruit at index ${index} is ${fruit}`);
});

// 出力：
// The fruit at index 0 is apple
// The fruit at index 1 is banana
// The fruit at index 2 is cherry

三項演算子

• if-else文などをより簡潔に表現するために使用される
• 下記のように使用する
  {条件式や値} ? {条件がtrueの時に評価される式} : {条件がfalseの時に評価される式}
• 例

let age = 15;
let beverage = (age >= 21) ? "Beer" : "Juice";
console.log(beverage); // Output: Juice

false判定される値について

• false
• 0, -0
• ""(空文字列)
• null
• undefined
• Nan
• ※下記はTrue判定される
  " "(空白)、[]空の配列、 {}空のオブジェクト

論理演算子

• 単純にtrue, falseを返す演算子では無い。
• ||について、
  評価を左から始め、最初に真（true）と評価できる値に到達した時点で評価を停止し、その値を結果として返す。
• 例

let a = 0;            // 0はFalsyと評価されます。
let b = "Hello";      // 文字列はTruthyと評価されます。
let c = "JavaScript";

let result = a || b || c;

console.log(result); // 出力: "Hello"

• &&について、
  評価を左から始め、最初に偽（false）と評価できる値に到達した時点で評価を停止し、その値を結果として返す。
• 例

let a = "Hello";      // 文字列はTruthyと評価されます。
let b = 0;            // 0はFalsyと評価されます。
let c = "JavaScript";

let result = a && b && c;

console.log(result); // 出力: 0

モジュールバンドラーとトランスパイラ

###　モジュールバンドラーとは

• 複数のファイルを1つにまとめるためのもの
• 依存関係などもいい感じにまとめてくれる
• webpack等

トランスパイラ

• 新しいJavaScriptの記法を古い記法に変換してくれるもの
• 開発は新しい気泡で、実行時は古い記法に変換してくれる
• Babel等

SPA

SPAとは

• Single Page Applicationの略
• HTMLは1つのみでJavaScriptで画面を切り替える
• サーバーからは初回のみHTMLページを受け取り、二回目以降は必要なデータのみ受け取る

メリット

• ページ遷移がシームレスで、迅速に動作する
• コンポーネント分割が簡単になり、効率アップ