LogoMark.png

JavaScript/Framework

JavaScript framework


はじめに

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

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

一般に、フレームワーク>ライブラリという包含関係にあります。家に例えると、建築構造がフレームワークで、中に置かれた各種家電製品がライブラリーというイメージです。

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

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

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

Web開発においてフレームワークが使われる理由


Webアプリケーションフレームワークにおける MVC

Webアプリケーションフレームワークにおける MVVM

AngularJS

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

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

React.js

記事を独立させました> React.js


Vue.js

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


フレームワークを利用する前に

便利なものにはリスクがあります。以下の点にご留意ください。


PAGES

GUIDE

TOOL

DATA

Last-modified: 2020-06-02 (火) 16:54:32