こんにちは。システムエンジニアの篠原です。
Webシステムの設計・開発を主幹業務としている私ですが、最近はフロントエンドとバックエンドを分離して設計・開発するシステムがかなり多くなりました。
フロントエンドで処理できることの幅が広がった昨今、Webシステムの潮流としても、できる限りサーバーサイドでの負荷を少なくし、可能な限りクライアントサイドに処理を任せることは妥当であるといえます。
今回は、ここ最近Vue,jsというフロントエンドのフレームワークを使用してわかったその魅力、そして注意深く考慮しなければならない点を少しご紹介したいと思います。
私が何より魅力的と感じていることは、リアクティブプログラミングが可能であるということ。
これは、Vue.jsがHTML上の要素を1つのコンポーネントとして管理し、その内部状態に応じて、依存関係のあるコンポーネントにも自動的に変更を反映させる仕組みです。
旧来のjQuery等のライブラリを使用したプログラミングでは、インタラクティブなフォームや表示を作るたびに、ゴリゴリとイベントハンドラーを追加してデータの流れや処理を作り込み、多大な工数をかけてさまざまなパターンからテストを行わなければなりませんでした。
これがフレームワークレベルで保証され、データの変化だけに注力してているということは、本当にありがたいことです。
Vue.jsはSPA（Single Page Application）を構築できるフレームワークであり、ページを遷移する際に同期的な画面リロードを伴いません。初期表示以降のリクエストをすべて非同期で行います。
これにより、リクエストごとにサーバーサイドでページレンダリングする負荷を減らすとともに、表示速度向上にも寄与しています。
前項でお話しした通り、初期表示以降の全てのリクエストは、非同期です。
そのため、フロントサイドとサーバーサイドが同じドメインに存在しない場合、CORS（Cross Origin Resource Sharing）についてきちんと考慮しなければなりません。
CORSとは、異なるドメインに存在するデータを非同期で取得することを意味しますが、もともとクロスサイトスクリプティングなどのセキュリティ攻撃を発生させないために、同じドメインにないリソースは読み込めない仕様となっています。
CORSで正しくリソースを読み込みできるようにするためには、サーバーサイドが正しいリクエストヘッダを付与している必要があります。
フロントエンドのコード修正でどうにかなる点ではないので、SPAを作成される際は、そのインフラ構造がどのようになっているかをしっかり確認しておかなければなりません。
クライアントサイドで処理を行えることは、前述した通り表示の速さで大きなメリットがあります。
一方で、クライアントサイドに必要な処理を委ねるということは、それだけ攻撃者があらゆる情報にアクセスしやすくなるというリスクを伴います。
一般に公開されている情報の場合はともかく、個人情報やパスワード等、機微な情報が開発者ツール等で簡単に見えてしまう状態は避けなければなりません。
クライアントサイドでは、アクセストークンやセッションID等最低限の認証情報（かつ、一時的で直接的でない情報）だけを取り扱うように設計する必要があります。
もともとサーバーサイドを起点にしたプログラミングばかりの私でしたが、SPAの設計開発に触れ、フロントエンド処理が持つ大きなメリットを感じられるようになりました。
また、サーバーサイドに比べて考慮しなければならないことがますます増えているという事情も納得しました。
エンジニアとしては、さらに追随していきたい技術の1つです。
入会申込
ログイン
