Reactの基本的なコンセプト
Reactの設計理念:個人、チーム、大規模な組織によって書かれさまざまなコンポーネント(部品)を、シームレス(繋ぎ目無く)に組み合わせながら開発できる。
※ここでいうシームレスとは:Reactを使うことで実現できるスムーズな統合やユーザー体験を指す。「シームレスな開発」の一例として、0800状態管理やイベント処理、バックエンドとの通信をReactコンポーネント内で統一的に扱える点が
Reactコンポーネントは、単なるJSの関数。
Reactはインタクティブ
インタラクティブとは:
ユーザーとアプリケーションが双方向でやり取りを行うことができる機能や体験を指す。
具体的には、ユーザーの入力や操作に応じてアプリケーションがリアクティブ(状態(state)が変更されるとReactが自動的に必要な箇所を再レンダリングする)に応答し、動的にUIが更新される仕組みを指す。
インタラクティブとは、単に「動くUI」を意味するだけでなく、ユーザー体験の中心にユーザーの行動を置き、リアルタイムで反応する仕組みを指す。
例
ユーザーがフォームにテキストを入力すると、それに応じて画面上の内容が即座に変わる。
ボタンをクリックすると、カウンターの数が増える。
ユーザーの操作や状態に応じて表示内容を変更する。
Reactはライブラリである
React自体には、以下のような機能が組み込まれていない。
ルーティング(ページ間の移動):Reactでページ遷移を管理するには、React Routerなどの外部ライブラりが必要。
データフェッチ(APIやDBからデータを取得する機能):Reactにはデータ取得の標準的な仕組みはなく、fetchや axioなどを使う。
↑などの機能を使いたかったら、個別にライブラリを選んで設定する必要がある。
まとめると:
Reactは「UIを構築するためのライブラリ」であり、アプリケーション全体の仕組み(ルーティングやデータ管理)までは提供していない。
そのため、Reactを使ってアプリ全体を構築する際には、Next.jsやRemixのようなフルスタックフレームワークを使うと、より効率的に開発できるのでオススメ。
Reactはwebアプリケーションとネイティアプリケーション( iOS/Android) の両方で活用できる
1. ウェブアプリとネイティブアプリを同じスキルで構築できる
React Nativeという機能を使えば、iOSやAndroidアプリを作れる。
2. 各プラットフォームの強みを活かせる
ReactやReact Nativeを使うと、それぞれのプラットフォームが持つ特性や利点を活用しながら、最適化されたアプリを構築できる。
3. 自然なインターフェースを実現
Reactはプラットフォーム固有のデザインや操作感に適応できるため、ウェブではウェブらしい見た目と操作感、ネイティブアプリではスマートフォンに馴染んだ体験を提供できる。
例:React NativeではiOSのデザインガイドラインに従ったUIやAndroidのマテリアルデザインを使うことが簡単にできる。