JavaScriptフレームワークを導入するメリット・デメリット
（フロントエンド開発）

次はフロントエンド開発の側面からJavaScriptフレームワークを導入するメリット・デメリットを解説していきます。

開発手法がフレームワークに沿った形に限定される

ReactならReactの、AngularならAngularのルールに沿った形で開発する必要があります。
そのため自分のルールを押しつけ、独自のルールで開発するエンジニアがいなくなります。
また、知識、経験が少ないエンジニアもフレームワークに沿った形で開発しなくてはいけませんので、学習コストこそかかってしまうものの最低限の品質を担保することができます。

裏を返せば、フレームワークを利用するにはある程度の知識が必要になってきます。

開発TIPS や テクニック、ライブラリなどが豊富

現状のフロントエンド界隈では、「jQueryを使った効率の良いフロントエンド開発」といった情報はそれほど見受けられず、「Angularを利用した◯◯」、「Reactを利用した◯◯」といった情報がよく見られます。

jQueryは過去の膨大な情報やライブラリがありますが、情報の発信日からその情報の鮮度を測ることは難しくなっています。
JavaScriptフレームワークは昨今のトレンドということもあり、さまざまな情報が発信されています。そのため、発信日からその情報の鮮度が測りやすくなっています。

仮想DOMにより高いパフォーマンスが出せる

Reactを始めとした昨今のフレームワークでは、仮想DOMと呼ばれるレンダリング機構が用意されていることが多く、jQueryなどで作成したページと比較すると高いパフォーマンスを出せる場合が多いです。

これまでは、ページのHTMLを書き換えようとすると実際のHTMLを変更する必要がありました。目的の変更を行うのに10箇所のHTML変更が必要な場合は、10回HTMLを書き換える処理が必要で、これはブラウザのメモリを消費してパフォーマンスが損なわれる原因になりました。

仮想DOMでは10回の変更を一度メモリ上の構造体で行い、最終的な状態をHTMLとして出力するため、1回のHTML書き換えで10箇所の変更が可能になります。これにより高いパフォーマンスを発揮できます。

周辺のバージョンアップに左右される

デメリットとしては、周辺のさまざまなツールのバージョンアップに左右される点が挙げられるでしょう。

各フレームワークはすごいスピードで進化しており定期的にバージョンアップを行わなければレガシーな環境に陥りがちです。

ただ、バージョンアップに困難を伴うケースも多いです。バージョンが変わったことにより記述が変わった箇所などは修正しテストを行う必要があります。
そのうえ、周辺のライブラリが対応していないという理由で必ずしもスムーズにバージョンアップできるわけではありません。

とはいえ、古いバージョンを利用し続けると深刻なセキュリティアップデート等が発生した場合に、いきなり複数のバージョンアップを行わなくてはいけないことになるので、細かく定期的にバージョンアップは行なったほうがよく、この辺りの葛藤はあるでしょう。

各フレームワークの特徴

それでは現在、代表的なフレームワークであるReact(リアクト）、Angular(アンギュラー）、Vue.js(ビュージェーエス）の特徴について解説をいたします。

React

Facebookが開発を行っている仮想DOMを比較的早くに導入したJavaScriptライブラリです。
JSXと呼ばれる特殊なHTMLでWebページを作成することにより、Reactでさまざまな状態を表現することができます。

AngularやVue.jsと比較するとView(HTMLの描画)のみの機能を提供しており、他の多様なライブラリと組み合わせて利用するのが一般的です。

よく一緒に利用されるのは、状態管理を行うReduxやルーティング機能を行うReact Routerなどがあります。

オフィシャルでは静的型付を行うFlowや、テスト環境であるJESTなどがあります。

自身の機能がそれほどないため学習コストは比較的軽いのですが、他のライブラリと組み合わせて利用するためさまざまなバリエーションが発生してしまう可能性があり、プロジェクトにより使われ方が変わってくるのが特徴です。

Angular

Googleが開発を行っているフレームワークで2016年のバージョン2がリリースされました。

もともとはAngularJSという名前で長年開発が進められていましたが、過去の互換性等を断ち切って最新のアーキテクチャーでリリースされました。
その後内包しているAngular Routerというライブラリのバージョンを整えるため、1バージョン飛ばしで2017年3月にAngular 4がリリースされ2017年11月にAngular 5がリリースされています。
1→2は大規模な非互換なアップデートでしたが、それ以降は半年単位で細かいアップデートを行う方針がなされています。

Reactと比較するとAll in Oneの機能を提供しており、単体でSPAの製造からテストなどが可能になっています。

また、Angularは他のサードパーティ製の製品を内包していることも特徴の一つで、マイクロソフトが開発をしているTypeScript や RxJS、zone.jsなど多様なライブラリの機能を内包しています。

そのため、Angular単体だけではなくこれらのライブラリの機能を覚えなくてはならず、学習コストはかなり高めとなっています。
All in Oneの機能のため、プロジェクト感でアーキテクチャに差異が出にくいのも特徴で、TypeScriptの静的型付けを標準でサポートし、型に慣れているサーバーサイドのエンジニアには好まれる傾向があります。

Vue.js

Vue.jsはGoogleにおいてAngularJSを使用した開発に携わったエヴァン・ヨーによって開発されたフレームワークです。
2016年にVue.js 2.0がリリースされ独自の仮想DOM機構を採用したことで一気に人気が出てきました。

ネクストjQueryとも呼ばれ、デフォルトではReactと同じくできることは少ないが、Vuexやvue-routerといったオフィシャルの拡張機能を導入することにより機能追加が可能になっており、比較的小規模から大規模の案件まで耐えられるフレームワークです。

2017年もっともシェアを広げたフレームワークです。

フレームワーク選定の決め手

さて、最後にこれらのフレームワーク選定について解説を行います。

それぞれ特徴がありますが、フレームワークに周辺のライブラリ等を含めますと、特定のフレームワークしか作れないものや特定のフレームワークが他より抜きん出て秀でているということはなく、どれを選んでも問題ありません。

開発要員

フレームワーク選定の基準として、各フレームワークを得意とする人材が存在するかどうかが一つの基準となります。
Angularが得意な人材がいるのにReactを採用したり、Vue.jsに精通している人がいるのにAngularを採用したりすると後述する学習コストがかかってしまいます。

パートナー会社も含めてフレームワークを利用できる人員をアサインできるかどうかも考慮する必要があるでしょう。Angularが得意な人材がいるのでAngularを採用したが、得意な人材が退職してしまってサービス開発が止まってしまう事態などは避ける必要があります。

学習コスト

学習コストとしてはあくまで個人の見解ですが、

Vue.js < React < Angular

です。

学習コストが低い方が、追加した開発要員に知識がなくても、フレームワークを利用できるまでの期間を短くできます。

開発規模

一般的にAngularは大規模開発などに適しており、Reactは大・中規模、Vue.jsはReactは小・中規模に適していると言われています。
設計次第で、かならずしも大規模だからVue.jsではできない、小規模だからAngularは利用できない、といったことはないのですが、フレームワークを利用できる開発者の得意とする開発規模なども考慮すると上記の規模感は一つの参考値になるでしょう。

そもそもフレームワークの導入は必要か？

APIなどと連携を行うSPA以外では必ずしもフレームワークを導入する必要はありません。
jQueryなどでミニマムに開発を行うことも可能です。
フレームワークの導入を目的とせずにプロジェクトに適したツールは何か、の視点で選択するのがよいでしょう。

JavaScriptフレームワークとは？

フレームワークの概念はJavaScriptに限定されることなくさまざまなプログラミング言語で存在します。
Wikipedia(ソフトウェアフレームワーク)には、フレームワークの解説として「一般的な機能をもつ共通コードをユーザーが選択的に上書きしたり特化させたりすることで、ある特定の機能をもたせようとする抽象概念のことである。単にフレームワークとも呼ばれる。」と記載されています。

本記事は非エンジニア向けですので、誤解を恐れずにざっくりと解説すると、フレームワークとはプログラミングにさまざまな機能や処置を追加してくれるアプリケーションのことです。
これまで手間のかかっていたことも、フレームワークを導入し、ルールに準じれば簡単に実装可能になります。

同様のキーワードではライブラリがありますが、ライブラリとフレームワークの違いは、提供する機能が限定的か全体的かどうか。
jQueryやReactはライブラリ、AngularやVue.jsはフレームワークに分類されます。

ことJavaScriptフレームワークに関して言えば、SPA(シングルページアプリケーション)を作成するのに十分な機能を提供するものをJavaScriptフレームワークとして定義することが多いです。

JavaScriptフレームワークはいつ頃から利用されている？

個人的な観測範囲の話になってしまいますが、2010年に登場したBackbone.jsがJavaScriptフレームワークが多くの現場で利用されるようになったキッカケと感じています。
Googleが開発しているJavaScriptフレームワーク「AngularJS」は2009年に公開されており、Backbone.jsより歴史が古いのですが、多くの現場で利用されるようになったのはBackbone.jsの後に感じています。

これらのJavaScriptフレームワークが利用されるようになった背景としては、2007年にiPhoneがAppleから発売され(国内では2008年に発売されたiPhone 3Gが最初)、2008年にはGoogleからAndroid端末が発売されました。
そして、これらの端末がある程度普及した2010年頃から多くの現場でスマートフォン対応が求められるようになりました。
当初のスマートフォンサイトではアプリのような挙動をすることが良いとされた傾向があり、スワイプによるページ遷移やインフィニティスクロールを利用した無限読み込みなど、ユーザー体験をアプリに近づける機能を実装するためにJavaScirptが多用されるようになりました。

Backbone.js が普及した背景としては、Backbone.jsは当時主流だったjQueryをベースに拡張されたフレームワークだったため、導入の敷居が低かったことが要因の一つに挙げられます。

その後現場のニーズにあわせてKnockout.jsやEmber.jsが登場して、昨今では React や Vue.js 、 Angularといったフレームワークが人気を博しております。

JavaScriptフレームワークを導入するメリット・デメリット（開発以外の視点）

まずは、JavaScriptフレームワークを導入するメリット・デメリットを開発以外の視点から解説します。

APIの共通利用

これらのフレームワークを導入する大きな動機としてはサイトをSPAとして作成するときでしょう。

昨今のWebサービスではPCサイト、スマホサイトもしくはレスポンシブサイト以外にもiPhone/iPadアプリ、Androidアプリが提供されることが多いです。
また最近では、デスクトップアプリケーションを提供するWebサービスが増えてきました。

そうすると、これまでのWebサイトのようにサーバーサイドでHTMLを書き出すプログラミングをすれば良いだけでなく、各種アプリケーションでも利用できるように「表示する」「登録する」「編集する」「削除する」といった処理をAPIとし提供する必要がでてきました。
APIがすでに存在しているのに、Webサイトでもサーバーサイドで同様の機能を実装するのは非効率であり、また同様の処理がさまざまな箇所に記述されるのはトラブルの元となります。

フレームワークを利用してSPAとして開発すれば、それらの不安を取り除くことができます。

パフォーマンスやユーザー体験の向上

これらはフレームワークを導入することで確実に得られるメリットではありませんが、上手に開発すれば、これまでのWebサイトよりも良いユーザー体験を提供できる可能性があります。

これまでのWebサイトでは、ページ遷移毎に必要な情報を全部サーバーサイドから取得して表示しておりました。そのため、ページ遷移毎に何度も同じ画像やファイルを取得する可能性がありました※1。
SPAでは、必要最小限の情報をAPIより取得してその情報を元にWebページを再描画するので、同一情報の再取得を防ぐことが可能です※2。

※1 これまでのWebサイトでもキャッシュを上手に活用すれば同じファイルの再取得を防ぐことは可能です。
※2 最初に注意書きしたとおり、上手に開発した場合のみです。何も考えずにSPA化してしまうと、通常のWebサイトより重く使い勝手の悪いサイトになってしまう可能性もあります。

開発コストの増大

当然メリットだけではなくデメリットも発生します。もっとも大きな箇所では開発コストの増大でしょう。

これまで、多くの現場では、デザイン、HTML作成、サーバーサイド実装の3プロセスで開発を行っていましたが、デザイン、HTML作成、SPA実装、API実装の4プロセスが必要になってきます。API実装がHTML作成を待たずに開発できるようになったので並列開発が可能にはなりますが、多くのケースではこれまでより多くの開発期間が必要になるでしょう。

開発要員の確保の難しさ

SPA開発が比較的新しい技術のため、開発要員の確保の難しさもデメリットと言えるでしょう。

開発要員の確保の方法としては自社での採用があるかと思いますが、人材市場にSPA開発が必要な人材はそれほど出回っていません。また、そういった人材はすでに技術的に秀でた企業を選ぶ傾向があり、自社で成熟した開発チームを持たない場合は獲得が容易ではありません。

また、外注などのパートナー企業を探す際にも困難がつきまとうでしょう。

後編では、フロントエンド開発からみたメリット・デメリットと、各フレームワークの特徴を紹介します。

画像：Pixabay

技術の進展はめまぐるしい。だから、少なくとも米国では、マネージメントであっても、最新の技術をハックしていないと話にならない時代が来ているということだ。もちろん米国にも、プレゼンや、デモが強く、そんな技術力が高くない人もまだいるだろう。去年変わったばかりだから。しかし、急激に、マネージャであっても「技術力」のある人が求められているのは間違いない。

マイクロソフトのエバンジェリストの方のブログからの引用です。
自分自身も技術力はこれからもっと必要になってくる、と感じていたのでとてもおもしろい内容でした。

そしてこのブログの中で、はじめて「モブプログラミング（Mob Programming）」を知りました。

モブプログラミング（Mob Programming）とは、チームでひとつの画面を見ながら、ワイワイ意見を言い合いながらそれぞれが得意な部分のプログラミングを担って開発を進めていく手法だそうです。

モブプログラミング（Mob Programming）は、自分自身にとっては新しいテクノロジーでも他のメンバーが分かっていれば進められる、技術の優れた人の暗黙知が共有できる、タスク管理が必要なくなる、そして何より楽しい、などさまざまなメリットがあるそうです。

社内プロジェクトや新人研修などでまず試してみてもいいかも、と思いました。

技術なきマネジメントの衰退とその対策 – メソッド屋のブログ

画像：pixabay

リクルートテクノロジーズでは、新卒社員向けの技術研修「ブートキャンプ」を3か月間実施しているそうです。
この研修資料が一般に公開されています。

技術者向けなのでワタクシには内容が難しいセッションもありましたが、基礎を学ぶのにとても勉強になります。

• エンジニアとしての心構え
• HTML/CSS入門
• TDD Boot Camp
• Javascript入門
• Git入門
• Java入門
• AWS体験ハンズオン ～セキュア＆スケーラブルウェブサービス構築編～
• DevOps導入指南改め Infrastructure as Code
• データベース入門
• 検索結果の品質向上 ～Elasticsearch入門～
• セキュリティ　～Web Application Hardening～

リクルートテクノロジーズ　新人研修特別編を公開します | リクルートテクノロジーズ　メンバーズブログ

1. Chromeで問題のページを表示する
2. ChromeでJavaScriptのエラーがでていないか確認する
3. エラーメッセージでググる
4. 検索で見つかったページの対策を施して、また１からやってみる
5. 【捕捉】根本解決を目指すには

最初の１、２がエラーの原因を知る作業です。これは早いと３分くらいですね。その後の３〜５が解決する作業で、これはエラー内容によって前後します。

では、早速手順を見ていきましょう。

1.Chromeで問題のページを表示する

これは単純ですね。Chromeを起ち上げて、エラーページを表示しましょう。

2.ChromeでJavaScriptのエラーがでていないか確認する

以下の手順でエラー内容を表示させます。

※こちらにエラーが出ているページのサンプルがあります。一見正常に動いているように見えますが、裏ではエラーが出ています。

webtan-tsushin.com/sample/jserror.html

a.Chromeで右クリックして検証メニューを表示させます。

b.エラー箇所を表示させます。

c.エラーメッセージをコピーします。

3.エラーメッセージでググる

エラーメッセージでググりましょう。できれば日本語の結果が出て欲しいので、日本語を入れて検索します。

今回は「Uncaught TypeError is not a function」というエラーなので「Uncaught TypeError is not a functionとは」などで検索します。

もし検索結果のページをいくつか見てみても、書いてある内容がよくわからない場合は捕捉をご覧ください。

4.検索で見つかったページの対策を施して、また１からやってみる

検索で表示された対策を施してみて、再度「検証」でエラーが消えたかどうかみてみます。

例えば、今回の「Uncaught TypeError」というのはググってみると「そんな型は知らん！」というエラーでした。つまりコンピューターが理解できないということですね。

ということで綴りが間違っているかも知れないので調べたところ、やっぱり間違っていました。

date.Daily()ではなく、date.Day()だったのですね。ということで綴りを戻して再検証すると、エラーが消えました。

webtan-tsushin.com/sample/jserrorok.html

※変数などがわかるちょっと詳しい方へ

エラーの箇所が多い場合などはデバッグという作業をちゃんと行った方が簡単に原因がわかることもあります。デバッグとは、ステップ実行などを用いながら、エラー箇所を突き詰め、治していく作業のことです。このページではスコープ外になるのでデバッグ手法については説明しませんが、もし知りたい方は「Chrome ブレークポイント」などと検索するといろいろ出てきます。私達ウェブ担当者通信の西畑講師のサイトでも記事がありました。
Google Chromeのブレークポイント -toR（西畑講師のサイト）より

5.【捕捉】根本解決を目指すには

４でググった時に、まったく意味のわからない内容ばかりかも知れません。

実はJavaScriptやjQueryのエラーを治すのは、病気を治すのに似ています。

体調が悪い時に病気を治すには、通常３ステップあります。

Step1は自分の診断です。何か思い当たる原因をググってみたりして、悪い箇所のあたりをつけます。
Step2では自分で治すか、病院にいくか判断します。
Step3 では具体的な行動を起こして様子を見ます。

病気をしっかり治したいならば、Step1で原因のあたりをつけるというのはとても大切な作業です。ところが、病気というのは調べてみると専門用語も多く、何を書いてあるのか理解できないこともあると思います。 つまり自分の体調不良の原因がわからない。そういう場合は病院にいった方が安心です。また調べた結果外科手術が必要で、自分では如何ともし難い場合もあるでしょう。

JavaScriptのエラーなども同じで、ググってみて症状をみた場合に、書いてある内容がよくわからなかったり不安になった場合は、医者が使う専門用語で書いてあるのだと思って下さい。その場合、医者に行く方が早いことが多いです。この場合の医者というのはプログラマーのことを指します。

もしあなたがノンプログラマーの方の場合、まず大切なのはStep1の原因のあたりをつけることとStep2のジャッジをすることだと考えてみましょう。そうすると少し気が楽になると思います。

最後にJavaScriptやjQueryのエラーは、病気と違いひょっとしたら治さなくてもよい場合も多いと覚えておきましょう。JavaScriptというのはユーザービリティ向上を目指しているものが多く、最悪稼働しなくても通常のHTMLで代替できることも多いものです。つまり無理やり動かさなくても大丈夫かも知れません。

その場合は問題がある箇所を自分で取り除いて、とりあえず様子見をするというのも根本解決の一つです。たとえJavaScriptが動かなくても、ユーザーへの成果は変わらないことも多いのです。 

jQueryのよくある悩みに

• どのサイトのjQueryソースコードなら、コピーしても安全？
• ネット上でコピーしたソースをカスタマイズするには？
• エラーが起こったらどうすればいいの？

といった質問があると思います。しかし、これら質問に答えるには、jQueryの概要や基本構文についてさっと勉強した方が早いっていったら驚きますか？しかし、実際にそうなのです。

そこで、このページでは、ディレクターやデザイナーの方に知っておいてほしい、jQueryの簡単な概要と基本構文について、ご説明していきます。 以下の順番でご説明します。

1. jQueryの仕組みと概要
2. jQueryの基本構文

１．jQueryの仕組みと概要

ウェブサイトを作る人であれば、よく聞くjQuery。実際にウェブで検索したjQueryのコードをコピーアンドペーストして使っている人も多いと思います。 しかし、いざjQueryとは何か？と聞かれると答えられない人も多いのではないでしょうか？ jQueryとは、一言でいえばJavaScriptのライブラリです。ここでライブラリとは、便利なツール集のようなものなのですが、それよりも前に、なぜjQueryがここまで多くの人に使用されているのか、知っていますか？

jQueryが使われている理由と、そのシェア（使用率）

jQueryは、MozillaのJavaScriptエバンジェリストであるジョン・レッシグ氏が2006年に開発したライブラリです。比較的新しいのに、普及しています。 そのジョン・レッシグ氏はこのように述べています。

「jQueryは、もっとJavaScriptプログラミングを楽しくするために作りました。」

多くの方は、JavaScriptでプログラミングしたことはないかも知れませんね。JavaScriptは英語や記号や数式みたいなものが多いし、見るからに難しいと感じる人も多いと思います。これでは楽しくありません。 そこで、ジョン・レッシグ氏は、JavaScriptのライブラリ（便利ツール集）であるjQueryに以下のようなメリットをもたせました。

• CSSに似たわかりやすいルールでプログラミングできるようにする
• オープンソースにする
• 一つのコードで、全てのブラウザで同様に動作する（クロスブラウザ対応）
• 軽快に動作する（ファイルサイズが小さい）
• プラグインを用いた機能拡張もしやすくする

結果、レッシグ氏の思い通りJavaScriptで楽しくプログラミングできる人が増え、jQueryは後発ながら、人気のライブラリとして普及していきました。 つまり、jQueryが普及した主な理由は「JavaScriptを知らなくても、使えるから」です。

jQueryの世界シェア（使用率）

W3Techsの報告では、2015年1月時点で、JavaScriptライブラリの中の67.2%のシェアを誇っています。2位のBootstrapが9.8%ですから、いかにそのシェアが大きいかがわかりますね。他にもマイクロソフトのASP.NETの標準として採用されるなど、文字通りJavaScriptのデファクトスタンダードと呼ぶ人も多いです。従って、jQueryを覚えることはとてもメリットが大きいのです。

jQueryの仕組み

jQueryは、先ほどからお伝えしているようにJavaScriptのライブラリです。ライブラリとは、便利ツール集のようなものです。とはいえ、イメージが難しいかも知れませんね。 以下のイメージ図をご覧ください。
このイメージと似ているのは、パワーポイントを使ったプレゼンです。
イメージで言うと、jQueryはJavaScriptのスラングのようなものです。
パワーポイントのプレゼン（下図）でも、スラング（方言）を使わることがあると思いますが、理解は難しいですよね。但し、もしスラング（方言）の辞書があれば、理解はできるようになります。
jQueryも、JavaScriptのスラング（方言）のようなもので、通常、ブラウザは標準語(JavaScript）しか理解できないのですが、jQueryライブラリを読みこむと、jQueryを理解できるようになります。つまり、jQueryは、JavaScriptを飾る独特の言葉群で、jQueryライブラリと一緒に使います。そして、独特のルールがあります。

jQueryを学習する前に

ここまで、jQueryの概要について説明してきましたが、ここからはjQueryのメリット、仕組み、使い方までを簡単に学習してみましょう。

jQueryのメリット

例えば、今までJavaScriptを覚えなければ、ページ内リンクを押した時にふわっとスクロールするようなことはできませんでした。 こんなダイアログが出てくるようなサイトは良く見ますよね。これがjQueryを使えば、誰でも簡単にできるようになっています。先程も記載しましたが、jQueryのメリットを並べると以下になります。

• CSSに似たわかりやすいルール（セレクタが似ている）でプログラミングができる
• 一つのコードで、全てのブラウザで同様に動作する（クロスブラウザ対応）
• 多くの人がメンテナンスしているので、安定しているし、サンプルコードも見つかりやすい
• 軽快に動作する（ファイルサイズが小さい）
• プラグインを用いた機能拡張もしやすい

次回は、このjQueryをどのように書くのか？ということについて追記したいと思います。