「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。

-[[戻る>JavaScript#l66057b9]]

*目次 [#xba086b2]
#contents

*概要 [#ed27f791]
[[Single-page application>#e55f4ca4]]を開発するためのフレームワーク

-色々あって、良く解らない。
-末尾に、XXXX.jsまたはXXXXJSと付くケースが多いが、~
公式の名称は、「XXXX」と言うモノが増えている。

*詳細 [#mdbce42e]
調べると、[[React>#s4081e43]] & [[Vue.js>#o9dc5e69]] が2強っぽく、~
順位変動なども、近年、安定し始めている。

**種類 [#g7b72f3f]

***Backbone.JS [#ub2e8c93]
ほぼ、discon。

-[[CoffeeScript>JavaScript#sb380570]]の作者

-Model–view–presenter(MVP)

-Backbone.js - Wikipedia~
https://ja.wikipedia.org/wiki/Backbone.js

***KnockoutJS [#j66996af]
ほぼ、discon。

-Microsoft

-Model-View-ViewModel (MVVM)

-KnockoutJS - Wikipedia~
https://ja.wikipedia.org/wiki/KnockoutJS

***Angular [#ac831ebe]
徐々に、discon。

-Google

-MVCおよびMVVM
--宣言型プログラミング
--MVCおよびMVVMアーキテクチャ
--"MVC" アーキテクチャにおけるスコープ
--双方向データ結合

-バージョン

--１系はAngularJSと呼ばれる。

--２系はAngular（Angular 2）と呼ばれる。
---TypeScript ベース
---コンポーネントシステムの採用~
（Scopeやコントローラーという概念が無くなる）

--１系と２系の互換性は殆ど無い。

-Wikipedia
--Angular~
https://ja.wikipedia.org/wiki/Angular
--AngularJS~
https://ja.wikipedia.org/wiki/AngularJS

***[[React]] [#s4081e43]
-Facebook、Instagram
-Component志向のMVC
-・・・。

***[[Vue.js]] [#o9dc5e69]
-AngularJSをの開発者によって開発され、2014年2月にリリースされた。
-Angularの良い部分を抽出し、余分な概念なしに軽いものとして造られた。
-・・・。

**傾向 [#x0fe5506]

***[[React>#s4081e43]] と [[Vue.js>#o9dc5e69]] [#dbeff8bf]
以下が参考になる。

-ReactとVueのどちらを選ぶか - Qiita~
https://qiita.com/yoichiwo7/items/236b6535695ea67b4fbe
--原理主義的で明確なスタンスのReact
--八方美人で曖昧なスタンスのVue

***大規模向け [#ad95c40f]
色々なコンテキストがある模様。

-[[Angular>#ac831ebe]]はフルスタックであるが故に大手SIerの大規模案件に採用された。~
しかし、そのフルスタックさ故にエコシステムがシュリンクし、disconに向かっている。

-原理主義的で明確なスタンスの[[React>#s4081e43]]は大規模向けではある。~
しかし、その設計思想などを大規模案件の設計・開発要員に理解・徹底させるのは困難かもしれない。

-八方美人で曖昧なスタンスの[[Vue.js>#o9dc5e69]]は本来大規模向けではないのかもしれない。~
しかし、大手SIerの大規模案件に採用されていた[[Angular>#ac831ebe]]から思想が抽出されているため、~
開発要員を移行させる場合、マインドシフトが発生しないため適切な選択肢と言えるのかもしれない。

**その他 [#sb451cb6]

***WebAssembly [#ud8f5c71]
WebAssemblyベースのSPAでは、JavaScript以外のコードで実装可能。

-[[Blazor>WebAssembly#u97df9c2]]
-...

***[[ハイブリッドアプリ]] [#fdf01b76]
SPAをラップしてネイティブアプリにしてしまう~
ハイブリット化（側？皮？）フレームワークと併用可能。

*参考 [#u734694a]

**比較 [#z7987c5e]
-React のユーザーから見た今後のフロントエンドの予想~
https://gist.github.com/mizchi/106d3c1bb8b8e5b46b45ceeeab0c348b

-ヤフー株式会社におけるWebフロントエンドの技術選定 - Yahoo! JAPAN Tech Blog~
https://techblog.yahoo.co.jp/advent-calendar-2018/yahoo-frontend/

-【JavaScript】３大フレームワーク Angular, React, Vue.js~
を比べてみよう (2018年4月) - Rのつく財団入り口~
http://iwasiman.hatenablog.com/entry/2018/04/23/200000~

***POSTD [#j82f986d]
-JavaScriptのフレームワークについて検討してみよう~
https://postd.cc/javascript-framework-fatigue/
-JavaScriptフレームワークのコストを考える~
https://postd.cc/the-cost-of-frameworks/

***Qiita [#y583b4ce]
-JavaScript: フレームワーク React/Vue/Angularについて~
https://qiita.com/gumiTECH/items/13eb7da8224bf93c67b5
-React vs Vue.js vs Angular~
https://qiita.com/Akira_Kido_N/items/ac8acaa1b48f65f5c2f4
-ReactとVueのどちらを選ぶか~
https://qiita.com/yoichiwo7/items/236b6535695ea67b4fbe

**OSSコンソーシアム [#v5010081]

***マイクロソフト系技術情報 Wiki [#l38e5a1a]

-[[SPAとMPA>https://techinfoofmicrosofttech.osscons.jp/index.php?SPA%E3%81%A8MPA]]

-[[Single-page application>https://techinfoofmicrosofttech.osscons.jp/index.php?Single-page%20application]]

***開発基盤部会 Blog [#r362371c]
-HTML / JavaScript / CSSな人を、npmでSPAな方面に引き込むには？~
https://www.osscons.jp/jotj393an-537/
トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS