DOM（Document Object Model）
HTMLの各タグ（要素）をNodeとみなして、階層構造で表現するモデルに変換することで、HTMLをJavaScript等で扱えるようにした技術。
仮想DOM
実際のDOMを構築する前に、バーチャルなDOMを構築するワンクッションを入れることで、プログラマがDOMを意識ないで済む。
さらに、バーチャルなDOMを構築する際に差分更新する仕組みをとることで画面更新を高速化できる。
この仮想DOMを取り入れたJavaScriptフレームワークが、REACTとかVue.js
バンドル
多くの React アプリケーションは、Webpackなどのツールを使ってファイルを「バンドル」している。バンドルはインポートされたファイルをたどって、それらを 1 つのファイルにまとめるプロセスです。このバンドルされたファイルを Web ページ内に置くことによって、アプリ全体を一度に読み込むことができます。
↓
コーディングを行う際に、複数のファイルを１つのファイルに出力すること。コードをまとめるみたいな意味。
コード分割
必要なコードだけを読み込み、初期ロードの際に読む込むコード量を削減する。つまり高速。
例えば、トップページを呼び出すと、トップページに必要なjsだけが読み込まれる。
トップページに必要なコードが読み込まれた後に、Linkコンポーネントによってリンク先のページのコードをバックグラウンドでプリフェッチングする。
リンクを押す頃には読み込みが終わっているため、ページ遷移も高速。すごい。。。
プリフェッチング
コードを先に読み込んでおくこと。
preがあらかじめみたいな意味。
コンポーネント
何かの部品。
Reactでは、見た目を機能ごとにコンポーネント化して、コンポーネントを組み合わせることでWebサイトの見た目を作る。
CSS-in-JS
JSの中でCSSを書ける。
styled-jsxは、CSS-in-JSのライブラリ。
１ファイルで書ける。
react.componentとして提供されてる分、楽。
例）styled-components、 emotion、 MATERIAL-UI
CSS Modules
CSS-in-JSとは別に、CSSを生で書くこともできる。
CSSファイルをReactコンポーネントの中でインポートすることができる。
CSS Modulesは自動的に一意のクラス名を生成するため、クラス名の衝突が起こらない。（CSS-in-JSも）
Next.jsのコード分割は、CSSモジュールに対しても機能する。
例）テイルウィンド、
チュートリアルした感じ、CSS Modulesの方が地道だけど分かりやすそう。
どっちを使うにしろ、アプリごとでどっちかに統一した方が良さそう。
Tailwindは、CSSModulesではなくグローバルに読み込んでpurgecss （使われてない CSS を削除するものです）と合わせて使うのが基本。なのでパフォーマンスいい。
プリレンダリング
レンダリング:何らかのデータをもとにして表示内容を作る。HTMLをもとにページを生成する。みたいな
Next.js はすべてのページをHTMLでプリレンダリングする。DOMにするということ？？
まず各ページのHTMLを生成する。その後、そのページに必要な最小限のJSを関連付ける。（このプロセスはハイドレーションと呼ばれる）。
ビルド
ソースコードを実行可能な状態にすること。
ソースコードを実際に動くプログラムに変換するコンピュータ上で実行されるプロセス。
静的生成（SSG）
ISR:SSGを何秒間隔でするみたいな機能。
サーバサイドレンダリング（SSR）
リアルタイム性が求められるアプリはこっちが向いてる。
クライアントサイドレンダリング（CSR）
外部データを必要としないページの部分を静的生成（プリレンダリング）して、
ページが読み込まれたら、クライアント側で JavaScript を使って外部データを取得し、残る部分にデータを埋め込む
フェッチ
データベースなど外部データの取得
getStaticProps
ビルド時にデータを取得するメソッド？
関数内部では、外部データを取得（フェッチ）して、取得したデータを props としてページに渡す。
props
任意の入力を受け取り、画面上に表示すべきものを記述するReact要素を返します。
動的、静的
動的（dynamic）
最初からなかったり、最初からあるけど途中で変わったりする
静的（static）
最初から用意してある、変わらない