記事の概要

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

プロフィール

20代後半　男性
ITは全くの未経験(前職は営業)
就労移行支援にて０からプログラミングを学ぶ。
ポートフォリオ作成は期間2ヵ月～2か月半（思ったより苦戦しました…）

目的

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)

完成画面

こだわったところ

「yyyy年mm月」と「ようこそ◯◯さん」

カレンダー自体をPHPベースで作ってしまったため、「前月」「翌月」の位置、年月日の取得と「ようこそ◯◯さん」の取得が上手く行かず苦戦しました。
最初は面談室A,B,C毎にページを分けてやろうかと思ったのですが、最近のサイトなら1ページにほとんどまとめちゃうだろうな。という考えから当初の設計から根本的に変えました。

この時点で見切り発車も良いところ…これから作るサイトはとにかく綿密に設計を練ることを肝に銘じておきます。

予約したい日付をクリックするとフォームが出現する

日付をクリックしたら別ページに飛ばして、そこから予約させる方が無難で分かりやすいと思うのですが、敢えて1ページで収めるためページ遷移させず隠してたフォームを出すようにやってみました。
ここで大人しくiframe使っとけばこの後更に苦戦することは無かったかもしれない…。

欲を言えばフォームが出現してもスクロールせずに全体を視認出来る画面サイズにしておくべきでした。反省。

あと、既に予約されている時間帯には間違えて予約してしまわないようラジオボタンがクリック出来ないようにしておきました。これもこだわりポイント。
ただ、予約したアラートが出た時、即時反映で✕マークに出来ればいいんですが、どうにも難しく、やり方を模索中です。
それ以外は個人的に良い感じに作れたかなと思っています。

モーダルに予約日時と部屋を反映させる

これが一番時間掛かったかも。
Javascriptで面談室A,B,Cを取ってきて、クリックされた日付と曜日も取得、予約時間も見やすいように取得。
これだけならよかったのですが、ここからfetchでPHPに送っていくので、とにかく型を合わせるのが大変でした。

10:00~10:50などと書いてしまったため、「~」を省いたり、スタート時間と終わり時間を文字列から時間に変換したり、日付をDateオブジェクトに変換したりと、何度かやりながらこんがらがってしまいました。Javascriptは変数名しっかり分けないと混乱しちゃいますね。

振り返ってみて

今回は兎に角にも最初の設計から大きく変更してしまったため、時間も掛かり、後から後から仕様を継ぎ足していくという凄く効率の悪い進め方だったので、どこまで見通して設計出来るかというところが足りてないなと感じました。
経験の差が大きいと思うので、とにかく自分でサイトを作っていくに限ると思います。

あと苦労したのがデータの受け渡しです。
未だに「理解出来てるか？」と言われるとまだまだなので勉強していくしかないですね。
結局様々な型のデータをDBからPHP、PHPからJs（逆も然り）と受け渡していけば分かってくると思うので、もう一度、型のおさらいと受け渡しをやってみようと思います。

これからの課題としては、自分がいつ予約したか分かるようなマイページを作ったり、向こう一週間の予約状況が分かるページを作ったりしてUIを向上させることが出来そうです。

今回は素のJSとPHPで作ったため、次からはフレームワークも活用して拡張性の高いサイトを作っていきたいと思います。

Github

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