LogoMark.png

JavaScript/Framework の変更点

#author("2020-06-02T16:54:32+09:00;2020-06-02T16:50:37+09:00","default:inoue.ko","inoue.ko")
*JavaScript framework
~

***はじめに
フレームワークとは、汎用的に必要なものをまとめた「枠組み」で、全体の処理の流れが実装されたものの中に、一部を利用者が実装・埋め込みできるようになっているシステムのことです。

ライブラリと似ていますが、ライブラリが「汎用性の高い便利なプログラムのまとまり」として、単にコードの再利用を目的としているのに対し、フレームワークの方はアプリケーションの設計構造の再利用を目的としています。

一般に、フレームワーク＞ライブラリという包含関係にあります。家に例えると、建築構造がフレームワークで、中に置かれた各種家電製品がライブラリーというイメージです。
//フロントエンドのフレームワークには、Angular、Ember、Vue.js などがありますが、2017年以降、[[Vue.js]] が急速に注目を集めています。

近年、React.js の登場以来、Webアプリ開発のトレンドは大きく変わってきたようです。従来の HTML + CSS + JavaScript を MVC モデルで分割する発想から、「関心の分離」と発想に変わりつつあります。

画面、コード、デザインという技術で分離させるのではなく「ログインする」、「商品を表示する」、「注文する」といった「何をしたいのか」という関心によってプログラムを分離構成する・・という発想です。

Angular, React, Vue とったフレームワークが、いずれもこの「関心の分離」に基づいて作られています。

-https://angularjs.org/ 　Google
-https://ja.reactjs.org/ 　Facebook
-https://jp.vuejs.org/　コミュニティー
//-https://www.emberjs.com/
~

***Web開発においてフレームワークが使われる理由
-フレームワークが提供する「作法」に従うことにより、品質が一定になる
-信頼性の高いアプリケーションが短時間で開発できる
//-共通機能モジュールの利用で、開発スピードが速まる
-複数プロジェクトで使用することで、開発者の学習コストを削減できる
-共通のルールを学んだ者であれば、当事者以外でもメンテナンスできる

~

***Webアプリケーションフレームワークにおける ''MVC''
-''M''odel（モデル）：アプリケーションが扱う領域のデータとロジック（買い物の合計額や送料を計算するなど）を表現する要素。利用者が入力したデータを格納するデータベースも含まれます。
-''V''iew（ビュー）：モデルのデータを取り出して利用者の閲覧に最適化して表示する要素。UIへの出力を担当します。ウェブアプリケーションではHTMLを生成して動的にデータを表示するためのコードがそれにあたります。
-''C''ontroller（コントローラー）：UIからの入力を担当。利用者のリクエストに従ってモデルを操作し、最終的にViewへ接続する役目を担います。JSフレームワークにおけるControllerの役割は以下２つです。
--バインディング(Model -> View)
Controller内で管理するModelの変更を、Viewに反映します。
--イベントハンドリング(View -> Model)
イベントの発生を検知し、対応する動作(関数)を呼び出します。
~

***Webアプリケーションフレームワークにおける ''MVVM''
-''M''odel（モデル）：アプリケーションが扱う領域のデータとロジック（買い物の合計額や送料を計算するなど）を表現する要素。利用者が入力したデータを格納するデータベースも含まれます。
-''V''iew（ビュー）：モデルのデータを取り出して利用者の閲覧に最適化して表示する要素。UIへの出力を担当します。ウェブアプリケーションではHTMLを生成して動的にデータを表示するためのコードがそれにあたります。
-''V''iew''M''odel（ビューモデル）：いわゆるデータバインディングのことで、分離されたデータソースとユーザインタフェースの間を橋渡しをします。データが変更されるとそれに応じてユーザインタフェースが変更される一方向なデータバインディングと、あわせてユーザインタフェースの変更または操作に応じてデータが変更される双方向のデータバインディングがあります。
~


***AngularJS 
従来のWebアプリケーションは、バックエンド（サーバーサイド）で View（HTML/DOM）を生成していたのに対し、最近では、バックエンドはDBの操作のみ行い、クライアント－サーバ間を Ajax で JSONの交換を行い、画面はフロントエンド（クライアントサイド）で生成する・・というタイプのものが増えてきました。AngularJSは、クライアントサイドの JavaScript Controllerによって Model を管理し、リアルタイムで View とデータ交換するフレームワークです。

以下、非常にシンプルなコードで事例を紹介します。
そのまま、index.html として保存してお試しください。

-入門サンプル１
テキストボックスに打ち込んだ内容がそのまま 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>


-入門サンプル２
２つの入力の大小関係を判定します。
 <!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>


-以下、様々なサンプルが紹介されています。
--https://angular.jp/tutorial
--http://lab.hisasann.com/AngularJSTutorial/
~

***React.js
記事を独立させました＞ [[React.js]]

~


***Vue.js
記事を独立させました＞ [[Vue.js]]

~


***フレームワークを利用する前に
便利なものにはリスクがあります。以下の点にご留意ください。
-意味を理解をしていないと使えない（学習コストがかかります）。
-例外的な構造のものを作るのは逆に大変になる。
-オリジナルの実装に比べてパフォーマンスが劣る場合がある。
~

~