Vue.js製ポートフォリオサイト「Shinobi Works」を作った話

Vue By シェフ
Shinobi Worksのトップページサンプル

どうも、WordPressに育てられたシェフです。

娘が友達に「やーいやーい、お前の父ちゃんワードプレス!」といじめられたら嫌だなーと思って、この度Vue.jsを使ってポートフォリオサイトを作ってみました。

React.jsはGutenbergのカスタムブロック開発をきっかけに触りましたが、Vue.jsは今回が初めて。

そもそもJavaScriptがそんなに得意じゃないので不安でしたが、Vueの扱いやすさもさることながら、Nuxt.jsVuetify.jsといったフレームワークがかなり優秀で、割と簡単に構築できました。

Vueの入り(学ぶきっかけ)としてポートフォリオサイトを作るのはかなり良い選択だと思いましたね。

せっかくなので、Vueでサイトを作ってみた感想やメリットについても触れてみます。

まず、Vueの扱いやすさ、導入ハードルについてですが、かなり簡単でした。

直感的に扱えますし、日本語の公式マニュアルや解説ページも豊富なので、特に大きく躓くこともなく進めました。

マテリアルデザインのフレームワーク「Vuetify」も良かったですね。

Vuetifyを使えばそれだけで美しいデザインになる…わけではありませんが、一からCSSを設計しなくて良いのでかなり楽でした。

あ、そうそう、実はVuetifyなどのフレームワークを使うとCSSってほぼ記述しないんですよ。

marginやpadding、background-colorやcolorなどが予め定義されているので、<v-timeline-item color="red">みたいに記述するだけでいいからです。独自の記述ルールがありますが、そんなに難しくないのですぐ慣れます。

メリットについて掘り下げると、PWAが手軽に使えるのも良かったですね。

Nuxt.jsだとセットアップ時にセットでインストールできますし、後で簡単に追加することもできます。

例えば、「オフラインでも動作するサイト作れる?」と聞かれた場合。

Vueが扱えれば「はい」と答えることができます。

なぜなら、Vue(Nuxt)なら特別な知識もスキルも必要なく設計することができるからです。

WordPressにもPWAに対応できるプラグインがありますが、プラグインありきだとさすがに怖いので、PWA案件であればVueで設計するのが間違いないかと思います。

最後は「コスト」について。

サイトの公開と言うと、ドメインを取得して、レンタルサーバーを契約して…という流れが基本ですが、VueはPHPを使わないのでレンタルサーバーが不要で、無料のホスティングサービスを使えばドメイン代だけで運用できます。

有名どころはNetlify(ネットリファイ)ですね。

転送量の制限などはあるものの、制限がかなりゆるく大規模サイトでもない限り無料プランで十分で、SSL化も無料です。

そのドメインでメールの送受信をする場合は別途メールサーバーを契約する必要がありますが、ただ公開するだけだったり、メールの送受信を別ドメインでやる場合はドメイン代以外かかりません。

そういう意味ではポートフォリオサイト運用にぴったりかと思います。

Vue(Nuxt)を使ったポートフォリオサイトの作り方などについてはLIGさんのブログが参考になると思うので、気になった方はぜひ一度チェックしてみてください。

僕も機会があれば書いてみようかと思います。

ご質問などあればお気軽にコメントなどどうぞ!


カテゴリー:Vue

シェフ

このサイト「Fantastech」を運営している人。WordPressテーマ「4536」の開発中にインプットした情報などを発信中。お仕事のご依頼については「Shinobi Works」までどうぞ