JavaScriptは長年にわたってますます人気を得ており、コミュニティは急速に成長しており、開発者は言語用のツールを日々開発し、構築しています。.
これは、特定のタスクに使用するツール/フレームワーク/ライブラリを決定する際に、JavaScriptで文字通りにしたいことには常に複数のオプションがあるため、圧倒的になります。最初は、どのライブラリやフレームワークを学ぶべきかを決めるのはまだ難しいです.
この記事では、いくつかのJavaScriptフロントエンドフレームワーク/ライブラリを使用することの利点をわかりやすく説明することに焦点を当て、最終的にはそれらをより明確に説明します。 1つを選択する決定プロセスを簡単にすることを目的としています.
反応する
反応する フレームワークではなく、ユーザーインターフェイスを構築するためのJavaScriptライブラリ.
これはオープンソースであり、Facebookと個々の開発者のコミュニティによって維持されています。 Reactは最初に ジョーダンウォーク Facebookの内部ツールとして。それは後にオープンソースとなり、2013年に一般にリリースされ、その後、幅広い人気を得ています。.
機能のいくつかは次のとおりです.
- 反応性があり、カスタマイズ可能で再利用可能なコンポーネントを提供します
- 仮想DOMを利用する
- 非常に速い
- コンポーネントベース
- 一方向のデータバインディング
- コードの再利用性
- 背後には活気に満ちた繁栄するエコシステムがあります
- 便利な状態管理処理
インストール/使用法
Reactは2つの異なる方法でフロントエンドで使用できます.
- CDN以上
- Node.JSの使用
CDN以上
あなたは彼らを参照することができます 公式サイト スクリプトリンクを取得するには、HTMLマークアップのヘッダータグに含めることができます。目的に応じてリンクを選択してください.
たとえば、開発環境で使用する場合、次のようになります。
そして、生産のために
Node.JSの使用
NodeJSがすでにインストールされていると思います。 Reactをインストールするには、次のコマンドを入力するだけです.
sudo npm i -g create-react-app –save-dev
インストールが完了したら、次のコマンドを入力します
create-react-app my-first-react-application
上記のコマンドは、Reactが適切に実行されるために必要なすべてのライブラリをインストールします。これには、開発サーバー、webpack、およびbabelが含まれます。.
my-first-react-applicationフォルダーに移動し、次のコマンドを実行します
npmスタート
上記はポート3000で開発サーバーを起動します。そして、ポート3000でサーバーIPにアクセスすると、以下のように表示されます。.
Reactは多くの大規模な組織から人気とオンデマンドを得ています。あなたが学習に興味があるなら、私はこれを取ることをお勧めします 完全なコース.
Vue.js
Vue.js インタラクティブなユーザーインターフェイスと単一ページのアプリケーションを構築するためのプログレッシブJavaScriptフレームワークです。これは、ビューレイヤーに重点を置いたコアライブラリを備えたモデルビューフレームワークです。 Vueは人気があります。これは、単一ページのアプリケーションを強化する機能です。 Reactとは異なり、VueはJSXではなく生のHTMLを使用します.
Vue.jsはオープンソースであり、当初は エヴァン・ユー 2014年2月に一般公開されました。以下は、機能の一部です。.
- リアクティブで構成可能なビューコンポーネントを提供します.
- 仮想DOMを利用する
- コアライブラリ（つまり、ルーティングと状態管理）に焦点を当て続けます
- CSSのスコープはCSS-In-Jsなしで処理されます
- コンポーネント内の一方向バインディング.
- 必須アドオンのサポート
- コードの再利用性
インストール/使用法
フロントエンドでCDNを介して、またはNode.jsを使用してVue.jsを使用できます
を使用するには CDNウェイ, 次のスクリプトをHTMLページのヘッダーセクションに追加できます。.
上記のスクリプトには、重要なコンソールメッセージが含まれているため、開発目的に適しています。ただし、本番環境では、以下のものを使用する必要があります.
そして、 Nodejsで使用する, npmコマンドを使用してインストールできます.
npmインストールvue
公式のVue JSを読むことを強くお勧めします ドキュメンテーション 詳細を学ぶか、これを取ることを検討する 道.
角度
角度 動的ページ用の構造JavaScriptフレームワークです。 HTMLをテンプレート言語として使用でき、HTML構文を使用してアプリケーションコンポーネントを明確かつ簡潔に表現できます。これは、Googleや他の貢献者によって維持されているオープンソースプロジェクトです。.
取り付け
最新のNodejsがインストールされていることを確認してください。最初にインストールする必要があるのは、Angular CLIツールです。.
npm install -g @ angular / cli
インストールしたら、次のコマンドで新しいプロジェクトを作成できます.
ng my-first-angular-app
画面の指示に従ってください。これにより、いくつかのファイルとフォルダーが生成され、npmモジュールを使用して、Angularが正しく動作するために必要なサードパーティライブラリがダウンロードされます.
新しく作成したアプリケーションを起動するには、appsフォルダーから次のコマンドを実行します.
ngサーバー
これにより、ポート4200でサーバーが自動的に起動します。.
[[メール保護] my-first-angular-app]＃ng serve
10％が3/3モジュールを構築しています0アクティブℹ ｢wds｣：プロジェクトはhttp：// localhost：4200 / webpack-dev-server /で実行されています
｢｢ wds ｣：webpack出力は/から提供されます
｢｢ wds ｣：404は//index.htmlにフォールバックします
チャンク{main} main.js、main.js.map（main）47.8 kB [初期] [レンダリング]
チャンク{polyfills} polyfills.js、polyfills.js.map（polyfills）264 kB [初期] [レンダリング]
チャンク{runtime} runtime.js、runtime.js.map（ランタイム）6.15 kB [エントリ] [レンダリング]
チャンク{styles} styles.js、styles.js.map（styles）10 kB [初期] [レンダリング]
チャンク{vendor} vendor.js、vendor.js.map（vendor）3.81 MB [初期] [レンダリング]
日付：2019-12-28T12：08：20.138Z-ハッシュ：5d4b93c7bf9e61979c4d-時間：12864ms
** Angular Live Development Serverはlocalhost：4200でリッスンしています。http：// localhost：4200 /でブラウザーを開いてください**
｢｢ wdm ｣：コンパイルに成功しました.
結論
ですから、あなたが学ぶことを選択するのは、「どちらが良い」というよりも個人的な好みです。.
上記のすべてのフレームワーク/ライブラリは素晴らしいです。これが簡単な要約です。
- 外部の依存関係を処理する必要なく依存したいフレームワークが必要な場合は、Angularを学ぶ必要があります.
- 高速、PWA、シングルページアプリケーションを構築する必要があり、JSXに慣れている場合は、Reactを学ぶ必要があります。.
- Reactには最も活気のあるコミュニティがあり、その大きなコミュニティにより、雇用機会が増えています.
- Reactは比較的簡単に始めることができます.
- Reactは高度にカスタマイズ可能で、UIの各部分をコンポーネントとして扱います.
- VueにはReactと同じ利点がありますが、JSXはありません.
- Vueの求人市場は常に増加しています.
3つの人気度の比較を示すGoogleトレンドのグラフは次のとおりです.
フロントエンド開発に関心がある場合は、これをチェックしてください。 ウデミーコース.
タグ：
オープンソース
