JavaScript framework
はじめに
フレームワークとは、汎用的に必要なものをまとめた「枠組み」で、全体の処理の流れが実装されたものの中に、一部を利用者が実装・埋め込みできるようになっているシステムのことです。
ライブラリと似ていますが、ライブラリが「汎用性の高い便利なプログラムのまとまり」として、単にコードの再利用を目的としているのに対し、フレームワークの方はアプリケーションの設計構造の再利用を目的としています。
一般に、フレームワーク>ライブラリという包含関係にあります。家に例えると、建築構造がフレームワークで、中に置かれた各種家電製品がライブラリーというイメージです。
近年、React.js の登場以来、Webアプリ開発のトレンドは大きく変わってきたようです。従来の HTML + CSS + JavaScript を MVC モデルで分割する発想から、「関心の分離」と発想に変わりつつあります。
画面、コード、デザインという技術で分離させるのではなく「ログインする」、「商品を表示する」、「注文する」といった「何をしたいのか」という関心によってプログラムを分離構成する・・という発想です。
Angular, React, Vue とったフレームワークが、いずれもこの「関心の分離」に基づいて作られています。
- https://angularjs.org/ Google
- https://ja.reactjs.org/ Facebook
- https://jp.vuejs.org/ コミュニティー
Web開発においてフレームワークが使われる理由
- フレームワークが提供する「作法」に従うことにより、品質が一定になる
- 信頼性の高いアプリケーションが短時間で開発できる
- 複数プロジェクトで使用することで、開発者の学習コストを削減できる
- 共通のルールを学んだ者であれば、当事者以外でもメンテナンスできる
Webアプリケーションフレームワークにおける MVC
- Model(モデル):アプリケーションが扱う領域のデータとロジック(買い物の合計額や送料を計算するなど)を表現する要素。利用者が入力したデータを格納するデータベースも含まれます。
- View(ビュー):モデルのデータを取り出して利用者の閲覧に最適化して表示する要素。UIへの出力を担当します。ウェブアプリケーションではHTMLを生成して動的にデータを表示するためのコードがそれにあたります。
- Controller(コントローラー):UIからの入力を担当。利用者のリクエストに従ってモデルを操作し、最終的にViewへ接続する役目を担います。JSフレームワークにおけるControllerの役割は以下2つです。
- バインディング(Model -> View)
Controller内で管理するModelの変更を、Viewに反映します。 - イベントハンドリング(View -> Model)
イベントの発生を検知し、対応する動作(関数)を呼び出します。
- バインディング(Model -> View)
Webアプリケーションフレームワークにおける MVVM
- Model(モデル):アプリケーションが扱う領域のデータとロジック(買い物の合計額や送料を計算するなど)を表現する要素。利用者が入力したデータを格納するデータベースも含まれます。
- View(ビュー):モデルのデータを取り出して利用者の閲覧に最適化して表示する要素。UIへの出力を担当します。ウェブアプリケーションではHTMLを生成して動的にデータを表示するためのコードがそれにあたります。
- ViewModel(ビューモデル):いわゆるデータバインディングのことで、分離されたデータソースとユーザインタフェースの間を橋渡しをします。データが変更されるとそれに応じてユーザインタフェースが変更される一方向なデータバインディングと、あわせてユーザインタフェースの変更または操作に応じてデータが変更される双方向のデータバインディングがあります。
AngularJS
従来のWebアプリケーションは、バックエンド(サーバーサイド)で View(HTML/DOM)を生成していたのに対し、最近では、バックエンドはDBの操作のみ行い、クライアント-サーバ間を Ajax で JSONの交換を行い、画面はフロントエンド(クライアントサイド)で生成する・・というタイプのものが増えてきました。AngularJSは、クライアントサイドの JavaScript Controllerによって Model を管理し、リアルタイムで View とデータ交換するフレームワークです。
以下、非常にシンプルなコードで事例を紹介します。
そのまま、index.html として保存してお試しください。
- 入門サンプル1
テキストボックスに打ち込んだ内容がそのまま Hello の後に出力されます。<!DOCTYPE html> <html ng-app> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> </head> <body> <div> <p><input type="text" ng-model="message"></p> <p>Hello {{message}}!</p> </div> </body> </html>
- 入門サンプル2
2つの入力の大小関係を判定します。<!DOCTYPE html> <html ng-app> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> </head> <body> <div><input type="text" ng-model="x"></div> <div><input type="text" ng-model="y"></div> <div>{{x}} vs {{y}} : {{( x > y ) ? x : y}} の方が大きな値です。</div> </body> </html>
- 以下、様々なサンプルが紹介されています。
React.js
記事を独立させました> React.js
Vue.js
記事を独立させました> Vue.js
フレームワークを利用する前に
便利なものにはリスクがあります。以下の点にご留意ください。
- 意味を理解をしていないと使えない(学習コストがかかります)。
- 例外的な構造のものを作るのは逆に大変になる。
- オリジナルの実装に比べてパフォーマンスが劣る場合がある。