Elixir
Phoenix

BASIC以来、35年間プログラミングしてないIT企業社長が、ElixirでWebアプリを作った

fukuoka.ex代表のpiacereです
今回もご覧いただいて、ありがとうございます:bow:

いつもと趣向違いですが、ウチのCEOが開発合宿中に行ったElixirチャレンジをお送りします

そうそう、CEOと私は、地味に、35年くらい前にプログラミングをスタートしたという共通点を持っています

その後、CEOはビジネスとマーケティングに進み、私はプログラミングとマーケティングに進みましたが、そんな2人が福岡で出会い、今は共に会社経営をしている訳です

それでは、CEOが開発合宿中でElixirに触れていくログをお楽しみくださいー :stuck_out_tongue_winking_eye:

CTOからの提案は、正直、気が重かった…しかし…

カラビナテクノロジー株式会社 でCEOをやっている福田です
image.png

私は普段、事業会社向けのITシステム導入・運用をお手伝いしつつ、エンジニアにとって最高の組織を作るべく邁進しています

私自信は、「BASIC」という言語で、35年前、プログラム開発を行っていましたが、今はすっかり、プログラミングそのものからは離れています

そんな私が、今回、エンジニア達と共に参加した開発合宿にて、35年ぶりにプログラミングに挑戦してみました

ウチのCTOから、「合宿でElixirの開発やってみませんか?」と提案されたときは、普段、どんな無理難題を出されても、馴染みの無いタスクをやるときも、「なるほどー」と前向きにクリアしていくところですが、正直、気が重かった(笑)

それも「Elixir」、先端の関数型言語への入門…行番号すら手入力するBASICと、あまりに違うのでは…
image.png
(ここが今回の合宿場所です)

しかし、実際にやってみると、Elixirによるプログラミングというものが、ただの「データ変換」であることや、その仕組みでWebアプリがいとも簡単に作れることを、僅かながら実感できました

さて、CTOから言われるがままに、「Excelから関数型言語マスター」を読むところからスタートします
image.png

まずは「事前準備:Elixirのインストール」から

私は、普段からWindowsを使っているので、インストーラをダウンロード、と
image.png
インストーラをダブルクリックで起動します
image.png
そのまま進めていきます
image.png

ん?Erlang?なんだこりゃ?

私「こんなのが出てきたけど、どうしたら良いです?」
image.png

CTO「あー、そのまま進めてください。基本、特記とか無ければ、そのまま進めてOKです」

Erlangが何なのかよく分からないけど、言われたまま進めます

ひとまずインストール完了、さて次は、と

私「次は、”ソースコードからビルドする”をやれば良いですか?」

CTO「いいえ、そこはやらなくてOKです。さっきインストールした奴で完了してるので」

あー、なるほど、良く見たら、インストーラか、ソースコードか、Dockerかって書いてあった:sweat:

続けて「Excelの『並べ替え』をElixirで書いてみる」

コマンドプロントを起動…えーと、Windowsメニュー右クリックで「検索」と…
image.png
あった
image.png
起動した
image.png
コマンドプロントの中で、「iex」コマンドを打ってみる
image.png
なんかElixirってのが出てきたから、これで良いのかな

私「これで合ってます?」

CTO「はい、OKです。その中で、Enum.sortのコードを実行してみてください」
image.png
ふむふむ、コレを打つのね
image.png
image.png
おぉ、数字が並べ替えされた

CTO「BASICだとFORとか書いて処理してたのが、Elixirだと、データの並びに対して、sortを掛けるだけです。ね?簡単でしょ?」

確かに簡単だ
image.png
(合宿中の様子、一番左が私)

プログラミングって、こんなにサックリしてたっけ?

その後、フィルタを試し、第2回に進み、「複数列のデータ」複数列データから「列の抽出」と試していくけど、特に詰まるところも無く、アッサリ済んでしまった

私「なんか、あんまりプログラミングしてる感じ、しないですねぇ」

CTO「そうです、そうです。ただデータ変換するだけの簡単なお仕事ですw」

なるほどね、Elixirでのプログラミングは、ただの「データ変換」なのか

おや?何やら休日なのに、急ぎ目のメールが届いている…

~ Coffee Break ~

私「スミマセン、けっこう進んだんで普通の仕事しても良いですか?」

CTO「仕事するのに許可もらうって斬新ですねw どーぞ」

~~ しばし、お仕事タイム ~~
image.png
CTO「そろそろ一段落です?」

私「はい、Phoenixのインストールから再開しますー」

Phoenixのインストールから再開

Ctrl+cを2回押して、iexを抜ける、と
image.png
それから、書いてある通りに、コマンド入力
image.png
インストールはできたっぽい

次は、Phoenixプロジェクトの作成とのこと

image.png
私「これはYですか?」

CTO「Yですね」
image.png
image.png
プロジェクトも作成できたっぽい

よし、Phoenixサーバを起動…

image.png
あれ?could not be found?…

私「これ、エラーですかねぇ?」

CTO「あー、PJ作った後に、フォルダ入ってないですね。この『cd sample』が抜けてますね」

私「あぁ、そういうことか」
image.png
私「おっ、なんかうまくいった感じですかね?」

CTO「ですね。んで、このcdってのは、フォルダ移動で、エクスプローラでフォルダ入るのと同じですね」

私「なるほどー」

コマンドでやると、こういう感じなんだなー

いよいよブラウザでWebページを見てみる

さて、Phoenixも起動したようなので、ブラウザに、http://localhost:4000を入力すると…

image.png
やったー、表示できた!

私「できましたー」

CTO&メンバー達「おーっ」
image.png




と、まぁ、これは演出ですw

リアルはこんな感じでした
image.png

実際の、できあがった画面は、こんな感じ
image.png

ElixirでWebアプリが動かせるようになりました

この後、第3回まで進み、PostgreSQLをインストールしたり(スタックビルダはインストールしなくて良いそうです)、VSCodeのインストールをしたり、色々やり、合宿最後の成果発表です
image.png
VSCodeでElixirのコードをいじった様が、こんな感じで…
image.png
Phoenixで作ったWebページに、自分の名前や年齢などの情報が表示される改造を追加してみました

その後、メンバー達の成果発表も聞きました

image.png
AngularやFlutterのテスト方法、GAE/GCE/GKEでElixirを動かし、Cloud SQLに繋ぐ方法、Vue.jsで既存プロダクトを置き換え、Jestでテストする方法など、内容はサッパリ分かりませんでしたが、メンバーはとても楽しそうに発表していたので、良い合宿でした

ElixirとPhoenixをやってみた印象は…

なんか「プログラミング」というよりは、「データの操作」をするうちに、自然とWebアプリが作れてしまう、といった感じで、最新の言語は、BASICとは全く違うものなんだなー、と思いました

そんな様子の私に、最後、CTOから、こんな話をされました

CTO「ElixirとPhoenixは、こんな感じでサクッとWebアプリ開発できるんですが、Java等、他言語だと、こう簡単にはいかないので、案件取ったり、見積作るときは、この感覚の3~5倍で作るようにしてくださいね」

私「あ、はい…」

そんなもんなんですね…うーん、まだまだ奥が深い

終わり

さて今回は、いつもと趣向を変えて、ウチのCEOが、Elixir+Phoenixで、Webアプリを作る様をご覧いただきました

楽しんでいただけましたか?

今回、CEOに実践してもらったElixir+Phoenixチュートリアルは、35年間、プログラミングしていなかった方でも入門できる内容ですので、どうぞあなたも下の画像をクリックして、チャレンジしてみてください:kissing_smiling_eyes:
image.png