[REACT]REACTの始め方とNode.jsについて
Create-React-Appの始め方
■ Create-React-Appの準備
Create React Appを使用するには、Node.jsをインストールする必要がある。
(※すでにNode.jsをインストールしてある場合には、この手順は不要。)
なぜREACTを始める時Node.jsが必要か。
REACTでプロジェクトを作成するにあたり、Node.jsが必要な理由について。
まずは、Node.jsをとは、も書いていきます。
■ Node.jsとは
Node.js はスケーラブルなネットワークアプリケーションを構築するために設計された
非同期型のイベント駆動の JavaScript 環境です。
Node.js公式Docsより
サーバーサイドのJavaScriptランタイム環境。
JavaScriptは通常、ウェブブラウザ上でクライアントサイドのスクリプトとして使用されるが、
Node.jsを使用することでJavaScriptをサーバーサイドで実行することができる。
Node.jsの特徴や利点
Node.jsの特徴や利点は次のとおり
1. シングルスレッド・ノンブロッキングモデル：
Node.jsはシングルスレッドのイベントループモデルを採用している。
これにより、非同期的なI/O処理を実行し、複数のリクエストを同時に処理することが可能。
スケーラビリティが向上し、高負荷のアプリケーションでも効率的に動作する。
2. パフォーマンス：
Node.jsはV8エンジンを使用しており、高速なJavaScript実行環境を提供。
また、非同期処理により、I/O待ち時間を最小限に抑えることができる。
そのため、リアルタイムアプリケーションや高負荷なネットワーキングアプリケーションに適している。
3. パッケージエコシステム：
Node.jsにはnpm（Node Package Manager）と呼ばれるパッケージ管理システムがある。
npmは非常に豊富なパッケージのコレクションを提供し、
簡単にパッケージのインストールや依存関係の管理ができる。
開発者はnpmを使用して、Node.jsアプリケーションの機能を拡張したり、
再利用可能なコンポーネントを利用したりすることができる。
4. プラットフォームの移植性：
Node.jsはクロスプラットフォームで動作し、Windows、Mac、Linuxなどの
さまざまな環境で利用することができる。
また、クライアントサイドとサーバーサイドの両方で同じ言語（JavaScript）を使用することで、
フルスタックの開発が可能になる。
ー ではなぜバックエンド開発のために開発されたNode.jsが
Reactアプリ（フロントエンド）開発で必要なのか？？
Node.jsにはnpm（Node Package Manager）と呼ばれるパッケージ管理システムがある。
Reactのような大規模なアプリケーションを開発するとなると、
様々なパッケージが必要になり、
パッケージのインストールと整合性の管理のために、上記したNode.jsのnpmが必要だからだ。
npmとは
npm（Node Package Manager）は、
JavaScriptのパッケージ管理システムであり、Node.jsの公式パッケージマネージャー。
npmを使用することで、開発者はプロジェクトで使用する外部のパッケージやモジュールを
簡単にインストール、更新、管理することができる。
REACTプロジェクト作成
■ REACTインストール
mac: sudo npm i -g create-react-app
■ プロジェクト作成
mac: create-react-app プロジェクト名
基本コマンド
基本コマンド
- start: 開発サーバーを起動し、ブラウザでReactアプリケーションを表示。
- build: 本番環境でのビルドを行います。最適化された静的ファイルが生成される。
- test: テストスクリプトを実行します。テスト実行時に使用。
- eject: 隠し設定を暴露し、Reactアプリケーションの設定をカスタマイズするための
スクリプトを実行する。設定を変更する必要がある場合に使用。
コンポーネント
昨日少々コンポーネントについて書いたがもう少し今回はわかりやすく書く。
Reactのコンポーネントは、
Reactライブラリにおいてビルディングブロックとなる再利用可能なUI要素。
画面の各構成要素をREACTで定義したもの。
アプリケーションの構成要素をカプセル化し、
それぞれの役割に基づいて独自のロジックやスタイルを持つことができる。
■ コンポーネント化の利点
1. 再利用性向上:
コンポーネントベースのアプローチにより、UI要素を独立して作成し、
他の場所で再利用することができる。同じコンポーネントを複数の場所で使用することで、
コードの重複を減らし、開発効率を向上させることができます。
2. メンテナンス性:
コンポーネントは独立して管理されるため、コードの変更や修正が容易になる。
特定の機能やスタイルを変更する場合、そのコンポーネントだけを修正すれば済む。
これにより、アプリケーション全体の保守性が向上！！
3. 一貫性:
コンポーネントを使用することで、UIの一貫性を維持することができる。
4. テスト容易性:
コンポーネントは独立してテスト可能な単位で、ユニットテストや統合テストを実施する際に便利。
各コンポーネントを単体でテストすることで、予期しないバグや問題を早期発見することができる。
5. 可読性と保守性:
コンポーネントベースのアプローチにより、UI要素が小さな部品に分割され、
それぞれの役割を明確にすることができる。
これにより、コードの可読性が向上し、他の開発者がコンポーネントを理解しやすくなる。
また、コンポーネントの独立性により、保守性が向上し、
大規模なアプリケーションの開発や変更管理が容易になる。
Reactのコンポーネントを定義する
JavaScriptのクラスまたは関数として定義される。
function Welcome(){
return <h1> Hello!</h1>;
}
コンポーネントを定義する関数名の先頭は大文字で定義すること。
⚠️ 小文字だとHTMLのタグだと思われてしまう！
呼び出す時は以下のように呼び出せる
<welcome />
ex. この以下のコードをコンポーネント化してみると...
<script type="text/babel">
const appEl = document.querySelector('#app');
const root = ReactDOM.createRoot(appEl);
root.render(<h1>こんにちは</h1>);
</script>
これが以下のようになる。
<script type="text/babel">
const appEl = document.querySelector('#app');
const root = ReactDOM.createRoot(appEl);
function Example (){
return <h1>こんにちは</h1>;
}
root.render(<Example/>);
</script>
■ アロー関数でも書いてみる
<script type="text/babel">
const appEl = document.querySelector('#app');
const root = ReactDOM.createRoot(appEl);
// function Example (){
// return <h1>こんにちは</h1>;
// }
const Example = () => {
return <h1>こんにちは</h1>;
}
//allow function 関数の中身がreturnのみなら以下のように変更が可能
//const Example = () => <h1>こんにちは</h1>;
root.render(<Example/>);
</script>
補足：JSXが複数行になるときは(). returnと自動セミコロン挿入について
returnと自動セミコロン挿入について...
自動セミコロン挿入
以下のようなコードがあったとして.
const Example = () => {
return <h1>こんにちは</h1>;
}
returnの後に改行が入ってしまうとundifinedを返されてしまう。
const Example = () => {
return
<div>
<h1>こんにちは</h1>;
</div>
}
// undifined
undifinedを返されてしまう理由は、
自動セミコロン挿入が行われてしまうからだ。
このようにJSXが複数行になる場合は、丸括弧()をつけることにより解決する
const Example = () => {
return (
<div>
<h1>こんにちは</h1>
</div>
);
}
Discussion