ここが大変だよJavaScriptフレームワーク入門
株式会社ライブドアインターフェースエンジニア 油井 大輔
2009/11/9
Webを構成する技術を超初心者向けに説明します。今回はデザイナのためのJavaScript。そもそも「フレームワーク」って何だ?
そもそも「フレームワーク」って何だ?
Webサイト制作に限らずソフトウェア開発の現場では、日々「フレームワーク」という単語をよく耳にします。最近では「ビジネスフレームワーク」「フレームワーク思考」など、Webサイト制作/ソフトウェア開発の枠内にだけ留まらない多様なフレームワークが存在しています。
では、この「フレームワーク」とは具体的にどのようなものを指しているのでしょうか。
◇ 「フレームワーク」の一般的な概念
- - PR -
フレームワークを一般的な用語で置き換えてると、「枠組み」「骨組み」となります。つまり、全体(最終的に出来上がるもの)における大枠を成しているものであるといえます。
ここでいう「大枠」とは、全体を構成する各の部品に共通して決められているルールであったり、その部品を作るための手順・作法のことを指しています。また、「何かを作る際の第一歩となる“とっかかり”を提供してくれるものである」というとらえ方をすることもあります。
複数人で1つのものを作ることが多いソフトウェア開発にスポットを当ててみると、各個人がバラバラに開発を進めてしまい、全体に収拾が付かなくなることがあります。このようなことを防ぐために取り交わされる人と人の間での約束ごとという意味合いも含まれてきます。
と、このようにフレームワークとは一口でいっても、状況や場面に応じてとらえられる意味合いは変わってきます。
◇ Webアプリケーションにおける「フレームワーク」
ではWeb開発、ここではサーバサイドの開発におけるフレームワークにスポットを当てて見ていきましょう。
一般的にWeb開発において使われるフレームワークは「Webアプリケーションフレームワーク」と呼ばれています。先に「フレームワークの意味は状況や場面に応じて変わってくる」といいましたが、Web開発においてフレームワークが使われる理由には、次のようなものがあります。
- 共通して使われる機能をパッケージングしてモジュール化されたものを利用することにより、開発時間を短縮させる
- フレームワークが提供する作法に従って開発することにより、品質を均一化させ開発スピードを速める
- 複数のプロジェクトにおいて共通のフレームワークを使用することにより、開発者の学習コストを削減できる。また運用、保守時においても、共通のルールを学びさえすれば、当事者でなくともメンテナンスできる
これらのメリットを生かすことによって、信頼性のあるアプリケーションを素早く組むことが可能になりました。
◇ Webアプリケーションフレームワークに採用される「MVC」という考え方
オープンソースで提供されているフレームワークには「MVC」という考え方が採用されたものが多くあります(以下は、JavaのWebアプリケーションの例)。
Mとは、「Model(モデル)」の略で、アプリケーションの中核を担うロジックのことを指しています。ユーザーから入力されたデータを格納するデータベースも、ここでいうモデルに含まれてきます。
Cとは、「Controller(コントローラー)」の略で、ユーザーがリクエストしたものを元にしてモデルを操作し、最終的にView側へつなぐ役目をするもののことです。
Vとは、「View(ビュー)」の略で、コントローラーが加工したモデルの内容を受け取った上で、実際に目に見える状態にするための役割を持っています。
これら一連の流れがWebの仕組みと調和するため、MVCという考え方がWebのフレームワークに多く採用されています。
次ページでは、Web開発のクライアント側を担うJavaScriptのフレームワークについて見ていきましょう。JavaScriptそのものについて知りたい読者は、以下の記事を参考にしておいてください。
| いまさら聞けないJavaScript入門 いまさら聞けないリッチクライアント技術(2) Ajax技術が注目され大復活を遂げたJavaScript。しかし、復活するまでには数々の悲劇が…… さらに実例や使い方なども解説 「リッチクライアント & 帳票」フ ォーラム 2007/7/17 |
||
| 初めてのJavaScriptプログラミング 初めてのプログラミングにはJavaScriptがお勧め。Webブラウザとメモ帳があれば、本格的なプログラミングに挑戦できます 「Coding Edge」フォーラム |
||
| Ajax時代のJavaScriptプログラミング再入門 Ajax全盛のいま、オブジェクト指向ベースのJavaScript知識は不可欠。過去を振り返りつつ、まずは最新開発事情をチェック 「Insider.NET」フォーラム |
| 1/3 |
| INDEX | ||
| デザイナのためのWeb勉強帳(3) ここが大変だよJavaScriptフレームワーク入門 |
||
| Page1 そもそも「フレームワーク」って何だ? |
||
| Page2 JavaScriptにとっての「フレームワーク」は、ちょっと違う |
||
| Page3 オープンソースのJavaScriptフレームワークはイロイロ |
||
デザイナーのためのWeb学習帳 バックナンバー 連載インデックスへ»
- 第1回 まずはHTML。ハイパーなタグ付き言語
- 第2回 HTMLの表現力が辿った道のりを知っておこう
- 第3回 ここが大変だよJavaScriptフレームワーク入門
- 第4回 ざっくり覚えて始められるjQueryセレクタ入門
| 「デザインハック」コーナーへ |
- 画像を美しく魅せる効果を加えるjQueryプラグイン3選 (2010/3/17)
2つ重ねて比較するBefore/After、部分ごとに切り替えるpanelGallery、ズーム/カーテンなどができるcycle - 現場の無駄な流血を止めるための「プロトタイプ」とは (2010/3/12)
サイトやWebアプリ/RIAの設計やデザインを効率良く進めるには、プロジェクト関係者の想定を一致させていくことが大事だが… - Flashを閃光のごとく高速化するための基礎知識 (2010/3/9)
Flash高速化のための基礎知識や実践的テクニックを紹介する連載。初回は“処理負荷”を調べる具体的な方法を解説します - Windows 7でどんだけ“おばか”なアプリが作れるの? (2010/3/4)
おばかの発想の源やアプリの作り方などについて、おばかアプリ選手権の歴戦の受賞者や、マイクロソフトの代表者に話を伺った。アイデアのご参考に
|
|
スキルアップ/キャリアアップ(JOB@IT)
スポンサーからのお知らせ
| 「いつかは壊れるサーバ」そんな故障に 迅速で安価に手軽に対応する方法とは? New! |
| 「特権ユーザー」の事件を防げ! 万能権限を持つユーザーの管理方法とは? New! |
| 仮想環境の構築とデータ保護の特効薬?! 実績と信頼性の高いパッケージで安心運用 |
| 仮想環境のバックアップもこれまでどおり 「まるごと取ってまるごと戻す」簡単運用 |
| おばかアプリ選手権、第4弾開催中!! ムダにカッコよくてくだらない作品求ム! |
| 社内ファイルサーバを“クラウド”に統合 VPN直結「クラウド型ストレージ」を紹介 |
| その数、なんと400台以上! グループ内 サーバの「統合管理」によるメリットは? |
| 美人!? まあまあ? 気になる いやし系!! PV急増で「美人時計」がとった手段とは? |
| 進化を続ける富士通ストレージETERNUS DX 製品開発者の自信を裏付けるものとは何か |
| 運用管理の課題を“2つの観点”から分析 ユーザー満足度の高い「仮想環境」とは? |
お勧め求人情報

**先週の人気講座ランキング**
〜CCNA編〜
| ◆ | TomcatやJBossなどAPサーバ環境に関する 情報を集約! “業務”用APサーバ大百科 New! |
| ◆ | 一気に解説! 最新のクラスタストレージ 「RAIDを超えたストレージ基準」……など New! |
| ◆ | クラウド的ユーザー体験の変化は脅威か? 仮想化技術を使いこなす運用管理術を紹介 New! |

| ◆ | 上司や部下、部署内メンバーとの情報共有 を“ガラッ”と変えるコラボツールとは? New! |
| ◆ | おばかアプリ選手権、第4弾開催中!! ムダにカッコよくてくだらない作品求ム! |
| ◆ | 社内ファイルサーバを“クラウド”に統合 VPN直結「クラウド型ストレージ」を紹介 |

| ◆ | Twitterのアカウントはなぜ突破された? メールによる新手の攻撃手法とその対策 |
| ◆ | もう仮想化のお試しフェイズは終わりだ! Hyper-V 2.0が基幹システムも仮想化 |
| ◆ | 美人!? まあまあ? 気になる いやし系!! PV急増で「美人時計」がとった手段とは? |

| ◆ | クライアント企業から求められる人材 ⇒IT技術と経営戦略を併せ持つ「戦略家」 |
| ◆ | .NET編集長が実践する「技術情報検索術」 サンプル・コードを簡単に探す“技”は? |
| ◆ | 業務効率と情報セキュリティ対策を両立! 手間なく確実に機密情報を守る方法とは? |

| ◆ | 進化を続ける富士通ストレージETERNUS DX 製品開発者の自信を裏付けるものとは何か |
| ◆ | 運用管理の課題を“2つの観点”から分析 ユーザー満足度の高い「仮想環境」とは? |

| ◆ | 【CTC事例】約30の基幹システムを統合! 膨大なバッジジョブを制御した方法は? |
| ◆ | 仮想化すればコストは削減できるか? 仮想化に必要な「3つの視点」を解説する |
| ◆ | その数、なんと400台以上! グループ内 サーバの「統合管理」によるメリットは? |










