一次関数とグラフ

Q: 一次関数とグラフとは何ですか？

一次関数とは、x に比例する項と定数項からなる関数で、次の形で表される。a を傾き（変化の割合）、b を切片（x=0 のときの y の値）と呼ぶ。

Q: 一次関数とグラフは社会やプログラミングでどのように使われていますか？

ゲームの線形補間（Lerp）とアニメーション: 一次関数はゲームやUIアニメーションで「値をなめらかに変化させる」線形補間（Lerp）の土台になる。時間 t（0〜1）を x、位置や色の値を y とみなすと、開始値と終了値の間を一次関数で結ぶことで一定速度の動きを作れる。

傾きと切片を動かすと、直線はどう変わる？

この単元の発見をシェア

3行要約（Key Takeaways / AIOサマリー）

1: 一次関数とグラフの本質的な定義と直感的ビジュアルをシミュレーターで体験できる。
2: 公式や証明の背景にある数学的意味と、厳密な導出ステップを解説。
3: 実社会における工学応用（ゲームの線形補間（Lerp）とアニメーション）のTypeScript実装コードを収録。

なぜこれを学ぶのか？ — 現実社会とテクノロジーでの価値

Purpose & Motivation

なぜ生まれたのか？

「走った時間と進んだ距離」「使った電気量と料金」など、一方を増やせば一定のペースで他方も増える比例関係をグラフで捉えるために生まれた。

身につく武器・思考力

「初期値（切片）」と「1単位あたりの変化量（傾き）」の2つで将来の数値を予測する、最も基本的で強力なモデリング力が手に入る。

実社会・ITでの活躍現場

•ゲームプログラミングの線形補間（Lerp: スムーズなカメラ・キャラ移動）
•携帯電話料金プランやタクシー料金（初乗り基本料＋走行距離従量課金）
•ビジネスにおける損益分岐点（固定費＋変動費 vs 売上）分析
•IoTセンサーの温度・照度データの電圧値からの補正変換

Layer 1 — 直感・シミュレーター

「傾き a」と「切片 b」のスライダーを動かして、直線がどう変化するかを観察しよう。a を大きくすると線はどう変わる？ a の符号を変えるとどうなる？ b を動かすと線全体がどう動く？

傾き a = 1.0切片 b = 1.0

y = 1.0x + 1.0

↑ 傾き a を動かすと線の「急さ」と向きが、切片 b を動かすと線が上下にスライドする様子を確認しよう。 a が 0 のとき直線は水平になり、a の符号が変わると右上がり・右下がりが入れ替わる。

Layer 2 — 定義・受験・証明

定義

一次関数とは、 $x$ に比例する項と定数項からなる関数で、次の形で表される。 $a$ を傾き（変化の割合）、 $b$ を切片（ $x=0$ のときの $y$ の値）と呼ぶ。

公式・数理モデル

y = ax + b

証明・導出

傾き $a$ は「 $x$ が 1 増えたときに $y$ がいくつ増えるか」を表す。2点 $(x_1, y_1)$ 、 $(x_2, y_2)$ が直線上にあるとき、

a = \frac{y_2 - y_1}{x_2 - x_1}

と計算できる。切片 $b$ はグラフが $y$ 軸と交わる点の $y$ 座標であり、 $x=0$ を代入すると $y=b$ になることからそのまま読み取れる。

押さえておきたいポイント

$a > 0$ のとき右上がり、 $a < 0$ のとき右下がりの直線になる
$a$ の絶対値が大きいほど、傾きが急になる
$b$ を変えても傾きは変わらず、直線が上下に平行移動するだけ

参照基準・学習指導要領との対応

本トピックの内容・数理モデルは、文部科学省学習指導要領（算数・数学・情報）および国際標準カリキュラムに準拠し、エンジニアリング現場の実装事例と照らし合わせてMath World Lab編集部により検証・作成されています。

Layer 3 — 工学応用・現場実装

ゲームの線形補間（Lerp）とアニメーション

一次関数はゲームやUIアニメーションで「値をなめらかに変化させる」線形補間（Lerp）の土台になる。時間 $t$ （0〜1）を $x$ 、位置や色の値を $y$ とみなすと、開始値と終了値の間を一次関数で結ぶことで一定速度の動きを作れる。

1// 一次関数 y = a * x + b の形そのもの
2function lerp(start: number, end: number, t: number): number {
3  // a = (end - start), b = start とみなせる
4  return start + (end - start) * t;
5}
6
7// キャラクターをx=0からx=100へ、tを0→1に動かして移動させる
8for (let t = 0; t <= 1; t += 0.25) {
9  console.log(lerp(0, 100, t)); // 0, 25, 50, 75, 100
10}