【JavaScript・React】基本知識 #JavaScript

JavaScriptやReactの基本となる概念について📄

モジュール

コードを再利用しやすい形に細分化して影響範囲を狭めたもの。
違うモジュール同士なら名前が被ってもOK👍なので、変数名や関数名が被ってしまう名前空間の問題を解決する。基本的にモジュールは１ファイルに1モジュール定義。

JavaScriptのモジュール形式

CommonJS ：Node.js(サーバーサイド)で使われるJavaScriptの各種仕様。
ES Modules ：JavaScript公式の言語仕様。今はこれが主流。

パッケージ管理システム

パッケージとは、コードの一部を使い回すために切り出したもの。
パッケージ管理システムではパッケージをいい感じでインストールし管理してくれる。　
例えば30個の依存関係のあるパッケージがあると、それぞれのパッケージがさらに依存関係を持っている、、、これをいい感じに管理してくれるのがnpm、yarn等のパッケージ管理システム。

主な機能
1. ローカル環境のパッケージを更新、検索
2. パッケージインストール削除
3. 依存関係の解決、必要な依存パッケージ自動インストール
4. 設定を書いて1-3を自動化

npm (Node package manager)
Node.jsの標準パッケージ管理システム。(最近githubに買収された。)
- package.json：インストールが必要なパッケージリスト
- package-lock.json：実際にインストールしたパッケージがどの依存関係を持っているかの記録。チームで共有することで環境を統一できる。node_modules、package.jsonが変更されると自動で作成、変更される
- node_modules：ディレクトリの中に依存関係のパッケージが入っている。
yarn
npmよりも高速なパッケージマネジャー。npmより厳密にモジュールのバージョンを固定でき、yarn.lockファイルで、各パッケージのインストールバージョンを固定できる。しかもnpmと同じpackage.jsonが使えるため、同一プロジェクトでnpmかyarnかなんて迷わなくてOK👍:）
https://classic.yarnpkg.com/ja/docs/install#mac-stable

ビルド

書いたコードを異なる環境で動かすための準備のこと。npmでインストールしたいろんな形式のモジュールで書かれたパッケージを使えるようになる。JavaScriptのビルドでは(Browserifyや)webpackが使われる。webpackではモジュールに加え画像やcssなども一緒にビルドしてくれる。

Browserify
CommonJS形式で書かれたものをブラウザ向けにバンドル(変換)するツール。CommonJS形式で書けばBrowseryで変換することでブラウザでもNode.js向けのパッケージが使えるようになった。ブラウザでもnpm(CommonJS形式のパッケージがメイン)が使われるようになった。
webpack
Browserifyの上位互換バンドルツール。JavaScript向けのファイルのみでなく、対応するローダーを使ってバンドル(変換)すればHTML,CSS,画像などを読み込めるようになる。ES Modulesにネイティブ対応。
https://webpack.js.org/

コンパイル

開発時はブラウザで動かないコードを、ブラウザで動くように変換しJavaScriptにする機能。バンドルはモジュール依存関係解決に焦点、コンパイルは事前に変換する機能である。
ES2015の新機能を古いブラウザでもバンドル(トランスパイル)して動くようにしてくれるのがBabel。webpackと併用しコンパイルで事前に変換することでモジュールと依存関係を解消し、かつ、ES6の新しい機能も使えるようになった。
Reactだと、そのままでは動かないjsxファイルを、事前にコンパイルして変換すると、ブラウザで動くようになる。このようにいったんバンドルやコンパイルを挟むことがjQueryと違うところ。

Babel
ReactのJSX(JavaScript XML React)というJavaScriptの拡張版でXMLを出力すると、Babelが自動でJavaScriptに変換してくれる。👏
他にもNodeでは認識されるES6のconst foo = <div> を標準的なvar foo = React.createElement() に変換してくれる。👏👏
以下のページの左側にXMLを入力すると、右側にリアルタイムでJavaScriptが表示される https://babeljs.io/ JSXを使うことでHTMLのような書き方でh1タグが作成できる。

//JSXでのh1タグ
import React from 'react';
import ReactDOM from 'react-dom';

const element = <h1>Hello!</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);