コンテンツ
2020年には、Web開発を支援するための多くのフレームワークとライブラリに恵まれています。しかし、必ずしもそれほど多様性はありませんでした。 2005年に、Mochaと呼ばれる新しいスクリプト言語がBrendanEichという名前の男によって作成されました。 LiveScriptに名前が変更されてから数か月後、名前は再びJavaScriptに変更されました。それ以来、JavaScriptは長い道のりを歩んできました。
2010年には、最初のJavaScriptフレームワークとしてBackboneとAngularが導入され、2016年までにすべてのWebサイトの92％がJavaScriptを使用していました。この記事では、3つの主要なJavaScriptフレームワーク（Angular、React、Vue）と、次の10年に向けたそれらのステータスについて見ていきます。あなた自身のサイトを作りたいですか？このウェブサイトビルダーのリストを試してください。
いくつかの優れたリソースについては、トップWebデザインツールのリスト、Webホスティングサービスのまとめ、および優れたユーザーテストソフトウェアのリストも確認してください。
01.角度
AngularJSは2010年にリリースされましたが、2016年までに完全に書き直され、Angular 2としてリリースされました。AngularはGoogleが開発した本格的なウェブフレームワークで、Wix、Upwork、The Guardian、HBOなどで使用されています。
長所：
- TypeScriptの例外的なサポート
- MVVMを使用すると、開発者は同じデータセットを使用して同じアプリセクションでの作業を分離できます
- 優れたドキュメント
短所：
- 少し学習曲線があります
- 古いバージョンからの移行は難しい場合があります。
- 更新はかなり定期的に導入されます。つまり、開発者は更新に適応する必要があります。
次は何ですか？
Angular 9では、Ivyがデフォルトのコンパイラです。パフォーマンスとファイルサイズに関する多くの問題を解決するために導入されました。これにより、アプリケーションがより小さく、より速く、よりシンプルになるはずです。
以前のバージョンのAngularをReactおよびVueと比較すると、
Angularを使用すると、最終的なバンドルサイズが大幅に大きくなりました。 IvyはProgressiveHydrationも可能にします。これは、AngularチームがI / O 2019で披露したものです。ProgressiveHydrationは、Ivyを使用してサーバーとクライアントに段階的にロードします。たとえば、ユーザーがページの操作を開始すると、コンポーネントのコードとランタイムが1つずつフェッチされます。
Ivyは、Angularの今後の大きな焦点のようであり、すべてのアプリで利用できるようにすることを望んでいます。バージョン9からAngular10までのオプトアウトオプションがあります。
02.反応する
Reactは2013年にFacebookによって最初にリリースされ、インタラクティブなWebインターフェイスの構築に使用されます。いくつか例を挙げると、Netflix、Dropbox、PayPal、Uberで使用されています。
長所：
- Reactは仮想DOMを使用しており、パフォーマンスにプラスの影響を与えます
- JSXは簡単に作成できます
- 更新によって安定性が損なわれることはありません
短所：
- 主な欠点の1つは、より複雑なアプリを作成するためにサードパーティのライブラリが必要になることです。
- 開発者は、開発するための最良の方法について暗闇に残されています
次は何ですか？
React Conf 2019で、Reactチームは彼らが取り組んできた多くのことに触れました。 1つ目は選択的ハイドレーションです。これは、ユーザーが操作しているコンポーネントに優先順位を付けるために、Reactが作業中のすべてを一時停止する場所です。ユーザーが特定のセクションを操作すると、その領域は水和します。チームは、コード、データ、画像の読み込みを調整するためのReactのシステムであるSuspenseにも取り組んでいます。これにより、コンポーネントはレンダリングする前に何かを待つことができます。
選択的ハイドレーションとサスペンスはどちらも並行モードによって可能になります。コンカレントモードでは、ユーザー入力への応答など、優先度の高いものに集中するために、優先度の低い作業の大きなブロックに入る機能をReactに与えることで、アプリの応答性を高めることができます。チームはまた、フォーカスと入力インターフェイスの管理という2つの特定のトピックに焦点を当てることにより、アクセシビリティを検討している別の領域として言及しました。
03. Vue
Vueは、元Google社員のEvanYouによって2014年に開発されました。 Xiaomi、Alibaba、GitLabで使用されています。 Vueは、主要ブランドの支援なしに、短期間で開発者から人気とサポートを得ることができました。
長所：
- 非常に軽いサイズ
- 初心者向け–習得が容易
- 素晴らしいコミュニティ
短所：
- React withFacebookやAngularwithGoogleのような大企業に支えられていない
- 実際の構造はありません
次は何ですか？
Vueは、より速く、より小さく、より保守しやすく、開発者がネイティブをターゲットにしやすくするという目標を設定しています（保守に問題がある場合は、ウェブホスティングサービスを検討してください）。次のリリース（3.0）は2020年第1四半期に予定されており、TypeScriptサポートの改善とともにパフォーマンスを向上させるための仮想DOMの書き換えが含まれています。また、Composition APIが追加されました。これにより、開発者はコンポーネントを作成し、操作ではなく機能ごとに整理する新しい方法を利用できます。
Vueを開発している人たちは、サスペンスの作業にも忙しくしています。サスペンスは、コンポーネントのレンダリングを一時停止し、条件が満たされるまでフォールバックコンポーネントをレンダリングします。
Vueのアップデートの優れた点の1つは、下位互換性を維持できることです。彼らはあなたがあなたの古いVueプロジェクトを壊すことを望んでいません。これは、APIの90％が同じである1.0から2.0への移行で見られました。
フレームワークの構文はどのように比較されますか？
3つのフレームワークはすべて、リリース以降に変更が加えられていますが、理解することが重要なことの1つは、構文とその違いです。単純なイベントバインディングに関して、構文がどのように比較されるかを見てみましょう。
Vue： ザ・ v-on ディレクティブは、Vueインスタンスのメソッドを呼び出すイベントリスナーをアタッチするために使用されます。ディレクティブの前には v- それらがVueによって提供される特別な属性であることを示し、レンダリングされたDOMに特別なリアクティブ動作を適用するため。イベントハンドラーは、インラインで提供することも、メソッドの名前として提供することもできます。
template> button v-on：click =” clickHandler”> Click me / button> / template> script> export default {name：“ HelloWorld”、methods：{clickHandler：function（）{console.log（“私はクリックされました！ ”）; }}}; / script>
反応： Reactは、JavaScriptの構文拡張であるJSとJSXにマークアップとロジックを配置します。 JSXでは、関数はイベントハンドラーとして渡されます。 React要素を使用したイベントの処理は、DOM要素でのイベントの処理と非常によく似ています。ただし、構文上の違いがいくつかあります。たとえば、Reactイベントには、小文字ではなくキャメルケースを使用して名前が付けられます。
function Button（）{function clickHandler（e）{console.log（ "クリックされました"）; } return button onClick = {clickHandler}> Click me！/ button>; }
角度： イベントバインディング構文は、等号の左側の括弧内のターゲットイベント名と、右側の引用符で囲まれたテンプレートステートメントで構成されます。または、 オン- 接頭辞。標準形として知られています。
@Component（{セレクター：“ app-click-me”、テンプレート： `button（click）=” onClickMe（）”> Click me！/ button>`}）export class ClickMeComponent {onClickMe（）{console.log（“あなたは私をクリックしました！」）; }}
人気と市場
まず、W3Techsの統計を調べて、残りのWebに関する3つのフレームワークの全体像を見てみましょう。 Angularは現在、すべてのWebサイトの0.4％で使用されており、JavaScriptライブラリの市場シェアは0.5％です。 ReactはすべてのWebサイトの0.3％とJavaScriptライブラリの市場シェア0.4％で使用されており、Vueは両方で0.3％を使用しています。これはかなり均一に見え、数が増えると予想されます。
Googleトレンド： 過去12か月間、Reactは検索用語で最も人気があり、Angularがそれに続きます。 Vue.jsはかなり遅れています。ただし、覚えておくべきことの1つは、Vueは他の2つに比べてまだ若いということです。
求人検索： これを書いている時点では、ReactとAngularは、IndeedとVueの求人情報の点で非常によく一致しています。ただし、LinkedInでは、Vue開発者に対する需要が高まっているようです。
スタックオーバーフロー： 2019年のStackOverflow Developer Surveyの結果を見ると、ReactとVue.jsはどちらも最も愛され、求められているWebフレームワークです。 Angularは、最も愛されているが3番目に望まれている9番目の位置に座っています。
GitHub： Vueの星の数は153kと最も多いですが、貢献者の数は最も少なくなっています（283）。一方、Reactには14万のスターと1,341の貢献者がいます。 Angularの星は59.6kしかありませんが、貢献者の数は3つのうちで1,579と最も多くなっています。
NPMトレンド： 上の画像は過去12か月の統計を示しており、AngularやVueと比較してReactの1か月あたりのダウンロード数が多いことがわかります。
モバイルアプリの開発
ビッグ3の主な焦点の1つは、モバイル展開です。 ReactにはReactNativeがあり、Reactユーザーだけでなく幅広いアプリ開発コミュニティでもiOSおよびAndroidアプリを構築するための人気のある選択肢となっています。 Angular開発者はネイティブアプリにNativeScriptを使用でき、ハイブリッドモバイルアプリにはIonicを使用できますが、Vue開発者はNativeScriptまたはVueNativeを選択できます。モバイルアプリケーションの人気のため、これは依然として重要な投資分野です。
2020年に注目すべき他のフレームワーク
2020年に何か新しいことを試したい場合は、これらのJavaScriptフレームワークを確認してください。
残り火： MVVMパターンに基づいて機能するWebアプリケーションを構築するためのオープンソースフレームワーク。 Microsoft、Netflix、LinkedInなどのいくつかの大企業で使用されています。
流星： 最新のWebおよびモバイルアプリケーションを開発するためのフルスタックJavaScriptプラットフォーム。学ぶのは簡単で、非常に協力的なコミュニティがあります。
結論
3つのフレームワークはすべて継続的に改善されており、これは心強い兆候です。誰もが独自の視点とどちらを使用すべきかについての好ましい解決策を持っていますが、それは実際にはプロジェクトのサイズに帰着し、あなたがより快適に感じるようになります。
最も重要な側面は、コミュニティの継続的なサポートです。したがって、新しいプロジェクトを開始することを計画していて、これまで3つのうちのいずれも使用したことがない場合は、すべてのコミュニティと安全に連携できると思います。 3つのフレームワークのいずれかをまだ学ぶ機会がない場合は、学習を開始することを新年の決意にすることをお勧めします。未来はこれら3つを中心に展開します。
このコンテンツはもともとネットマガジンに掲載されていました。
