ポートフォリオとして制作したカード案内サイトの制作過程をまとめました。
ポートフォリオとGitHubは下記でございます。
ポートフォリオ「カード案内サイト(Vue)」URL
https://takayuki007.github.io/card-guide/
GitHub
https://github.com/takayuki007/card-guide
1、要件概要
導入
JavaScriptのフレームワークであるVueを通じてクレジットカードの案内サイトを作ってみます。以前、jQueryとJavaScriptで同じようなサイトを作っていますが、今度はそれをVueで作ってみます。
そこで
HTML／CSSは同じでJavaScriptの処理だけ、Vueで書きます。
同じようなところはあるか？
カテゴリー分けのサイト
https://kakaku.com/card/
ポイント羅列のサイト
https://hoken-all.co.jp/media/creditcard-ranking/
部門ごとに専門家が分析したサイト
https://diamond.jp/articles/-/189805
2、サービス概要
選択肢を選んでいくだけでピッタリのクレジットカードが表示される。そして、そのクレジットカードのポイントも少し解説されている。
要件定義(10分)
PCとスマホで見られるレスポンシブデザインにする。
1ページでの構成とし、JavaScriptで表示、非表示を切り替える。
2つの選択肢を進むと最終的におすすめのカードが提示される。
ページ構成(5分)
TOPページ
画面設計&デザイン作成
PC(65分)
スマホ(30分)
環境構築(15分)
Vue CLIを用いて環境構築
参考URL：
https://qiita.com/567000/items/dde495d6a8ad1c25fa43
3、実装
まずはHTMLを作成。その後にCSSを当てていく。
HTML(30分)
意識したこと
DOM操作で表示と非表示を切り替えるので、選択肢やカードの紹介をそれぞれ全てdiv要素で囲んでおかないとまとめて切り替えられないので、その部分は意識してコードを書きました。
CSS
PC画面用
header部分(10分)
presentation部分(10分)
question部分(25分)
answer部分(20分)
スマホ画面用
header部分(10分)
presentation部分(5分)
question部分(15分)
answer部分(10分)
HTML／CSSが完了したので、Vueの実装に入る。
処理としては、見えてほしくないところにはinvisibleのクラスをつけ、見せたいところはこのクラスを外す。このクラスの付け替えで見せる、見せないを対応する。
Vue(255分)
クラスの付け替えで表示、非表示を切り替え。
アニメーションもなく切り替わると切り替わったかどうかわかりにくいので、表示される要素にはanimationを使う。
参考URL：
https://qiita.com/wintyo/items/87565805174dca8c2105
苦労したこと
sassの導入。
スマホにも対応したかったのでVueにsassを導入することにしたが、node-sassとsass-loaderのバージョン違いでうまく動作せず、その修正に時間を取られてしまった。
参考URL：
https://qiita.com/pinalto/items/d2eeda06d49740d905ca
https://qiita.com/terufumi1122/items/6747cfed10b60e3c7fa1
https://qiita.com/TK-C/items/c501e631494d11d5d6d2
アニメーションの処理
Vueでは<transition>で要素を囲むことによりCSSでアニメーションを導入できるが、処理がうまくできず今回はjQueryで代用。
参考URL：
https://qiita.com/DaisukeNishi/items/cf871644401f745054d8
https://qiita.com/kira-0521/items/59c4bd74c3a56a7388f7
v-showで要素を表示、非表示の切り替え処理
v-bind:classでinvisibleクラスを付け替えることで表示、非表示を処理をしていたが、Q2の選択肢を回答するとそのも問題が消えないことが判明。一度クラスを付与したものは削除できなかったので、v-showをQ2のみ導入。無事にQ2を回答するとQ2が非表示になる処理を実現できた。
参考URL：
https://qiita.com/yuta-38/items/b46a1600c97d16874000#v-if%E3%81%A8v-show%E3%81%AE%E9%81%95%E3%81%84
4、テスト(ローカル)
表示崩れや見にくい部分がないかのチェックとVueがきちんと機能しているかを確かめる。
PC画面(5分)
スマホ画面(5分)
5、本番デプロイ
今回はGithub pagesを利用して公開することにしました。
Github pagesにデプロイ(10分)
Githubにプッシュする。
Githubの設定からGithub pagesの設定をし、公開。
***
※苦労したこと
jQueryやJavaScriptの時はルートディレクトリを公開すればそのまま公開できたが、今回は新たにビルドしたディレクトリとファイルを公開しなければいけないことが判明。その作業に少し苦労した。
参考URL：
https://qiita.com/kuimac/items/9cfd08b2c3df871a5f56
6、テスト(本番)
表示崩れや見にくい部分がないかのチェックとVueがきちんと機能しているかを確かめる。
PC画面(5分)
スマホ画面(5分)
スマホで見た際に、presentationクラスの箇所があるため、公式サイトのリンクが画面から見切れてしまう。カードの提案画面が出たら、このテキストは必要ないとも思うので、カードの提案画面になったらこのテキスト部分を非表示にし、リンクをスクーロールをしなくても表示されるようにした。
再度テスト
PC画面(5分)
スマホ画面(5分)
7、まとめ
全体として555分。1人日を8時間とした場合は、1.5人日での完成でした。
今回のHTMLとCSSはjQueryのものを使い回していますが、想定としては1から作ったと想定して時間を計算しています。Vueの処理は以前扱ったことがあるので頭ではわかっていましたが、久々に触ってみると忘れていて時間がかかってしまいました。JavaScriptのフレームワークはよく使われるので、きちんと慣れておきたいです。
↧