モダンJavaScript - aktnk/til GitHub Wiki

用語

  • DOM:Document Object Model,HTMLなどを解釈し木構造で表現したもの

    • jQuery等ではDOMを直接操作 
      $('ul').append('<li>〇〇</li>');

  • 仮想DOM:JavaScriptのオブジェクトで仮想的に作られたDOM。ReactやVueでは直接DOMを操作せず、JavaScript上で仮想DOMを操作し、差分（変更分のみ）をDOMに反映

  • ECMAScript:JavaScriptの標準規格、毎年一回発表されそのときの西暦を使いES20**と表記される。なおECMAは欧州電子計算機工業会（European COmputer Manufacturers Association）のこと。ES2015が多くの機能が追加され（Class構文、テンプレート文字列、アローファンクション…）、転換期となった。

  • モジュールバンドラーwebpack（最近はviteもある）：開発時は別々のファイルで扱うが、最終的には複数のJavaScript、CSS、imageファイルを１つにまとめて扱う

  • トランスパイらBABEL:新しいJavaScriptの記法を古い記法に変換

  • SPA:Single Page Application,モダンJavaScriptはSPAが基本。HTMLは1つでJavaScriptで画面を書き換えて実現する方法。従来のようにリクエストしたHTMLを毎回取得するのではなく、最初にHTMLをうけとった後はデータだけもらい表示する。

Node.js,NPM

  • <script>タグによるJavaScriptファイルの読み込みから、Node.jsによるnpm/yarnのパッケージマネージャを使用する形になり、下記のメリットあり * 依存関係の解決 * 公開されているパッケージが利用できる
  • npm/yarnの基本動作
    • package.jsonからpackage-lock.json（yarn.lock)が自動生成され、依存関係を解決
    • これらに従い、パッケージのレジストリNPMから、node_modules配下に各モジュールのjsファイル等が配置される 　* node_modulesはNPMから取得できるので、GitHubにあげて管理しない

その他

  • var,let,constで変数宣言

    • var変数:再宣言可能、値の上書き可能
    • let変数:再宣言不可、値の上書き可能
    • const変数:再宣言不可、値の上書き不可、ただし、const定義したオブジェクトや配列はその属性や要素の変更可能

  • 関数の定義

    • functionで定義 
      function func1(str) {
  return str;
} 
console.log(func1('func1が呼び出されました'));
    • 一度変数に代入して利用 
      const func2 = function (str) {
  return str;
};
console.log(func2('func2が呼び出されました'));
    • アロー関数 
      const func3 = (str) => {
  return str;
};
console.log(func3('func3が呼び出されました'));
    • リターンが単一行の場合{}は省略可 
      const func3 = (str) => str;
    • リターンがオブジェクトの場合()でくくると複数行でもOK 
      const func4 = (a, b) => ({
  first: a,
  second: b,
});

  • テンプレート文字列による変数の埋め込み

    const name = 'World';
const message = `Hello, ${name}`;
console.log(message);

  • 分割代入:オブジェクトの属性値、配列の各要素の値を取り出す記法

  • デフォルト値の指定:関数の引数や、分割代入の際、=(値)をかくことでデフォルト値を指定できる

  • オブジェクトの省略記法:オブジェクトの属性名は変数名と同じ場合は、属性の記述を省略できる

  • 配列の要素をすべて処理する場合は、スプレッド構文...(配列名)で記述できる

  • 配列arr1を配列arr2にコピー：const arr2 = arr1:とすると、参照がコピーされるので、arr2[0]=arr2[0]*2;すると、arr1[0]の値もかわってしまうので、スプレッド構文を使うconst arr2 = [...arr1];

  • 配列の繰り返し

    • 従来の書き方 
      const arr = ['A', 'B', 'C'];
for (let index = 0; index < nameArr.length; index++) {
  console.log(arr[index]);
};
    • mapを使った書き方 
      arr.map((elem) => {
  console.log(elem);
});

  • 論理和(||)・論理積(&&)と短絡演算子とtruthy/falsy

    • expr1 || expr2 は expr1を論理値に変換しtruthyだったとき、expr1が返され、expr2は評価されない
    • expr1 && expr2 は expr1を論理値に変換しfalsyだったとき、expr1が返され、expr2は評価されない
    • 参照：JavaScript MDN 論理積
⚠️ **GitHub.com Fallback** ⚠️