学祭Web

1ページが窮屈に感じた

架空の脳内学校祭用のWebアプリである。

Qiitaにいる「文化祭の入場アプリ作ってみた！」みたいな高校生への羨望がこじれて形になったもの。

店舗検索機能や、待ち時間などのインタラクティブ要素が特長。のはず

たぶん..

あれ？？

一応手は動かしているが、たぶん深層心理的には生産量に満足していない

作ろう！！

必要なページ

マップ

検索

商品（要素）

想定ユーザーの利用目的

商品の詳細を見る。

店舗更新画面

店舗情報を更新する。

アプリを起動した際は、マップ画面が開く

必要なコンポーネント

フレーム

ヘッダー

検索バー

マップ検索バー

入力すると、店舗名、商品などで検索が可能。

モデル

オブジェクト情報✅

オブジェクト名

オブジェクトタイプ

X座標

Y座標

Z座標

施設情報✅

施設イメージ

施設タイプ（≠オブジェクトタイプ=施設）

多分扱う必要があるオブジェクトはすべて施設だけど、念のため拡張性のために分けておいた

混み具合

オブジェクト情報

混み具合✅

施設タイプ✅

店舗情報✅

施設情報

商品リスト

店舗商品✅

所属店舗

商品名

商品イメージ

残り数

アレルギー

その他付属情報

アレルギー✅

OK!

データベースにレコードを作ることになりそうなだいたいのオブジェクト、

idとnameとdescriptionを抱えている

でもiconも抱えるオブジェクトや、imagesを抱えるオブジェクトもいる

共通化するな！とオブジェクトが言っている

あとで考えることにした

コンポーネント

メイン機能2つを使える形にしよう

検索バー

最近の検索

SearchEntityList✅

とりあえずSearchEntityと一体で、構造を実装

スタイルはUIを詰めてないのでまだ

SearchEntity✅

SearchEntityは、汎用の検索候補コンポーネント

画像

サブ

メインタイトル（名前）

その他テキスト

TimeText

コンポーネントとして提供するかは置いておいて

日本語のテキストはTimeTextのスタイルなどとは別途考えたい

const text = useText(language: string)

責務がデカすぎる

const text = useTimeText(language?: stirng)

Render hooksで要素も返すと綺麗かな

それは違うか

<TimeText text={text} value={entry.time} />

View用の型

RecentSearchEntity

recent:

time: number

faculty: Faculty

具体的な検索エントリオブジェクトの生成は、ここでは考えない

理解度が低くてSearchEntityコンポーネントが書けない

要求される拡張性が非常に高く感じられる

実際はそこまで、高くないと思う

今はコンポーネントを切らないことにした

UIを詰めよう

検索画面（初期状態）

https://scrapbox.io/files/64ef1680be26cc001cea3371.png

このままの方針だと、画面の味気なさがあるのかな

とりあえずこれでよし

検索候補と、店舗や本部からのお知らせは、構造が似ている

けど共通化は出来ない

多分見た目の共通化はある程度できる

欲しいレイアウトが一致しているから

多分、レイアウトするだけのコンポーネントが必要になっている

右下のボタンがいらないと思う

画面が複雑になる

やっぱり、上から引っ張る形が良さそう

機能的に、何度もマップとメニューを移動できなければならない

見た目的に、地図画面を表示するボタンが複数あると混乱する

店舗ページなどで、地図で見るためのボタンが欲しい

検索画面（入力時）

「最近の検索」というテキストが変わるだけで画面を変えるつもりはない

施設画面

https://scrapbox.io/files/64ef43bd02f89e001bb00625.png

とりあえず、これで。

右下のボタンは続投

疲れた

まだまだ耐性が足りない

スタイルが定まったので、再度実装しよう

あまり実装できなかった

Figmaの機能はとても良かった

部分的に人間が書けば十分

楽しくなかった

リセットCSSの読み込み

こちらはStorybookの構造を把握していないので、ただWeb上の「こうしろ！」に従うしか無い

出てくるのがZennの3次情報とかなので基本的に意味がない

テーブル

FacultyType

FacultyType型の元データを各レコードに保持するテーブル

現在のFacultyTypeをそのまま使えば良い気がする.

でもそれだとデータベースのスキーマと、フロントエンドのコードが密結合になる

これは大事な気がする

フロントエンドの型を変えると過去のレコードが使えなくなるのは違う

データベースのスキーマは別に考える

繋ぎこみをどうするかを考える

FacultyTypeテーブル -> PlanetScale -> Prisma -> 〇〇 -> FacultyType オブジェクト -> FacultyType コンポーネント

真ん中に入るのは.. バックエンドAPIだろう

BFF的な人が入れば

技術的な

UI

React（pnpm）

マップは3D表示が必要

Z座標など

バックエンド

リアルタイムな通信

計画

各情報の型を書く

型のオブジェクトを受け取るようにコンポーネントを書く

Storybookを生成する

Chromaticにデプロイする

Visual Studio Codeのimportパス更新が少し苦手

2つ以上同時に移動すると一方しか更新してくれないから

あったら良いな機能を投げる場所

Markdownで書ける商品、施設紹介

descriptionをstringで管理しているので、フロントエンドを書けば上手くできるかもしれない

アイコンを自作

地図ボタンの画像

店舗タイプ

Warning: The tag <search> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

search

div

React 10

printWarning

error

createElement

createInstance

completeWork

completeUnitOfWork

performUnitOfWork

workLoopSync

renderRootSync

performConcurrentWorkOnRoot

workLoop scheduler.development.js:266

flushWork scheduler.development.js:239

performWorkUntilDeadline scheduler.development.js:533

(非同期: EventHandlerNonNull)

js scheduler.development.js:571

js scheduler.development.js:633

__require2 chunk-AUZ3RYOM.js:18

js index.js:6

__require2 chunk-AUZ3RYOM.js:18

React 2

js

js

__require2 chunk-AUZ3RYOM.js:18

js React

__require2 chunk-AUZ3RYOM.js:18

js React

__require2 chunk-AUZ3RYOM.js:18

<匿名> react-18.mjs:2

意味が分からない

search要素、MDNの要素リファレンスに載ってはいるけど、実はFirefoxがExperimentalで、他は未実装

おかしい。

Firefoxでは飛ばない

Chromeでは飛んで、でもフォントは..

分かった

コンポーネントの分解（リファクタリング）

こういう形にしたい

code:example.tsx

const App = () => {

const { search...s } = useSearch...s();

return (

<div>

<SearchBox />

<EntityList entities={search...s} render={Entitiy}>

</EntityList>

</div>

);

}