はじめに

こんにちは！フリーランスの佐藤裕です。
2022年8月まで某企業の雇われ社長でしたが、2022年9月よりフリーランスになりました。元々社長になる前はフリーランスだったので、これで2回目です。

そして、そのタイミングで自分のポートフォリオサイトを公開することにしました。自分の実績やスキル、ならびに問い合わせフォームを公開するサイトになります。
当初は今までのスキルを使ってパパっと作成しようと思っていたのですが、今回は初体験となる、Vueを使用することにしました。

私がこれまでサイトを作成する時は、ほとんどのケースでフロントはjQueryを使用していました。
ここ最近Twitterなどで、jQueryが貶される投稿を見る度に、「うるせえjQueryにも良い所いっぱいあるんじゃああああああ！！！」と内心激おこプンプン丸だったのですが、
案件としてVueやReactが求められることが増えてきたこと、ならびに「そこまでjQueryが貶される」→「逆にVueなどが優れている」ということにもなります。
それであれば・・・と、新しくサイトを作るこのタイミングで、Vueを1から勉強し、ポートフォリオサイトはVueを活用することになりました。

この記事では、

• 使用したフレームワーク・ライブラリ
• サイト構成
• jQuery信者だった自分にとってのVueの感想

などを記載していこうと思っています。

作成ポートフォリオサイト

ポートフォリオサイトはこちらです。
https://hirossyi.net

デザインはシンプルです。自分はほとんどの分野において、シンプルが好みです。

使用した主なフレームワーク・ライブラリ

• typescript@4.5.5
• vue@2.7.10
• vuetify@2.6.9
• vue-router@3.6.4
• vue-gtag@1.16.1
• vue-recaptcha-v3@1.9.0

バックエンド

このサイトのバックエンドは、WordPress APIを使用しています。
シンプルなサイトなので、バックエンドは必要ないのでは？と思われそうですね。
ですが、例えばポートフォリオサイト内の「スキル」「実績」を、コンポーネントのdata, proosに直接記載すると、メンテナンスがけっこう大変です。

そのため、これらの内容は、WordPressのREST APIを活用することにしました。
WordPressのカスタム投稿タイプで追加した内容を、REST APIで取得しています。Getであれば、認証もいりませんしね。

また、プライバシーポリシーは、WordPressの固定ページから取得しておりますし、

問い合わせフォームの送信は、WordPressのプラグイン「Contact form 7」のREST APIでPOSTしています。（Contact form 7にAPIがあることを初めて知りました）

色々言われているWordPressですが、REST APIの速度も差し支えないですし、このような使い方であればVueとの連携も全く問題ないように感じました。

フロントエンド

今回はVue2を使用しています。最初はVue3を使用する予定だったのですが、VuetifyがVue3をまだ対応していなかったので、Vue2にしました。
(Vue3・・・あまり良い評判聞かないけど大丈夫なんだろうか)

また、UIライブラリにはVuetifyを採用しています。元々Bootstrapを愛用していたので、そのエキスを吸収しているようだったのが好印象。
この辺のカード表示や、ダイアログ、フォームのレイアウトなど、各所でVuetifyを採用しています。

Vueを勉強した方法

Vueですが、Udemyで世界のアオキさんの、この講座を使用して勉強しました。
https://www.udemy.com/share/103BFi3@bPi6ikgB_0x5aDMkVzCCL88AFX5Y4tDwJP8Ypm3hhkH8ekAxOx9GiKNi1pXVH9iU/
元々、公式サイトのリファレンスなどでVueを何回か勉強したことはあったのですが、自分にはどうしても良くわからなかったこと、ならびに当時は明確な「作りたい目標」もなかったことから、三日坊主で終わってしまいました。
この講座では、Vueの基礎・実践練習・Vuetifyのような関連ライブラリを使用しての応用など、かなりきめ細かい講座になっていることから、非常に分かりやすく、自身の成長も感じやすかったです。
「自分のポートフォリオで採用しよう」と明確な目標もあったことから、無事Vueの基礎は定着したと思っています。

jQuery信者だった自分にとってのVueの感想

ここからは、実際にVueを使用してみて、 jQueryとの比較や感想を記載してみようと思います。
※ここで記載している内容が「合っている」「間違っている」は正直分かりません。まだまだ勉強中です。
あくまでも、今回Vueを初めて触れるものとして、「こうなのでは？」という率直な感想を記載しています。

Vueは状態遷移が非常に分かりやすい

画面表示・非表示や、ボタンのdisabledなどを制御するとき、jQueryで書こうとするとちょっと面倒です。cssとclassで初期状態を書く・スクリプトで動作を記載する・・・・といったことが必要です。なので、「何がどこに書いてある？」ということが分かりにくくなり冗長、ということがありました。
その点Vueは、v-ifやv-show、v-bind:disabledなど、それ専用の属性が用意されており、dataのtrue/false値で切り替えるといった事が可能なのが、非常に便利に感じました。

Vueは部品(component)が使いやすい

jQueryベースでのサイト制作は、基本的にhtmlは1つのファイルにすべての要素を記載します。PHPやC#、PythonなどのSSR（サーバーサイドレンダリング）であれば、部分ビューという考え方でパーツを分けることができますが、素のhtmlだと基本的にできません。
また、PHPやC#、PythonなどのSSRであっても、cssやjavascriptは別のファイルで用意する必要があります。部分ビューにcssやjavascriptを記載することも可能といえば可能ですが、そうするとscssやTypeScriptは使用できないです。

その点Vueは、ひとつのcomponentファイルを複数組み合わせて画面に表示する、という考え方が大きなメリットに感じます。
一つのコンポーネントは最小限の内容になるので、メンテナンスがしやすいと感じました。
特にstyleのscopedは超便利に感じました。ああこれは干渉気にしなくて済むな・・・！と感動した覚えがあります。たまーにうまく動かないケースがあるけど。
また、一つのコンポーネントにcssとjavascriptを含めるので完結していますし、scssやtypescriptを使用することも可能です。

複数のコンポーネントをまたいだ関数は使用しにくい？

開発をしていると、複数のコンポーネントで使用したい、common的な関数を利用したい場面がありました。
従来の開発方法だと割と簡単に書けるこの内容ですが、Vueだと「それぞれのcomponentで独立している」分、「共通の処理が書きにくい or 書けない？」ように感じています。
親子関係のあるcomponentでしかデータのやり取りができなかったり。「これどうなるんだ？」という点があったので、それの解決方法に困ったことがありました。
おそらくそれまでがやりたい放題過ぎたので、「厳密な呼び出しだけOK」という点はメリットでもあると思うのですが、一応記載しておきます。
Vuexである程度解決出来そうでもあります。これはまだ勉強していないので今後の課題で。
また、TypeScriptで記載している関係で、厳密な記載が必要なことも、多少の影響があるかもしれないですね。

SEOや、SNSのOGPは素のVueだと厳しい

FacebookやTwitterのSNSでポートフォリオを公開しようとした時、最初はタイトルやサムネイル、本文が何も出てこないという事がありました。
index.htmlに直接、OGPのmetaを記載することでひとまず解決することはできたのですが、それは自分のサイトがSPAで、1ページしかないから解決することです。
ブログのような複数のページがあるサイトの場合では、各記事のタイトル・本文などが出てくれずに、共通のものになってしまいます。

SEOも似たような理屈で、ちゃんとしたタイトルやサムネイル、本文が取得できない可能性があるそうです。 最近はGoogleなどのクロールの技術が上がり、割と適切に収集できるようになったそうですが、それでも不安視される部分はあります。
Nuxtを使用することで、SSR(サーバーサイドレンダリング)が出来るようになり、これによってSEOも対策できるそうですが、そうすると今度はサーバーにNode.jsが必要となり、今使っているレンタルサーバーのXserverでは無理そうなので、どうしようかな・・・と思っている所です。

ライブラリの充実度ではjQueryの方が優ってる？

自分がjQueryの方が良いと思っていた理由として、「関連ライブラリの充実度が、jQueryの方が多い」という印象がありました。
最近のライブラリは脱jQueryのものが基本になっていますが、長らくjQueryはデファクトスタンダードとして降臨していました。
なので、「関連ライブラリはjQueryの方が多いのでは？」と思っていました。
その印象は、今のところは崩れていないです。 ちょっとしたアニメーションなど、jQueryの時は簡単に作れたものが、今だと「あれ・・・？1から作る必要ある・・・？」ということが結構あります。
調べ方が悪いかもしれません。ですが、今のところは「サクッと短納期で作るならjQuery」という印象です。

比較まとめ

• 短期間でサクッと作るならjQuery
• 長期的なメンテナンスを想定して作るならVueという印象
• 状態管理やコンポーネント制御など、メリットはとてつもなくあるので、これからサイトを作るならVueを使った方が良いかも

まとめ

そんなこんなでVueを使ったサイトの構築、ならびにVueの感想を記載しました。
とはいえ、Vuex使ってないし、Nuxtも使ってないしで、まだまだ入り口に入れたぐらいなのかな？とも思っています。
Vueの世界はとてつもなく広そうなので、これから勉強のしがいがありそうです！

ポートフォリオも、これからブログを書けるようにして、技術記事・マインドの記事・移住の記事など、色々投稿していこうと思ってます。そうなるとNuxtのSSRは必須になるので、尚更こっから勉強が必要になりますね。頑張らないと。