Vue.jsとVuetifyでシングルページアプリケーション(以下、SPA)のポートフォリオサイトを作りました。
レイアウト面での改善の余地はあるものの、｢Vue.jsを使ってなにか作りたい｣という目標は達成できましたので、
これまでに学習したことをまとめます。
これからVue.jsでポートフォリオサイトを制作したいと思っている方や、フロントエンドの技術をさらっと学びたいと思っている方には参考になることがあるかもしれません。
JavaScriptの学習
普段はバックエンド業務メインでRubyを使っており、JavaScriptを書いたことはありません。
まずはJavaScriptの基礎を身につけるぞ!ということで、JavaScriptPrimerというWebサイトで学習をはじめました。
- ES2015以降の構文(要はモダンな書き方)を積極的に使用している
- 複数の書き方や実装方法ができるときにおすすめの書き方が書かれている
という点がわかりやすく、よい教材です。
Rubyを経験していたので､リテラルや繰り返し処理はすんなり理解できたものの、非同期通信やPromiseの考えは難しくちょっとまだ理解できていない点もありますね。
デザインの学習
ポートフォリオサイトを作成するには、まずは見本(デザインカンプ)を作成する必要がありますよね?
しかしデザインに関する経験やセンスがなかったので、デザインとはどういうものかを把握したいと考え､ノンデザイナーズ・デザインブックの序盤に目を通しました。
「近接の法則」や「整列の法則」を知ったことでポートフォリオサイトのデザインに活かすことができたかなと想います。
ただ、色をつけようとすると配色について考えなければいけないことが多くあり、あまり進捗しませんでした。
ならばいっそのこと白黒のみでいこう考え、できあがったデザインカンプがこちらになります。
ちなみに、draw.ioというサービスを利用しました。VSCodeの拡張機能として利用することができたので、エディタ上で操作できて便利でしたよ。
Vue.jsの学習
次に、Vue.jsの学習をすることをしました。
ポートフォリオサイトでは、Vue.jsに加えて何かしらのCSSフレームワークも利用してサクッとレイアウトを整えたいと思っていたので、Vue.jsとVuetifyを学べるUdemy講座Vue.js + Firebaseで作るシングルページアプリケーション
を利用しました。
講座を利用しながら、Vue.jsでSPAのポートフォリオサイトを作成するために必要な下記の理解ができました。
- 基本的なライブラリ(Vuex, VueRouter, Vue CLI)
- 基本的な構文(v-forディレクティブ, v-onディレクティブ, v-bindディレクティブ, dataプロパティ)
Vuetifyの学習
Vuetifyを使ってレスポンシブデザインを実装するには、知識が足りないと感じたので、ブログやドキュメントを使って情報収集しました。
特に、グリッドレイアウトシステムに関するAPIはv-content,v-row,v-colの理解が重要だと感じました。
HTML/CSSの学習
グリッドレイアウトを表現できるようになっても基本的なHTMLやCSSを理解できていなかったため、思うようにスタイルをあてられませんでした。
というのも、HTMLやCSSを学習したのはプログラミングスクールで学んだ3日程度であり忘れてしまっているのも無理はありません。
そこでHTMLやCSSをざっと復習する必要がることに気づき、HTML＆CSSとWebデザインが 1冊できちんと身につく本をハンズオンで2日くらいで終わらせました。
ブロック要素やインライン要素など、CSSでレイアウトを整えるにあたって必須の知識をおさえることができました。
ポートフォリオサイト完成
上記のことを一通り終えたうえで開発したのが、こちらのポートフォリオサイトになります。
まだデザイン面で凝れていない点があることや、コンテンツが不足している点などはありますが、
｢フロントエンドの技術をざっと学ぶ｣という目標に関して一旦は達成できたかな､というところです。
普段バックエンド業務をメインでおこなっている身からすると、フロントエンド技術はブラウザを見ながら動きを確認して実装できる点に楽しさを感じました。
これからは業務でもフロント面の実装もガシガシやっていきたいな、と感じました。
コメントを残す