モダンJavaScriptの基礎から始める挫折しないためのReact入門
2023/5/20
Udemy
じゃけぇ
目次
セクション1:はじめに
セクション2:このコースで用いる環境について
セクション3:ReactやVue等を扱うために知っておきたいJavaScriptの基本
セクション4:モダンJavaScriptの機能に触れる
セクション5:素のJavaScriptだけでTODOアプリを作成してみよう
セクション6:Reactの基本を学ぶ
セクション7:Reactを使ってTODOアプリを作成してみよう
セクション8:さいごにとこれから
セクション1:はじめに
スキル修得の定番サイト
Progate/dotinstall/udemy
キーワード
SPA/仮想DOM/ECMAScript
パッケージマネージャ:npm/yarn
モジュールバンドラー
トランスパイラ:Babel
セクション2:このコースで用いる環境について
開発環境
Webエディタ:CodeSandbox
コード整形:Prettier:Node.js で動作するjs定番整形ツール
セクション3:ReactやVue等を扱うために知っておきたいJavaScriptの基本
キーワード:
モダンJS:仮想DOMを用いるライブラリ/フレームワーク
React, Vue, Angular, Riot
パッケージマネージャを使用
yarn, npm
モジュールバンドラー
トランスパイラ
DOM:Document Object Model
仮想DOM:
(既存のようにDOMを直接操作するのではなく)JSオブジェクト上で仮のDOMを作成し、良いタイミングで実際のDOMを更新する
パッケージマネージャ:
npm/yarn : 内部ではnode.js が動いている
依存関係の解決
NPMの基本:
構成要素
NPM:パッケージのレジストリ
package.json:設計書
package-lock.json:自動生成される、依存関係/バージョンのメモ
node_modules:各モジュールの実体。テンポラリなもの。コミットしない。
モジュールバンドラー
背景
開発環境:
ファイルを細かく扱いたい(作業分割)
プロダクション環境:
細かいファイルを大量に拾ってくるのは効率が悪い
依存関係もある(A>B>Cの読み込み順が入れ替わるとまずい、等)
解法
開発時は、これまで通り「開発者に都合のいいように」ファイルを分割し扱う
リリース時は、関連ファイルを1つ(orいくつか)に統合してデリバリする
統合=小さなファイルの依存関係(import)を解釈/書き換えし、1つの巨大JSにする。
トランスパイラ:
発祥は「ES6非対応環境への対応」として。ES6で描かれたJSをES5基準に変換する
応用し「JS以外のコードをJSに変換する」ことにも用いられる
JSX、TS
SASS/SCSS => CSS
SPA
Single Page Application
モダンJSではSPAが基本(らしい。実際はつくるもの次第では?)
利点:
URLが切り替わらない
画面切替時の「ちらつき」がない
ある意味、クライアント側でステートフル
技術特性:
非同期通信
レスポンシブデザイン
デバイスに合わせて最適な表示をするページ
主にPC/スマホ(/タブレット)
セクション4:モダンJavaScriptの機能に触れる
変数宣言
var:使わない。再定義可能。再代入可能。
let:変数。再定義不可。再代入可能。
const:定数。再代入不可。
オブジェクトをconst定義に代入した場合、その配下プロパティは固定されない。
分割導入
スプレッド構文
一次元配列の実質クローン
セクション5:素のJavaScriptだけでTODOアプリを作成してみよう
OK.
セクション6:Reactの基本を学ぶ
フラグメント:JSXの<div>囲いを省略できる
素
<div> <p>a</p> <p>b</p> </div>
Fragment
<React.Fragment> <p>a</p> <p>b</p> </React.Fragment>
Fragment省略
<> <p>a</p> <p>b</p> </>
関数コンポーネント:useStateによるstate操作
const [num, setNum] = useState(0)
関数コンポーネント:useEffectによる特定のメンバ更新時のフック設定
useEffect(() => {console.log("change state_num")}, [state_num])
stateメンバであるstate_numが更新された時だけ、ログが出る。
セクション7:Reactを使ってTODOアプリを作成してみよう
Input部品への入力を有効するには、onChangeを定義する。
セクション8:さいごにとこれから
受講してみて
「自分の基礎知識で合ってたんだ!」の自信が持てた。
他の人との水準確認がやりやすくなった。「コレが身についている程度です」。
拾えた新しい知識もあった。
websandbox、知らなかった!
Fragment、知らなかった!
useEffect、そういえば使ったことなかった!