WEBサイトの構築といえば、Wordpressを用いて作成するのが一般的な方法とされてきました。多くのユーザーがいて情報も多く、多くのベンダーが様々なツールを開発しているので迅速に開発ができるといわれています(何を隠そう、このブログもWordPressをつかって作成しています)。しかし、近年のイマドキのWEBサイト制作ではより軽量で動きにあるサイトを作れる別の方法がとられることが増えてきました。それが今回紹介するVue.jsです。

東京都のコロナ対策サイト(2020年)にも使用され話題になったこの言語、何がいいのでしょうか? 今回はあえて技術的な内容に踏み込んで解説してみます。

目次

Vue.Js = クライアントレンダリング → アクセス集中に対応しやすいWEB技術

Vue.jsはJavascriptで定義されたWEBサイトです。基本的な仕組みとしては、WEBサイトの構造をJavascript(ほとんどのPC、スマホで使える技術)で定義し、ログイン情報や各種動的データ(注文履歴など人によって異なるもの)をサーバーに対してリクエストする、という仕組みになります。

従来のWEBサイトは、サーバー側で各種動的データを埋め込んだWEBページ(HTML)を生成し、レスポンスする仕組みがメジャーでした。しかしWEBサーバの多くでCPUを増やすことがコスト的にできず、近年のWEB検索の量になかなか追いつけない事態となっていました(WEBページを開いてから「Loading Now…」と表示されるWEBサイトではJavascriptが使用されています。そのため、昔はWEBサイトといえば「WEBサイトエンジニア」と一括りにされていましたが、近年ではWEBサイトの制作には「フロントエンドエンジニア」「バックエンドエンジニア」「マークアップエンジニア」の3者がかかわり、制作されるようになっています。

そんなWEBサイトの制作現場を反映し、WEBサイトのデザインと裏側の注文履歴の取得などの仕組みを連動させる仕組みを分離して効率よくかけるようにしたのが「Vue.js」というJavascriptフレームワーク(テンプレート)です。

Vue.jsを採用するメリット

動的なサイト生成があるサイト(会員制サイトやECサイト)

会員制サイトやECサイトでアクセス数が多いサイトの場合、Vue.jsは有効です。一般的にはクラウドサービス(AWS、Azure、GCP)が提供している認証の仕組みを用いて、データ通信の許可や認証を実施、適切な情報を返せる仕組みをクラウドサービス事業者のサービス上で構築します(APIgateway+Lambda、AzureFunctionなど)。これらの多くはアクセス数に応じて自動的にクラウドプロパイダから必要な数だけ提供されるため、アクセスが集中しそうなので事前にサーバーを増強しないと…といった悩みから解放されます。

またローディングスピードがWordpressを用いた場合に比べ比較的早いのも特徴です。コンテンツ量にもよりますが、1秒程度読み込み速度が異なるケースもザラにあります。

昔でいうFlashのような動きをつけたWEBサイトを制作したい場合

TOPページなどでアニメーションがふんだんに利用されているWEBサイトをご覧になったこともあるでしょう。そのようなWEBサイトを作る際には、Wordpressのみで構築するのではなく、Vue.js のようなWEBサイトの表面の制作を効率化する仕組みを導入するのが効率的なことも多いです。Wordpressのメリットは「自分でWEBサイトを更新しやすい」ことですが、更新する範囲の多くは新着情報など限られた部分なので、表面だけ別で作成した方が効率的なケースは多いと考えられます。

月額費用を下げつつ、かつ、突発的なアクセス増加にも対応したい場合

個人的にもっとも大きいメリットは、これです。Wordpressを用いたWEBサイトの場合、アクセス数が増えると同時にサーバーのスペックを増強する必要があります。そして、それはアクセス数の「見込み」に応じてスケールするのであって、事前にアクセス数が予想できない場合には適切なサーバーサイズの検討はつきません。必要以上に高額な費用を払わなくてはならないケースもあるでしょうし、サーバーがダウン(アクセスできない状態)することにより営業の機会損失となるケースもあるでしょう。

Vue.jsなどのJavascriptフレームワーク+クラウドサービス事業者のAPIサービスを用いると、アクセスがない場合は月100円以下、ある時にはアクセス数に応じて簡単にスケール(100万アクセスごとに数百円のレベル)することが可能となり、WEBアクセス数の計測などの賭けをする必要性がなくなります。

いかがでしたでしょうか。今回はあえて技術的に今後のWEBサイトの主流となりそうな技術を紹介しました。もっとも、現在もサイト制作の現場でもっとも使用されているのは相変わらずWordpressであることは間違い無いです。現在ホスティングされているWebサイトの25%がWordpressとも言われ、近年ではElementorというWordpress画面上でコーディングなしで簡単にWebサイトを作成できるツールまで登場しました。
しかし、動的な動きをつけたWebサイト(ブログとは違った、複雑なバックデータを扱う業務用WEBサイト)では、Wordpressはあまり使用できません。Wordpressはブログ記事を書くのに最適化されており、記事情報でAPIを管理する…というのはできるもののやはり無理があるためです。

もし業務システムを構築する時にVuejs…?と言われた際には、ぜひ前向きに検討してみてください。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください