LogoMark.png

JavaScript/Framework のバックアップソース(No.1)

#author("2019-08-20T14:50:36+09:00","default:inoue.ko","inoue.ko")
*JavaScript framework
~

***はじめに
フレームワークとは、汎用的に必要なものをまとめた「枠組み」で、全体の処理の流れが実装されたものの中に、一部を利用者が実装・埋め込みできるようになっているシステムのことです。ライブラリと似ていますが、ライブラリは「汎用性の高い便利なプログラムのまとまり」で、ライブラリが単にコードの再利用を目的としているのに対して、フレームワークはアプリケーションの設計構造の再利用を目的としていると言えます。一般に、フレームワーク>ライブラリという包含関係にあります。家に例えると、建築構造がフレームワークで、中に置かれた各種家電製品がライブラリーというイメージです。
 フロントエンドのフレームワークには、Angular、Ember、Vue.js などがありますが、2017年以降、[[Vue.js]] が急速に注目を集めています。
-https://jp.vuejs.org/ 
-https://angularjs.org/
-https://www.emberjs.com/


~

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

~

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

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

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

~

***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>


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

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

~