Elixirで学び直す高校数学①：第3章「方程式で図形を描く」前半 ～PythonからElixirの世界へようこそ～

この記事は、[Elixir Advent Calendar 2023 シリーズ11](https://qiita.com/advent-calendar/2023/elixir) の1日目です

---

[piacere](https://twitter.com/piacere_ex) です、ご覧いただいてありがとございます :bow:

[「Pythonで学び直す高校数学」](https://www.amazon.co.jp/exec/obidos/ASIN/4822295915/onelinebiz-22)（以降、本書）を買い、Elixirに書き直そう…と思って早4年、なかなか暇が無くて書けないでいましたが、やっと書く機会が訪れました :smile:
[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/cd32094b-767b-8bfa-eafb-fefad5e1a06c.png)](https://www.amazon.co.jp/exec/obidos/ASIN/4822295915/onelinebiz-22)

なお、本書の内容は割愛するため、[お手元に書籍をご用意](https://www.amazon.co.jp/exec/obidos/ASIN/4822295915/onelinebiz-22)してください

進行としては、第2章まではPython基礎のためスッ飛ばし、第3章「方程式で図形を描く」から始めていきます

しょっぱなからグラフを扱うため、[Livebook](https://livebook.dev/)を使って実現していきます

https://github.com/livebook-dev/livebook/

Livebookの構築方法は下記の通りです

https://qiita.com/piacerex/items/0871b54b41128d426da5#livebook%E3%82%92%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%ABpc%E3%81%A7%E8%B5%B7%E5%8B%95

Elixirのインストールからであれば、下記をご覧ください

https://elixir-lang.info/topics/entry_column

あと、このコラムが、面白かったり、役に立ったら、![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/907a8695-4d83-1b5c-8052-d0ce52de5f66.png) をお願いします :bow:

<h3>:ocean::ocean: Elixir Advent Calendar 言語カテゴリ1位 & 全カテゴリ2位！ :ocean::ocean:</h3>

例年を遥かに超える盛り上がりを見せ、堂々のトップ獲得ッ！ :qiita: :tada: :confetti_ball:

https://qiita.com/advent-calendar/2022/elixir
https://qiita.com/advent-calendar/2022/ranking/feedbacks
https://qiita.com/advent-calendar/2022/ranking/feedbacks/categories/programming_languages
[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/356a15c6-0dbb-097e-38f3-a1b4fed47555.png)](https://qiita.com/advent-calendar/2022/ranking/feedbacks/categories/programming_languages)

# 1️⃣ matplotlib相当の「VegaLite」でグラフを描く

Elixirでグラフを書く方法は色々ありますが、Livebook上で[「VegaLite」](https://github.com/livebook-dev/vega_lite)を使うのが、今はもっとも手っ取り早いです

早速、本書P88をElixir化していきます

VegaLiteでグラフを描く準備として、SmartCellで「Chart」を選んでください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/e6a7df15-199a-a04a-6de7-547038fde377.png)

下記が表示されたら、「Elixir」をクリックすることでコードブロックを上側に追加してください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/5db31990-84d2-919b-0c5c-55d4ad7ccdc7.png)

追加されたコードブロックに、本書の「# データ」部分と等価な下記コードを入れます

```elixir
my_data = %{
  x: [1, 2, 3, 4, 5, 6, 7], 
  y: [64.3, 63.8, 63.6, 64.0, 63.5, 63.2, 63.1]}
```

実行した結果は、この通りです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/1cd2feff-48b6-2211-9df0-5123352f9ca2.png)

その後、SmartCellで生成された下記ノーコードブロックの「CHARTING」に上記で定義した変数、「WIDTH」「HEIGHT」に適当な幅／高さを入れ、「Chart」を "line" に設定し、実行すると、グラフが描かれます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/cf548516-d798-4077-5940-1160ac82e7c7.png)

ただし、グラフのY軸のスケールが微妙なので、「Convert to Code cell」で、一度Elixirコード化し、カスタマイズしていきます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/9211c7d1-f4d7-4bdf-1764-4acdde0bccda.png)

「Convert」ボタンをクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/9d6842a4-ec42-7337-ab1e-130fc50b2dc7.png)

すると、SmartCellで生成されたノーコードブロックが、Elixirコードに変換されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/2c40ac06-1cd3-3290-25b7-d0f7ce7a1448.png)

Y軸をオートスケールにするには、下記のように ``scale: %{zero: false}`` を追加します

```elixir
VegaLite.new(width: 800, height: 300, title: "my_data")
|> VegaLite.data_from_values(my_data, only: ["x", "y"])
|> VegaLite.mark(:line)
|> VegaLite.encode_field(:x, "x", type: :quantitative)
|> VegaLite.encode_field(:y, "y", type: :quantitative, scale: %{zero: false})
```

実行すると、本書と全く同じグラフが出せます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/7e05991d-958c-0445-4c2c-103b1d883783.png)

なお、「Convert to Code cell」だとSmartCellに戻せないので、「Toggle source」でElixirコード表示し、別のElixirコードブロックにコピペしてカスタマイズするのもオススメです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/bd3d6fad-6e4a-778d-e332-ca03e8657242.png)

# 2️⃣ 方程式からグラフへ

## 2.1 方程式

（Pythonコードが無いため割愛）

## 2.2 関数

本書P94の ``y = 3x - 24`` のPythonコードをElixir化すると以下の通りです

Pythonコードと異なり、添字でアクセスする必要は無く、値をそのまま使えます

```elixir
x = 1..11
y = for xi <- x do
      3 * xi - 24
    end
my_data = %{x: x, y: y}
```

上記コードを実行し、ノーコードブロックも実行すると、下記のようになります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/be42b4f3-4f63-94a1-b0a0-7366f6373b9b.png)

# 最後に

「Pythonで学び直す高校数学」では、matplotlibを使ったPythonコードを全量、記述することでグラフ描画していましたが、Elixir／Livebookはデータだけを準備すればノーコードだけでグラフ描画できました

ノーコードからElixirコード化することでカスタマイズもできました

数式部分のコードを差し替えるだけでグラフ化できることも確認できました

[次回は、「2.3 関数とグラフ」から「4.4 三角比と角度」までをElixir化していきます](https://qiita.com/piacerex/items/58d80aaf5a8804e90aa7)

---

明日は、私で[「Elixirで学び直す高校数学②：第3章「方程式で図形を描く」中盤 ～ノーコード戦法でグラフ描けるElixir～」](https://qiita.com/piacerex/items/58d80aaf5a8804e90aa7) です

# p.s.このコラムが、面白かったり、役に立ったら…

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/907a8695-4d83-1b5c-8052-d0ce52de5f66.png) にて、どうぞ応援よろしくお願いします :bow: