フロントエンド開発の変遷シリーズ第4回です。
第3回はこちら。
2009年ごろからWebアプリケーションはSPAを代表に、複雑な要件を求められる傾向にあり、フロントエンド開発のパラダイムシフトが起きていました。jQueryは次第に影をひそめ、MVC/MVVMを活用したBackbone.js、AngularJSなどの新たなWebアプリケーションフレームワーク、ライブラリが次々と出現しました。
この時期フロントエンド開発でJavaScriptが担う役割は飛躍的に大きくなりました。この状況でフレームワークなどが提供する設計指針なしに実装を進めると、非常に複雑でレガシー化を引き起こしやすいコードになってしまう。
そこでMVC設計という従来サーバーサイドで普及していた概念がフロントエンドに導入されました。
MVCフレームワークとして人気の高かったのがBackbone.jsでした。
MVCモデルを導入することでビューとモデルが直接関連することがなくなり、フロントエンドのコードの役割が明確にし、疎結合な実装が実現できるようになった。フロントエンドフレームワークのアーキテクチャが、メンテナンス性の高いフロントエンド開発を支えることが認知されていきます。
Backbone.jsの流行後、MVVMフレームワークが乱立し始めます。
▼著名なライブラリ
- AngularJS
- KnockoutJS
- Riot.js
- Vue.js
MVVMとはデータを管理するModel、画面表示に関するView、そしてデータと表示の橋渡しをするViewModelを用いたアーキテクチャです。
| MVVM | 役割 |
|---|---|
| Model | データの管理 |
| View | 画面表示 |
| ViewModel | データと表示の橋渡し |
jQueryでは、データの変更に応じてDOMを操作するコードの記述する必要がありました。MVVMではモデルからビューへのデータ連携、ビューからモデルへのデータの双方向バインディングを行うアーキテクチャで、DOM操作のコード不要でUIにデータの変更を反映させることができる。またUIからの情報入力がデータを自動的に同期されるため、生産性の高いフロントエンドの実装が可能になりました。
2015年ごろまでフロントエンドのライブラリ乱立時代が続き、今でも上記のフレームワークのWebアプリケーションがスマートフォンのブラウザの中で当たり前のように動作しています。
このライブラリ乱立時代に登場したのがReactです。（次回に続く、、、）
今回も以下の書籍を参考にしました。
書籍「TypeScriptとReact/Next.jsで作る実践Webアプリケーション開発」