JavaScriptを学びなおしたくてポートフォリオサイトを作成した話【Vue.js】

はじめに

私の中でJavaScriptの知識はかなり前から時間が止まったままでした。

最近、JavaScriptの歴史を見ていく中で、JavaScriptという言語をまた勉強し直したいという気持ちが強くなりました。
そこで今回は、モダンなフロントエンド開発を学ぶという意味でVue.jsを使ってポートフォリオサイトを作成しました。
この記事ではサイトを制作する中で感じたこと・意識したことをまとめていきます。

ポートフォリオサイトを作成した経緯

私は、約3年ほどプログラミングを勉強してきましたが、身につけたスキルを使って成果物を作るアウトプット型の学習より、ドットインストールやProgateを使った受動的なインプット学習が中心でした。そこでアウトプット型の学習を始めたいと思い、Vue.jsを学習してポートフォリオサイトを作成しました。フレームワークとしてVue.jsを選定した理由は様々あるのですが、大きく SPA形式のサイトを構築してみたい。以前にVue.jsを少し触ったことがあったためというのがあります。最近、Web系の情報や、記事のトレンドを見ていると、React.jsやNext.js・Nuxt.jsなどのJavaScriptフレームワーク名を目にすることが多くなりました。私がJavaScriptを学習したのはかなり前になるので、この機会にモダンなJavaScriptを学習したいという気持ちが強くなり、この機会にポートフォリオサイトを作ってみることにしました。

こちらが今回作成したサイトになります。
https://ru-portforio.netlify.app

トップページ

学習期間が約 2 週間、制作が約 2 週間、合わせて約1ヶ月で開発しました。 Toggle という時間管理ツールを使って開発している時間の記録をしたところ、完成まで40時間ほどかかっていました。

以前Web技術の概要を勉強したときにHTML・CSS・JavaScriptを触ったことあり知識はあったのですが、かなり学習期間が空いてしまっている状態からのスタートでした。そのため学習期間を含めてかなり遅いペースでの開発にはなりましたが、Vue.jsの教材や情報が充実しており、理解しながら進められたので結果的にモダンな環境での開発ができたことの達成感がすごくありました。

主な使用技術と概要

技術	使用バージョン	説明
Vue.js	2.6.12	JavaScriptフレームワーク
Vue CLI	4.5.7	Vue.js用コマンドラインインタフェース
Vuetify	2.3.13	マテリアルデザインフレームワーク
Vue Router	3.4.6	Vue.js用の公式ルーティングプラグイン
Netlify	ー	静的サイトホスティングサービス

ポートフォリオサイトに含めたもの

ポートフォリオサイトを作るに当たって様々なエンジニアの方のポートフォリオサイトを拝見しました。作成しているページや記載している内容はそれぞれ個性があって面白いと感じました。かなり悩んだのですが、その中で以下の４つのページを作成することにしました。

• 簡単なプロフィール
• 扱える技術
• 作成したもの
• 連絡先・お問い合わせ

今までほとんど成果物を作って来なかったため、載せられるものが少なく寂しい感じになってしまいました。今後、個人制作で作ったものを載せてにぎやかにしていきたいです。扱える技術ページには今まで勉強したことのある技術をアイコンで載せました。今まで幅広くいろんな技術を勉強してきましたが、それぞれの知識が浅く、アウトプットを通して技術力を底上げしていかなければと危機感も覚えました。

開発で意識したこと

モダンなJavaScriptの理解と開発環境構築

ポートフォリオサイトを作る際に、WSL2が気になっていたこともあり、ローカルの開発環境としてWSL2の環境にUbuntu 20.04.1 LTSをインストールしVue.jsの開発環境を構築しました。 最近のフロントエンド界隈について調べる中でNode.jsやwebpackなどの用語は聞いたことあったのですが、使えると何が便利なのかわからず、恥ずかしながら今まで食わず嫌いしていました。今思えばもっと早くに触れておくべきでした。そんなときにQiitaで見かけた@yukijiさんのJavaScript学習ロードマップという記事に影響を受け、記事内で紹介されていたエンジニア系Youtuberさんの動画を見漁りました。自分が学んできた技術はすでに廃れつつあるということを目の前にしモダンな技術、流行りの技術を取り入れる姿勢を大事にしていかなければならないという思いがより強くなりました。プロジェクトはNode.jsをインストールして使うことのできるパッケージマネージャーnpmを使いインターネット上の記事を参考に作成しました。この時点でwebpackやnode_moduleなどを目にする機会が多くなり少しパニックになったのを覚えてます。それと同時にVue CLIがプロジェクトの雛形を生成してくれること、開発用サーバーにホットリロード機能が用意されているなど驚くことが多く、開発前からとてもワクワクしてたのを覚えてます。TypeScriptでの開発も視野に入れていたのですが、学習リソースに合わせるため今回はJavaScriptでの開発環境を構築しました。

Vue.jsの学習

実は1年ほど前にVue.jsを勉強していた時期があります。そのときに学習していた書籍がこちら。

基礎から学ぶVue.js

mioさん(@mio3io)が執筆した猫本の愛称で親しまれている有名な1冊です。

この記事を執筆した2020年11月現在、改定2版が出版されています。画像は改定前の表紙になります。

書籍サポートページが充実しているので、動くものを見ながら学習できたのが良かったです。

昨年、書店で購入して読み進めていたのですが、忙しかったこともあり、積読になってしまっていました。触りの部分しか読めていなかったため、中途半端な理解のままVueで成果物を作ることなく、令和を迎えてしまいました。

今回、勉強する際に、改めて最初から読み直し、重要なところはメモを取るなどして少しづつ理解を進めていきました。それと同時にUdemyにて人気が高かった超Vue.js 完全ガイド2024 (Vue Router, Pinia含む)を購入し、猫本と並行して学習していきました。かなりボリュームがありますが、1回購入すれば何度も見られるということもあり、再生速度を変えながら通勤時間などで繰り返し見るなどして学習を進めました。どちらも半分くらいまで見終えたぐらいから構築した環境で開発をはじめました。なおVue.jsは公式ドキュメントも充実しているのでとても学習しやすいと感じました。

ポートフォリオサイトを作成し始めるタイミングでちょうどよくVue3がリリースされたのですが、書籍とUdemyの内容に合わせるため、今回はVue 2.x系を利用して制作しています。

レスポンシブデザインとUI

今はモバイルファーストと言われるくらいにモバイル環境（タブレット・スマートフォン）への対応が必要不可欠となっています。今回の制作でもレスポンシブデザインに対応しながらおしゃれなデザインにしたいという思いがありました。レスポンシブデザイン対応はかなり難しい印象が強くあり、今まで意識してできていなかったのですが、Vuetifyというマテリアルデザインフレームワークを導入することで柔軟に対応できました。もともとBootstrapをよく使っており、BootstrapVueというライブラリを使おうとしていたのですが、公式サイトのデザインに惹かれて今回はVuetifyを採用しました。Vuetifyはコンポーネント単位でデザインしていくため、Vue.jsの知識が必要ですが、同時にコンポーネントの概念について勉強して対応しました。レスポンシブ対応するときにブレークポイントを使ってレイアウトするのですが、以前Bootstrapを使った経験があったので、直感的に理解しやすくそこまで難しいと感じることはありませんでした。簡単な記述でマテリアルデザインのコンポーネントを使うことができるので、使っていて楽しかったです。レスポンシブデザインとして、公式ドキュメントとサンプルではドロワーメニューとして以下のデザインが採用されています。

ハンバーガーメニューライク

このデザインがマテリアルデザインの方針としては正しいみたいです。しかしハンバーガーメニューは今まで使ってきて、個人的にあまり好きではありませんでした。UXの観点で否定的な意見を目にすることがあり、モバイル向けメニュー実装をする上どのように実装するかで悩みました。

そこで見つけたのがv-bottom-navigation コンポーネントです。

components/Navigation.vue

<template>
  <div>
    <v-bottom-navigation color="white" dark grow shift app>
      <v-btn v-for="item in items" :key="item.link" :to="item.link">
        <span class="white--text">{{ item.name }}</span>
        <v-icon>{{ item.icon }}</v-icon>
      </v-btn>
    </v-bottom-navigation>
  </div>
</template>

これだけでナビゲーションバーを作ることができます。v-forディレクティブで中身を表示しています。
今回は思い切ってこのナビゲーションを採用してみました。モバイル向けTwitterやYouTubeの公式アプリで使われているようなコンポーネントですね。しかし、このままだとPC用のナビゲーションバーとモバイル向けのナビゲーションバーが混在してしまうため、App.vueファイルの中でブレークポイントによってコンポーネントの出し分けをしています。ナビゲーションには公式プラグインのVue Routerを使用しています。ページのパスと呼び出したいコンポーネントを指定するだけでルーティングの制御を自動で行ってくれるのが便利でした。

src/App.vue

<MyNavigation class="hidden-md-and-up ma-0"></MyNavigation>

上の例だとコンポーネントのクラスにブレークポイントmd以上（タブレットやラップトップPC以上の画面サイズ）ではbottom-navigationコンポーネントを表示するように指定しています。これだけの記述で出し分けができるのはすごいですね。

アイコンでページイメージがわかりやすくて好きです。アイコンはFontawesome使用

Vuetifyはまだ日本語のドキュメントなどが少なく、コンポーネントの使い方について調べるのが少し大変な部分もありましたが、公式のドキュメントを読み込むことで一通り使うことができました。今の段階でも使えるコンポーネントが使い切れないくらいあるのですが、今も開発が進んでおりバージョンが上がり続けているため、今後のコンポーネント追加や機能追加にも期待しています。Bootstrapなどの他のフレームワークにも言えますが、デザインフレームワークの導入によって簡単な記述でデザインに一体感が出せる、モダンなデザインにできるのはとても便利です。しかし、デザインがどうしても似通ってしまうためデザイン部分では個性が出しにくいと感じました。
その部分でWebデザインとUXについて考えることも多く、難しさや奥深さを痛感しました。いろんなサイトを見ていく中で、今後、見直していきたい部分でもあります。

サイトホスティング

ページを公開するために必要となるWebページのホスティングですが、ホスティングサービスとして上記の書籍とUdemyの動画の中で紹介されていたNetlifyを選びました。GitHubのリポジトリと連携してデプロイできるとのことで、半信半疑ではあったのですが、やってみるとたった数分でデプロイできたのがとても感動的でした。無料枠が設けられており、制限はあるのですが、個人的に利用する分については十分すぎるほどなのでSPAを手軽に公開したいときの手段としておすすめできます。コードを変更をした際もコミットして連携したリポジトリに対してプッシュするだけでビルドして反映してくれるので便利です。

工夫したところ

ページ遷移時のアニメーション

Vue.jsのtransitionを使って実装しています。watchプロパティで$routeの中身が変化したときにCSSライブラリのAnimate.cssを適用させてアニメーションさせています。Animate.cssはクラスを適用するだけでアニメーションさせることができて便利だと感じました。アニメーションが入ることでサイトに動きが生まれて華やかになるので、カスタマイズしていて楽しかったです。

アニメーション実装については以下の記事を参考にさせてもらいました。
https://qiita.com/gyarasu/items/eadc0690037609c041e3

全体のデザイン統一とアイコン

全体的に黒と白を基調としたモノトーンな印象のサイトにしています。Vuetifyのコンポーネントのデザインと合わせやすく、サイト全体的にまとまった印象になりました。アイコンは主にFontAwesomeとDEVICONを使用しました。保有スキルのページでは技術アイコンを表示するためにv-iconコンポーネントを使いDEVICONで配布されているアイコンを埋め込んでいます。アイコンには単色とカラーのものがあったのですが、単色のアイコンを使うことでサイトの雰囲気に合わせやすいのが良かったです。

作り終えてみて

ポートフォリオサイトを構築した結果として動くものができたことは大きな成功体験になりました。作成したものがWeb上で公開されていることが不思議な感覚です。ポートフォリオサイトを構築するにあたってJavaScriptでモダンなフロントエンド開発をできたことが楽しく、アウトプットして技術を伸ばしていくことの大切さを実感しました。それと同時に、ドットインストールやProgateを何周も学習して満足していた過去の自分が恥ずかしいです。もっとはやく成果物作成を通して新しい技術に触れておきたかったという後悔もあります。今回の開発を通して新しい体験がたくさんありました。初めてのサイト制作であり、まだまだサイトデザインやサイトのパフォーマンスは改善できる余地があると考えています。細かいところまで見ると至らない点は多くあります。その部分をこれから個人開発をしていくなかで、少しづつ改善していきたいです。次は、今回身につけた知識を踏まえながらサーバーサイドレンダリングが特徴的なNuxt.js、Next.jsなどのフレームワークや、Firebaseを使ったアプリにも挑戦していきたいです。

最後まで読んでいただきありがとうございました。