🔮

Reactとは

2023/07/15に公開

Reactとは

Facebookによって開発されたユーザーインターフェースを構築するためのJavaScriptライブラリ。
JavaScriptライブラリの中で、一番使用されている!
複雑な画面でも、比較的容易に作成することが可能になります!

なぜReactなのか?

JavaScriptフレームワーク
この3つのライブラリは同じような機能を実装する際に使用することが可能!

他二つのライブラリと比較しても、Reactが一番支持されている!

Googleトレンド

日本で検索されたキーワード


https://trends.google.co.jp/trends/

npm trends(Downloads)

npm trends(Github Star数)

https://npmtrends.com/

Stack Overflow Trends

https://insights.stackoverflow.com/trends?tags=r%2Cstatistics

世界的にみると、フロントエンドのJavaScriptライブラリの傾向は
Reactが1強になりつつある状況!

日本においては、Vue.jsも人気で案件数も多い!

npm(Node Package Manager)とは?

JavaScriptのランタイム環境であるNode.jsのパッケージマネージャ。
npmを通じて、JavaScriptのライブラリやフレームワークをダウンロードしたり、
プロジェクトにインストールしたりすることができます!

また、npmはパッケージのバージョン管理依存関係の管理も行います。

package.jsonとは?

Node.jsプロジェクトの情報を記述するためのファイル。
プロジェクトのルートディレクトリに位置しています。

以下のような情報を含みます。

  1. メタデータ
    プロジェクトの名前、バージョン、説明、著者などの情報を記述します。

  2. 依存関係
    プロジェクトが依存しているパッケージとそのバージョンを指定します。
    これはdependenciesとdevDependenciesの二つのカテゴリに分かれています。
    前者はアプリケーションの実行に必要なパッケージ、後者は開発時(テストやビルドなど)のみに必要なパッケージを指定します。

  3. スクリプト
    プロジェクトにおける頻繁に使用するコマンド(テスト実行、ビルドなど)を記述します。
    これにより、npm runコマンドで簡単にこれらの操作を行うことができます。

npmを用いてパッケージをインストールすると、
自動的にpackage.jsonファイルが更新され、そのパッケージが依存関係として追加されます!

これにより、他の開発者が同じプロジェクトをセットアップする際に、
同じバージョンのパッケージを簡単にインストールすることが可能となります👀

Node.jsとは?

JavaScriptをブラウザの外側、つまりサーバーサイドや
デスクトップアプリケーションなどで実行できるようにするランタイム環境です!

JavaScriptはもともとウェブブラウザ上で動作するための言語として設計されました。
しかし、Node.jsの登場により、JavaScriptはブラウザ以外の環境でも動作するようになりました!

Node.jsはGoogleが開発したV8 JavaScriptエンジン上で動作します。

V8エンジンはChromeブラウザでJavaScriptを実行するためのものですが、
Node.jsによりサーバーサイドでも利用できるようになりました。

また、Node.jsは非同期I/Oとイベント駆動のモデルを採用しており、
大量の接続を同時に処理することが可能です。

これは例えば、リアルタイムアプリケーション(チャットアプリケーションやゲームなど)や、
I/O操作が頻繁に行われるアプリケーションの開発に特に有利です!

Node.jsにはnpmという非常に大規模なパッケージエコシステムが付属しており、
さまざまなモジュールやライブラリを簡単にインストールして利用することができます。

これにより、開発者は自分で全ての機能をゼロから作り上げる必要がなく、
必要な機能を提供するパッケージを検索・インストールするだけで開発を進めることができます🙆🏻‍♀️


今日は美容室やら面接準備やらであまり勉強できてないので
簡単にここまで!

明日は勉強会のメンバーと転職フェアに行って面接の練習や情報収集してきます〜〜💪🏻

https://type.jp/s/fair/e/

ではでは〜〜

参考動画🌱

https://www.udemy.com/course/react-complete-guide/

Discussion