This page is intended for users in Hong Kong. Go to the page for users in United States.

【開発者ブログ】今さら聞けない?MVCとJavaScriptフレームワーク

こんにちは、フロントエンドエンジニアの小原です。
さて、ブラニューではフロントエンドエンジニアを募集しておりまして、小原も一次面接を担当しております。その際必ず「最近JSフレームワークが流行していますが、興味があったり自分で学習していたりするフレームワークを教えて下さい。」と質問するようにしています。
ゴリゴリのJavaScripterやフロントエンドエンジニアならば「何を今更そんな質問を」となりますが、HTMLコーダーやWEBデザイナーからの転向組ですと、なかなかしっかり回答できる人は少ないです。逆にSIerなどからのバックエンド転向組の方でも、やはり回答できる方は少ないです。ここらへんは、本当にフロントエンド技術が好きで、アンテナを高くしている人でないと追いかけきれないという部分もあります。どちらかと言うとアンテナの高さや、キャッチアップする能力を見るための質問ですね。
さて、そんなわけで本日のテーマは「今さら聞けない?MVC(MVVM)とJavaScriptフレームワーク」です。

MVCとは?

MVC(Model View Controller モデル・ビュー・コントローラ)は、ユーザーインタフェースをもつアプリケーションソフトウェアを実装するためのデザインパターンである。
アプリケーションソフトウェアの内部データを、ユーザーが直接参照・編集する情報から分離する。そのためにアプリケーションソフトウェアを以下の3つの部分に分割する。
・model: アプリケーションデータ、ビジネスルール、ロジック、関数
・view: グラフや図などの任意の情報表現
・controller: 入力を受け取りmodelとviewへの命令に変換する

Model View Controller | Wikipedia

要はアプリケーションのロジック部分とその受け渡し部分、表示部分を分離したソフトウェア設計のことです。こういう設計をすることによって保守性を上げ、プログラマ・バックエンドエンジニアがロジックに専念し、デザイナー・フロントエンドエンジニアがUIに専念することが出来ます。
数年前まではWEBアプリケーションにMVCフレームワークといえばPHPやRuby、Javaなどバックエンドのものが主流で、データの加工からブラウザへの表示まで全部サーバでやるのが当たり前でした。

JavaScriptフレームワーク

しかしクライアントマシンやブラウザの性能向上、Ajaxの登場、フラッシュからHTML5への移行、UIのリッチ化、マイクロサービス(とバックエンドのAPI化)の流行などにより、2009年〜2010年頃からAngular.jsやBackbone.jsなどのJavaScriptフレームワーク(あるいはライブラリ)が登場しました。
単純なDOM操作であればjQueryでも十分だったのですが、仮想DOMによる高速化やデータバインディングなど、サーバ資源に負荷をかけず表示を高速化する手段が出てきたため、これを解決するJavaScriptフレームワークが次々登場しました。現在は、バックエンドはビジネスロジック(及びAPI)に専念し、ViewとController(及びViewmodelなど)をフロントで処理するというアーキテクチャが流行りとなっています(サーバサイドレンダリングというものもありますが、今回は取り上げません)。
下記が現在よく使われている主要なJavaScriptフレームワーク(ライブラリ)。
React
Angular
Angular.js
Vue.js
aurelia
Riot
Backbone
Knockout
ember
jQuery
jQueryはライブラリだしReactはViewのみのライブラリだったり、ほとんどがMVCというよりもMVVM(Model View ViewModel)フレームワークだったり、少しずつ目的や機能が違いますが、現状でこのぐらいあります。あとAngularとAngular.js(1.X系)は別物として扱いました。jQueryは別として2016年頃まではReactとAngular.jsが流行していましたが、2017年に入りVue.jsが流行している感じです。ちなみに、「eat」もVue.jsを採用しています。
余談ですがこれらフレームワークに加え、フロントエンド界隈はaltJSやモジュールバンドラ・タスクランナー・トランスパイラなど開発環境も混沌としているせいか、知人のエンジニアは「フロントエンドはしんどい」と嘆いていました。
フロントエンドエンジニアは、ここ数年で急激にスキル取得の難易度がり、毎年トレンドが入れ替わる、加えてこれらを使う案件の増加ということも有り常に人材不足の状況です。

結局何を覚えればいいの?

デザイナー/コーダーからの転向を考えている方や、バックエンドエンジニアでスキルアップを考えている方に「結局何を覚えればいいの?」と聞かれますが、こればかりは答えはないですね。ReactやVueの案件が増えつつありますが、数年安泰というものでもありませんし、どうしてもaltJSや開発環境とセットになる部分もありますので。
ただ、ITアーキテクトやPMなどがプロジェクトへの導入を検討している場合は、Vue.jsがおすすめですね。
・本格的なSPAにも従来的なWEBサービスにも対応できる。
・CDNなどを用いて、既存のフレームワークに部分導入できる。
・既存サービスへの部分導入も可能。jQueryとの併用も。
・React的コンポーネント指向とAngular.jsの構文という2大フレームワークのいいとこどり。
・日本語ドキュメントが充実している
・学習コストが低い。
・altJSや開発環境、コンパイラの縛りなし。
難点といえばレガシーブラウザへの対応ぐらいですが、そもそもレガシーブラウザ対応を視野に入れた、モダンJSフレームワークによるWEBアプリ開発なんてない(ないよね?)と思いますので、考えなくてもいいかと。

JavaScriptフレームワークに興味のある仲間募集

そんなわけで「JSフレームワークによるWEBアプリ開発」に興味のある仲間募集です。まだjQueryやPHPでしか開発したことないけど...という方も、まずはお話からでも結構です。

BRANU株式会社's job postings
Anonymous
Picture?height=40&width=40
12509129 952078274871166 2130511244172185442 n
Fb409f36 9a3c 496f a997 35874b489ec8?1501395443
A90ab0fb 37f0 47c8 a9af 784d0a46712e?1502334262
10007526 425705297566168 5543553205522845321 n
15 Likes
Anonymous
Picture?height=40&width=40
12509129 952078274871166 2130511244172185442 n
Fb409f36 9a3c 496f a997 35874b489ec8?1501395443
A90ab0fb 37f0 47c8 a9af 784d0a46712e?1502334262
10007526 425705297566168 5543553205522845321 n
15 Likes

Weekly ranking

Show other rankings

Page top icon