Webアプリやスマホアプリの開発には、JavaScriptが必須となっています。
JavaScript単体でプログラミングをすると、膨大なコード量となるため、通常はJavaScriptフレームワークを使用します。
本記事では「JavaScriptフレームワークを導入するメリット」、「JavaScriptフレームワークTOP3：React, Angular, Vueの概要」、「JavaScriptの最新動向」を説明します。
利用頻度の高いJavaScriptフレームワークを学ぶことで、仕事を獲得できるチャンスが増えます。フリーランスの方であれば、高単価を狙うことができます。
有名どころのJavaScriptフレームワークの使い方を学び、最新動向をおさえて、市場価値を上げていきましょう。
JavaScriptフレームワークとは
JavaScriptにおけるフレームワークとは、同じ種類のアプリをプログラミングする上での共通部分を提供するものです。フレームワークを使用すると、フレームワーク上にアプリ固有の機能を追加するだけで、新たなアプリを作ることができます。
また、JavaScriptフレームワークを導入することにより、アプリケーションの配置場所や命名規則などが統一されるため、複数名でプログラミングする場合に、開発者間のずれがなくなり、プログラムの保守性が向上します。
【JavaScriptフレームワークを使用しない場合】
JavaScriptフレームワークを導入しない場合、すべて自分でプログラミングする必要があります。画面を表示するだけでも、膨大な量のコードを書く必要があり、不具合を埋め込む可能性もあります。JavaScriptでプログラミングするには、フレームワークそのものを作る場合でない限り、フレームワークの導入は必須といっても過言ではないでしょう。
JavaScriptフレームワークを使用するメリット・デメリット
プログラミング言語同様に、JavaScriptフレームワークには、使用するメリットとデメリットがあります。ただ、「デメリット＝使用しない」という選択肢はないので、デメリットは克服する、というスタンスでよいと思います。
JavaScriptフレームワークを使用するメリット
JavaScriptフレームワークを使用するメリットはたくさんありますが、ここでは4点を説明します。
アプリのプログラミングに集中できる
JavaScriptフレームワークを導入することにより、プログラムを動作するための外枠が出来上がります。アプリのプログラミングに注力でき、その結果、プログラミング時間を短縮できます。
フレームワークを車に例えると、車の外装が出来上がっている状態となります。後はエンジン部分を作ること、内装を仕上げること、外装の一部を好みなもので交換することで、好みの車が完成します。
不具合を埋め込む可能性が減る
バグを埋め込まない究極の方法は、プログラミングしないこと。フレームワークを使用する→プログラミング量が減る→プログラマが埋め込むバグも減ります。
稼働実績のある安全なコードが使える
有名なフレームワークは、既に他で稼働実績があるものばかりです。つまり、本番稼働していて、問題も起きない安全なコードが使えます。
一からフレームワーク部分を作り込むと「時間はかかる」、「バグが入り込む可能性がある」等、色々とリスクが伴います。フレームワークを使用すれば、そういったリスクを最大限排除した形で、アプリの必要な部分に注力できます。
再利用しやすい
フレームワーク部分と独自にプログラミングした部分が別れているため、他のアプリにも再利用がしやすいプログラムが出来上がります。一からプログラミングをしている場合、一部だけを再利用することが難しくなります。また、プログラム以外にも、フレームワークを動かすために必要な設定ファイルなどは、他で稼働している物のコピペでほぼ動きます。
また、利用頻度の高い機能は、フレームワークに実装されているため、それを呼び出すだけで実現できます。
JavaScriptフレームワークを使用する デメリット
JavaScriptフレームワークには、メリットがある一方で、デメリットもあります。繰り返しになりますが、「デメリットがある＝使用しない」という選択肢はありません。デメリットは克服するか上手に付き合うという気持ちでOKです。
学習に時間がかかる
JavaScriptフレームワークは、プログラミング言語を学ぶ時間以外に、 JavaScript フレームワークそのものを学ぶ時間も必要となります。最新のJavaScriptフレームワーク情報は、英語の情報しかない場合が多いため、学習に時間がかかる場合があります。ただ、一度 JavaScript フレームワークを学んでしまえば、以降のプログラミングはスムーズに進みます。
JavaScript フレームワークそれぞれにクセがある
JavaScript フレームワーク毎に、使い方が異なります。そのため、 JavaScript フレームワークを変えると、再度その JavaScript フレームワークを学習する時間が必要となります。色々と JavaScript フレームワークを使い慣れていると、学習時間は短くて済みますが、それでもある程度まとまった時間が必要となります。
サポートの無いものが大半
JavaScriptフレームワークは、大半がしっかりとしたサポートがありません。バグであれば、GitHubで確認して、誰かに修正してもらう必要がありますが、いつまでに直してもらえるか分からないことがほとんどです。ただ、世界中の人が使用している超有名な JavaScript フレームワークを導入すれば、そういったバグはほぼ全て対応されているので、遭遇する確率は高くありません。
JavaScriptフレームワークに向かないアプリがある
JavaScriptフレームワークでは、アプリの作り方が決められています。その作り方に沿ってプログラミングすると、大きな効果が得られます。
しかし、使用するJavaScriptフレームワークが想定していないアプリを作りたい場合は、プログラミングに時間がかかる可能性があります。そういった場合は、まず、希望するアプリのプログラミングをサポートするJavaScriptフレームワークを探すところから始めましょう。
超有名なJavaScriptフレームワークでも、全てのアプリをサポートしているわけではないので、注意が必要です。
JavaScriptエンジニアの市場ニーズ
JavaScriptは、Webアプリに「動き」を付けるために必須の言語です。Webの世界は広がり続けており、日本国内だけでも、市場ニーズは極めて高い状況です。海外でも、同様です。英語ができる方は、海外の企業でトライしてもよいかもしれません。今の時代は、日本にいながら、海外企業で働けるので、可能性が大きく広がります。
JavaScriptフレームワーク3選
現在、JavaScriptフレームワークの中で最も人気のあるものトップ３は、ReactJS, Angular, Vue.jsです。どれもコンポーネント指向を採用しており、「構造・見た目・振る舞い」をまとめて1コンポーネントとして扱うことができます。それぞれの特徴を説明します。
React
Facebookが開発しているJavaScriptフレームワークです。2013年にリリースされて以降、圧倒的な人気を誇っています。ユーザインターフェイスを構築することに特化したフレームワークとなっています。
Reactは、純粋なJavaScriptのみで開発されているため、既にJavaScriptが分かる人であれば、学習時間はそこまでかかりません。僕はReactをよく使うのですが、FacebookのReact紹介ページを少し読んだ後、すぐにプログラミング作業に移ることができました。
JSX
Reactは、JSXを使用しています。JSXは、HTMLをそのままJavaScript内に記述できる様にしたもので、変数にHTMLを入れる様なこともできます。
//変数にHTMLを代入している箇所
var tmp =
<div className="loading">
NOW LOADING...
<CircularProgress size={100} thickness={10} color="#FF4081" />
</div>
;仮想DOM
DOMとは、HTML情報を木構造で表現し、JavaScriptからプログラム的にアクセスできる様にしたものです。
Reactでは、仮想DOMを使用します。
テキストボックスなどのコンポーネントの状態をReactが管理しており、前の状態と今の状態とを比較し、仮想DOMに変更があったものだけをDOMに反映します。これまでのJavaScriptフレームワークは、DOMをそのまま修正していましたが、それだと全体を更新する必要があるため、時間がかかります。仮想DOMを実装することにより、必要なDOMだけを更新するため、レンダリング時間が短くなるメリットがあります。
一方向データバインディング
Reactでは、エンドユーザーがUIを経由してインプットした値を一度受け取り、変数に格納する…、という流れで動作します。React公式サイトでも説明がありますが、これにより、コード量が増える形になります。
React ではデータフローが明示的になりプログラムの動作が理解しやすくなりますが、従来の双方向データバインディングよりも少しタイプ量が増えてはしまいます。
React公式サイトより引用
Angular
Googleが開発しているJavaScriptフレームワークです。Microsoftが開発したTypeScriptベースとなっており、こちらもオープンソースで開発が進められています。色々と学ぶことが多いため、学習コストは、Reactよりも高くなっています。このあたりが、Reactよりも人気が劣る要因となっています。
MVCアーキテクチャ
Angularは、MVCアーキテクチャを採用しています。これにより、開発手順がReactよりも厳格で、アプリの構成について「こうするべき」、というルールに従う必要があります(Ruby on Railsの様な構成をイメージすれば分かりやすいかもしれません)。
DOM
Angularは、従来のJavaScriptフレームワークと同様に、DOMを直接修正します。
双方向データバインディング
双方向データバインディングとは、「エンドユーザーに表示している情報を UI 経由で直接変更できる」、というものです。双方向データバインディングにより、元の変数の値をユーザが直接修正できるため、ユーザの入力処理を簡潔に記述できます。
Angularは、Reactと比較すると、Angular単体でできることが多いため、Next.jsの様なAngularベースの別のJavaScriptフレームワークというものはありません。よくいうと「完成度が高い」、悪く言うと「覚えることが多い」フレームワークです。
Vue
Googleの元従業員であるEvan Youにより開発されたJavaScriptフレームワークです。名前からも分かる通り、ユーザインターフェイスに主眼を置いたフレームワークです。
Vueは、ReactとAngularの中間に位置するフレームワークです。React同様に、単体でできることは多くありません。学習に必要な時間は、React以上、Angular未満といわれています。
仮想DOM
Vueは、React同様、仮想DOMをサポートしています。DOM上で、必要なものだけを更新します。
データバインディング
Vueは、Reactの一方向データバインディング、Angularの双方向データバインディングの両方をサポートします。インプットの種類により、一方向か双方向かを自動で選びます。
これからJavaScriptやJavaScriptフレームワークを学ぶ方は、上記の中から仕事や学校で使われているものを選ぶと、間違いありません。現時点で一番人気のJavaScriptフレームワークはReactのため、最初はReactを勉強しておけばOKです。
JavaScriptフレームワークの最新トレンド
JavaScriptも、他の言語同様、移り変わりが早い世界です。最近のJavaScript系のトレンドをご紹介します。
フロントエンドもバックエンドもJavaScript
JavaScriptというと、フロントエンド中心で、バックエンドもやろうと思えばできるけど、あまり積極的に採用されることはありませんでした。しかし、最近では、RedwoodJS、Meteor.js、Next.jsやBlitz.jsなど、バックエンドもJavaScriptで実装しようとする動きがあります。ほとんどは、そのベースとして、Reactを採用しています。
これまでは、バックエンドはRubyonRails、フロントエンドはJavaScriptフレームワーク、とするところが多かったのですが、RubyonRailsが重厚になりすぎたため、軽量化を図り、サーバサイドからフロントエンドまですべてをJavaScriptで実現しようとする動きがあります。
今後は、バックエンドの選択肢として、Ruby on Rails、Javaや.net以外に、JavaScriptが入ってくるかもしれません。
Svelte
Svelteは、コード量を減らすことに主眼を置いたJavaScriptフレームワークです。2020年に急激にユーザ数を増やし、JavaScriptランキング4位になりました。Svelteのサイトでは、Reactと比較して、コード量が1/3になると、実際のコードを基に説明しています。今後、JavaSciptランキングのTOP3に食い込んでくるか、注目されています。
また、今後Svelteの影響を他のJavaScriptフレームワークが受けて、より少ないコードで、機能を実現する様な変化が起きるかもしれません。
まとめ
20年前と比べると、JavaScriptの地位は、飛躍的に高まりました。また、この20年で、ライブラリだけでなく、JavaScriptそのものの言語仕様も大きく変わりました。それでも、まだ発展の余地があり、日々進化しています。3年後には、JavaScriptがまったく違うものになっている可能性もあります。
Webアプリの開発者を目指す方は、JavaScriptとJavaScriptフレームワークの勉強をしつつ、JavaScriptの最新動向に注目する様にしておくとよいと思います。
以上です。
