「ReactJs/VueJs/AngularJs」 日本でのシステム開発コンセプトの動向
現在の日本のIT企業は、欧米のIT手企業に比べると、ウェブシステム開発などのコンセプトが遅れていると言われています。欧米 IT市場では、「フロントエンド」と「バックエンド」という二つの仕組みに分離されたWEBシステムが数多くの企業に既に導入されています。多数のAPIがある基礎的な「バックエンド」さえあれば、様々な「フロントエンド」で実装できるという柔軟で効率的なクロスプラットフォームの仕組みです。その一方、日本では、「バックエンド」がくっついたままの古いWEBシステムがまだ多少あります。つまり、世界のテクノロジー流行に追いついていないというわけで、それ故に日本ではFacebookや Google、Airbnb、Netflix等というようなユニコーン企業が誕生するのが少ないと思われます。
文字通り、フロントエンドは一番前、バックエンドは一番うしろ、という意味ですが、具体的にはどういった業務を指すのでしょうか。今回、2NFが簡単に紹介いたします。
＜目次＞
1. フロントエンド
フロントエンドとは、WebサービスやWebアプリケーションで直接ユーザーの目に触れる部分のことです。WebサイトやWebアプリケーションなどでユーザーが文字を入力したり、ボタンをクリックしたりする部分や、バックエンドのソフトウエアと直接やり取りをする部分のことを指します。「クライアントサイド」とも呼ばれ、Webブラウザ側でプログラムを実行しています。
フロントエンドの開発で利用する言語は主に、HTMLやCSS、JavaScript（ReactJs, AngularJS…）です。
2. バックエンド
バックエンドは、サーバーサイド（Webサーバー側）やデータベースのシステムなど、ユーザーの目に見えない部分のことです。ユーザーが入力した内容などのデータ処理やデータベースへの保存、検索結果の出力といったことを行います。ユーザーからは見えない後方の部分の処理を担っていることが、バックエンドと呼ばれている理由です。
バックエンドの開発で利用する言語には、JavaやJavaScript、PHP、Python、Rubyといったプログラミング言語があり、開発効率を高めるための各種フレームワークを利用して開発が行われます。
3. JavaScript: フレームワーク React/Vue/Angularについて
フロントエンドの開発に用いられる人気のフレームワーク(ライブラリ)に、ReactとVue.jsおよびAngularがあります。これらフレームワークのフロントエンド開発における役割と、3つの違いは以下のような表です。
REACT
Reactはユーザーインタフェースをつくるためのライブラリです。ルーティングなど他の機能は、別のライブラリで補わなければなりません。そのためのエコシステムは、3つの中ではもっとも豊富です。控えめな規模の開発で採り入れて、あとから拡大していく進め方もできます。仮想DOMが活かされ、機能的にも高い水準です。React Nativeなど新たな技術への展開も積極的に進め、スタートが早いとはいえ、バージョンはもう少しでv17になろうとしています。
学習コストはそれほど高くありません。規模を抑えて始めれば、ハードルが下がるでしょう。学習を進めるにあたっても、豊富なエコシステムが大いに役立つはずです。設計やコードの作法はしっかりしつつ、柔軟さもかねそなえます。大規模の開発にも耐え得る堅牢さと厳密さを備え、チーム開発も進めやすいでしょう。少し毛色が変わっているのは、JSXというコードの書き方です。
JSXは、HTMLタグをJavaScriptコードの中にじかに書く構文です。つまり、テンプレートがJavaScriptコードで定められることになります。つぎのコードは、ひな形から引用しました。はじめは違和感があるかもしれません。これは、マークアップとViewのロジックは密であるべきという開発者の考えにもとづいているとのことです。
なお、JSXはVueでも使えます。けれど、Reactでは構文が原則JSXとされているのです。さらに、CSSについてもライブラリを用いてJavaScriptの中に書く「CSS-in-JS」というスタイルが提唱されています。
VUE
Vueもユーザーインタフェースをつくるためのフレームワークです。Reactと同じく、ルーティングなど他の機能は、別のライブラリで補います。Vueを特徴づけるのは、小さく始められることです。あとから機能を加えながら、サイトを大きくしていけます。あるいは、jQueryが使われているサイトを、少しずつVueに移行するといったことも可能です。
エコシステムは、3つの中ではもっとも少ないでしょう。けれども、公式サイトに日本語版があります。更新も原文の英語サイトと時間差はほとんどありません。最新の日本語情報に絞ってみるなら、他のフレームワークにそれほど見劣りはしないでしょう。
学習コストは高くありません。小さく始めて、少しずつ進めることで、段階的に学べます。ただ、公式サイトは始めやすさを重視しているらしく、簡易な構文のサンプルもあり、本格的な開発のスタイルは改めて考える必要がありそうです。つぎのコードは、単一コンポーネントファイル(VUE)のひな形からの引用です。テンプレートとJavaScriptコードそれにスタイルシートが、ひとつのコンポーネントのファイルとしてまとめられています。
ANGULAR
Angularの特徴は、何といってもフルスタック（全部入り）ということです。ルーティングを含め、webアプリケーションに必要な機能すべてが備わっています。開発の規模としては、大きなプロジェクト向きです。はじめからしっかりと設計して、Angular流で進めなければなりません。ちょっと試すというような使い方は難しく、気合いを入れて取り組む必要があります。堅牢さと厳密さは3つの中でもっとも高いでしょう。
学習に費やす手間と時間は多くかかるものの、『全部』できるようになることを考えれば、コストパフォーマンスが悪いわけではないでしょう。「やはりやめた」というときの埋没費用が高いというだけです。関連ライブラリやツール、情報などのエコシステムは多いといえます。
コードはTypeScript(TS)で書き、テンプレート(HTML)とスタイルシート(CSS)はそれぞれ別ファイルです。分業はしやすいかもしれません。つぎのコードは、ひな形のTypeScriptファイルから引用しました。デコレータ関数(@)以外は、ECMAScript 2015と差はありません。
なお、TypeScriptはReactやVueの開発でも、設定を加えて使うことができます。Angularでは、TypeScriptの使用が原則とされているということです。
まとめ
今後、世界のテクノロジーに追いつくため、日本のIT市場では、React JSなどのフロントエンド言語が開発できるエンジニアのニーズが増えて行くと予想されています。ただ、それ以前に2020年には36.9万人、2030年には78.9万人不足すると言われている国内のIT人材についても話題となっています。（出典：https://global-hr.lift-group.co.jp/46）
それらの現象をチャンスと捉え、弊社 2NFソフトウエアは、React JS、Vue JS、Angular Jsの教育に力を入れており、常に世界テクノロジーにキャッチアップできる姿勢を整えています。弊社についての詳細はこちらからご覧いただけます。⇒2NFソフトウェア
参考文献：https://qiita.com/
