Chapter 02

第1章 超・基本設計

てべすてん
てべすてん
2022.03.11に更新

(設計とは言うものの大したことはしていません。ハンズオンでやりたい方は流し見してください)

作りたいもの

タイトルにある通りフローチャートを作るツールです。

https://flowchart-builder.vercel.app

機能を洗い出す

  • フローチャートを作成する(当たりまえ)
  • 作成したフローチャートをブラウザに保存する(ページをリロードしても消さないようにするため)
  • 作成したフローチャートを画像としてダウンロードする

※実際はもう少し機能がありますが今回は割愛します。

画面イメージ

※今回のメインはReact,Redux,MUIなのでスマホ版の開発はしません(=スマホで見ると表示が崩れる)

用語の整理

流れ図を作るツールなので流れ図の各用語をまとめておきます。(読むのが面倒な人はスルーでも構いませんがこれを前提として各用語を使用します。)

記号

  • 1つの流れ図記号のこと。これらを線で結ぶとフローチャートが出来上がる。
  • 記号にはいくつか種類がある。
  • プログラムではsym(記号の英語symbolの頭文字)と呼ぶ

フロー

  • 記号の集まり。
  • 1つのフローは0以上の記号を持つ。つまりすべての記号は1つの親フローを持つ
  • フローに記号を追加するとフロー内の記号が線でつながって表示される。
  • プログラムではflowと呼ぶ。

アイテム

  • 記号やフローのこと。記号とフローはプログラムを作成するうえで似たようなものなので2つを抽象化してアイテムという名前を付けた。
  • プログラムではitemと呼ぶ

クラス図で表すと

クラス図が分かる方は下の図を見てください。

ディレクトリ構成

  • /flowchartbuilder //プロジェクトルート
    • /public
    • /src
      • /components
        • /App
          • ヘッダーなどのAppページ用コンポーネント
        • /util
          • ボタンなどの汎用コンポーネント
      • /sym //フローチャートの記号を表す
        • /rect //長方形の記号
        • (以下同様)
      • /redux
        • (reduxのファイル)
      • App.tsx
      • index.tsx

その他

Reduxのステート管理ツリーなどここで取り上げていないものは各チャプターで必要になり次第していきたいと思います。

質問・指摘などはこちらから

https://zenn.dev/tbsten/scraps/7123b1257c2097