WEBアプリケーション開発には、フロントエンド、バックエンド、データベースなどに分かれます。
インターネットが普及した当時のWEBアプリケーションは、HTMLとCSS、apatchなどのWEBサーバにプログラミング言語(PHP, Perl, Python, JAVAなど)でデータベースと連携し取得したい情報をブラウザに出力または更新するという構成で、またユーザー情報を保持したセッションによりレスポンスが変わるステートフルな通信が主流でした。
画面遷移はサーバーへリクエストを送信し、ブラウザの画面を再描画する必要があり、おおよそ数秒読み込みに時間を要していました。
最近のWEBアプリケーションでは、フロントエンドとバックエンドの役割が非常に明確になり、ステートレスな通信によって対話するシステム構成の採用が増加しています。
UI部分はJavascriptを使ってページのルーティングや、描画、デザインなどをフロントエンド側で完全に制御できるため、ブラウザの再読み込みが不要となりました。バックエンドへの通信はAjaxを使い、バックエンドAPIサーバへリクエストを送信し、JSON形式のデータをレスポンスとして受け取ります。
レスポンスデータは画面上にバインディングされ完成となります。
このフロントエンド開発の進化が目覚しく、多くのフレームワークSPAがあります。
代表的なのにReact.js, Vue.js, Angularなどです。
この中で学習コストが比較的低いのがVue.jsですが、柔軟な設計が可能で小規模な開発から手軽に実装できます。
反対に学習コストが高いのがAngularです。しかしながら、Googleが開発したフレームワークだけに、これ一つで環境構築から構成管理、デプロイ、プロダクトまでできてしまうのはメリットが大きいです。大規模開発に向いている印象です。
Reactについては開発をしたことがないため、あまり存じていませんが海外でも非常に人気のあるフレームワークです。vue.jsは双方バインディング可能ですが、Reactは単方向バインディングの違いなどがあるようです。
以上、簡単にフロントエンド開発の紹介をさせていただきました。
今後は、SPAでのフロントエンド開発をする上でのアーキテクチャなどに触れていきたいと思います。
入会申込
ログイン
