（設計とは言うものの大したことはしていません。ハンズオンでやりたい方は流し見してください）
作りたいもの
タイトルにある通りフローチャートを作るツールです。
機能を洗い出す
- フローチャートを作成する（当たりまえ）
- 作成したフローチャートをブラウザに保存する（ページをリロードしても消さないようにするため）
- 作成したフローチャートを画像としてダウンロードする
※実際はもう少し機能がありますが今回は割愛します。
画面イメージ
※今回のメインはReact,Redux,MUIなのでスマホ版の開発はしません（=スマホで見ると表示が崩れる）
用語の整理
流れ図を作るツールなので流れ図の各用語をまとめておきます。（読むのが面倒な人はスルーでも構いませんがこれを前提として各用語を使用します。）
記号
- 1つの流れ図記号のこと。これらを線で結ぶとフローチャートが出来上がる。
- 記号にはいくつか種類がある。
- プログラムでは
sym(記号の英語symbolの頭文字)と呼ぶ
フロー
- 記号の集まり。
- 1つのフローは0以上の記号を持つ。つまりすべての記号は1つの親フローを持つ。
- フローに記号を追加するとフロー内の記号が線でつながって表示される。
- プログラムでは
flowと呼ぶ。
アイテム
- 記号やフローのこと。記号とフローはプログラムを作成するうえで似たようなものなので2つを抽象化してアイテムという名前を付けた。
- プログラムでは
itemと呼ぶ
クラス図で表すと
クラス図が分かる方は下の図を見てください。
ディレクトリ構成
- /flowchartbuilder //プロジェクトルート
- /public
- /src
- /components
- /App
- ヘッダーなどのAppページ用コンポーネント
- /util
- ボタンなどの汎用コンポーネント
- /App
- /sym //フローチャートの記号を表す
- /rect //長方形の記号
- (以下同様)
- /redux
- (reduxのファイル)
- App.tsx
- index.tsx
- /components
その他
Reduxのステート管理ツリーなどここで取り上げていないものは各チャプターで必要になり次第していきたいと思います。