最近の目標としてWeb系の企業にインターンに行きたいというものがある。
そこで、Web開発を行っている企業の多くが使うReact、TypeScriptの学習を進めてみる。
これらはネット上に情報が多くあり学びやすいので独学でもやりやすい分類だと思う。頑張っていく。
今日は、トラゼミさんのReact入門を使用して勉強してみた。
#4からはTypeScriptの知識が必要になるようなので、#3までを行い、次にプログラミングチュートリアルさんのReact入門、トラゼミのTypeScript入門を見てから#4からを進めてみようと思う。
まず、先程も記述したようにTypeScriptとReactは併用して開発される。そのため、TypeScriptから学ぶ必要がある。
そして、そもそもReactとは、Facebook社が開発shチアUIライブラリであり、UIを作るための見た目と機能を両方を満たすコンポーネントという概念が特徴。
そして、そのコンポーネントを組み合わせてWebの画面を作っていく。
Reactを使わない画面描写をする場合、DOMを直接変更してHTMLを再描画するのはコストが高くなる。
そこに、Reactは仮想DOMという技術を実行して解決している。
ブラウザのDOMツリーをJavaScriptのオブジェクトとして扱う。そうすることでブラウザに負荷をかけずにJavaScriptのメモリを使う効率の良い再描画(レンダリング)を行うことが目標。
DOMの状態をJavaScriptで管理することが出来る。これがReactのコンポーネントが「状態をもつUI」と言われる由縁である。
仮想DOM上では差分のみを描画し、変更を反映させる。ただし、実際のDOMでは変更する階層に加えて下層の階層も変更の対象になる。
ざっくりとすると、このような説明であったが分かりにくかったので調べてみた。
こちらのサイトの記事を簡単にまとめる。
そもそもDOMとはWebページとスクリプトやプログラミング言語を接続するものであり、JavaScriptなどによって、要素の値をダイレクトに操作できる。
JavaScriptや従来のフレームワーク(jQueryなど)ではスクリプトのロジックから受けとった情報をもとにHTMLを作成し、それを元にブラウザに表示するための描画を行う。
状態が変わるなど情報に変化があった場合は、改めて情報を受け取り直してからDOMを再構築し、それを元に再描画を行い画面を変化させるため表示が遅くなる。
対して、仮想DOMを利用してDOMを構築する場合、情報を受け取ってもすぐにはブラウザの描画を行わず、まずはバーチャルなDOMを構築し、構築されたDOMの内容を基にHTMLを作成し、実際のDOMに同期させる。このプロセスを差分検出処理といい、これによってページ表示の高速化を実現している。
ここからは、#2の内容である。
Reactの記述にはJSXというものが使用される。これはJavaScriptの拡張言語であり、テンプレート言語とは異なるものである。
これを使用することでReactの記述をHTMLのような記述で描くことが出来、さらにJavaScript構文を使用することが出来る。
JSXは最終的にReact要素を生成することが出来る。
ReactでHTMLの要素を作成する場合、React.createElementというReactの要素を使用する。しかし、JSXを使用しない場合と比べ、JSXを使うとHTMLのような記述で要素の生成が可能である。
JSXはコンパイル時にJSX⇒React.createElementの式に変換してReact要素を作成している。これを利用することでReact.createElementを使った構文に比べて直感的に記述することが出来る。
JSXの基本
- Reactライブラリをimportする。
- returnの中がJSXの構文。基本的にはHTMLと同じ。ただし、classはclassNameにする。
- キャメルケースで記述する。
- {}内で変数を扱える。{}の中身はJavaScriptが扱える。
- 閉じタグが必要。imgタグでも"/>"の記述を忘れない。
- JSXは必ず階層構造、最上位のコンポーネントは並列に出来ない。
- 最上位のコンポーネントは並列に記述できない。並列にしたい場合、"というタグで囲む。このタグはHTMLのタグとして出力されない。
- React.Fragmentは省略形でかける => <>、>でよい。
ここからは、#3の内容である。
この動画では、Reactを使用できるようにするための環境構築のやり方が前半にある。
残念ながらMac向けであるのでwindowsの方は下の記事を参考にすると良い。
homebrewやnodebrewはイマイチ分からなかったのでnpmを直接ダウンロードした。
詳しくは下の記事を参考にしてほしい。
実際に、npm、npxが使用できるようになったら次にReactのプロジェクトを作成してみる。
プロジェクト作成用のディレクトリに移動して板のコードをターミナル上で入力する。
npx create-react-app react-basic
すると、現在いるpathの下層に"react-basic"というディレクトリが作成されて、その中にReactでアプリケーションを開発するための雛形が作成される。
作成できたら、作成したディレクトリに移動してコードエディタを開く。
C:\Users\yusuk\nodejs-project\react-practice>cd react-basic
C:\Users\yusuk\nodejs-project\react-practice\react-basic>code .
Reactの雛形、環境の解説。
・src(ソース) 開発用ファイルが格納される。ReactコンポーネントのJSXファイルなどはここに置く。
・public 静的ファイルが格納される。htmlファイルや画像ファイルなど。
・build 本番用ファイルが格納される。npm run buildコマンドで生成される。
スクリプトの解説
npm start
・ローカルサーバーを起動してReactアプリを確認できる。
・ホットリロードに対応(ファイル保存で自動更新)
実際に、srcのApp.jsの内容を変更する。
pタグを追加してないよを変更して、ファイルを保存すると以下のように自動的に反映される。
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<p>
私の出身地は埼玉県です。
</p>
このように既存のファイルの内容に加えて、pタグで文章を追加した。
npm run build
・本番用ファイルを生成して、buildディレクトリに出力。
・srcとpublicのファイルを1つにまとめる(バンドル)
C:\Users\yusuk\nodejs-project\react-practice\react-basic>npm run build
> react-basic@0.1.0 build
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
46.66 kB build\static\js\main.bed5b056.js
1.78 kB build\static\js\787.293c2eec.chunk.js
541 B build\static\css\main.073c9b0a.css
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
Find out more about deployment here:
https://cra.link/deployment
C:\Users\yusuk\nodejs-project\react-practice\react-basic>
* History restored
Microsoft Windows [Version 10.0.22000.1455]
(c) Microsoft Corporation. All righ
このように、ターミナル上で表示されて、buildのディレクトリが作成される。
npm run eject
・BabelやWebpackの設定を変えたいときに使う。
・難しい処理なので必要な時以外やらない。
以上、3回分のまとめでした。ご覧いただきありがとうございます。