あなたが知っておくべき素晴らしいJavaScriptライブラリとフレームワーク

JavaScript：ネットワーク言語とそのエコシステムの継続的な進化

JavaScriptは20年以上生まれ、進化を続けています。近年、その開発は驚くほど速く、今日の人気のあるフロントエンドのJavaScriptテクノロジーが数年で重要であるかどうかを人々は疑問に思います。

ただし、開発効率を向上させるための最新のツールとフレームワークを持つことが重要です。この記事では、今すぐ学習すべき主要なJavaScriptライブラリ、フレームワーク、ツールのいくつかについて説明します。

この記事でカバーされているライブラリとフレームワークのインデックス：

フレーム

• 反応します
• vue
• ember.js
• 角度
• next.js
• svelte
• イオン
• ギャツビー
• meteor.js
• 急行

図書館

• jquery
• chart.js
• 3.js
• D3
• Anime.js

タスクランナー

• ガルプ
• eslint
• バベル
• うなり声
• webpack

テストツール

• 冗談
• ジャスミン
• モカ

導入

JavaScriptエコシステムは成長し、独自のライブラリ、フレームワーク、ツール、パッケージマネージャー、およびJavaScriptにコンパイルされた新しい言語を持っています。興味深いことに、NPMはJavaScriptの事実上のパッケージマネージャーであり、世界最大のソフトウェア登録センターでもあります。 2017年1月のLinux.comの記事から抜粋：

NPMレジストリには350,000を超えるパッケージがあり、次に人気のあるパッケージレジストリ（Apache Mavenリポジトリ）の2倍以上です。実際、現在、世界最大のパッケージ登録センターです。

わずか8か月で、NPMレジストリには約500,000のパッケージがありました。これは、他のパッケージ倉庫と比較して大幅に増加しています。

フロントエンドのJavaScript開発者として、最新のJavaScriptツールとライブラリに追いつくことが重要です。テクノロジーが一般的になると、それに対する需要が高くなり、これはより高い給料のコーディングジョブを意味します。そこで、私はあなたが知っておくべきだと思う人気のあるJavaScriptテクノロジーのリストをまとめました。

フレーム

フレームワークには、アプリケーション制御の流れを決定するアーキテクチャがあります。フレームワークは、フレームワーク構造を説明し、すべてを整理する方法を説明します。アプリケーションを開始および実行するために必要な基本的な機能は、フレームワークによっても提供されます。さらに、フレームワークの設計原則とパターンに従う必要があります。フレームワークとライブラリの違いは、ライブラリに電話をかけ、フレームワークがあなたを呼び出すことです。

フレームワークには通常、多くのライブラリが含まれており、抽象化のレベルが高くなります。フレームワークには、イベント処理、AJAXコール、テンプレート、データバインディング、テストなどの組み込み機能があります。

反応します

Reactは、FacebookとInstagramの開発者によって構築されたJavaScriptライブラリです。 Reactは、開発者にとって最も人気のあるテクノロジーの1つとして評価されています。

それで、なぜ反応はそんなに人気があるのですか？ Reactを使用すると、宣言的な方法を使用してインタラクティブなUIを作成できます。また、「ビューがこのように見えるはずだ」と宣言することで、アプリケーションの状態を制御できます。コンポーネントベースのモデルでは、コンポーネントが再利用可能なUI要素であり、それぞれが独自の状態を持つコンポーネントベースのモデルを使用します。

Reactは仮想DOMを使用するため、DOMを直接操作することを心配する必要はありません。 Reactのその他の顕著な機能には、一方向データフロー、オプションのJSX構文、およびゼロビルド構成でReactプロジェクトを作成するためのコマンドラインツールが含まれます。

角度

Angularは、かつてフロントエンド開発者の中で最も人気のあるJavaScriptテクノロジーでした。それはまだ広く使用されており、Googleおよび個人コミュニティと企業コミュニティによってサポートされています。

角度のある機能には次のものがあります。

• JavaScriptの代わりにデフォルト言語としてTypeScriptを使用します
• コンポーネントベースのアーキテクチャ
• モバイルプラットフォームとWebプラットフォームでのパフォーマンスの向上
• より良いツールと足場オプション

Vue.js

初心者に最適なJavaScriptフレームワークをお探しですか？ Vue.JSフレームワークは近年非常に人気があります。 GitHubスターに関する限り、GitHubで最も人気のあるJavaScriptフレームワークでもあります。 Vueはarbitrary意的でないフレームワークであると主張しているため、開発者が簡単に把握できます。 VueのHTMLベースのテンプレート構文は、レンダリングされたDOMをインスタンスデータにバインドします。

このフレームワークは、ウィジェットとWebアプリケーション全体を作成するために使用できる仮想DOMと再利用可能なコンポーネントを備えたReactのようなエクスペリエンスを提供します。さらに、JSX構文を使用してレンダリング関数を直接記述できます。状態が変更されると、Vue.JSはリアクティブシステムを使用して、どのような変化が発生したかを判断し、最小のコンポーネントを再レンダリングします。 Vue.jsは、他のライブラリの簡単な統合もサポートしています。

next.js

Next.JSは、「生産環境向けのReactフレームワーク」と呼ばれます。これは、サーバー側のレンダリングや静的Webサイト生成など、新しい機能を追加するReactベースのフレームワークです。 ReactはJavaScriptパッケージで、クライアントブラウザーでJavaScriptを使用してレンダリングされたWebアプリケーションを作成するために一般的に使用されています。それはあなたに最高の開発エクスペリエンスと、あなたが生産環境で必要とするすべての機能を提供します。

### ember.js

Ember.jsは、既存のシングルページアプリケーションエコシステムパターンから言語、ベストプラクティス、パターンを活用することにより、開発者がスケーラブルなシングルページWebアプリケーションを構築するのに役立つJavaScriptフレームワークです。これにより、データ管理やアプリケーションフローなどの包括的なソリューションを提供することにより、クライアントJavaScriptアプリケーションの開発が可能になります。初心者に最適なJavaScriptフレームワークを探しているなら、これは素晴らしい選択です。

svelte

ほとんどの作業がブラウザで行われているReactやVueなどの従来のフレームワークとは異なり、Svelteはこれらの作業をアプリケーションを構築する際にコンピレーション手順に転送します。これにより、ユーザーインターフェイス開発に有用な選択肢になります。

イオン

Ionicは、高速で高速インタラクティブなアプリケーションを作成するためのモバイル最適化されたUIコンポーネント、ジェスチャー、ツールのスイートを提供する無料のオープンソースフレームワークです。ハイブリッドモバイルアプリケーションを作成できます。

###ギャツビー

このオープンソースの静的Webサイトジェネレーターは、WebpackおよびGraphQLテクノロジーを使用して構築されており、Reactフロントエンド開発フレームワークに基づいて構築されています。 Gatsbyを使用して、プログレッシブWebアプリケーションを作成し、高速かつ安全な静的Webサイトを作成できます。 Tinder、Snapchat、Affirmなどの多くの有名な組織で使用されており、Webサイトを構築する際に非常に高速で柔軟性があります。

meteor.js

Meteor.jsは、Webおよびモバイルアプリケーションを開発するための無料のJavaScriptフレームワークです。流星は便利で人気があり、反応性のあるUIを持っています。あなたが経験豊富な開発者である場合は、meteor.jsを試してみてください。高速で便利な開発プロセスがあります。

Meteorは、クライアントとサーバーの間で共有コードベースを備えたフルスタックアプリケーションを作成するのに特に適しています。

急行

Expressは、あらゆるWebアプリケーション用のサーバー側コードを作成するための人気のある強力なツールです。無料でオープンソースです。 Webアプリケーションを迅速かつ簡単に設計および作成するために使用されます。

図書館

JavaScriptライブラリ（JSライブラリ）を理解する最良の方法は、それらを使用することです。ライブラリは、特定の機能を提供するコードの再利用可能なスニペットです。これは、アプリケーションに使用できる機能、オブジェクト、クラスのコレクションです。ライブラリはさまざまなレイヤーを抽象化するため、実装の詳細について心配する必要はありません。

「どのJavaScriptライブラリを使用する必要がありますか？」と疑問に思います。ただし、ライブラリの使用方法を制限する構造的制約は設定されていません。最も一般的なJavaScriptライブラリをお探しですか？シンプルなJavaScriptライブラリから始めます。人気のある基本的なJavaScriptライブラリには次のものがあります。

jquery

学ぶのに最適なJavaScriptライブラリをお探しですか？ jQueryは、最も一般的なJavaScriptライブラリの1つです。これは、JavaScriptを使いやすくし、以前よりもDOMの操作を容易にするライブラリです。 jQueryの単純な学習曲線と使いやすい構文により、新世代のクライアント開発者が生まれました。数年前、jQueryは、クロスブラウザーサポートを備えた堅牢なWebサイトを構築するための信頼できるソリューションと見なされていました。 DOM操作、イベント処理、CSSセレクターに基づいたAJAXコールの作成など、jQueryのコア機能が人気を促進しています。

しかし、事態は変化し、JavaScript環境は常に進化しています。 JQueryの機能のいくつかは、新しいECMAScript仕様に組み込まれています。さらに、今日使用されている新しいライブラリとフレームワークには、DOMを結合するためのネイティブ方法があるため、通常のDOM操作技術は不要になりました。 JQueryは人気が低下していますが、すぐに消えるとは思いません。これを確認して、JavaScriptライブラリ（またはJSライブラリ）を開始してください。

D3：データ駆動型ドキュメント

D3（またはD3.JS）は、SVG、HTML、CSSなどのWeb標準を使用してインタラクティブな視覚化を生成するための強力なJavaScriptライブラリです。他の視覚ライブラリとは異なり、D3は最終的な視覚効果をよりよく制御できます。

D3は、データをDOMにバインドし、ドキュメントを変換することにより機能します。また、基本的な機能を拡張するプラグインとライブラリを含む独自のエコシステムもあります。図書館は2011年から存在しており、あなたを始めるための多くのドキュメントとチュートリアルがあります。

### chart.js

この美しいJavaScriptライブラリは、開発者と設計者がJavaScriptを使用してデータを簡単に視覚化できるように設計されています。 Chart.jsは、最も広く使用されているデータ視覚化パッケージの1つであり、最もユーザーフレンドリーなパッケージの1つです。 Chart.jsは、わずかなコードで、データに即座に使用可能なインタラクティブな視覚化を作成できます。これは、学習するのに最適なJavaScriptライブラリの1つです。

Anime.js

シンプルで強力なAnime.JSアニメーションライブラリを使用すると、CSSプロパティとSVG画像とDOMプロパティにさまざまなアニメーションを作成できます。 Anime.jsの詳細については、こちらをご覧ください。

3.js

Three.jsは、Webブラウザーで3次元のコンピューター画像を作成およびアニメーション化するためのJavaScriptライブラリです。これは、エフェクト、設定、カメラ、照明、材料、モデル、シェーダー、アニメーション、3Dオブジェクトを含む単一のJavaScriptファイルです。

道具

ツールは、開発プロセスに役立つルーチンのセットです。ライブラリとは異なり、ツールは通常、クライアントコードでタスクを実行します。コードを入力として受け取り、タスクを実行してから出力を返します。一般的に使用されるツールには、翻訳者とビルドツール、アセットコンプレッサー、モジュールバンドラー、および足場ツールが含まれます。

一般的なタスクランナー

ユニバーサルタスクランナーは、特定の繰り返しタスクを自動化するために使用されるツールです。一般的な一般的なタスクランナーは次のとおりです。

ガルプ

Gulpは、タスクランナーとして使用され、Web開発でシステムを構築するJavaScriptツールキットです。コンパイル、コード圧縮、画像最適化、単体テスト、コード検査などの繰り返しタスクを自動化する必要があります。 JavaScriptにあまり精通していない人でさえ、Gulpはタスクを作成するプロセスを容易にします。

Gulpはパイプラインを使用して、あるプラグインから別のプラグインにデータをストリーミングし、最終結果はターゲットフォルダーへの出力です。 Gruntと比較して、Gulpは中間結果を保存するための一時ファイルを作成しないため、I/Oコールの数を減らすため、パフォーマンスが向上します。

### grunt

Gruntタスクランナーと自動化ツールには、Gruntfileという名前のファイルで定義されたカスタムタスクを実行できるコマンドラインインターフェイスがあります。 Gruntには何千ものプラグインがあります。これには、遭遇する最も一般的な繰り返しタスクがカバーされます。 Gruntを使用すると、すべてのタスクを単一のコマンドで実行できます。これにより、作業が簡素化されます。

### npm

GulpとGruntは、時間がかかる新​​しいツールの学習と習得に時間を費やす必要があります。 node.jsにバンドルされた代替案を選択することにより、プロジェクトに追加の依存関係を追加することを避けることができます。 NPMはパッケージマネージャーとしてよりよく知られていますが、NPMスクリプトを使用して、上記のほとんどのタスクを実行できます。

### eslint

ESLINTは、エラーや矛盾を引き起こす可能性のある問題についてコードを分析する挿入可能なJavaScriptツールです。

###きれい

Prettierは、強い意見を持つコードフォーマッタです。コードを分析し、最大のラインの長さを考慮し、必要に応じてコードを破る標準に対してコードを転載することにより、一貫したスタイルを実施します。複数の言語で動作し、お気に入りの編集者の一部と統合できます。

### webpack

WebPackモジュールバンドラーを使用して、ブラウザ用のJavaScriptファイルをバンドルでき、WebPackはスタイルやアセットを変更およびバンドルすることもできます。

###バベル

Babelは、新しい言語機能を古い言語機能に変換する無料のオープンソースJavaScriptコンパイラです。 「翻訳者」とも呼ばれます。バンドラーのみを使用する場合、誰でも最新のJavaScript機能を使用するが、古いブラウザーで実行されるコードを作成できます。

###テストツール

テストとは、アプリケーションが予想されるビジネスおよび技術的要件を満たしていることを検証および検証するプロセスです。テスト駆動型開発方法は、エラーの検出にも役立ち、最新のフロントエンド開発スタックの一部と見なされる必要があります。

冗談

Jestは、Facebookによって書かれた比較的新しいテストフレームワークであり、Reactコミュニティに人気があります。 Jestの文書によると、Jestは特に使用するために設計されているという広範な誤解があります。

JESTは反応固有のテストランナーと見なされる場合がありますが、実際には、JavaScriptライブラリやフレームワークに適応できるユニバーサルテストプラットフォームです。 JESTを使用して、JavaScriptコードをテストできます。

他のテストスイートでJestを使用することの最大の利点は、テストを開始するためにゼロ構成または最小構成のみが必要であることです。このフレームワークには、アサーションライブラリが組み込まれており、模擬関数またはスパイの使用をサポートしています。

Jestには、アプリケーションのUIが予期せず変更されないようにすることができるスナップショットテストと呼ばれる機能があります。 Facebookの開発者や他の貢献者は最近、このプロジェクトに多くの作業を投資しているため、今後数年間でJestが最も人気のあるJavaScriptテストフレームワークになっても驚くことではありません。

モカ

このJavaScriptテストフレームワークには、ブラウザのサポート、約束、テストカバレッジレポート、および実行中のJavaScript APIなどの非同期サポートがあります。 Mochaは通常、Chai、shuld.js、expect.js、またはより良いアサートなどのアサーションライブラリで使用されます。これは、アサーションライブラリ自体がないためです。

ジャスミン

Jasmineは、JavaScriptの行動主導型テストフレームワークです。 Jasmineは、ブラウザ、プラットフォーム、フレームワークに依存しないテストスイートになるように設計されています。 Jasmineには、Matchersと呼ばれる独自のアサーションライブラリがあり、清潔で読みやすい構文を提供します。 Jasmineには組み込みのテストランナーがありません。代わりにKarmaのような汎用テストランナーを使用する必要がある場合があります。

要約します

Web言語であるJavaScriptは、1995年の設立以来、その関連性を維持しています。ブラウザが別の言語に置き換えることを決定しない限り、このようにとどまることがあります。 JavaScriptにコンパイルする他の多くの言語がありますが、予見可能な将来のためにJavaScriptに取って代わる他のスクリプト言語はありません。なぜ？ JavaScriptが交換するにはあまりにも人気が高くなっているためです。

JavaScript環境は、Web開発の現在の傾向で見られるように、間違いなく進化しています。古いライブラリとフレームワークは、新しいテクノロジーに置き換えられています。新世代のフロントエンドライブラリ、フレームワーク、ツールが出現し、広範囲に及ぶことができます。

この記事は更新されており、エゼキエル・ローソンからの貢献が含まれています。 Ezekielは、JavaScript、Vue.JS、HTML、CSSなどのWebテクノロジーを使用して、クリーンで保守可能なコードの作成に焦点を当てたフロントエンド開発者です。

以上があなたが知っておくべき素晴らしいJavaScriptライブラリとフレームワークの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。