ポートフォリオとして制作したカード案内サイトの制作過程をまとめました。

ポートフォリオとGitHubは下記でございます。

ポートフォリオ「カード案内サイト(JavaScript)」URL
https://takayuki007.github.io/cardGuid-JavaScript-/index.html

GitHub
https://github.com/takayuki007/cardGuid-JavaScript-

#1、要件概要

導入

JavaScriptのDOM操作を通じてクレジットカードの案内サイトを作ってみます。以前、jQueryで同じようなサイトを作っていますが、今度はそれをJavaScriptで作ってみます。

そこで

HTML／CSSは同じでjQueryの処理だけ、素のJavaScriptで書きます。

同じようなところはあるか？

カテゴリー分けのサイト
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分)

node-sassを用いてsass環境を構築

#3、実装

まずはHTMLを作成。その後にCSSを当てていく。

HTML(30分)

意識したこと

JavaScriptのDOM操作で表示と非表示を切り替えるので、選択肢やカードの紹介をそれぞれ全てdiv要素で囲んでおかないとまとめて切り替えられないので、その部分は意識してコードを書きました。

CSS

PC画面用

header部分(10分)
presentation部分(10分)
question部分(25分)
answer部分(20分)

スマホ画面用

header部分(10分)
presentation部分(5分)
question部分(15分)
answer部分(10分)

HTML／CSSが完了したので、JavaScriptの実装に入る。

処理としては、見えてほしくないところにはinvisibleのクラスをつけ、見せたいところはこのクラスを外す。このクラスの付け替えで見せる、見せないを対応する。

JavaScript(80分)

クラスの付け替えで表示、非表示を切り替え。
アニメーションもなく切り替わると切り替わったかどうかわかりにくいので、表示される要素にはanimationを使う。

参考URL：
https://www.hypertextcandy.com/vanilla-javascript-event
https://techacademy.jp/magazine/27860

苦労したこと

jQueryだとメソッドチェーンで処理をつなげて記述できるが、JavaScriptだとそれができないことを忘れていて、実装の仕方を調べるのに苦労した。

参考URL：
https://qiita.com/sawapi/items/279531c88709700d0ff1

#4、テスト(ローカル)

表示崩れや見にくい部分がないかのチェックとJavaScriptがきちんと機能しているかを確かめる。

PC画面(5分)
スマホ画面(5分)

5、本番デプロイ

今回はGithub pagesを利用して公開することにしました。

Github pagesにデプロイ(10分)

Githubにプッシュする。
Githubの設定からGithub pagesの設定をし、公開。

6、テスト(本番)

表示崩れや見にくい部分がないかのチェックとJavaScriptがきちんと機能しているかを確かめる。

PC画面(5分)
スマホ画面(5分)

スマホで見た際に、presentationクラスの箇所があるため、公式サイトのリンクが画面から見切れてしまう。カードの提案画面が出たら、このテキストは必要ないとも思うので、カードの提案画面になったらこのテキスト部分を非表示にし、リンクをスクーロールをしなくても表示されるようにした。

再度テスト

PC画面(5分)
スマホ画面(5分)

7、まとめ

全体として380分。1人日を8時間とした場合は、0.7人日での完成でした。

今回のHTMLとCSSはjQueryのものを使い回していますが、想定としては1から作ったと想定して時間を計算しています。イメージした通りにサイトができたので、非常に満足です。次はVueで書いてみたいです。