プログラミング未経験者にElmを布教してみた（実録）

ねりあ

こんばんは、ねりあです。

Qiita の Elm Advent Calendar 2019 の記事として書きます。
あまり技術的な内容ではないので、Qiita の記事としてではなく、こっちで書くことにしました。

1. 経緯

タイトル通り、プログラミング未経験者にElmを教えるという内容なのですが、まずはそこに至った経緯をお話したいと思います。

私は最近疑問に思っていることがありました。
それは「関数型言語は本当に難しいのか？」です。

私は今年の5月までは関数型言語に触れたことがなく（そもそもプログラミングに初めて触れたが3年前とかですが）、それまでは何が正しい書き方で何が間違った書き方なのかの判断が付きませんでした。
コードレビューを受けますが、なかなか一般論に落とし込めず、新しいパターンが出てくる度に正しい実装を学ぶ必要があり、プログラミングは大変だなぁと思っていました。

そんな時、関数型言語に触れて、「副作用のない実装」や「型の優位性」を学ぶことで、関数型言語以外のプログラミング言語でも少なくともどういった基準で実装すると綺麗に書けるのかがわかるようになりました。

これを先に知っていれば、どんなプログラミング言語でも、ある程度実装の正しさの判断基準を持ったうえで、言語仕様を学ぶことができるのでは？
じゃあ先に関数型言語を学んだ方がいいのでは？
と思った次第です。

しかし、実際にそれを提案すると「関数型言語は難しい」という反論を受けます。

というわけで、本当に難しいのかを検証するために今回はプログラミング完全未経験者に1ヵ月間（お互い忙しかったので実日数2週間弱ぐらいです）でElmを教えてみました。

2. 協力者探し

というわけで、やるのはいいのですが、当然教える相手が必要です。

プログラミングとは全く関係ないネットのグループから希望者を募りました。

Aさん「プログラミングめっちゃ嫌いだし苦手」
ねりあ「はい…」
Bさん「興味はあるけどPCがない」
ねりあ「スマホコーディングはちょっと…」
Cさん「Excel のマクロをちょっとだけ弄ったことがあるだけの初心者です！」
ねりあ「お、これはいけるか」

というわけで見つかりました。（以降、頭文字を取ってKさんとします。）

その人の情報をまとめるとこんな感じ
・プログラミングは知人にエンジニアがいて、画面を見てて興味があった
・プログラミングは覚えるまでは大変そう、慣れれば簡単そうなイメージ
・Excelのマクロとは言ったけど、ほぼゼロだと思って大丈夫

慣れれば簡単はちょっと違うかな・・・？w

3. 実際に触ってもらいました

まずはプログラミングの一般知識から説明。
プログラムがコンピュータに対する命令であること、今回やるElmという言語は関数型言語と呼ばれる分類で、特徴としては厳密性が強くてバグを作りづらいことを説明しました。

OSはWIndowsらしいので、インストーラをぽちぽちしてもらうだけでインストール完了（簡単でいいね！）

コマンドプロンプトを開いて…あれ？

ねりあ「コマンドプロンプトって使ったことある？」

Kさん「ないです。」

そこからか〜w
まあ、これは仕方ないので、なんやかんや説明。

> elm --version
0.19.0

無事確認できました。

続いて、対話モードを使って計算したり、型を確認して遊びました。
ここで型の説明もしました。
Elmが初心者向けである一つがこれだと思います。
インストールは簡単で、インストール後すぐ対話モードで遊ぶことができます。
やはり、初心者には如何に簡単に「動く」を体験してもらうかが大事だと思います。

実際にプログラミングしてもらいました。簡単なところから

import Html exposing (text)

main =
 　text "Hello World"

Hallo World をブラウザに表示するだけのプログラムですが、普段使っているブラウザで自分が書いたものが表示されるという体験がやっぱり大きいのかなという印象です。
Elm初心者向けポイント＋１です。

次に関数の作り方を説明しました。簡単なパターンマッチも。
こんな感じ。

import Html exposing (text)

fortune : Int -> String
fortune i =
   case i of
       0 -> "大吉"
       1 -> "中吉"
       2 -> "小吉"
       _ -> "凶"

main = text (fortune 0)

何度か詰まりつつも画面に"大吉"を表示させることに成功。

Kさん「めちゃめちゃテンション上がったわ」

ねりあ「そんなにかw」

ここから占いアプリケーションにするためには、Elmのアーキテクチャを知る必要があるので、ここから An Introduction to Elm というチュートリアルに移りました。
チュートリアルのソースコードをコピペするだけでアーキテクチャーの説明ができてしまうの凄すぎる〜〜〜

というわけで学んだアーキテクチャーを応用して、占い結果を切り替えられるようにします！
こんな感じになりました。

import Browser
import Html exposing (Html, button, div, text, input)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput, onClick)
import String exposing (toInt)

main =
 Browser.sandbox { init = init, update = update, view = view }

type Msg
 = NoOp
 | UpdateInput String
 | UpdateNumber Int

type alias Model = 
 { fortuneNum: Int
 , numInput: String
 }

init = 
 { fortuneNum = 0
 , numInput = ""
 }

update msg model =
 case msg of
   NoOp ->
     model
   UpdateInput newInput ->
     {model | numInput = newInput}
   UpdateNumber newNumber ->
     {model | fortuneNum = newNumber}

convertInputToMsg : String -> Msg
convertInputToMsg s =
   case (toInt s) of
       Just num ->
           UpdateNumber num
       Nothing ->
           NoOp

fortune:Int -> String
fortune i =
   case i of
       0 -> "大吉"
       1 -> "中吉"
       2 -> "小吉"
       _ -> "凶"

view model =
 div []
   [ input [type_ "number", value model.numInput, onInput UpdateInput] []
   , button [onClick (convertInputToMsg model.numInput)] [text "占う"]
   , div [] [ text (fortune model.fortuneNum) ]
   ]

Kさん「Model, View, Updateって急に出てきて難しいけど、それぞれ役割があるって考えると何となくわかった気になれる」
とても良い感性をお持ちのようでした()

本当はランダムで出力できるところまでいければよかったんですが、ちょっと時間が取れずここまでになっちゃいました。

ここまで書ければ十分じゃね？wって気がしますが。

4. まとめ

本来の目的は「本当に関数型言語が難しいのか検証する」でした。
それが検証できたのかというと、まあ他の言語をやらせてみていないので何とも言えませんねw

ただ、コマンドプロンプトすら知らないような状況からでも何となく理解しながらこう言ったプログラムが書けるようになれるようになれたので、やっぱりElmは初心者向けの素晴らしい言語だと思います（もちろん、上記がすんなり行ったわけではなく、途中いろいろ問題は起きましたがw）。

初心者向けなポイントとしては以下にまとめます。
・対話モードやチュートリアルによって、インストール後すぐに始められるところ
・ブラウザで動くため、馴染みやすいところ
・エラー文を読むとそのまま書いてあるため、エラー文を読む習慣が着くところ

最後に、Kさんご協力本当にありがとうございました。
占いアプリは今後の時間も使ってぜひ完成させましょうw

それではまた今度〜〜〜

いいなと思ったら応援しよう！