HTML5、CSS3、JavaScriptの基礎技術についての重要性は変わりませんが、WEBアプリケーションの作り方が大きく変わってきています。

ページ単位から部品単位の実行アーキテクチャへ

これまでは、従来の画面遷移の考えかたをそのままWEBに適用したページ単位での遷移を前提とするWEBアプリケーションの作り方が主流でしたが、現在はページの部品単位(画面の一部の構成物単位)で、必要に応じてサーバ通信を行って画面を書き換える手法を取ることが多くなりました。

このような手法は、画面遷移でユーザを待たせない、スマートフォンのアプリであればネイティブアプリのような動作をさせたい等、魅力的なユーザ体験を実現するためにより自由度の高い開発手法へのニーズへの高まりとともに普及してきました。

SPA(Single Page Application)という言葉がありますが、デスクトップアプリケーションのようにWEBアプリケーションを提供する形に対して名付けられたものであり、技術背景は同様です。

この流れはAJAXの登場とともに広まり、多くのWEBフレームワークがページ単位の遷移ではなく、部品単位での切り替えを中心とするように変わってきました。 AngularやReactも、このためのフレームワークです。

フロントモジュールの管理

WEBアプリケーションを開発するには、ファイルやライブラリの数が多くなり管理・メンテナスが煩雑になりがちです。開発規模が大きくなるほど、フロント開発の比重が大きくなるほど、効率よく開発管理を行う必要が出てきます。また、全体の開発工数に占める割合も大きくなるため開発効率が重要になります。

CSSやHTML、JavaScriptが使われることは従来と変わりませんが、開発者が直接それらを記述するのではなくLESS、SCSS(Sass)、Stylusなど、より人間にとって理解しやすく管理しやすい方式で記述し、実行時にCSSへ変換して利用するなど開発効率を上げる方法が主流となっています。JavaScript に関してもaltJSと呼ばれるさまざまなJavaScript拡張言語が作られており、なかでもTypeScriptは非常に広く利用されています。

HTMLに関してもExpressやMarkdownが使われることも増えてきていますが、HTMLへの埋め込みを行なう言語なども多く、CSSやJavaScriptほどには代替言語が広まった状況ではありません。

開発言語と実行言語が異なるものとなってしまうため、ビルド/コンパイル作業が常に発生することになります。その作業を簡略化(自動化)する必要があります。

古くはMake、Ant、Gradleなど様々なものがありますが、よりWEB開発で必要となる機能や、ツールに合わせたgulp、Gruntなどが利用されています。

またJavaScriptは機械が解釈するためのものであると同時に、人間が読むための言語であったため、機械にとって不要な部分や効率の良くない部分があります。また人間が管理・把握しやすいという理由から、機能毎に別々のJavaScriptファイルに分割するなどを行なってきました。

しかし、altJSの普及によって人間が読むための言語という側面は、重要性を失っています。通信量/パフォーマンスを最適化する手段としてaltJSからJavaScriptへの変換時に変数名などのキーワードを切詰たり、webpackやrollupなどによって分散していたJavaScriptファイルを一つにまとめるなど機械にとって都合のよいフォーマットへ変換してしまうことも行なわれています。 このような重要ではなくなった可読性を犠牲にして、実行効率を改善する考え方から、JavaScriptのサブセット言語asm.jsによる高速化や、WebAssembly へとつながっていきます。

まとめ

様々な技術やツールはメリットもデメリットもあり、利用可否は判断次第ですが、フロント開発の比重が大きいほどフロント技術の選定が重要になってきます。フロント(クライアント側、ブラウザ側)とバックエンド(サーバ側)と2分して考えるだけでは、将来の保守が難しくなってきます。しっかりとフロント側の開発にもアーキテクチャの設計を行い、その設計を維持することが必要です。