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

PR
【React&TypeScript入門】理解が進むreactとtypescriptの違いの話
この記事は約8分で読めます。
3丁目オーナー
3丁目オーナー

リクエストにお答えして

reactとtypescriptの違いを解説じゃ

reacttypescript(ts)の違いについて、わかりやすさを重視して簡単に解説します。

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

PR

PR
PR

PR
PR

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

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

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

は?

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

Typescriptとは?

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

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

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

Reactとは?

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

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

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

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

プログラミング言語

アプリ開発する言語

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

開発者

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

例)調理者、シェフ

ライブラリ

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

例)市販のカレールー

例:

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

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

PR

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の違いやメリット・デメリットについては、こちらで詳しくまとめています。

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

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

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

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

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

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

ライブラリとは?

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

フレームワークとは?

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

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

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

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

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

寄付の依頼

もし、少しでもご参考になりましたらサイト運営への寄付をお願いします。
とても励みになります。

If you would like to help, please make a donation to the site management.
It is very encouraging.

BTC (ビットコイン) アドレス
35AfkHtN3paTC1iNVtHg6BDmCnHmffzQWM
DEEPコイン アドレス
0x43Dbe7F99b4A31bF184b98A8A814ADEC48FB789D
【完全入門】"=> とは?"JavaScriptのアロー関数の使い方と意味
ReactでおなじみのJSやTSに登場する「アロー関数 =>(矢印)」その使い方と意味、生い立ちについて解説します。意味をしっかり覚えるとその後の理解が進みます。補足で無名関数(匿名関数)についても説明しています
【生成AI初心者向け】RAGとは?chunkとは?チャンク化とは解説
生成AIでおなじみのLLM + RAG!そこで重要なchunk(チャンク)、chunk化を中心に初心者向けに解説!chunkについて聞いたことがあるがそもそもよくわかっていない方向けの話!chunk分割やベクトルストアについても触れてみます
需要の高い人気プログラミング言語&フレームワーク【将来性】
数多くの種類の言語からプログラミング初心者にもエンジニアのキャリアアップにも最適な将来性の高い人気のプログラミング言語とおすすめフレームワークを紹介!特に需要の把握はスキルアップと年収に直結です。ガチで必要な全ての選択肢の答えがここに
【Python入門】Fast APIの実装手順とフレームワーク技術選定
PythonでREST APIを作ったので検討したフレームワークと手順をまとめました!バックエンド処理の実装にKotlin,Rails,Python,Go,TypeSclipt どれで作ろうか迷った結果、軽量で主力言語のPythonに決定
【賃貸にスマートロック】玄関におすすめ後付け可能な鍵比較5選
賃貸でも玄関の鍵にスマートロックを後付けすることが可能です。スマホで楽々解錠、急な来客や彼氏彼女に合鍵シェアっておしゃれですね。徹底的に調べて厳選比較しました。【賃貸OK】ITエンジニアがおすすめする賃貸でもできるスマートハウス化計画!
PR
PR

コメント

タイトルとURLをコピーしました