🚀 ニフティ’s Notion

Model , View , Controller の略称。昔から使われているWebアプリケーション構成で、ニフティでも昔の社内ツールは各自MVCでフロントを表示している

• テンプレートにデータを埋め込んで、ユーザに返す
  • フレームワークによっては MVC では無く MTV ( Template )だったり MVVM だったりする

1. ユーザーはサーバへリクエストを送り、サーバが対応したページをテンプレート経由などでレスポンスとして返却
2. ブラウザが受け取ったレスポンスを表示する( MPA )

Djangoのチュートリアル より。 Django は MTV のフレームワークだが基本は同じ。イメージとしては

# polls/views.py

from django.http import HttpResponse
from django.template import loader

from .models import Question


def index(request):
    latest_question_list = Question.objects.order_by("-pub_date")[:5]
    template = loader.get_template("polls/index.html")
    context = {
        "latest_question_list": latest_question_list,
    }
    return HttpResponse(template.render(context, request))

最後の行でテンプレートに変数 context として” latest_question_list ”というキーで変数 latest_question_list を渡し、

# polls/templates/polls/index.html

{% if latest_question_list %}
    <ul>
    {% for question in latest_question_list %}
        <li><a href="/polls/{{ question.id }}/">{{ question.question_text }}</a></li>
    {% endfor %}
    </ul>
{% else %}
    <p>No polls are available.</p>
{% endif %}

htmlテンプレートに埋め込まれる（ここは questions が箇条書きリストになるか、 question が空ならそれを表す文字列）

/polls/ というパスでアクセスすると（ localhost で動かしていれば http://localhost/polls ）、レスポンスとしてhtmlが返ってくる

• サーバ1台でバックエンド・フロントエンドまでレンダリングするので、簡単にデプロイできる
  • クライアントでの高度な操作が機能要件になければMVCでも良い

• フロントエンドでクライアントに リッチな操作 を要求する場合、実装・保守が困難になる
  • 生(Vanilla)のJavaScript, jQuery, React.jsを埋め込んだりして対応する
    • バックエンドのコードとは別にJavaScriptクライアントサイドで動くので、JavaScriptのデバッグが困難
• コンポーネント単位（後述）で無いので、CSSがリッチだとCSS設計は工夫しないと複雑度が増す
  • Bootstrap を使う
  • ScSS, SaSS

MTV, MVPモデルなどありますが、View（フロント）もサーバでレンダリングするという点は共通

使いたい言語で主流なものを使えば良いと思う。LAMP環境と言われるやつもそう

• Django
  • MVCで社内だとおそらく主流
• Flask, Laravel, Ruby on Rails

MVC は、webページを移動するごとに毎回リクエストを送り、異なるページをHTML形式のレスポンスとして受け取る。こういった構成を MPA(Multiple-Page Application) と呼ぶ

この時代のJavaScriptはアニメーションを追加したりなどの「おまけ」要素でしかなかった

2000年代後半になると、JavaScriptで非同期通信が出来る Ajax というものが登場した

ページ遷移をせずにデータ更新が可能になり

• Google Mapsのような、画面操作に応じたシームレスなデータ更新
• 広告のように、部分的に別途読み込まれるコンテンツ

のようにリッチコンテンツを実現できるようになった

Ajax の登場により 、 JavaScript によってページ遷移を行う SPA(Single-Page Application) が生まれた。 CSR による SPA から始まるレンダリング手法について紹介する。