フロントエンド開発のアツさと変化の速さは、JavaScriptとそのフレームワークの変革が核だ

テクノロジー

Webプログラマになりたい!という初心者が「JavaScript」を使っていく上で、いまブームになっている最新の動向、おさえておきたいキーワードをお伝えします。

「JavaScript」開発は今、大きく変化する過渡期

「JavaScript」を中心としたフロントエンド開発、つまり、画面に表示されるところを中心とした開発の現場は、「JavaScript」自体の変化にタイミングを合わせるように、大きく変わっていこうとしています。

ここ2~3年の動きをみても、新しいものがどんどん出現して、すぐに消えていくものも出始めています。初心者にとっては、何をつかんで何をスルーしたらいいのかがわからない、悩ましい時代に突入しました。

その中心に立っているのは、おそらく「JavaScriptのフレームワーク」 つまり、プログラム開発の骨組みと部品を最初から用意してくれるツールです。

一時期は、「jQuery」と呼ばれるライブラリの独壇場で、現在のWebサイトでも「普通入ってる」という感じの状況ですが、新しいフレームワークが普及し始めています。

その中でもユーザーが増加中と言われているものを3つだけ紹介します。

Vue.js(ビュー)

「Vue.js」は、国内でも人気が定着しつつありますが、開発したのは中国の方だそうです。このあと紹介する「AngularJS」を開発していたチームのGoogle出身者が開発したそうです。

比較的、初心者にやさしい、とっつきやすいフレームワークと言われています。

GoogleやFacebookのような大企業があまり好きではないロックな開発者(笑)も、これを選ぶ傾向があるようです。

React

「React」は、Facebook社がオープンソースとして無料で公開したJavaScriptフレームワークです。

FacebookのWebページは「React」でできている、ということを考えると、Facebookのような大規模なサービスでも使える、あるいは、大規模なサービスで有利になるフレームワーク、と言えます。

最近の「JavaScript」フレームワークではよく出てくる「仮想DOM(Virtual DOM)」の概念を採用して高速で動作することを重視します。

※DOM(Document Object Model)はこちらの記事を参照してください:

DOMがわかるとJavaScriptが近づいてくる!ブラウザ技術の中核をつかめ
「JavaScript」や「jQuery」でWebページを動かしたり加工したりするときに、知っておくと進みが早くなる知識として、「DOM」を紹介します。DOM(Document Object Model)のイメージ「DOM(Document Object Model)」のイメージをつかむには、次のような理解をするとわかり...

特徴は、「JSX記法」と呼ばれる記述方法で、JavaScriptの中にHTMLを混在させて書き込みます。

従来、HTMLとCSSとJavaScriptは分けて書いてメンテンス性を高めよう、という考え方が普通でしたので、全部合体して書かせるという「React」の作法に、最初はショックを受けるエンジニアも多いようです。

AngularJS

「AngularJS」は、Google社が全面バックアップしているオープンソースの「JavaScriptフレームワーク」です。

Google社の社風が表されているかのように変化が激しく、バージョンが1.x系と、2.x系では互換性がなく違うものに発展しています。

「AngularJS」を本格的に利用するには、「TypeScript」という言語を把握する必要があり、前述の2つに比較すると初心者にはハードルが高め、と言われています。

また「RxJS(Reactive Extensions for JavaScript)」というライブラリを利用するときに、ストリームという概念や非同期の扱い方など、目新しい考え方をいくつか把握する必要が出てきます。

WebPack

上述のようなフレームワークを使って開発に入るときには、「WebPack」という必要なライブラリやパーツを半自動的に合体させてくれるツールを使うのが普通です。

古くからプログラム開発に関わる人なら、「make」のJavaScript版、と考えると理解が早いかもしれません。(専門家からはしかられそうですが)

「WebPack」も変化が激しく、バージョンが1系、2系、3系で記述方法が変わってきています。

また、サーバーサイドのプログラムを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マップ」があります。

Google マップ
Google マップで地図を検索。乗換案内、路線図、ドライブルート、ストリートビューも。見やすい地図でお店やサービス、地域の情報を検索できます。世界地図も日本語で、旅のプランにも便利。

一度ページを読み込むと、スクロールしても検索しても、ページ自体が遷移(全体を読み込み直す)ことはなく、開いたり閉じたりもスムーズです。

実際には、ユーザーの操作とはタイミングを合わせることなく地図のデータを読み込んだり検索データを読み込んだりしています。これを「非同期処理」と呼びます。

SPAの事例:Facebook(Web版)

また、FacebookもSPAの事例と言えるでしょう。

Facebook - ログインまたは登録
Facebookアカウントを作成するか、ログインしてください。友達や家族と写真や動画、近況をシェアしたり、メッセージをやり取りしましょう。

※画面を見るにはログインが必要です。

前述のとおり、「React」を利用して作られており、下にスクロール(フリック)すると、どんどん次の記事が読み込まれて、ページが切り替わることはありません。

スマホで言えば、「SPA(Single Page Application)」とすることで、「スマホアプリみたいに作れる」といえます。見た目で実現できることはほとんど変わりません。

「Visual Studio Code」を使ってみよう!

これらの開発にチャレンジしようと思った初心者には、開発環境、あるいは、エディタとして「Visual Studio Code」をオススメします。

「Visual Studio Code」についてはこちらの記事も参考としてください:

HTML、CSS、JavaScriptの勉強をはじめるときに超おすすめの基本ツールを2つだけ紹介【初心者用】
いわゆるホームページ、Webサイトを実現する技術として、HTMLやCSS、JavaScriptが代表的です。これらは、知識として読んでいるだけでは抽象的でよくわからないと感じることが多いので、実際にやってみてその動きを見ながら学んでいくのが効率的です。今回は、HTML、CSS、JavaScriptを学ぶにあたって必要な予備知識や...

まとめ

「JavaScript」を中心としたフロントエンド開発の、現時点での状況、過去から未来へと変わっていく様子を、シンプルにまとめました。

お役に立てば幸いです。

コメント