Go to Qiita Advent Calendar 2024 Top

6

More than 3 years have passed since last update.

なぜフロントエンドフレームワークを使うのか

JavaScript

Posted at 2020-01-05

1 / 25

注意

社内向けの資料としてざっくりまとめたものです。
書いてる内容のファクトチェックなどは正直雑なので間違った内容があるかもしれないです。

はじめに

この画像は見たことありますか？

ref: Front-end Developer Handbook https://frontendmasters.com/books/front-end-handbook/2019/

必要なものが多すぎる！！

一つ一つだけ見るとなぜ必要なのかわかりにくい

それぞれ解決したい課題がある

今までのフロントの変化からみていくとわかりやすいのでは？

目次

Webページの基本
- HTML
- CSS
- JavaScript
動的Webページ
- Flash
- Ajax
- jQuery
Javascript Framework
- Framework
- テンプレートエンジン
コードビルド
- Compass
- Node
- npm
いろいろ合体
- 仮想DOM
- React
- Angular
- Vue
まとめ

Webページの基本

HTML

HyperText Markup Languageの略
互いの文章を関連付け(ハイパーテキスト)を表現するためのマークアップ言語
1994年に現在のベースとなるHTML2.0が発表される
あくまで文章を表現するためのものでwebページを作るために作られた言語ではない

Webページの基本

CSS

Cascading Style Sheetsの略
HTMLの文章をより視覚・感覚的に理解しやすくするための装飾を指定するためのもの
あくまで装飾するためのものなのでベースはHTML

Webページの基本

JavaScript

Netscape Navigator 2.0で実装されたブラウザで動くスクリプト言語
後にIE3.0でも搭載されて(正確には別のJscriptという言語)使われ始める。
ブラウザごとにそれぞれで独自機能を実装していた
ECMAScriptとして標準化されていく
ブラウザごとに調整してコードを書く必要があったり、簡単にかける分クラッシュすることも多かったり...

Webページの基本

まとめ

今のwebページのようなものを作るために作られたものではなく、文章を表現するためのものだった
Javascript自体はそれなりに古くからあるものの無効化すべきなんて言われるレベルだった
20年以上前に策定されたものを未だに準拠している！

動的Webページ

Adobe Flash

Adobeが開発した動画・ゲーム向けの規格
リッチなアニメーション表現
OSレベルでの実行なのでブラウザごとで挙動が変わらない
ベクター表現のためjpgなどと比べるとデータ容量が少なくて済む
サンドボックス環境による安全性（と言いつつも脆弱性がいくつか見つかったりしていた）
フルFlashなWebページが作られるほど普及していて人気があった。

動的Webページ

Ajax

Asynchronous JavaScript + XMLの略
非同期通信を行ってDOMを生成しwebページを作成する手法
JavaScriptの安定化やXMLHttpRequestの実装によって普及が進んだ
GoogleMapでAjaxが採用されSPAとして公開され、世間を賑わせていた。

動的Webページ

jQuery

ブラウザ間の差異を吸収してくれるJSライブラリ
DOMを一つ操作するだけで記述が違うJSを同じ記法で制御できる！！
CSSで表現できないアニメーションも簡単に制御できる
Pure JavascriptのDOM操作のsugar syntaxに近い

動的Webページ

まとめ

Flashの登場でリッチなwebページが台頭していく
Javascriptの標準化、具体的なアプリケーションが出たことでAjaxによる動的ページの作成が普及
jQueryによるブラウザ間の差分吸収も手助けしていた
Firebug、Chrome Dev Toolなどの登場でJavasriptのデバッグが楽になったのも後押し

Javascript Framework

テンプレートエンジン

jsで生成するhtmlを別のhtmlとして管理して再利用できるようにするためのライブラリ
有名なのだとMicrotemplating、handlebars、Mustache.js
ただのテンプレートだけでなく動的な要素を宣言的に書けるのでより分かりやすい

Javascript Framework

JS Framework

erbのように宣言型で記述しDOMを構築する方式が出始める
MVCやMVPの概念で整理できる
この辺からJS側にアーキテクチャが入り始める
画面更新がゲームのように頻繁にチェックし更新していたりする
AngularJSやBackbone.jsなど

Javascript Framework

Compass(によるBuildの普及)

cssのビルドをするコマンドツール
SASSのビルドやベンダープレフィックスの自動付与などよしなにしてくれる
フロントをビルドする概念がこの辺が出てくる
BEM、SMACSSなどが流行り始めたものこの辺

Javascript Framework

Nodeの登場とnpm

Node.jsの登場によってコマンド上でjsが動く環境が整っていく
更にnpmの登場でパッケージ管理もできるように
本格的にフロントをビルドする時代に
この辺にgrunt, gulp, webpackが入ってきます。

Javascript Framework

Reactと仮想DOM

JSXによるHTML in JS
仮想DOMとState更新の考え方
Componentが持つStateに合わせてDOMを作る。
データ更新は自分でハンドリングする
stateという縛りはあるが逆にそれ以外がなにもない
Componentの考え方が流行ったのはこの辺

Javascript Framework

アーキテクチャ

既存のMVC、MVVCをベースにFrameworkを使ったアーキテクチャが取り入れ始める
Reactのstateから画面を生成する考え方からfluxなどが生まれる

Javascript Framework

まとめ

静的なものを扱う言語に非同期を乗っけたキメラだったのをいい感じに包んでくれる
Javascriptエンジンが高速化していなければ動的DOMはなかった(多分)
Javascript(とCSS)をビルドする、という考えが広まり始めた。
Node.jsとnpmの影響はすごく大きい
Reactやreduxみたいなのは過去の辛かった部分を良くするために生まれていった。

結論

欲しい機能をどんどん積み上げHTML・Javascript・cssなど複数の言語を内包した環境が現状のフロント
求められるフロントのリッチさ、複雑な環境をどう扱うと良いかを様々なエンジニアが検討し、整理した産物
その知見を手軽に使いたい。設計を統一化するために僕らはフレームワークを使っている！

参考資料

6

Register as a new user and use Qiita more conveniently

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

6