進めてる(進めていく)教材とか

• HypertextCandy React入門チュートリアル 完了
• りあクト！ TypeScriptで始めるつらくないReact開発 1/14 完了
• Udemy フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門 完了
• Udemy React Hooks 入門 - Hooksと Redux を組み合わせて最新のフロントエンド状態管理手法を習得しよう！ 完了
• React 公式チュートリアル 完了

残すはりあクト！のみ。
だいぶ理解してきた(気がする)からスピードアップしていくぞい！

今日やったこと

• りあクト！ TypeScriptで始めるつらくないReact開発 第1章 こんにちは React

りあクト！ TypeScriptで始めるつらくないReact開発 第1章 こんにちは React

ざっくりサマリー

基本環境の構築

• Node.js → JSをサーバーサイド言語として使えるようにする

• フロントなのになぜバックエンドのNode.jsが必要になるのか

  • パッケージ管理
  • バンドラー
  • テストツール
  • ローカルサーバー
  • etc
  • これらのツールを使用するため

• Node.jsのインストール

  • プロジェクトごとに別のバージョンを入れたい → nodenv
  • anyenv経由でいれれば他言語の環境設定も管理できる
  • 早速nodenv入れようとしてエラー出た
  • anyenv-install: definition not found: nodenv
  • anyenv + macOS環境構築このあたりを参考にする
  • exec $SHELL -lでSHELLを再起動するとANYENV_DEFINITION_ROOT(/Users/suzukikouhei/.config/anyenv/anyenv-install) doesn't exist. You can initialize it by: anyenv install --initと出るので指示通りにanyenv install --initと実行。
  • 無事,nodenvインストール完了
  • プラグインインストール
  • node.jsのインストール → ひとまず書籍バージョンと合わせる
  • Node最新版にアップデートするときはanyenv updateコマンドを実行しないとnodenvのリストが更新されないので注意
  • node <JavaScriptファイル名>でJavaScriptファイルが実行できる
  • 知らなかったw
  • nodeコマンド自体使ったことなかったな
  • nodeだけで実行するとREPL(対話型の実行環境)が起動する

  • Chromeのconsoleみたいな感じか

    プロジェクトを作成する

• CreateReactApp

  • React本体とは別プロジェクト
  • Reactやる前は同じもんだと思ってた
  • 新規プロジェクトのスケルトン(雛形)を作ってくれる
  • react-scriptでできること
  • モダンなJSをレガシーなJSにコンパイル
  • 最適化してバンドル
  • テストツール & テスト自動実行
  • 環境変数の設定
  • PWA化
  • 新規作成だけじゃなくていろいろできるんだなー

• npxとは

  • npmパッケージを実行するもの
  • パッケージがローカルに
  • ある → それを実行
  • ない → 最新版DLして実行 → 実行後パッケージ削除
  • 一回だけ実行するのに便利

• Strictモード

  • 非推奨になったAPIの使用や意図しない副作用など潜在的な問題を見つけてwarningで教えてくれる
• ブラウザに返されてるHTMLの/static/js/main.chunc.jsにコンパイルされたレガシーなJSが入ってる

• Babelでコンパイル → webpackでバンドル

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

• yarnの役割は基本的にパッケージ管理
• package.jsonのdependenciesを直でいじってyarn installでadd,remove相当のことができる

• yarn.lockファイル

  • パッケージの各依存関係を記録して再現するためのファイル
  • yarn.lockの内容が同じであればnpmパッケージ群のバージョンはすべて同じになる
  • なんのファイルだろって思ってたけどめちゃくちゃ重要だったw

• yarn upgrade-interactive [--latest]コマンド

  • package.jsonに沿ってパッケージの更新をチェック&アップデートできる
  • latestオプションで安定版バージョンに一括アップデート
  • バージョンの整合はとってくれるけど動作の保証はしてないのでテスト･動作確認が必要
  • 動かなくなったらpackage.json,yarn.lockを元に戻せばOK

• npm-script

  • package.jsonのscriptsエントリに実行させたいコマンドを記述しておくとnpmコマンドやyarnコマンドのように実行できる
  • エントリには予約キーワードがある
  • 意味づけされただけのものとnpm-scriptが実行されたのをフックに実行されるものの2種類

• react-scripts

  • 実態はnode_modules/react-scripts/scripts/から見れる

まとめ

なんとなく理解してたnodeとかyarnを改めて学び直せました。
React以前の環境構築って意外と重要ですね。
Google先生に聞いて手順を追って真似していけば環境構築はできるんですけど,ちゃんと意味や意図を理解しないと適した環境を作るのは難しいです。
環境構築の根本の理解は難しいですけど,毛嫌いせず少しずつでも進めていかなきゃですね。
まだTypeScript出てこなかったw
そして明日もまだ入らなさそう。

…それではまた明日。