記事の概要

エンジニア未経験からの挑戦ということで企業様へアピールするためのポートフォリオを作成してみました。
作成手順と機能、工夫したところ、課題点を書き出してみようと思います。

プロフィール

20代後半　男性
ITは全くの未経験(前職は営業)
就労移行支援にて０からプログラミングを学ぶ。
作成期間は1ヶ月くらい

目的

JavascriptとPHPを使いつつDBとの連携も行えるよう経験を積む
今の自分のレベル感を企業に見ていただく
素のJs、PHPでどこまで書けるかチャレンジ

スペック

言語
Javascript (Vanilla Js)
PHP 8.0.19

DBMS
MySQL Ver 8.0.29

開発環境
Windows 11 Pro
IIS　(Version 10.0.22621.2860)

完成画面

(圧縮上手くできませんでした。。。)

こだわったところ

カートアイコンのカウント

ECサイトと言えばカートアイコンのカウントが増えていく某有名サイトの仕様が凄く頭の中にあったのでやってみましたが、かなり難しかったです。
自分の場合はJavascriptでローカルストレージに保存してカートカウントを取得・更新しましたが、あんまり実戦的じゃないので素のJavascriptの限界を感じております。
jQueryは使えるけど、もっと新しいフレームワーク勉強しなきゃ…

商品の数量をまとめる・一つずつ削除する

カートに追加してカートページを更新するのは比較的容易にできたのですが、一個ずつしか追加されず、ニットx4と表示したいところが「ニットx1ニットx1ニットx1ニットx1」みたいになってしまいかなり苦戦しました。
また、ニットx4の表示に成功しても、削除ボタンを押すと4つ全て削除されてしまう問題も起き、コードの書き直し、設計し直しで序盤の躓くポイントでした。難関！

注文履歴の作成

一番やりたかったのはこれ。

前回予約サイトを作ってみて 「自分がいつ予約したか履歴見られるようにしないとな～」 と思って作り始めたのが今回のサイトです。
なので、データベースと絡めて、そのIDでいつどんな注文を送ったか分かるような仕様を作ってみたいと思って作り始めました。

結果的にそこまで難しくはなかったのでホッとしています。
ただここでも右端の数量の箇所で躓きました。カウント増やしていくだけなのに今回はやたらそこに沼りましたね…。
異なる言語間、DBへの接続では データの受け渡しが命 ということは前回で痛いほど分かったので今回はそこまで痛手じゃなく済みました。（苦労はした。）

振り返ってみて

前回は設計段階から曖昧な設計をしており、プログラミングを書きながら 思いついた仕様を追加していくという愚策 を行ってしまったのでかなり非効率なコーディングをしていきましたが、今回は 素直に設計通りにやりたいことをやっていく ようにしたら割と目標期間内で作れました。

あとはいつものデータベースへのデータの受け渡しでとかページをまたいだ際のデータ処理がまだまだ慣れないという感じですので、設計全体を俯瞰してどうコードを書いていくかが重要だと感じました。

他人に見られても大丈夫な見やすいコードを心がけます…。

Github

Githubにも公開したのでよろしければ…