Webプログラマになりたい！という初心者が「JavaScript」を使っていく上で、いまブームになっている最新の動向、おさえておきたいキーワードをお伝えします。
「JavaScript」開発は今、大きく変化する過渡期
「JavaScript」を中心としたフロントエンド開発、つまり、画面に表示されるところを中心とした開発の現場は、「JavaScript」自体の変化にタイミングを合わせるように、大きく変わっていこうとしています。
ここ２～３年の動きをみても、新しいものがどんどん出現して、すぐに消えていくものも出始めています。初心者にとっては、何をつかんで何をスルーしたらいいのかがわからない、悩ましい時代に突入しました。
その中心に立っているのは、おそらく「JavaScriptのフレームワーク」 つまり、プログラム開発の骨組みと部品を最初から用意してくれるツールです。
一時期は、「jQuery」と呼ばれるライブラリの独壇場で、現在のWebサイトでも「普通入ってる」という感じの状況ですが、新しいフレームワークが普及し始めています。
その中でもユーザーが増加中と言われているものを３つだけ紹介します。
Vue.js（ビュー）
「Vue.js」は、国内でも人気が定着しつつありますが、開発したのは中国の方だそうです。このあと紹介する「AngularJS」を開発していたチームのGoogle出身者が開発したそうです。
比較的、初心者にやさしい、とっつきやすいフレームワークと言われています。
GoogleやFacebookのような大企業があまり好きではないロックな開発者（笑）も、これを選ぶ傾向があるようです。
React
「React」は、Facebook社がオープンソースとして無料で公開したJavaScriptフレームワークです。
FacebookのWebページは「React」でできている、ということを考えると、Facebookのような大規模なサービスでも使える、あるいは、大規模なサービスで有利になるフレームワーク、と言えます。
最近の「JavaScript」フレームワークではよく出てくる「仮想DOM（Virtual DOM）」の概念を採用して高速で動作することを重視します。
※DOM（Document Object Model）はこちらの記事を参照してください：
特徴は、「JSX記法」と呼ばれる記述方法で、JavaScriptの中にHTMLを混在させて書き込みます。
従来、HTMLとCSSとJavaScriptは分けて書いてメンテンス性を高めよう、という考え方が普通でしたので、全部合体して書かせるという「React」の作法に、最初はショックを受けるエンジニアも多いようです。
AngularJS
「AngularJS」は、Google社が全面バックアップしているオープンソースの「JavaScriptフレームワーク」です。
Google社の社風が表されているかのように変化が激しく、バージョンが1.x系と、2.x系では互換性がなく違うものに発展しています。
「AngularJS」を本格的に利用するには、「TypeScript」という言語を把握する必要があり、前述の２つに比較すると初心者にはハードルが高め、と言われています。
また「RxJS（Reactive Extensions for JavaScript）」というライブラリを利用するときに、ストリームという概念や非同期の扱い方など、目新しい考え方をいくつか把握する必要が出てきます。
WebPack
上述のようなフレームワークを使って開発に入るときには、「WebPack」という必要なライブラリやパーツを半自動的に合体させてくれるツールを使うのが普通です。
古くからプログラム開発に関わる人なら、「make」のJavaScript版、と考えると理解が早いかもしれません。（専門家からはしかられそうですが）
「WebPack」も変化が激しく、バージョンが１系、２系、３系で記述方法が変わってきています。
また、サーバーサイドのプログラムをJavaScriptで書ける「Node.js」というシステムとともに発展してきているので、「Node.js」と「WebPack」がセットで解説されている記事や書籍が多いです。
これから「WebPack」学ぶ初心者は「Node.js」もかじってみることをオススメします。
SPA（Single Page Application）
「SPA（Single Page Application）」とは、1個のページで全部やっちゃうWebページです。
つまり、リンクをクリックしてもいちいちページを読みに行かずに、部分的に読み込んで表示を変化させます。
実は、「SPA（Single Page Application）」という考え方は古くからあり、たとえば、いまはすっかりすたれてしまった「Flash」のWebサイトは、1個のページで全部やっちゃう考えで作られていたものがたくさんありました。
これが「JavaScript」に置き換わりすっかり定着してきた、という流れがあります。
SPAの例：Googleマップ（Web版）
比較的古くから残っている事例として、「Googleマップ」があります。
一度ページを読み込むと、スクロールしても検索しても、ページ自体が遷移（全体を読み込み直す）ことはなく、開いたり閉じたりもスムーズです。
実際には、ユーザーの操作とはタイミングを合わせることなく地図のデータを読み込んだり検索データを読み込んだりしています。これを「非同期処理」と呼びます。
SPAの事例：Facebook（Web版）
また、FacebookもSPAの事例と言えるでしょう。
※画面を見るにはログインが必要です。
前述のとおり、「React」を利用して作られており、下にスクロール（フリック）すると、どんどん次の記事が読み込まれて、ページが切り替わることはありません。
スマホで言えば、「SPA（Single Page Application）」とすることで、「スマホアプリみたいに作れる」といえます。見た目で実現できることはほとんど変わりません。
「Visual Studio Code」を使ってみよう！
これらの開発にチャレンジしようと思った初心者には、開発環境、あるいは、エディタとして「Visual Studio Code」をオススメします。
「Visual Studio Code」についてはこちらの記事も参考としてください：
まとめ
「JavaScript」を中心としたフロントエンド開発の、現時点での状況、過去から未来へと変わっていく様子を、シンプルにまとめました。
お役に立てば幸いです。
コメント