質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.36%

JSのフレームワークとは?何をしてくれる?

解決済

回答 3

投稿

  • 評価
  • クリップ 4
  • VIEW 1,145

kou0179

score 294

ご挨拶

閲覧ありがとうございます。業務経験4ヶ月、それ以前は趣味だけでWEBに触ってきた超初学者です。
至らない点等多々あると思いますがご教授お願いいたします。

経緯

最近(それほど最近じゃないのかもしれませんが)、ReactやVue.jsなどのJavaScriptフレームワークの名前をよく耳にします。
エンジニアの求人とか見てても、現場の使用技術にも書かれてたりしますよね。
ReactやVueが何者調べてみると、部品(「コンポーネント」?)などの使い回しができたり、通常のJavaScriptでDOMをイジるより早かったりと、「ああ、便利なんだなぁ」と思いながら調べ進めている時にどうしても納得のいかない、というかイメージが全く沸かない点があったのでご教授頂けると幸いです。
抽象的な部分でイメージがつかないので、いくら調べてもチュートリアルを読んでもパッとしません。

分からない事

上記フレームワークはMVCモデルもしくはMVVMモデルと一緒に語られる事が多いと思います。(私の調べた限りでは)

しかし、ReactもVue.jsも、あくまでもブラウザ(=フロント)ですよね・・・?

私の知ってるMVCモデルは、(RoRしか触ったことありませんが…)

  1. サーバーのフレームワークでURIをルーティングし、
  2. コントローラーで受け、
  3. コントローラーは、モデルを使ってデータを出し入れしたり、処理したりして、
  4. コントローラーはビューにデータを渡して
  5. ビューでは、コントローラーから渡されたデータを元にテンプレートエンジンやらなんやらでHTMLを構築して、クライアントに返す

というものです。

「ブラウザはあくまでも、サーバーから渡された物を描画するだけ、
たまにJavaScriptが、画面に動きつけたりXHRでちょっとしたデータを取ってきたりするためのもの」

だと思っていました。

おそらくこの固定観念のせいで理解に詰まっているのだと思いますが、まったくイメージが湧きません。

クライアントでMVCとは何なのでしょうか?
逆にクライアント側でそこまでやるとサーバーは何を仕事にするのですか?(クライアントがそこまでやるなら、サーバーは何をレスポンスすれば良いのですか?)

「無くて困ってないなら無理して使わなくて良いものだ」とは思いつつも、ここまで広く使われてる物がまったくイメージがつかないのも如何なものかとも思い、どうかご教授頂けますと幸いです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Lhankor_Mhy

    2019/03/15 15:58

    JavaScript はブラウザ上で KVS が使えるので、やろうと思えば MVC 全部やれるのですが、そういう話ではなく?

    キャンセル

回答 3

+6

クライアントでMVCとは何なのでしょうか?

そもそもMVCは欠陥品なんで忘れましょう。
Modelの役割デカすぎじゃないですか、大規模なシステムだと大概破綻してますよね?
しかもControllerの役割理解出来てない人多すぎ、コントロールに注力しろよみたいな。

Webサーバですら「ごらんの有様」なのに、
フロントにまで持っていこうとするとシッチャカメッチャカになります。
なのでどのJSフレームワークもMVCとは名乗っていないはずです。

「ブラウザはあくまでも、サーバーから渡された物を描画するだけ、
たまにJavaScriptが、画面に動きつけたりXHRでちょっとしたデータを取ってきたりするためのもの」

ここもう少し掘り下げましょうか。

ブラウザが描画するものは基本的にHTMLが起点となります。
HTMLを解析し、周辺情報(CSS、画像、JSファイル)を集めてページを描画します。
JavaScriptが「HTMLを後から修正し」画面の変更を促します。

このブラウザがHTMLを解析し、描画される前にDOMツリーというルールで組み立てまして、
JavaScriptはこのDOMツリーを動的に編集するんですけどね。


そしてJSフレームワークの学習にあたってもう一つの軸であるRestfulにも触れておくべきでしょう。

何となくWebサーバはHTTPリクエストが来たらHTMLファイルを返す存在として定着していますが、
本来のRestfulやCRUDの思想から言えば、純粋なデータだけを取り扱いたいものです。

何故ならばHTMLが糞フォーマットだから。
いや、HTML自体はXMLの前身にもなっている整合性の取れた優れた文書形式なんです。
CSSの表現能力が足りず、デザインの都合がHTMLに及ぶのが糞なんです。

XML・JSON・CSV・HTMLとデータを表す文書フォーマットは沢山ありますが、
「そうだ、画面が古臭いからデザインを更新しよう」という動機でフォーマットが壊れるのはHTMLだけです。

という訳で、RestfulやCRUDのWebサーバの実装がHTMLを返すというのは
【アウトプットのフォーマットがコロコロ変わる糞なサーバ」を意味しているわけですね。
なのでHTMLではなく、XMLやJSON・CSV等を返すように仕様を変更したい。

RailsはRestfulやCRUDを表現するフレームワークですよね。
RailsがCRUDに真に集中する為には、テンプレート越しにHTMLを返すのをやめた方が都合が良いのです。
そしたらデザインの一新でテンプレートに手を付ける必要はなくなりますからね。


この辺の都合があり白羽の矢がたったのが、
動的にHTMLを編集できるJavaScriptです。

これにより、最初はガワだけ作っておき、裏でAjax通信を飛ばして、
その結果を元に画面をJavaScriptで作るというのが流行りました。
この辺が2003年のGoogleMapで流行り、2006年にjQueryというライブラリが登場して盛り上がったジャンルです。

また2006年にJSONというファイルフォーマットも定義され、
今まで読み書きが大変だったXMLやCSVに置き換わっていきました。

しかし、JavaScriptのDOM APIは手続き型のDOM操作なので冪等性がありません。
A→BのDOM変更を行うJavaScriptコードを書く事は出来ました。
しかし、既にBのDOMに同じモノを適用して、同じコードを走らせたらDOMツリーが粉微塵に吹き飛ぶという危険を孕んでいます。

それを回避する為に、世のフロントエンドエンジニアは日夜Excelで作ったテスト項目書を片手に夜遅くまで動作検証を行っていたわけですね。
辛い。


ここからようやく本題のJSフレームワークです。
フレームワークにより思想ややることは少しずつ違いますが、以下が共通点です。

  • JSフレームワークにテンプレートとなるHTMLを読み込ませる
  • JS世界の変数を正として、フレームワーク推奨の手法で値を書き換える

実際のDOMツリー構造は、JS世界の変数を変更した瞬間に、
その値に相応しいあるべき姿(最新のDOMツリー)に置き換わります。

もし短い時間で値が書き換わり、2回更新作業が走っても、
2回最新のDOMツリー構造が払い出されるだけ。
フロントエンドエンジニアは冪等性を手にし、変数世界の値を監視するだけで良くなりました。

ページが表示されたら裏側でHTTPリクエストを飛ばし、
値が戻ってくるタイミングでJSフレームワークのお作法に従って値を書き換えテンプレートを更新させます。
こうすることでRoRはJSONやXML、CSVを返す綺麗なCRUDサーバとして運用し、
フロントだけでHTML+CSS+JSで動作する汚いビューの部分を全て受け持つ事が可能になりました。

そのフロントのビューの部分も、テンプレートと関数が並んでいるだけで、
あるべき姿を書いてテストしていくという、冪等性を駆使したプログラミングが出来るようになってきています。


URIをルーティング

これもJavaScriptで行うことも増えましたね。
2014辺りからぼちぼち流行りだしたSPA(シングル ページ アプリケーション)です。

先程説明したJSフレームワークに読み込ませるHTMLテンプレートというのは、
好き勝手に縦割りで分割出来ます。

なのでURLに従ってテンプレートを用意してJSフレームワークに流し込み、
それをURL毎に出し分ければルーティングすることも可能です。
JSフレームワークにはそれ用のルーティングライブラリもあるので、簡単にSPAを実現することも可能です。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/15 21:20

    ご回答ありがとうございます。
    是非ベストアンサーに選ばせて頂きたいところですが既に選んでしまっていた事、ご容赦ください。
    どうやら私の知識や常識は疾うの昔に廃れていたようで、突然、近今の話を聞いても読んでも、理解できなかったのですが、技術の進歩に追従しているご回答で、私の中での常識を1つ1つ塗りなおして頂き大変参考になりました。
    改めて感謝申し上げます。ご回答本当にありがとうございました。

    キャンセル

checkベストアンサー

+3

「ブラウザはあくまでも、サーバーから渡された物を描画するだけ」という認識が古い、或いは一面的な見方であるように思います。

「サーバー」がなくともHTML5とJSの組み合わせで成立するアプリはいくらでもありえます。

"javascriptだけでここまでできる"でググってみたことはありますか?

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/15 16:27

    サーバーと常にセットで考えていたのが理解の妨げでした。
    ご回答ありがとうございました!

    キャンセル

+2

逆にクライアント側でそこまでやるとサーバーは何を仕事にするのですか?

認証、クライアントをまたぐようなデータの保管などクライアントだけではできない仕事に関しては、サーバサイドで行う必要があります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る