数学グラフ計算ツール — 関数グラフ描画シミュレーター

使い方

1. プリセット関数を選ぶか、テキストボックスに直接 sin(x)・x^2 などの式を入力します。
2. パラメータ a・b・c のスライダーを動かすと、グラフがリアルタイムで変化します。係数や位相のずれを直感的に確認できます。
3. 「+ 関数を追加」で最大3本の関数を重ね描きできます。交点や大小関係の比較に便利です。
4. 描画範囲の入力欄で x 軸・y 軸の表示幅を変えられます。「Y軸 自動調整」ボタンで最適な y 範囲を自動計算します。
5. グラフ上にマウスを乗せる（またはタップ）と、その位置の (x, y) 座標がリアルタイムで表示されます。
6. 「PNG ダウンロード」でグラフ画像を保存。レポートや課題提出に使えます。

利用できる関数・演算子

数学グラフ描画ツールとは

数学グラフ描画ツールは、高校数学・大学数学で学ぶ関数（三角関数・二次関数・指数関数・対数関数など）をブラウザ上でグラフ化するシミュレーターです。 教科書に出てくる y = a·sin(bx + c) の形で、スライダーを動かすと振幅・周期・位相がどのように変わるか視覚的に確認できます。 数式の暗記だけでなく、パラメータがグラフ形状に与える影響を体験的に学べるため、定期テスト対策・大学入試・家庭教師の指導ツールとしても活用できます。 インストール不要・ログイン不要で、スマートフォンでも動作します。

スライダー a・b・c は数学的に何を動かしているのか

このツールの中心は3本のスライダーです。ただ動かすだけでは「なんとなく形が変わる」で終わってしまうので、それぞれが数式のどの役割に対応しているかを押さえておくと、グラフが理論の確認装置に変わります。

三角関数 a*sin(b*x+c) の場合、3つの係数はそれぞれ独立した意味を持ちます。 a は振幅で、曲線が上下に振れる幅を決めます。a を負にすると上下が反転しますが、周期や位置は変わりません。 b は周期を決め、周期は 2π/|b| です。b を大きくするほど波は横に縮んで密になります。 c は位相で、a*sin(b*x+c) は a*sin(b*(x + c/b)) と書き換えられるため、グラフは左に c/b だけ平行移動します。c だけを動かしたときに波が横滑りするのはこのためです。

二次関数 a*x^2+b*x+c では意味が変わります。a は開き具合（絶対値が小さいほど平たく、負なら上に凸）、頂点の x 座標は −b/(2a)、c は y 切片そのものです。 c のスライダーを動かすと放物線が上下に平行移動するだけで形が変わらないのは、c が定数項だからです。

ケーススタディ1：基準線を固定して位相のずれを観察する

パラメータ a・b・c のスライダーは3本の関数すべてに共通で適用されます。この仕様は一見不便に見えますが、逆手に取ると強力な比較ができます。 係数を含まない式は、スライダーを動かしても一切変化しないからです。

1. 関数1の入力欄に sin(x) と入れます。これが動かない基準線（赤）になります。
2. 「+ 関数を追加」を押し、関数2の式を a*sin(b*x+c) に書き換えます（青）。
3. c のスライダーだけを 0 から 1.57 付近まで動かします。青い波だけが左へ滑り、赤い基準線との位相差が目で測れます。c ≒ 1.57（π/2）で青の山が赤の山とちょうど四分の一周期ずれ、cos(x) と重なります。
4. 続いて b を 2.0 にすると、青だけが横に縮んで、同じ x 区間に赤の2倍の波が入ることが確認できます。

同じ要領で、関数3に cos(x) を固定しておけば、「a·sin(bx+c) はどんな c のときに cos(x) と一致するか」を試行錯誤で探せます。教科書の三角関数の合成公式を、式変形ではなく現物合わせで納得したいときに有効な使い方です。

ケーススタディ2：判別式とx軸の交点を対応づける

二次方程式の解の個数が判別式 D = b² − 4ac の符号で決まることは、グラフでは「放物線が x 軸と何回交わるか」に対応します。プリセットから y = a·x² + b·x + c を選び、a = 1 に固定して b と c を動かしてみてください。

• a=1, b=2, c=−3 → D = 4 + 12 = 16 > 0。x = 1 と x = −3 の2点で x 軸と交わります。頂点は (−1, −4) です。
• a=1, b=2, c=1 → D = 4 − 4 = 0。頂点 (−1, 0) が x 軸にちょうど接し、交点は1つ（重解）になります。c を 0.9 と 1.1 の間で往復させると、接する瞬間が見つかります。
• a=1, b=2, c=2 → D = 4 − 8 = −4 < 0。放物線は x 軸の上に浮き、交点は存在しません。

スライダーは 0.1 刻みなので、D = 0 ちょうどの状態をぴったり作れるのは値が0.1の倍数になる組み合わせに限られます。それ以外の値を試したいときは、スライダーを使わずに x^2+2*x+1 のように数値を直接書き込んでください。式を直接入力した関数はスライダーの影響を受けないため、複数の判別式パターンを並べて見比べることもできます。

ケーススタディ3：指数関数と対数関数が逆関数であることを見る

exp(x) と log(x)（このツールの log は自然対数）は互いに逆関数で、グラフは直線 y = x に関して対称になります。3本の枠をすべて使って確認できます。

1. 関数1に exp(x)、関数2に log(x)、関数3に x を入力します。
2. 描画範囲を x：−5〜5、y：−5〜5 に設定します。x と y のスケールを揃えないと対称性が斜めに歪んで見えるため、この設定が重要です。
3. 緑の直線 y = x を鏡と見立てると、赤（exp）と青（log）が折り返しの関係にあることが分かります。exp が (0, 1) を通り、log が (1, 0) を通ることも、座標が入れ替わった関係として読み取れます。

このとき青い曲線は x ≦ 0 の範囲で完全に消えます。log の真数は正でなければならず、負の値では計算結果が数値にならないため、線を引かずに飛ばしているからです。定義域という概念がグラフ上でどう現れるかを見る、良い教材になります。

このツールならではの使いこなし

• 「Y軸 自動調整」は現在の x 範囲だけを見ている：表示中の x 区間を400点サンプリングし、その最小値・最大値に1割の余白を足して y 範囲を決めます。x 範囲を変えたら押し直してください。
• チェックボックスで一時的に隠せる：関数を削除せず「表示」のチェックを外すだけで非表示にできます。3本描いたうち2本を隠して1本ずつ確認する、といった使い方ができ、式は消えないのですぐ戻せます。
• PNG は白背景の正方形で出力される：キャンバスと同じ解像度（画面幅に応じて280〜640ピクセル四方）でダウンロードされます。透過にはならないので、レポートや資料に貼っても背景が抜けません。
• 式は入力した瞬間に描き直される：確定ボタンはありません。文字を消している途中で一時的に不正な式になると「式エラー」と赤字が出ますが、続けて入力すれば消えます。
• 全角で入力しても自動変換される：全角の英数字・括弧・演算子は半角に直してから解釈されます。日本語入力をオンにしたまま打ってしまってもある程度は通ります。

陥りやすい誤解・注意点

• -x^2 は式エラーになります：内部で ^ を JavaScript の ** に変換していますが、この演算子は単項マイナスを直前に置く書き方を文法上許していません。-1*x^2 または 0-x^2 と書いてください。abs(-x^2) のように括弧の内側にある場合も同じ理由でエラーになります。
• 掛け算の記号は省略できません：2x や 3sin(x) はエラーです。必ず 2*x、3*sin(x) と書きます。数学の板書の書き方とは異なる点で、最もつまずきやすい箇所です。
• プリセットの対数・平方根は絶対値で包まれています：メニューから選ぶ y = a·ln(b·x) は実際には a*log(abs(b*x))、y = a·√(x + b) + c は a*sqrt(abs(x+b))+c が入力されます。負の側でも線が描かれるのはそのためで、本来の定義域とは異なります。真の y = ln(x) や y = √x を見たい場合は、abs を外して log(x)、sqrt(x) と自分で入力してください。
• 座標表示は関数の値ではありません：グラフ上でマウスを動かすと表示される (x, y) は、あくまでポインタが指している位置の座標です。曲線に吸着する機能はないため、f(x) の値を読み取りたいときは曲線の上に正確にカーソルを合わせる必要があります。
• 漸近線の付近は近似の限界があります：曲線はキャンバス幅の2倍の点数で刻んで折れ線として描いています（x：−10〜10 なら概ね0.016刻み）。隣り合う点の y 差が表示中の y 幅の3倍を超えると線を切って不連続と判断しますが、y の範囲を大きく取るほどこの判定がゆるくなり、tan の漸近線を横切る「見せかけの縦線」が残ることがあります。tan を描くときは y 範囲を −5〜5 程度に狭めておくと正しく途切れます。
• x 範囲を広げすぎると振動が潰れます：たとえば sin(5*x) を x：−100〜100 で描くと、1周期あたりの画面幅が数ピクセルしかなくなり、波ではなく塗りつぶされた帯に見えます。細かい振動を見たいときは x 範囲を狭めてください。
• 発散する関数に自動調整を使わない：exp(x) を x：−10〜10 で表示して「Y軸 自動調整」を押すと、y の上限が2万を超える値に設定され、曲線の大部分が横一線に潰れます。指数関数は x 範囲を −3〜3 程度に絞ってから調整するのが実用的です。また自動調整の結果は整数に丸められるため、振幅0.5のような小さい関数では −1〜1 より細かく詰めることはできません。

よくある質問

対応していない数式や記法はありますか？

本ツールはx, a, b, cという変数と、+ - * / ^、sin/cos/tan、asin/acos/atan、sqrt、abs、exp、log（自然対数）/log10、PI、Eのみを許可リスト方式で受け付けます。それ以外の識別子（未対応の関数名や日本語の混入など）を含む式はエラーとして拒否されます。

同時に表示できる関数は何本までですか？

最大3本まで同時にグラフを重ね描きできます。各関数は表示/非表示を個別に切り替えられ、色分け（赤・青・緑）されるため交点や大小関係の比較がしやすくなっています。

描画されるグラフの値に誤差はありますか？

本ツールはJavaScriptの浮動小数点演算で数値を計算し、描画範囲をキャンバス幅の2倍のステップ数で近似的にサンプリングして線を描画しています。漸近線や不連続点（tanやlogなど）の付近では見た目上の誤差が生じる場合がありますが、一般的な学習用途では問題のない精度です。

描画したグラフを保存することはできますか？

はい。「PNG ダウンロード」ボタンで現在表示中のグラフをPNG画像として保存できます。レポートや課題提出、授業資料への貼り付けにご利用いただけます。

入力したデータはサーバーに送信されますか？

いいえ。数式の入力・パラメータ設定・描画処理はすべてブラウザ内のJavaScriptで完結しており、外部サーバーへの送信は一切行われません。

参照情報・免責事項

本ツールの数式評価はブラウザ標準のJavaScriptエンジンで行われ、外部サーバーとの通信はありません。関数の定義域・値域の考え方は高校・大学の数学教科書における一般的な定義に基づいています。

免責事項：本ツールはグラフの概形理解を目的とした学習補助ツールです。試験の採点基準となる厳密な数値計算やレポート提出物としての正式な検算には使用しないでください。表示結果を用いたことによる不利益について、当サイトは責任を負いかねます。