7

vue.jsなどは主にSPAといった、データ志向な動的ページなど向いていると思うのですが、
一般的な静的サイトになんとかvue.js(vue-loader)の下記のメリットを持ち込めないか、
を考えています。


単一コンポーネント
→CSS/HTML/JSを1つのファイルで管理
→scoped cssが扱える


やはり静的サイトとはいえど、ページ数が増え、コンテンツが拡張されていくと
JSやCSSの管理が非常に大変になってくると思います。
(CSSでいえばclassのバッティングなど)

この単一コンポーネントを使えば

・HTML/CSS/JSの距離が近くなり、見通しが良くなるのでは
・scoped cssである程度cssが楽になるのでは

と考えました。

具体的に知りたいことは、

このような同じ目的で静的サイトを構築したことがある方がいらっしゃったら、
その際のメリット(良かった点)・デメリットなどを教えてください。
もしくは、「そもそもこのためにvueを利用しない方がいい」という場合は、
他になにか同じようなことを実現できるものがあれば教えてください。

1 件の回答 1

4

はじめまして。Vue.jsを静的サイトの構築において使用するのが適しているかいないのか、という件について意見を伺いたいということですが、個人的な観点から行くと、質問者さんのケースでは十分にVue.jsを使用するメリットがあると言ってもよろしいかと思います。

一般に静的サイトで動きをもたせようと場合にはjQueryのなどのような単純なDOM操作のためのモジュールを使いがちですが、規模が大きくなってくると結局は操作が複雑になり、jQueryの限界を超えて頑張らざるをえないという苦難に立ち向かう羽目になります。今後、ご自身のサイトがどの程度スケールする可能性があるか(この場合ではサイトが持つページの数や、ひとつの画面の中でどの程度JavaScriptを使った操作を行う可能性があるのかという点)を考慮した上で、jQueryを使うという選択をするのであればよいのですが、先を見据えてVue.jsを使うという選択は多いにありです。どうしてもある操作のためにjQueryを使う必要がある、という場合にはVue.jsのコンポーネントの中でjQueryラップしてDOM操作を行うことをおすすめします。Vue.jsは自身のコンポーネント・ライフサイクルの中でDOM操作を受け付けるためのフック(イベント)をもっているため、jQueryとの統合が容易です。

Scoped CSSの観点に関しても概ね同意です。Vue.jsであればvueifyなどを用いることに寄って、単一ファイルコンポーネントとしてHTML/JS/CSSをまるごと隔離できるため、CSS命名規則などの制約を厳しく設けることなく構築できる可能性が広がります。とはいえ、コンポーネントの粒度によっては、コンポーネント内でのクラス命名に気をつける必要がありますが、それほどの規模のサイトではないと想定しております。

デメリットに関してですが、どうしても開発当初の段階ではラーニング・カーブがペライチのHTML+jQueryと比較して少し大きくなってしまうというところかもしれません。開発が進むに連れて、必ず開発効率や保守性が上回りますが、最初はどうしてもオーバーキル気味に感じてしまうケースはあります。また、Vue.jsは比較的ブラウザサポートが厳しいという特性があり、もしもバージョンの古いブラウザやIEなどへの対応が必要になる場合には、polyfillを試したり、その他後方互換性のあるフレームワークを検討する必要がでてくるかもしれません。このようなケースではVue.jsを使うべきではないと思います。

長くなりましたが、静的サイトにおいてVue.jsを使用するという事自体について、さほど躊躇するデメリットはないと思われます。長文失礼しました。

1
  • 返答が遅くなり、すみません。かなり詳しくご教授ありがとうございました。あれから徐々に導入しはじめ、基本的には静的なサイトでも運用できております。
    – Rin
    Commented 2017年11月30日 6:02

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。