りあクト！輪読会

# 2021年8月22日

### Node.jsはなぜ必要？
- JavaScriptsはWeb上（ブラウザ上、クライアントサイド）で動かすための言語
- Node.jsとはJavaScriptsをローカル上で動くようにするためのソフトウェア
- Node.jsを使うと、JavaScriptをRubyやPhytonみたいにサーバーサイド言語として使えるようになる
- npm(NodePackageManager)とはrubyでいうbundlerのようなもの、バージョン管理ツール
- rails sでローカルが起動した時にサーバー立ち上げ(rackとかミドルウェアも含んで)とwebpackerが自動で走ってくれていたりしてる？
- パッケージとは、JavaScriptのプラグインやモジュールのこと

### Node.jsをインストールしてみよう
- UbuntuはOS、Linuxの一族
- Node.jsはバージョンマネージャーを使ってプロジェクトごとに異なるバージョンをインストールするのが一般的。
- バージョンマネージャーとしてnvmやnodenvが一般的
- `mkdir -p` (-pはオプションで必要に応じてディレクトリも作成する)
- `node global 14.4.0`とすることでデフォルトのバージョンを指定できる
- `node local 14.4.0`とすることでディレクトリごとにバージョン指定ができる
- Yarnはnpmの改良版。より高速、サブコマンドのタイピング数が少ない。
- `$ node`はrubyでいう`$ irb`コマンド (REPL(リプル)っていうらしい)
- `anyenv update`で現在インストール可能なバージョンを取得できる。
- `node`で対話環境でnodeが実行できる。
- 終了するときは`.exit`

### npmってなんだ？！
npmとは、「Node Package Manager」の略で、その名の通りNode.jsのパッケージを管理するためのシステムのことです。
ここでいうパッケージとは、JavaScriptのプラグインやモジュールのことです。

nodenvがNode.jsのバージョンの管理
npmがJavaScriptのパッケージ(BootstrapみたいなjQueryみたいな)の管理

### VScode使おうぜ？
- VScodeはTypeScriptと相性が良い。
- 同時コーディングとかめっちゃ便利やで。

## 参考
初心者向け！3分で理解するNode.jsとは何か?
https://eng-entrance.com/what-is-nodejs#PHP

知っておいて損はなし！新人Webデザイナーのための「npm」入門
https://ferret-plus.com/6104

ESLint 最初の一歩
https://qiita.com/mysticatea/items/f523dab04a25f617c87d

コンテンツデリバリネットワーク (CDN)
https://wa3.i-3-i.info/word16730.html

https://wpmake.jp/contents/knowledge/about_cdn/#CDN%E3%81%AE%E3%83%87%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88

---
---

# 2021年8月27日

## Create React Appは何をしてくれているのか
CRA（Create React App）とはFacebook社が社内でReactを使うときに使っていた環境整備の方法をコマンド化したもの。

実行することでアプリケーションのスケルトン（空のアプリ）が生成される。

<br>

`$ create-react-app`コマンドで作られるもの

- react ・・・　React 本体のパッケージ
- react-dom　・・・　DOMを抽象化してReactから操作できるようにするレンダラーのパッケージ
- react-scripts
- Babel : 新しい仕様のJSのコードを古いブラウザでも実行できるようにコンパイルする
- webpack
- webpack-dev-server : ソースコードの変更を検知してリロードしなくてもリアルタイムに画面反映してくれる
- Jest : JavaScriptの単体テストのフレームワーク（RailsのRSpecみたいな書き方）
- dotenv
<br>

<br>

## Create React Appで「Hello, World!」

### npxコマンド
npmがインストールされていば、ネット経由で最新版ないし該当のパッケージをインストールし**一回のみ**実行してくれる。実行した後はキレイに削除してくれる。

### 実際にハンズオン！
`$ npx create-react-app hello-world --template=typescript`
→TypeScriptのためのテンプレートを指定（このオプションを指定しないと素のJSで開発するためのcra-templateが適応される）

* 上記コマンドはrails newと同じ役割だと想像してください。ディレクトリの移動を忘れないよう気をつけましょう。
* `cd hello-world` ←これやってから①
* `yarn start` ←これやってね②
<br>
---
### CRA実行時のエラー

pretty-format@27.1.0: The engine "node" is incompatible with this module.
Expected version "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0". Got "14.4.0"

記述されているnodeのversion以上を期待している。
エラー発生時は14.4.0だった。
14.15.0にすることで対応。

---
**回った！！**


<br>

## 参考
Ruby on Railsの動作にNode.jsが必要な理由
https://www.xenos.jp/~zen/blog2/index.php/2019/03/19/post-1831/

【3分でわかるシリーズ】Ubuntuとは？
https://eng-entrance.com/what-is-ubuntu

JavaScriptを単体テストする流行りのフレームワークJestを試してみる
https://qiita.com/mima_ita/items/558ec8cee2c0e1005ffd

# 2021年8月31日

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

`ReactDOM.render()`は第2引数の中に第1引数を入れ込む感じ。

`<React.StrictMode>`はバージョンが進んで非推奨になったAPIの使用や意図しない問題点を見つけてwarningで教えてくれるReactの「Strictモード」を有効にするためのラッパー。

## DOM
めっちゃ簡単にいうと、検証ツールで見れるElementsの部分。
HTMLタグで囲まれてツリー構造になっているもの。

## コンポーネント
Reactで作られるアプリケーションは全てコンポーネントで構成される。
任意のUIを表現するためのパーツの単位。

## パスカルケース
= アッパーキャメルケース
各単語の最初を必ず大文字で書き表す記法。

## JSXとは
HTMLのように見えてHTMLではない、JavaScriptの拡張構文
JavaScriptの中で記述できるHTML風の記法

## ホットリロード
ファイル保存時に自動でブラウザに反映される機能

# 1-3 アプリを管理するためのコマンドやスクリプト

### yarnコマンド
`yarn install`：普段私たちがRailsでの開発で使うbundle installと同じようなイメージ。パッケージ間の依存関係を考慮してインストールしてくれる。

`yarn add <PACKAGE_NAME>` : 指定したパッケージをインストール

`yarn remove <PACKAGE_NAME>` : 指定したパッケージをアンインストール

`yarn upgrade <PACKAGE_NAME>` : 指定したパッケージを最新バージョンに更新する
（※ package.jsonの範囲を超えて最新安定バージョンをインストールするときは`--latest`オプションをつける）

`yarn upgrade-interactive[--latest]` : 全てのインストールしてあるパッケージの更新情報をチェック、対話形式で一括アップデートできるコマンド

`yarn info <PACKAGE_NAME>` : 指定したパッケージについての情報を表示

ちなみに、`yarn add`や`yarn remove`と同等の操作は、package.jsonファイルのdependenciesエントリを直接編集することも一応可能。

##### yarn.lockでご安全に
パッケージのバージョンを管理してくれているので、日々更新されるバージョン環境に左右されない。きっと消してはいけないファイル(npmコマンドを使った場合`package-lock.json`)

### Reactの魔法　react-scripts

**ejectは不可逆コマンドなので、要注意**！！！

>Facebook帝国の庇護の下にいる方が無難

ejectを使わないでパッケージ（react-app-rewiredやCRACOなど）を使ってwebpackなどを部分的に書き換えられるよ。

長い物には巻かれようね❤︎
## 参照
パスカルケースとは
https://wa3.i-3-i.info/word13955.html

yarn upgrade-interactiveについて
https://qiita.com/terrierscript/items/98931b91d155348046c9

# 2021年9月3日

### What is JavaScript？

- 第一級関数とオブジェクト指向をサポートしたブラウザで動く言語をつくろうとして生み出されたのが**JavaScript**

- 当時流行していた**Java**に構文と名前を似せた。

- JavaとJavaScriptは違うよ(タイと台湾、インドとインドネシアくらい違う)

- TypeScriptはJavaScript（関数型言語）の上位互換の言語

- **世界的にはJavaScriptは再評価されてきている！！**（日本がんばれ）

- リテラルとは

const hoge = "Hello"

値のこと。上記コードで言えば、Helloがリテラル（文字リテラル）
変数の中にある値を示す。

>オブジェクトはプロパティの集合です。プロパティとは名前（キー）と値（バリュー）が対になったものです。 プロパティのキーには文字列またはSymbolが利用でき、値には任意のデータを指定できます。 また、1つのオブジェクトは複数のプロパティを持てるため、1つのオブジェクトで多種多様な値を表現できます。

第一級関数とは？
関数がその他の変数と同様に扱われる。
https://jsprimer.net/basic/function-declaration/#first-class-function

// 関数の定義の仕方①
function func1(str) {
  return str;
}
console.log(func1("これはfunc１です"));
// => "これはfunc1です"
==============================
// 関数の定義の仕方②　変数の中に関数を入れることもできる
const func2 = function(str) {
  return str;
}
console.log(func2("これはfuc2です"));
// => "これはfunc2です"
=============================
// 関数の定義の仕方③　アロー関数　
const func3 = (str) => {
  return str;
}
console.log(func3("これはfunc3です"))
// => "これはfunc3です"

// 関数の定義の仕方④　省略したアロー関数
const func3 = (str) => str;
console.log(func3("これはfunc3です"))
// => "これはfunc3です"

- JavaScriptの標準仕様のことをECMAScriptといい、2021年の最新版はES2020

- ES5とES6（ES2015）で大きく仕様が変わった。（もはや別の言語レベル）

- JavaScriptは後方互換性を重視した言語であり、バージョンが変わることによるエラーはほぼ無い

- ECMAScriptはバージョンではなくて、「**仕様**」（エディション）の名称。

## 2-2 変数の宣言

**varは今後二度と使ってはいけません！！！！**
変数はconstとletで定義しましょう！！

できればletもあまり使わない様にしましょう！

変数を宣言する前に変数に代入して使用することを「巻き上げ」といい、他の言語ではあまり見られない仕様で、よくない。

# constを使った良い例
const a = 100;
console.log(a);

> **paiza.ioは話半分よりちょい上くらいの感覚で試してください
実際のコンソールでの挙動と若干違う時があります**

以下はTypeScriptでの例
`const`
<br>
`let`
<br>
`var`
<br>
`var`を書かない

## 2-3 JavaScriptのデータ型
## 型とは
オブジェクトは全て型を持っていることを踏まえた上で考える。
**静的型付け**の場合は、データ型を先に宣言してから変数を定義して、値を代入する。そして、宣言した型以外の代入は**認めない**。（TypeScriptは**静的型付け言語**）
　　<br>
- JavaScriptはRubyらと同じ**動的型付け言語**なので型が変わる

- TypeScriptは静的型付けなのでエラーが出る

JavaScriptのデータ型は**プリミティブ型**と**オブジェクト型**に大別され、プリミティブ型はさらに７種類に分類される。
プリミティブ型はそれ自体はオブジェクトではないので、インスタンスメソッドが存在しない。

### ①Boolean型
trueもしくはfalse。真偽を表す値。
### ②Number型
整数も少数も含めた全ての数字。最大９千兆。
### ③BigInt型
Number型よりも大きな値。Numberとの互換性はない。
※ 扱える環境が限定的だからあまり活用できる場面がない。
### ④String型
文字列
### ⑤Symbol型
固有の識別子を表現する際に用いる。プロパティキーとして仕様が可能。
※ JSONでのパースができないのであまり活用できる場面がない。
### ⑥Null型
データが存在しない状態を明示している。
### ⑦Undefined型
宣言のみが行われた変数や、存在しないプロパティを参照した際の型

### プリミティブ型とオブジェクト型
- プリミティブ型
- 一般的な文字の型（数字とか、文字とか）
- 一度作成したらその値を変更することができない
- オブジェクト型
- 配列とか正規表現とか。。
- 一度作成した後も、その値自体を変更することができる

### ターミナルでTypeScriptを試す場合(REPLモード)

ts-node -v

で現環境にTypeScriptが入っているか確認します。
もし、入っていなかったら、

npm install -g typescript ts-node

で現環境にTypeScriptを導入しましょう。-vで確認が取れた段階で

ts-node  -- <--こいつレプル！

をターミナルで入力するとTypeScript用のコンソールを開くことができます。

### truthyとfalsy
falsyとして定義された値 (つまり、false, 0, -0, 0n, "", null, undefined, NaN(Not a Number)) を除くすべての値はtruthyです。

`parseInt()` : 文字列を整数に変換する関数

## 参照
オブジェクト - JavaScript Primer
https://jsprimer.net/basic/object
プリミティブ型について
https://wa3.i-3-i.info/word15876.html
プリミティブ型とオブジェクト型の違い
https://qiita.com/ta1fukumoto/items/effaa42cd296a2648d41
truthyとfalsyについて
https://developer.mozilla.org/ja/docs/Glossary/Truthy

---

# 2021年9月7日

### プリミティブ値のリテラルとラッパーオブジェクト

JavaScriptではプリミティブ値を定義するときに**リテラル**を用います。

リテラルとは、英語で「文字通り」を意味し、コードに書いた値がそのまま実行時にもその値のまま意味をもちます。（型定義せずに値の意味を持つ？？）

各プリミティブ型に用意されているリテラル
- Boolean型
- 真偽値リテラル（true、false）
- Number型
- 数値リテラル
- 浮動小数点リテラル（`2.1e8 = 2.1 × 10の8乗`）
- BigInt型
- 数値リテラル（`100n`は小数点以下を四捨五入する）
- String型
- シングルクォオートなどで囲む文字列リテラル
- バッククォートで囲むと改行や式展開（`${}`）ができるテンプレートリテラル
- Null型
- nullリテラル（nullを返す）

JavaScriptではプリミティブ値にアクセスする時に、対応する**ラッパーオブジェクト**に自動的に変換される。

'Serval lives in savanna'.replace('savanna', 'jungle');
'Serval lives in jungle'

内部でオブジェクトに変換されることにより、プリミティブ型で記述してもメソッドが使用できる。
今回で言えば、'Serval lives in savanna'がプリミティブ型のString型であることを自動判定し、対応するラッパーオブジェクト(rubyのオブジェクトと一緒？)のstringに変換している。

'Serval lives in savanna'.replace('savanna', 'jungle');
//  内部で下記に変換されている。
(new String('Serval lives in savanna')).replace('savanna', 'jungle');

インスタンスメソッドはオブジェクト型でしか使用できない。しかし、ラッパーオブジェクトにより、プリミティブ型をオブジェクト型に変換しているので、インスタンスメソッドが使用できるようになっている。
この変換はJavaScriptが毎回自動的にやってくれるので、普段私たちは意識せずに使用することができる。

|ラッパーオブジェクト|プリミティブ型|例|
|--|--|--|
|Boolean|真偽値|`true`や`false`|
|Number|数値|1や2|
|String|文字列|`"文字列"`|
|Symbol|シンボル|Symbol("説明")|

# 🤔🤔🤔🤔🤔🤔?????😧😧😧😧😧😧😧😧😧😧😧😧
三浦さんリテラルの言い方かわいい

### オブジェクト型とそのリテラル
リテラルを持つオブジェクト型
- 配列リテラル
- オブジェクトリテラル
- 正規表現リテラル

### リテラルとは
変数に代入される値のことをリテラルと言います。
そのリテラルの型によって配列リテラルなのか、オブジェクトリテラルなのか、正規表現リテラルなのかが判断されます。

const hoge = "fuga"
//   ↑変数か関数　↑文字列と認識してるから文字列リテラル
const arr = [1, 2, 3]
//          ↑配列のリテラル

<br>

JavaScriptでは、**限定的な場面**で用いる「オブジェクト」と、**広い範囲の意味**で用いる「オブジェクト」２種類ある。

①限定的な場面での「オブジェクト」は、キーと値の組み合わせを持つプロパティの集合のことを指す。Rubyでいうハッシュなどもこれに該当する。

プロパティの集合（オブジェクト）は一般的に**JSON**形式で表したり、用いることが多い。そもそもJSONとはJavaScriptObjectNotation（JavaScriptオブジェクト表記法）の略なので、プロパティの集合がオブジェクトということにも納得がいく。
↓
**JSONさんは「JavaScriptオブジェクト表記法」の略**

②広義のオブジェクトはプリミティブ値以外の全ての値を指す。
もっと細くいうと、最終的な標準組み込みオブジェクト（継承元）として**Object**をもっている値。

コンストラクターって何？
**オブジェクトを生成する関数**
**newを呼び出す関数がコンストラクタ関数**
コンストラクターは、インスタンス化された特定のクラスオブジェクトに属しています。コンストラクターは、そのオブジェクトを初期化し、オブジェクトの非公開の情報にアクセスできるようにします。コンストラクターの概念は、ほとんどのオブジェクト指向プログラミング言語にあります。本質的に、JavaScript のコンストラクターはクラスのインスタンスで宣言します。

# 文脈で察しろ 🥶
こういう配列の書き方をしたらこういうリテラルになる
>""で囲えば文字列だよね
↑
文字列を文字列として使えることをリテラル

リテラルとは、プログラミングにおいてソースコード中で使用される、数値や文字列等の直に示したデータのことです。
　より厳密に説明すると、プログラム中で常に同じ値をとる定数というものがありますが、定数が指す値のことをリテラルと呼びます。定数は変数のように識別子にデータ、値を代入したものです。例えば、以下のように定義したとします。
`const int A=10;`
この場合、Aは定数であり、それだけ 指す値10がリテラルです。
### ひとこと
むずい

## 参照
【JavaScript】 コンストラクターとは？関数とは違うのか？
https://note.affi-sapo-sv.com/js-constructor.php

# 2021年9月16日 2-4.関数の定義〜

### プログラミングにおける「文」と「式」の違い

文（Statement）・・・手続きを処理に命令するもの
式（Experession）・・・評価された後に値として存在するもの

例えば、ifは文（命令するもの）であり式ではない。
似たような使い方でも三項演算子は式（評価された値）であって、文ではない。

// 関数宣言文（文で定義する関数）
function double(e){
return*2;
}

// 関数式（式で定義する関数）
const twice = function(n){
return*2;
};

関数宣言文、セミコロンいらない。
関数式、セミコロンいる。

JavaScriptにおける関数式は関数式はFunctionオブジェクトである。
なので、引数として渡したり、変数として代入できたりできる。

>TypeScriptを書くとVScodeで、その変数にマウスホバーすると参照元が分かるので、やってはいけない事が分かりやすい。
>

JavaScriptではオブジェクトのプロパティ値に関数を設定できる。
プロパティ値に設定した関数のことを「**メソッド**」という。

const foo = {
    bar: 'bar',
    // bazがメソッド。（オブジェクトのプロパティ）
    baz: function() {
        console.log('I am `baz` method')
    },
};

JavaScriptでは単なるオブジェクトのプロパティであってそれ以上の意味を持たない。
>自分たちはRubyを触ってきたので"メソッド"という言葉は同じでもJSでは異なる意味を持つので注意

// Function インスタンスの生成
const sum = new Function('n', 'm', 'return n + m;');
// 関数式(=関数リテラル) const add = function (n, m) {
return n + m; };

Functionコンストラクターを直接呼び出してインスタンスを生成すると、常にグローバルスコープで実行されるので危険！！！
[MDN: Function() コンストラクター](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/Function)

# 2021年9月24日 p70〜

### アロー関数式と無名関数

関数宣言(functionを使う書き方)と関数式で名前付きで定義した関数は最初から関数に名前がついている。

無名関数の書き方

//function記法
(function(){}).name

//アロー関数記法
(()=>{}).name

無名関数はメモリに残らず、変数に代入したりしなければ定義した瞬間に消滅する。

Reactは関数型プログラミング。（宣言型プログラミング）
宣言型プログラミングとは同じ値に対して同じ処理を常に返してくれる関数の性質を組み合わせたプログラミング手法

### さまざまな引数の表現
引数にはデフォルト値を持たせることができ、デフォルト値を設定した引数は呼び出し時に省略することができる。

const raise=(n, m=2)=>n**m;
console.log(raise(3)); //9

Rest Parameters：最後の引数の名前に`...`をつけることで残りの引数を配列として受け取ることができる(可変長引数)

const ary4 = [10,20];
const ary5 = [30,40];

const ary6 = [...ary4];
console.log(ary6);
=> [10, 20]

const ary7 = [...ary4, ...ary5];
console.log(ary7);
=> [10, 20, 30, 40]

## 2-5
### クラスのようでクラスでない、JavaScriptのクラス構文
厳密にはJavaScriptsにはクラスという概念は存在しない。あくまでクラスっぽい挙動をする構文。

JavaScriptにおける**メンバーメソッド**とはRubyでいうインスタンスメソッド。
**staticメソッド**はRubyでいうクラスメソッド

class Bird {

    static explain = (name){
        console.log(`${name}は翼があって卵を産みます。`)
    }

}

### プロトタイプベースのオブジェクト指向とは
**クラス**・・・実体を持たない概念
**プロトタイプ**・・・実体を持つオブジェクト

インスタンスを生成するための**コンストラクタ関数**とは、プロトタイプオブジェクトを継承して、新しいオブジェクトインスタンスを生成する関数

**JavaScriptではあらゆるオブジェクトは何らかのプロトタイプを継承している。**

プロトタイプベース

参考文献:

staticメソッド(クラスメソッド)について
https://www.bold.ne.jp/engineer-club/java-static-method

# 2021年9月30日 p83〜
## 2-6 配列やオブジェクトの便利な構文
### 分割代入とスプレッド構文

でuse-postal-jpをインストールすることでnode_modules配下にuse-postal-jpが置かれる。
以下のように記述することで、usePostalJpが使えるようになる。

import { usePostalJp } from 'use-postal-jp'

usePostalJpの中身

export declare const usePostalJp: () => {
response: AxiosResponse<{}> | null;
address: Address;
error: Error | null;
pending: boolean;
sanitizedCode: string;
setPostalCode: import("react").Dispatch<import("react").SetStateAction<string | number>>;
};
export {};

分割代入の使用例

const { address, setPostalCode } = usePostalJp()

usePostalJpの中から使用するプロパティを抜き取っている。

### オブジェクトのマージとコピー
シャローコピーとは・・・コピーされる階層が一段階のコピー

# 2021年10月7日 p90〜
## 式と演算子で短く書く

OR演算子　|| は左辺がfalsyな場合に右辺を評価する。
AND演算子 &&　は左辺がtruthyな場合に右辺を評価する。

NaN = not a number

![](https://i.imgur.com/bcxUrh1.png)

[参考記事](https://qiita.com/phi/items/723aa59851b0716a87e3)

### Nulish CoalescingとOptional Chaining
プロパティを繋いで評価するとき（user.nameなど）にレシーバーの部分がundefinedでもエラーを起こさずに、undefined で評価する。この記法のことをOptional chainingという。

[for...ofの参考](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of)
ブロック変数にしてる！

なりっしゅこぁれぃしんぐ
おぷしょなるちぇぃにんぐ

## 2-8
### JavaScriptのthisとは何なのか

const Person = function (name) {
this.name = name;
return this;
};

const kanae=Person.call({gender:'f'},'Kanae'); //{gender:'f'}をthisとして渡す
console.log(kanae); //{gender

<iframe src="https://paiza.io/projects/e/Bps3YHwGeyDHAH69PfEG7w?theme=ambiance" width="100%" height="500" scrolling="no" seamless="seamless"></iframe>

### thisの中身4つのパターン
thisは呼ぶ場所で変わる。
関数の中なのか、、、、
実行する場所で行き先が変わるンゴ
> 「どこでもドアー、うぇ〜い🎉」
callメソッドとか使うのかとか(第一引数が自ずとthisになるやつな)
rails7＝Vue

### thisの挙動の問題点と対処法
JavaScriptにおけるthisは呼ばれる場所（コンテキスト）で意味（中身）が変わる、**グローバル変数**

class Person{
constructor(name){
this.name = name;
} // ↓　の()の中にthisが入る　見えないだけ。
greet2(){
console.log(`Hello,${this.name}`)
}
}
const creamy = new Person('Mami');
creamy.greet2();

## モジュールを読み込む

### もじゅーるの歴史
- **2009年**にNode.jsが登場し、CommonJS形式のおかげでrequire構文が使えるようになった。
- JSerとはJavaScriptを愛する開発者のこと
- Node.jsで動くのがCommmon.js?
- JavaScript初のモジュールバンドラ「Browserify」が**2011年**に登場した。
- 半年後にRequireJSが登場
- が、そんなに流行らなかった。
- そんな中、来るべき**2015年**JS大変革の年にECMAScript公式でES Modulesが発表された!!!
- ES Modulesは標準で全てのブラウザに対応している
- **2017年**にwebpackが登場
- webpackはネイティブでES Modulesをサポートしている
- ESM以外にも、commonJS,AMDなど様々なモジュール構文に対応している！！最強！！
- しかも、自動で構文を検知してくれるので、様々な構文が混在していてもOK！！

### webpack
- webpackがサポートしているBabel LoaderでJS、JSX、TSなどをコンパイルしてバンドルしてくれる。
- webpackが提供しているモジュールバンドラ（Babel）の仕組みは、様々なメリットがあるので、仕組み自体がなくなることはないであろう。
- バンドルする方が、コードをブラウザでネイティブに実行するより、パフォーマンスも良い。



Webpack使いづらいとか言ってごめんなさい
V8とNitroすご〜い

みんなwebpackに感謝しよう

## ES Modulesの使い方
- 定義しておいた変数や関数をまとめて後でexportすることもできるし、定義と同時にexportすることもできる。
- デフォルトexportした変数や関数は、importする時に任意の名前をつけることができる。
- asを使うことで名前をつけることができる。
- node_modulesの配下は最初からパスが通っているので、パス指定する必要がない。
- 

### 命令型プログラミング
- 手続き型プログラミング
- オブジェクト指向プログラミング

https://lodash.com/docs/4.17.15#range

### 宣言型プログラミング
?

---

### 関数型プログラミング

const counter = () => {
let count = 0;

const increment = () => {
return count += 1;
};

return increment;
};

$ node
> .load closure-counter.js
> const increment = counter();
> count
Uncaught ReferenceError: count is not defined
> increment(); //←のincrementはnode前のと違う？
1
> increment();
2

const counter = () => {
let count = 0;

const increment = () => {
return count += 1;
};

return increment;
};

$ node
> .load closure-counter.js
> const hoge = counter();
> count
Uncaught ReferenceError: count is not defined
> hoge();
1
> hoge();
2

const counter = () => {
let count = 0;

const increment = () => {
return count += 1;
};

return increment;
};
const increment = counter();
console.log(increment())
console.log(increment())
console.log(increment())
console.log(increment())
console.log(increment())
1
2
3
4
5