フローチャートとは?
作業やプログラムの流れを、上から下へ進む接続線と図形で表した図です。処理の順番、条件による分岐、繰り返しを目で確認できるため、処理の整理や説明に役立ちます。
FLOWCHART SIMULATOR
変数・処理・条件分岐・ループを組み合わせたフローチャートを作成し、実際の値の変化を確認しながら実行できます。
PC推奨:ノードの配置・接続・編集は、マウス操作ができる画面での利用に適しています。
EDITOR
実行を開始すると、現在の処理内容が表示されます。
HOW TO USE
左のノードを追加し、ノード下部の出力ポートから次のノードへ接続します。処理式・条件式・表示式は、右側の「設定」を開いて編集できます。
なぜ必要? 図形を並べただけでは、条件分岐の進む先や変数の変化、ループが終わるかどうかまでは確認できません。実際に動かすことで、考えた順番どおりに処理されているかを確かめられます。
こんなときに使ってください。 プログラミングを始める前の処理整理、授業や説明での流れの確認、条件分岐・計算・ループの動作確認、実装前の間違い探しに利用できます。
式は安全な小さな式言語で評価されます。任意のJavaScriptコードを実行する機能はなく、ブラウザ外へフローチャートや変数を送信しません。
GUIDE
フローチャートは、処理の順番や条件による分岐を図形と接続線で表す方法です。このツールでは、作成したフローをそのまま実行できます。
作業やプログラムの流れを、上から下へ進む接続線と図形で表した図です。処理の順番、条件による分岐、繰り返しを目で確認できるため、処理の整理や説明に役立ちます。
count = count + 1score >= 70。真ならYes、偽ならNoへ進みます。"count=" + countcount < 5。真なら本体、偽ならループ終了後へ進みます。配置:開始はフローの先頭に1つ、終了はフローの最後に配置します。
接続:開始には次のノードへのOUTを1本だけ接続し、終了にはINだけを接続します。終了からOUTは出しません。
設定:「処理を編集」で表示名と処理式を入力します。処理式は1行1代入にします。
接続:前のノードからINへ入り、次のノードへOUTを1本接続します。例:count = count + 1
設定:条件式を入力します。結果が true または false になる式にします。
接続:下側のYesとNoを、それぞれ次のノードへ1本ずつ接続します。例:score >= 70
設定:表示名と出力式を入力します。実行すると右側の「出力」に結果が追加されます。
接続:前のノードからINへ入り、次のノードへOUTを1本接続します。例:"count=" + count
設定:条件式を入力し、対応するループ終了と同じ色・番号のペアにします。
接続:OUTはループ本体の先頭へ1本だけ接続します。条件がfalseのときのループ終了への移動は自動です。
設定:右側の設定で対応するループ開始を選択し、ループ本体の最後に配置します。
接続:OUTはループ後の処理へ1本接続します。ループ開始へ戻る線は直接作らず、実行時に自動で戻ります。
1つのOUTから出せる接続は1本です。別のノードへつなぎ直すと、古い線が置き換わります。
複数のOUTから、同じノードのINへ接続できます。分岐後の流れを1つに合流させるときに使います。
判断だけはYesとNoを別々に接続します。ループ開始とループ終了はペア設定で結び、ループ開始からループ終了への直接接続や、ループ終了からループ開始への直接接続は作りません。
"count=" + count例:変数 count が 1 のとき、表示式 "count=" + count の出力は count=1 になります。
実行中は編集できないため、右側には変数の実値と出力を表示します。「実行を終了」で編集モードに戻ります。
現在のノードを1つだけ実行します。
設定した速度で自動実行します。
連続実行を一時停止します。
実行モードを終了して編集へ戻ります。
連続実行の速度を選びます。
| 種類 | 記号 | 例 | 意味 |
|---|---|---|---|
| 加算 | + | score + 10 | scoreに10を足す |
| 減算 | - | count - 1 | countから1を引く |
| 乗算 | * | price * quantity | priceとquantityを掛ける |
| 除算 | / | total / 2 | totalを2で割る |
| 剰余 | % | count % 2 == 0 | 偶数か判定する |
| 種類 | 記号 | 例 | 意味 |
|---|---|---|---|
| 等しい | == | score == 70 | scoreが70と等しい |
| 異なる | != | score != 0 | scoreが0ではない |
| より大きい | > | score > 70 | scoreが70より大きい |
| 以上 | >= | score >= 70 | scoreが70以上 |
| より小さい | < | count < 5 | countが5より小さい |
| 以下 | <= | count <= 5 | countが5以下 |
| かつ | && | score >= 70 && count < 5 | 左右の条件が両方とも真 |
| または | || | score < 0 || score > 100 | 左右のどちらかが真 |
| 否定 | ! | !isFinished | 真偽値を反転する |
= は処理で値を代入する記号、== は条件で値を比較する記号です。!isFinished を使う場合は、isFinished を真偽型の変数として登録してください。複雑な条件は (score + bonus) >= 70 のように括弧でまとめます。
エラー表示 実行できない理由は、実行ボタンの下に表示されます。問題のあるノードはキャンバス上でも確認できるため、表示された内容に沿って1つずつ修正します。
true または false になるようにします。