ポートフォリオを作成するついでに Vue.js と Firebase に入門しました。本記事はそこから得られた知見のまとめです。

1.完成物

まず、完成物です。

URL はこちらになります

こだわったポイントとしては

• 今までの経験とスキルセットが一目でわかること
• デザインがおしゃれでかわいいこと(左上のハンバーガーメニューや背景のアニメーション,字体など)

などが挙げられます。作成にかかった期間はデザイン,実装,Vue.js のキャッチアップすべてを含めて 1 週間くらいでした。

2.使用技術・選定理由

今回のポートフォリオ実装にあたって,使用した技術は以下の通りです。

• Firebase
• Vue.js(Nuxt ではなく SPA)

そして、上に記載した技術を使用しようと考えた理由としては以下の理由が挙げられます。

• サイトの規模が小さく、サーバーサイドとの通信や高アクセスなどもない。
• firebase,Vue.js ともに使用した経験がなかったため経験値を増やしたかった
• React や GCP,AWS にはすでに触れた経験があったため Vue.js,Firebase の学習コストは低いと考えた。

サイトの性質というのも選定理由の一つではありますが、個人開発なので、新しい技術を学びたいというのが正直なところです。

Vue.js には初めて触りました。非同期通信や状態管理などは実装していないのでわかったのは雰囲気だけですが、React と比較したとき,その記法がより HTML 寄りだと感じました。Javascript を書くというよりは,「Vue.js」という新しいプログラミング言語を書いているような感覚でした。

Firebase については、利用したサービスが Firebase Host のみなので、特筆するほどの知見は得られませんでした。しかし、コマンド一つでデプロイできる点は非常に便利です。Firebase にはほかにも様々なサービスが用意されているので今後触っていこうと思います。

今回、開発を進めるにあたって以下の資料を参考にしました。

• Vue.js + Firebase で作るシングルページアプリケーション
• Vue.js 公式
• Vuetify 公式
• Vue.js ディレクトリ構成 色々試してみた(フォルダ構成の参考にしました。)

勉強期間と開発期間は分けずに,開発しながら学ぶという感じでした。

3.学んだこと・反省点

今回の開発を通して学んだこととしては、

• Vue.js の基本的な文法
• フォルダ構成
• 「おしゃれだなー」と思うデザインとその実装はインターネット上にいくらでも載っているので,積極的に利用すべきである。
• レイアウト作成は flexbox がやっぱり最強

といった点についてです。

一方反省点としては

• コンポーネント間で css の共通部分が多くなってしまった
• css について,なぜその記述にしたのか,の「なぜ」の部分が非常に曖昧(メンテナンス性が低い)

などが挙げられます。一言でいうと、CSS のメンテナンス性が低くなってしまったということです。

4.今後の改良点

今回作成したポートフォリオにおける最低ラインの目標は

• 特定の URL に公開されていること
• 今までの経験と制作物にアクセスできること
• デザイン要件を満たしていること

だったため、今回はひとまず完成という感じですが、以下のような改良点があると考えています。

• Nuxt 化
• SEO 対応
• 英語版のみしかないが、日本語にも対応する
• CSS の共通部分をモジュール化する
• デザイン周りのフィードバック修正
• 短期インターン経験も追加する
• スキルレベルの基準を記載する
• 独自ドメインとの結びつけ

新しく取り組んでいるプロダクトが一段落したらこれらにも取り組んでいきたいと思います。