株式会社qnote

【③設計(ロジック)】Vite+React+TypeScript+GitHubPagesで爆速サイト公開

Last updated at 2023-12-17Posted at 2023-12-05

はじめに

業務ではVue.js+JavaScriptを使用しています。
が、もう少しモダンなフレームワークと言語に挑戦したい...ということでReactとTypeScriptをチョイスし、簡単なWEBアプリをつくることに

...と思い立ったのが10月末。
「そういえば12月はQiitaアドベントカレンダーがあるな...そこまでに公開できたらいいな」と思い、1ヶ月半程度で設計~公開まで行けると踏んで開発開始。

折角なので、制作の過程も含めて記事化してみました。

ということで、本記事は下記連載の第3弾となります。
他記事も併せてご覧ください。
【①アイデア選定】
【②技術選定】
【③設計(ロジック)】←イマココ
【④設計(デザイン)】
【⑤環境構築】
【⑥進捗管理】

ちなみに、公開サイトはこちら↓
https://yutamanaka.github.io/FragranceFinder/

リポジトリはこちら↓
https://github.com/YutaManaka/FragranceFinder

本記事では、設計(ロジック)の経緯についてまとめました

対象者

この記事は下記のような人を対象にしています。

駆け出しエンジニア
プログラミング初学者
設計のやり方がわからない人

結論

ロジック設計は「Notion + mermaid」が簡単！

ロジック設計の流れ

下記の流れでまとめました。

アイデアを出す
アイデアを絞る
画面遷移図をmermaidでまとめる
文言and/or画像素材をnotionにまとめる

mermaidで設計するメリット

mermaidの記述をGituHubのREADMEに記載することにより、バージョン管理できるようになります。
つまり、「ドキュメントがコードのように管理できる」ということに。
個人開発ではあまりメリットを享受できないかもしれませんが、チーム開発する際にとても大事になってきます。
個人開発でもドキュメントのバージョン管理に慣れておくと良いでしょう。

ロジック構築

「開始ページ→いくつかの質問ページで回答→回答ページ」という画面遷移を想定。
また、途中の質問の解答によって先の質問and/or選択肢が変わる、というギミックも実現したい。
ということは「各質問の解答を保存する配列(オブジェクト)が必要」ですね。

また、回答ページに各香水の詳細を解説したページへのリンクを貼りたい。

回答ページのリスト

ということで、飛ばすページのリストを作成。

爽やかでライト
- 柑橘(シトラス)系(男女)
- スパイシー系
- ティー系(男女)
- グリーン系(男)
- フルーティー系(女)
バランス
- ハーブ系
- ミント系(男)
- フローラル系(男女)
- 金木犀(オスマンサス)系(女)
- 石鹸系(女)
- マリン系(男)
甘く濃厚
- ウッディー系(男女)
- ムスク系(男女)
- バニラ系(男女)

質問アイデア

続けて、逆算的にどんな質問が必要かリストアップしました。

香りへの詳しさ
- 初心者
- 中級者
- 上級者
目的
- 好きな香り
- 似合う香り
性別
- 男
- ユニセックス
気持ち
- 集中できる
- リラックス
- やる気が出る
- 楽しい
- 開放的
- 爽やか
- 女性らしい
- 華やか
- 幸せ
- 前向き

mermaid図

上記リストを元に、質問数・内容を調整して下記のような画面遷移に落ち着きました。

Mermaidの中身

# Mermaid
flowchart TD
 classDef blue stroke:#8AB4F7,stroke-width:1px,font-size:5rem
 classDef red stroke:#ff0000,stroke-width:3px,font-size:5rem
 質問1_性別---->質問2_好きor似合う?;
 質問2_好きor似合う?--"似合う香り"-->質問3_ダミー;
 質問3_ダミー---->質問4_何で選ぶ?;
 質問4_何で選ぶ?--"ファッション"-->質問5_ファッション;
 質問4_何で選ぶ?--"気持ち"-->質問6_気持ち;
 質問5_ファッション---->各種香りの種類;
 質問6_気持ち---->各種香りの種類;
 質問2_好きor似合う?--"好きな香り"-->質問7_習熟度;
 質問7_習熟度--"初心者"-->質問8_甘さの有無;
 質問8_甘さの有無---->質問9_\n香り絞込_易;
 質問9_\n香り絞込_易---->各種香りの種類;
 質問7_習熟度--"上級者"-->質問10_\n香り絞り込み_難1;
 質問10_\n香り絞り込み_難1---->質問11_\n香り絞込_難2;
 質問11_\n香り絞込_難2---->各種香りの種類;

質問文と選択肢

最後に、実装に入る前に質問分と選択肢をまとめました。
多分、これらの情報を格納する配列(オブジェクト)が必要なんだろうな~、とぼんやり考えてました。
ついでに画像素材も探しました。

TOPページ
- 「香水診断を始める」ボタン
質問1(性別)
- 画像
- 探しているのは？
  - 女性用香水
  - 男性用香水
  - どちらでもよい
質問2
- 画像
- 探しているのは？
  - 自分の好きな香り
  - 自分に似合う香り
質問3(ダミー)
- 画像
- ペットと暮らすなら
  - 犬
  - 猫
質問4
- 画像
- 香りと合わせたいのは？
  - ファッション
  - 気分
質問５（ファッション）
- 画像
- 好きな服の系統は？
  - クール/どちらでもない/優しい
  - カジュアル/どちらでもない/フォーマル
質問６（気持ち）
- 画像
- どんな気分？
  - 知的/どちらでもない/優しい
  - 爽やか/どちらでもない/落ち着きがある
質問7(習熟度)
- 画像
- どれくらい香水に詳しい？
  - 初心者
  - 上級者
質問8(甘さの有無)
- 画像
- 甘い香りは
  - 好き
  - 嫌い
質問9(絞り込み_易)
- (8の結果で変化)
- (甘さ有)
  - 画像
  - どの香りが好き？
    - 花の香り
    - セクシーな香り
    - お菓子の香り
- (甘さ無)
  - 画像
  - どの香りが好き？
    - 柑橘の香り
    - スパイスの香り
    - 森林の香り
    - 石鹸の香り
    - 海の香り
質問10(絞り込み難1)
- 画像
- どんな香りが好き？
  - 爽やかな香り
  - 濃厚な香り
  - どちらでもない
質問11(絞り込み難2)
- (9の結果で変化する)
- 画像
- どの香りが好き？
  - (爽やかな香り)
    - 柑橘(シトラス)系(男女)
    - ティー系(男女)
    - グリーン系(男)
    - ミント系(男)
  - (どちらでもない)
    - フルーティー系(女)
    - フローラル系(男女)
    - 金木犀(オスマンサス)系(女)
    - 石鹸系(女)
    - マリン系(男)
  - (濃厚な香り)
    - ウッディー系(男女)
    - ムスク系(男女)
    - バニラ系(男女)

回答ページの文言

質問分と選択肢に併せて、回答ページの情報もまとめました。

回答ページ（香り）

柑橘(シトラス)系(男女)

画像(男) 画像(女)

あなたにぴったりの香水は「柑橘(シトラス)系メンズ香水」です。

柑橘(シトラス)系とは、レモンやグレープフルーツなどの柑橘系の果物が持つ、爽やかでフレッシュな香りのことです。

甘さが控えめで軽やかな印象であることが特徴です。

柑橘(シトラス)系メンズ香水のおすすめはこちら↓

あなたにぴったりの香水は「柑橘(シトラス)系レディース香水」です。

柑橘(シトラス)系とは、レモンやオレンジなどの柑橘系の果物が持つ、爽やかでフレッシュな香りのことです。

濃厚になりにくいため、香水が初めての人にも使いこなしやすいのが特徴です。

柑橘(シトラス)系レディース香水のおすすめはこちら↓

ティー系(男女)

画像(男) 画像(女)

あなたにぴったりの香水は「紅茶系メンズ香水」です。

紅茶系の香りを作る上でメジャーなのは「ベルガモット+ジャスミン」の組み合わせです。

上品なかおりで、大人っぽく落ち着いた印象を演出できます。

紅茶系メンズ香水のおすすめはこちら↓

あなたにぴったりの香水は「グリーンティー系レディース香水」です。

香りの世界でグリーンティー(緑茶)の香りは、「西洋人がイメージする、東洋の神秘的な香り」と言われています。

その爽やかな香りは今でも万人ウケする香りとして好評です。

グリーンティー(緑茶)系レディース香水のおすすめはこちら↓

グリーン系(男)

画像

あなたにぴったりの香水は「グリーン系メンズ香水」です。

グリーン系の香りは、植物の力強さを感じる甘さ控えめの香りです。

落ち着いた穏やかさの演出のほか、清潔感のあるクールな印象に仕上げたい時に向いた香りです。

グリーン系メンズ香水のおすすめはこちら↓

フルーティー系(女)

画像

あなたにぴったりの香水は「フルーティー系レディース香水」です。

フルーティー系(フルーツ系)は、果物の甘さと酸味、みずみずしさが楽しめる香りを指します。

ジューシーで爽やかな甘さがあり、明るさや可愛らしさ、親しみやすさを演出したい時に向いています。

フルーティー系(フルーツ系)レディース香水のおすすめはこちら↓

ミント系(男)

画像

あなたにぴったりの香水は「ミント系メンズ香水」です。

ミント系の香りは、メントールのクールで涼しげな香りが特徴です。

香りがすっきりしていて優しく、初心者におすすめの香水が多いので要チェックですよ。

ミント系メンズ香水のおすすめはこちら↓

フローラル系(男女)

画像(男) 画像(女)


あなたにぴったりの香水は「フローラル系メンズ香水」です。

フローラル系とは花の香りのことで、爽やかさと甘さのバランスが良いのが特徴です。

穏やかさや優しさをアピールしやすい香りが多いです。

フローラル系メンズ香水のおすすめはこちら↓

あなたにぴったりの香水は「フローラル系レディース香水」です。

フローラル系は、爽やかさとコクのある甘さのバランスで構成される、香りの王道です。

品の良さや優雅さを醸し出したい時や、幸せな気分に浸りたい時に特におすすめしたい香りです。

フローラル系レディース香水のおすすめはこちら↓

石鹸系(女)

画像

あなたにぴったりの香水は「石鹸系レディース香水」です。

石鹸を思わせる清潔感のある香りは、フレッシュでイキイキとしたイメージを演出してくれます。

香水が初めての人にもおすすめの香りです。

石鹸系レディース香水のおすすめはこちら↓

マリン系(男)

画像

あなたにぴったりの香水は「マリン系メンズ香水」です。

マリン系の香りは、海をイメージしたみずみずしくてフレッシュな匂いが特徴です。

おおらかな雰囲気を醸し出したい時や、こなれた印象に仕上げたい時に向いています。

マリン系メンズ香水のおすすめはこちら↓

ウッディー系(男女)

画像(男) 画像(女)

あなたにぴったりの香水は「ウッディー系メンズ香水」です。

ウッディー系の香りは、木や森を思わせる、ナチュラルなイメージの匂いが特徴です。

大人っぽさを演出したい時や、知的な印象に見せたいシーンで特におすすめです。

ウッディー系メンズ香水のおすすめはこちら↓

あなたにぴったりの香水は「ウッディー系レディース香水」です。

ウッディー系の香水は、木や森を思わせる落ち着いた匂いが特徴です。

知性やクールさ、ナチュラルなイメージをまといたい時に向いているものが多いです。

ウッディー系レディース香水のおすすめはこちら↓

ムスク系(男女)

画像(男) 画像(女)

あなたにぴったりの香水は「ムスク系メンズ香水」です。

ムスク系の香水は、コクと温かみを感じられる香りが特徴です。

現在は清潔感のある「ホワイトムスク」系の香りがにトレンドです。

ムスク系メンズ香水のおすすめはこちら↓

あなたにぴったりの香水は「ムスク系レディース香水」です。

ムスク系の香水は、コクと温かみを感じられる香りが特徴です。

大人っぽさやセクシーなイメージをまといたい時におすすめです。

ムスク系レディース香水香水のおすすめはこちら↓

バニラ系(男女)

画像(男) 画像(女)

あなたにぴったりの香水は「バニラ系メンズ香水」です。

バニラ系の香りは、暖かみを感じられる深い甘さが特徴です。

ダンディで包容力のある大人っぽさを演出するのに一役買ってくれますよ。

バニラ系メンズ香水香水のおすすめはこちら↓

あなたにぴったりの香水は「バニラ系レディース香水」です。

バニラ系の香水は甘く、温かみのある香りが特徴です。

近年では、甘さを前面に出したバニラ系香水が出てきており、注目です。

バニラ系レディース香水のおすすめはこちら↓

おわりに

個人開発のロジック設計についてまとめました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up