JavaScript/Framework
をテンプレートにして作成
LECTURE
担当科目一覧
コンピュータ概論/2024
データサイエンス/2024
3DCG演習/2024
情報デザイン研究/2024
卒業研究/2024
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*JavaScript framework
~
***はじめに
フレームワークとは、汎用的に必要なものをまとめた「枠組み...
ライブラリと似ていますが、ライブラリが「汎用性の高い便利...
一般に、フレームワーク＞ライブラリという包含関係にありま...
//フロントエンドのフレームワークには、Angular、Ember、Vue...
近年、React.js の登場以来、Webアプリ開発のトレンドは大き...
画面、コード、デザインという技術で分離させるのではなく「...
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（ビュー）：モデルのデータを取り出して利用者の閲...
-''C''ontroller（コントローラー）：UIからの入力を担当。利...
--バインディング(Model -> View)
Controller内で管理するModelの変更を、Viewに反映します。
--イベントハンドリング(View -> Model)
イベントの発生を検知し、対応する動作(関数)を呼び出します。
~
***Webアプリケーションフレームワークにおける ''MVVM''
-''M''odel（モデル）：アプリケーションが扱う領域のデータ...
-''V''iew（ビュー）：モデルのデータを取り出して利用者の閲...
-''V''iew''M''odel（ビューモデル）：いわゆるデータバイン...
~
***AngularJS
従来のWebアプリケーションは、バックエンド（サーバーサイド...
以下、非常にシンプルなコードで事例を紹介します。
そのまま、index.html として保存してお試しください。
-入門サンプル１
テキストボックスに打ち込んだ内容がそのまま Hello の後に出...
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/...
</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/...
</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}} の方が大...
</body>
</html>
-以下、様々なサンプルが紹介されています。
--https://angular.jp/tutorial
--http://lab.hisasann.com/AngularJSTutorial/
~
***React.js
記事を独立させました＞ [[React.js]]
~
***Vue.js
記事を独立させました＞ [[Vue.js]]
~
***フレームワークを利用する前に
便利なものにはリスクがあります。以下の点にご留意ください。
-意味を理解をしていないと使えない（学習コストがかかります...
-例外的な構造のものを作るのは逆に大変になる。
-オリジナルの実装に比べてパフォーマンスが劣る場合がある。
~
~
終了行:
*JavaScript framework
~
***はじめに
フレームワークとは、汎用的に必要なものをまとめた「枠組み...
ライブラリと似ていますが、ライブラリが「汎用性の高い便利...
一般に、フレームワーク＞ライブラリという包含関係にありま...
//フロントエンドのフレームワークには、Angular、Ember、Vue...
近年、React.js の登場以来、Webアプリ開発のトレンドは大き...
画面、コード、デザインという技術で分離させるのではなく「...
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（ビュー）：モデルのデータを取り出して利用者の閲...
-''C''ontroller（コントローラー）：UIからの入力を担当。利...
--バインディング(Model -> View)
Controller内で管理するModelの変更を、Viewに反映します。
--イベントハンドリング(View -> Model)
イベントの発生を検知し、対応する動作(関数)を呼び出します。
~
***Webアプリケーションフレームワークにおける ''MVVM''
-''M''odel（モデル）：アプリケーションが扱う領域のデータ...
-''V''iew（ビュー）：モデルのデータを取り出して利用者の閲...
-''V''iew''M''odel（ビューモデル）：いわゆるデータバイン...
~
***AngularJS
従来のWebアプリケーションは、バックエンド（サーバーサイド...
以下、非常にシンプルなコードで事例を紹介します。
そのまま、index.html として保存してお試しください。
-入門サンプル１
テキストボックスに打ち込んだ内容がそのまま Hello の後に出...
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/...
</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/...
</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}} の方が大...
</body>
</html>
-以下、様々なサンプルが紹介されています。
--https://angular.jp/tutorial
--http://lab.hisasann.com/AngularJSTutorial/
~
***React.js
記事を独立させました＞ [[React.js]]
~
***Vue.js
記事を独立させました＞ [[Vue.js]]
~
***フレームワークを利用する前に
便利なものにはリスクがあります。以下の点にご留意ください。
-意味を理解をしていないと使えない（学習コストがかかります...
-例外的な構造のものを作るのは逆に大変になる。
-オリジナルの実装に比べてパフォーマンスが劣る場合がある。
~
~
ページ名:
