『りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅰ. 言語・環境編】』 の個人的まとめ

『りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅰ. 言語・環境編】』を読んだ個人的まとめを書いていきます。

ほとんど引用で、大事・知らないかったところについてまとめます。

 

booth.pm

 

第１章

  • フロントエンド開発に Node が必要な理由

・JSをローカルのPCで使うため

・npm を使ってパッケージ管理するため

・パフォーマンス最適化のために JavaScript や CSS ファイルを少数のファイルにまとめる（バンド ル）

最新版の機能を使用している JavaScript のコードをブラウザ実行時に polyfill するのではなく 最初からコンパイルしておく

・開発中、ブラウザにローカルファイルを直接読み込ませるのではなく、ローカル環境で開発用の HTTP サーバを起動してそれ経由でアプリケーションを稼働させる

・テストツールを用いてユニットテストや E2E テストを記述する

・ソフトウェアテストやコードの構文解析をローカル環境で実行する

 

 

  • package

nodenv を含めた『ほに ゃらら env』をまとめてアップデートをしてくれる anyenv プラグインの anyenv-update と、

npm イン ストール時にデフォルトでいっしょにインストールしておくパッケージを指定できる nodenv プラグ インの nodenv-default-packages

 

  • CRA

create-react-app コマンドを実行すると、指定したテンプレートを用いてアプリケーションのスケル トンが生成されるのと同時に、次の 3 つのパッケージの最新バージョンがインストールされる

・react: React 本体のパッケージ

・react-dom: DOM を抽象化して React から操作できるように するレンダラーのパッケージ

・react-scripts: CRA の魔法を一手に引き受けてるパッケージ

 

 

  • npx

npx というのは npm パッケージで提供されてるコマンドを実行するためのものなんだけど、該当 パッケージがマシンにインストールされていればそれを、なければ最新版をダウンロードしてきて それを実行する。

そしてダウンロード実行の場合は、実行後、そのコマンドのパッケージをきれい に削除してくれるの。1 回限りのコマンド実行にうってつけ。

 

  • CRAの裏側

CRA で作成したプロジェクトでは、こうやってソースコードファイルはコンパイラである Babel によってコンパイルされて、それがバンドラである webpack によって適切な形にまとめられ、さら にそれらが相互に関連付けられる 

 

  • package.json と yarn-lock

・この package.json に各パッケージのインストールするべきバージョン番号が指定されてるわけだ けど、各パッケージが依存しているパッケージ群がどのバージョンでインストールされるかという のは、これだけでは固定されない。

それぞれのパッケージは日々開発が進んでバージョンが更新さ れているので、package.json の内容が同じであってもまっさらな状態から yarn install でインスト ールされた内容は、今日実行するのと 1 ヶ月後に実行するのとではおそらく異なってくる。

・同じアプリを開発してるはずのメンバーそれぞれで、インストールされているパッケージのバー ジョンがちがうと挙動が変わることもあるし、ひいては開発環境では動いてるのに本番環境では動 かないなんてことがザラに起こってくるよね。

だからこそ Yarn ではデフォルトで、パッケージの各依存関係のどのバージョンがインストールさ れたのかを、正確に記録し再現するために yarn.lock というファイルがプロジェクトのルートに作 られるようになってるの。

ちなみに npm コマンドを使ってる場合は package-lock.json というファイルになる。通常ではこ れらのロックファイルは Git のリポジトリに含まれるようになってるので、その内容が同じである 限りインストールされる npm パッケージ群のバージョンはすべて同じになるはず

 

  • yarn eject について

これが前にちょっとだけふれた、react-scripts の庇護から抜け出すためのコマンド 庇護。実行すると隠蔽されてた 50 以上のパッケージが package.json の "dependencies" エントリに現 れる。

またプロジェクトルートには config/ ディレクトリが作られ、そこに webpack などの設定フ ァイルが置かれる。

これは 茨 の道だけど、その代償に webpack の設定をいじらないと使えないよ いばら うなプラグインが使えるようになったりとか、各種ライブラリが提供する独自の DSL を Babel に コンパイルさせることができたりといった自由が手に入る

 

第2章

  • var を使ってはいけない理由

1. 再宣言および再代入が可能

2. 変数の参照が巻き上げられる

3. スコープ単位が関数