BETA

ふつうのサイトを Vue.js で作るということ

投稿日:2018-10-28
最終更新:2018-10-28

Vue.js、最近になってさらにユーザが増えていて、あの人もこの人も Vue の話をしている、という感じになってきた。一時期の Rails ブームくらいの盛り上がりになってきていると個人的には感じていて、Vue 2.0 が出た直後くらいから実際にプロダクトで使っている身としては、みんなも Vue のよさがわかってきてうれしいなという気持ちがある。

ところで、Vue はアプリケーションフレームワークなので、たとえば Angular や React と比較されることが多く、また、実際に利用するシチュエーションも、React を使うような場面で使うものなんでしょう?という印象を持っている人が多いなと感じている。

はっきりと書く。

Vue はどこでも使える。

Vue はそれこそ JQuery がいままでやってきたことを置き換えることもできるフレームワークだ。理由を書く。

サイズが小さい

ライブラリのサイズが小さい。vue-router と vuex 込み、minify + gzip されたサイズでも 30KB を切る。JQuery を置き換えるというニーズで言えば vue 本体だけでよく、これなら 20KB ほどになる。JQuery version 3 もサイズ削減には努力していて、minify + gzip でおよそ 30KB ほどだが、その 2/3 で済む。
JQuery の置き換えに Vue は大げさではないどころか、サイズの削減の観点からはむしろ積極的に置き換えてもよいくらい。

コンポーネント指向

JQuery を使いたいニーズのひとつに JQuery UI がある。HTML の素のコンポーネントは機能が不充分で、たとえばスライダーコントロールだったり、オンオフスイッチであったりというものを自前で CSS+JS で書くのは大変だった。JQuery UI のお世話になったことも少なからずある。

今なら Vue を使う。Vue は React 同様コンポーネント指向のライブラリだ。ボタンひとつ、あるいはフォームひとつだけのコンポーネントを作って、それをふつうの HTML の要素のように取り扱うことができる。
また、そのような単機能のコンポーネントがプラグインとして提供されたりもしている。

Vue のコンポーネントなら、v-ifv-for を使って完全にリアクティブにコンポーネントの表示・非表示を切り替えたりコンポーネントを増減させたりできる。もう自分で DOM を操作しなくてもよい。

コンポーネントの記述には pug や sass も使える。

TypeScript ready

vue-cli 3 からは TypeScript ようの設定のプリセットが用意されるようになった。これを使えばすぐに TypeScript で書ける。 ふつうのウェブサイトレベルに TypeScript がいるかというと、別になくても構わないが、あるとハマらずに済む場面というのは存外多い。 むしろいきなり複雑なものを書くより、こういうふつうのウェブサイトみたいな小さなものから TypeScript に触れるほうが入門に適している気もする。

ビルドが楽

この数年間のビルドスクリプトに費やした学習コストってなんだったんだと思うくらいにビルドが楽。grunt, gulp, webpack……とりあえず webpack 以外のことは忘れていい。vue-cli 3 からは webpack のコンフィグを自分でほとんど書かなくてよく、vue の素のコンフィグでだいたい問題ない。
足りない部分は webpack のプラグインなりで対応することになり、その部分だけ webpack のコンフィグを書く。それも本当にひとつかふたつ項目を書くくらいでたいてい事足りる。

プリレンダすればサイトジェネレータとして使える

Vue = SPA という感じがあるが、プリレンダ機能があり、静的サイトジェネレータとして使える。 プリレンダリングなら SPA の弱点であるところの SEO や OGP の問題を気にしなくてよくなる。

プリレンダリングされた HTML は静的なサイトそのものなので、そのまま Netlify なり Firebase Hosting にアップするだけでよい。

みんなも Vue.js でふつうのサイトを

作りましょう。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@aoitakuの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!