【React＆TypeScript入門】理解が進むreactとtypescriptの違いの話

3丁目オーナー

リクエストにお答えして

reactとtypescriptの違いを解説じゃ

reactとtypescript（ts）の違いについて、わかりやすさを重視して簡単に解説します。

ここで概念の違いをしっかりと抑えておくとその後の学習や開発の際に理解が進むので身につく速度が変わります。
基礎的な概念なので今からでも良いので必ず覚えておきましょう。

reactとtypescriptの違いを要約すると
1. プログラミング言語と開発者とライブラリの関係性
ReactとTypescriptを踏み込んで説明
JavaScriptライブラリのReactでTypeScriptが使える理由
ちなみにライブラリとフレームワークの違い
寄付の依頼

reactとtypescriptの違いを要約すると

おそらく検索するとこんな感じで出てくると思います。

Reactは、ユーザインタフェース（UI）を構築するためのJavaScriptライブラリです。・・・・・・

は？

わかりやすく簡単に要約すると

Typescriptとは？

プログラミング言語である

プログラミング言語なので、JavascriptやPythonなどと同じグループということです。

※ 少し補足するとJavaScriptに型（Type）の概念を追加したプログラミング言語である。
JavaScript + 型（Type） → Typescript！

Reactとは？

見た目を作るために特化したライブラリである

プログラミング言語ではないので、JavascriptやPythonなどとは全く別のグループということです。

利用シーンから考えると特定のプログラミング言語で開発を行う際に特定のライブラリを使う、そのようなイメージを持つよ良いと思います。

プログラミング言語と開発者とライブラリの関係性

プログラミング言語

アプリ開発する言語

例）カレーのレシピ、もしくは調理道具

開発者

アプリ開発する人、プログラマー

例）調理者、シェフ

ライブラリ

特定の機能を簡単に使えるようにまとめた再利用可能なコードの集まり

例）市販のカレールー

例：

調理者（開発者）がレシピや調理道具（プログラミング言語）を使ってカレー（アプリ）を作る時に市販のルー（ライブラリ）を使ったら簡単だよね？ってことですね。

市販のルー（ライブラリ）を使わない場合、カレー粉から作るということになるのでユニークに作れますが、時間もかかり大変ですね。※ この時の調理道具は専門性の高い高度な電子機器ではなく基礎的な道具のイメージです。あまり専門性が高いとライブラリのイメージと被ってしまうため

ReactとTypescriptを踏み込んで説明

Reactの概要説明

正式名称: React

Reactは、もともとFacebook（現在のMeta）によって開発されたユーザインタフェース（UI）ライブラリです。公式には「React」と呼ばれています。※ライブラリとフレームワークの違いはこの後に説明しますが、Reactはフレームワークではありません。

ただし、ReactがJavaScriptライブラリであることを強調するために、「React.js」という表記が使われることもあります。そのため文脈によっては「React.js」と呼ばれることもあるが、公式名称は「React」。

Reactの主な特徴

1. コンポーネントベース

Reactはコンポーネントベースのライブラリです。

これは、UIを独立した、再利用可能な部品（コンポーネント）に分割して構築するという意味です。
各コンポーネントは独自の状態と振る舞いを持ち、それらを組み合わせて複雑なUIを構築します。

2. 宣言的プログラミング

Reactは宣言的アプローチを採用しています。

これは、UIがどのように見えるべきかを宣言的に記述するという意味です。
Reactは、宣言されたUIが常に最新の状態を保つように管理します。

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

上記の例では、ボタンをクリックするとカウントが増えるシンプルなアプリが作成されています。Reactは状態の変化に応じてUIを自動的に更新します。

3. 仮想DOM

Reactは仮想DOM（Virtual DOM）という技術を使用しています。

仮想DOMは、実際のDOMの軽量なコピーであり、UIの変更を効率的に管理します。これにより、パフォーマンスの高いレンダリングが可能になります。

TypeScriptの概要説明

正式名称: TypeScript

TypeScriptは、Microsoftによって開発された、JavaScriptに型付けを追加するオープンソースのプログラミング言語です。

こちらは「TypeScript」が正式名称であり、他の表記は一般的には使用されません。

TypeScriptは、JavaScriptのすべての機能を持ちつつ、さらに型付けなどの機能を提供します。

TypeScriptのメリットやJavaScriptとTypeScriptの違いやメリット・デメリットについては、こちらで詳しくまとめています。

【React＆TypeScript入門】.js .jsx .ts .tsxの違いと使い分けの話

なんとなく使っているけど、.js .jsx .ts .tsxの違いが分からない～使い分けがよくわからない～を解決しよう！React開発でJavaScriptやTypeScriptのどちらを使うべきかそれぞれメリット・デメリットを把握しよう！

JavaScriptライブラリのReactでTypeScriptが使える理由

TypeScriptは、JavaScriptの上位互換のような存在であるため

Reactは、JavaScriptで書かれたライブラリですが、TypeScriptでReactを使うことができるのは、TypeScriptがJavaScriptと互換性があるためです。

ちなみにライブラリとフレームワークの違い

Reactは、しばしばフレームワークと誤解されることがありますが、正確にはライブラリです。

なので以下に、Reactがフレームワークではなくライブラリである理由を説明します。

ライブラリとは？

定義
- 特定の機能を提供するコードの集合体で、開発者が必要な部分を選んで使うものです。
特徴
- 開発者が主導権を持ち、ライブラリの機能を呼び出して使用します。
例
- React、Lodash、jQuery

フレームワークとは？

定義
- アプリケーション全体の構造や動作を規定する枠組みで、開発者がその枠組みに従ってコードを書くものです。
特徴
- フレームワークが主導権を持ち、開発者がその中にコードを組み込んでいきます。
例
- Angular、Vue.js、Django、Ruby on Rails

Reactがライブラリである理由

特定の機能に焦点を当てる
- Reactは主にUI（ユーザーインターフェース）の構築に特化しています。それは、コンポーネントを作成し、ユーザーインターフェースを宣言的に定義するためのツールを提供するライブラリです。
主導権を持つのは開発者
- Reactを使う場合、開発者がどのようにアプリケーションを構築するかについて主導権を持ちます。
- ReactはUIを構築するためのツールを提供しますが、ルーティング、データ管理、フォームの処理など、他の部分については開発者が他のライブラリを選んで組み合わせる必要があります。
他のライブラリと組み合わせやすい
- Reactはその軽量性と柔軟性から、他の多くのライブラリやツールと組み合わせて使用することが一般的です。
- 例えば、ルーティングにはReact Router、状態管理にはReduxやMobXなどを使用することができます。

フレームワークとReactの比較

Angular（フレームワーク）
- 包括的なソリューションを提供し、ルーティング、データバインディング、依存性注入など、多くの機能を内包しています。
- アプリケーション全体の構造を規定し、開発者がそれに従う形になります。
React（ライブラリ）
- UI構築に特化しており、アプリケーション全体の構造を規定しません。
- 他のツールやライブラリと自由に組み合わせて使用することができます。