【完全無料】Vue CLIとNetlifyを使用してSPAポートフォリオを作成

日頃からVue.jsの勉強をガツガツやっていますが、「何かしらのプロダクトを作りたい」と感じ、ポートフォリオを作成しました。 業務では主にLaravelを使用したバックエンド開発ばかり行っているので、プライベートでやるVue.jsやReact.jsなどのフロントエンド系の学習がものすごく楽しいこの頃です（笑）

ひとまずの完成形は以下のURLでみられます。 https://katsu07-portfolio.netlify.com/ ソースコードはGitHubから確認できます。

▽AboutページはCSSを自分で書き、グリッドレイアウトに▽

▽WorksページはVuetifyを使用しモーダルウィンドウ化、状態管理はVuex▽

▽FormsページはNetlify Formsを使用し動作確認済▽

使用している技術は以下の通りです。

• Vue CLI : Vue.jsの開発をすぐに行えるパッケージのようなもの
• Vuex : 状態管理に使用しています
• Netlify : この頃お世話になりっぱなしのデプロイ環境
• Vuetify : デザインの調整。ボタン管理などかなり楽

デザインもイチから自分で考え、カッコいいものに仕上げました。 もちろんレスポンシブ化もしてあるので、PC、スマホ、タブレット、何で見てもきちんと整っているはずです。

工夫した点・苦労した点

基本的なVueの機能を網羅すること

• コンポーネント管理
• Vue Routerを使用したSPA化
• Vuexを使用した状態管理
• Axiosを使用した外部API接続

ポートフォリオを作成するにあたって、一番重要なことは「技術を使いこなせるか」と「自走力（自分で考える力）があるか」だと思います。 自分が慣れ親しんだスキルだけを活用して、いわゆる自己満足のポートフォリオを作ったとしても、「業務でやってるんだからできて当たり前だよね。」と言う反応しか返ってきません。

そのようなPFを作らないためにも、「新しい技術に進んで取り組むこと」が重要です。実際、PFを作成するまでにデザインや、状態管理など覚えることがたくさんありました。それら一つ一つをきちんと理解して、適切に使うことを目標にこのPFを作成しました。

グリッドレイアウトの適用

正直、CSSは自信がありません（笑） もしかしたらグリッドレイアウトの適用が一番時間がかかったかもしれません。

https://www.webcreatorbox.com/tech/css-grid-layout 上記のサイトを参考に、グリッドレイアウトを作成しました。

感想

いい感じのポートフォリオが完成したと思っています。 作品が完成したら随時追加していくので、暇な時にでも確認していただけると幸いです！ もうちょっと作り込みたいのでコードも随時更新もしていこうかなと思います。