対象者

・バックエンドエンジニアを志す人
・web開発初学者
・ECサイトを作成しようと思っている人

はじめに

こんにちは！
この投稿はその②の続きです。

その②ではバックエンドエンジニアとはそもそも何かさらっと触れて実際にバックエンド技術が使われているECサイトを作ってみようということで終わっていました。今回の記事では具体的にどんなECサイトを作るか着手したことについてまとめています。

1.どのような種類のECサイトを作るか?

福岡のある健康食品ECサイトを参考にしてECサイトを着手します。

・カート機能
・複数のオファー
・会員ページ
・商品検索機能

などなど基本的にECサイトの機能が網羅しているようなので時間をかけずに選びました。

2.実装方針

観測範囲で作成していきます。
管理者側の登録等の裏側の処理は今回の実装は対象外です。
キャンペーンページや説明ページの作成は目的から少し外れてくるので実装の対象外とします。
レイアウトは主機能のみこだわることにします。
目的はバックエンド技術者を目指すことなのでバックエンドの技術の実装に時間を多くあてます。

3.作業開始

1.figmaを使ってサイトの全体像を把握
サイト全体でどんな機能を使われいるか把握するついでに
figmaでサイトの構成をまとめていきました。

figmaでざっくり

別にfigmaでまとめる必要はそこまでなかったかなと思っています。(今の段階では・・)

2.コーディング
実際にサイト全体をみたところそこまで複雑なページ構成ではないように思いました。
なので一旦htmlでページ内容をざっくり書いてみました。
キャンペーンページとか商品の説明文は書かないとそこまで時間がかからないことがわかりました。

こんな感じにコーディング

表示とデータの送信に関連する処理だけ意識するだけならtableとかformをちゃんと書けとけばいいかもしれませんね。(後々こだわりたくなるかもしれませんが・・・)

4.実装をすすめる中での所感

思っていたよりはやくコーディングに取り組めました。今回の場合ECサイトという比較的わかりやすいお題目であったことや、参考サイトがあったこともありましたが思っていたより早く取り組むことができました。画面レイアウト、実装したい機能が明確になれば今の技術でも簡単なページならすぐに作成できるのではないかと思いました。(その明確にするのがなかなか難しいだけど・・・)