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

[fukuoka.ex](https://fukuokaex.connpass.com/)代表のpiacereです
今回もご覧いただいて、ありがとうございます:bow:

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

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

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

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

内容が、面白かったり、役に立ったら、「いいね」よろしくお願いします :wink:

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

[カラビナテクノロジー株式会社](https://www.karabiner.tech/) でCEOをやっている福田です
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/984a9a62-4007-2de3-6515-9c454c1f39cf.png)

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

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

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

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

それも「Elixir」、先端の関数型言語への入門…行番号すら手入力するBASICと、あまりに違うのでは…
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/2a8ab44e-51d4-2d67-499d-775954c9b6f1.png)
（ここが今回の合宿場所です）

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

さて、CTOから言われるがままに、[「Excelから関数型言語マスター」](https://qiita.com/piacere_ex/items/6714e1440e3f25fb46a1)を読むところからスタートします
[![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/8e4b85ac-2b51-44b5-cd30-72e7d463c48a.png)](https://qiita.com/piacere_ex/items/6714e1440e3f25fb46a1)

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

私は、普段からWindowsを使っているので、インストーラをダウンロード、と
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/6c772098-b4c7-2027-d0d4-f43f08e33156.png)
インストーラをダブルクリックで起動します
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/4022912f-d2ae-0ce1-8079-e62c7a3607c6.png)
そのまま進めていきます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/7b84d610-db22-de80-4a85-d7592bb1a8c4.png)

# ん？Erlang？なんだこりゃ？

<font color="purple"><b>私「こんなのが出てきたけど、どうしたら良いです？」</b></font>
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/bb5d48d9-59dc-8fc7-2e57-13e975083ae0.png)

<font color="blue"><b>CTO「あー、そのまま進めてください。基本、特記とか無ければ、そのまま進めてOKです」</b></font>

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

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

<font color="purple"><b>私「次は、[”ソースコードからビルドする”](https://qiita.com/piacere_ex/items/6714e1440e3f25fb46a1#2-%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89%E3%81%8B%E3%82%89%E3%83%93%E3%83%AB%E3%83%89%E3%81%99%E3%82%8B)をやれば良いですか？」</b></font>

<font color="blue"><b>CTO「いいえ、そこはやらなくてOKです。さっきインストールした奴で完了してるので」</b></font>

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

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

コマンドプロントを起動…えーと、Windowsメニュー右クリックで「検索」と…
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/6469d429-395c-cc00-ddfe-c1e90a8d2054.png)
あった
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/5bfe6c61-8d70-5bf6-069d-9c15d21f540f.png)
起動した
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/fe16509d-2248-e07b-7797-ce502c957c29.png)
コマンドプロントの中で、「iex」コマンドを打ってみる
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/5e54bb0c-67d1-1dca-464a-b0500e062840.png)
なんかElixirってのが出てきたから、これで良いのかな

<font color="purple"><b>私「これで合ってます？」</b></font>

<font color="blue"><b>CTO「はい、OKです。その中で、Enum.sortのコードを実行してみてください」</b></font>
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/5122f9a4-39bc-cf19-0610-e81472dd7193.png)
ふむふむ、コレを打つのね
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/b0cee4ad-7046-6158-ccc4-f96b1df707f5.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/8ce2751e-6949-b6a4-4b98-6d8a3e375b44.png)
おぉ、数字が並べ替えされた

<font color="blue"><b>CTO「BASICだとFORとか書いて処理してたのが、Elixirだと、データの並びに対して、sortを掛けるだけです。ね？簡単でしょ？」</b></font>

確かに簡単だ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/826aa839-ac15-fc35-de30-afc3f4877970.png)
（合宿中の様子、一番左が私）

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

その後、フィルタを試し、[第2回](https://qiita.com/piacere_ex/items/b7787580fce5f148242f)に進み、[「複数列のデータ」](https://qiita.com/piacere_ex/items/b7787580fce5f148242f#%E8%A4%87%E6%95%B0%E5%88%97%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF)、[複数列データから「列の抽出」](https://qiita.com/piacere_ex/items/b7787580fce5f148242f#%E8%A4%87%E6%95%B0%E5%88%97%E3%83%87%E3%83%BC%E3%82%BF%E3%81%8B%E3%82%89%E5%88%97%E3%81%AE%E6%8A%BD%E5%87%BA)と試していくけど、特に詰まるところも無く、アッサリ済んでしまった

<font color="purple"><b>私「なんか、あんまりプログラミングしてる感じ、しないですねぇ」</b></font>

<font color="blue"><b>CTO「そうです、そうです。ただデータ変換するだけの簡単なお仕事ですw」</b></font>

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

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

# ～ Coffee Break ～

<font color="purple"><b>私「スミマセン、けっこう進んだんで普通の仕事しても良いですか？」</b></font>

<font color="blue"><b>CTO「仕事するのに許可もらうって斬新ですねw どーぞ」</b></font>

～～ しばし、お仕事タイム ～～
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/476bcca8-5e40-bd26-f0a3-a729b0ed4325.png)
<font color="blue"><b>CTO「そろそろ一段落です？」</b></font>

<font color="purple"><b>私「はい、Phoenixのインストールから再開しますー」</b></font>

※なお、[「Phoenix」](https://qiita.com/piacerex/items/b7787580fce5f148242f#phoenix%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)は、ElixirのWebフレームワークです

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

Ctrl+cを2回押して、iexを抜ける、と
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/be1cf5d7-8042-6c00-aa4e-8f6e3418bd4a.png)
それから、書いてある通りに、コマンド入力
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/211dae0e-f271-57a9-9bec-0bb99fcd6535.png)
インストールはできたっぽい

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/54a316bf-2baf-50f0-772c-588ec8d524c9.png)
<font color="purple"><b>私「これはYですか？」</b></font>

<font color="blue"><b>CTO「Yですね」</b></font>
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/f39adeac-22d1-05ed-15bc-4242ffb7400e.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/609269eb-9a56-e018-f08c-1737975dc9e9.png)
プロジェクトも作成できたっぽい

# よし、Phoenixサーバを起動…

![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/f5f5431d-f4f5-e121-19e9-436c1dd9e631.png)
あれ？could not be found？…

<font color="purple"><b>私「これ、エラーですかねぇ？」</b></font>

<font color="blue"><b>CTO「あー、PJ作った後に、フォルダ入ってないですね。この『cd sample』が抜けてますね」</b></font>

<font color="purple"><b>私「あぁ、そういうことか」</b></font>
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/f403f266-8168-bcfc-9b4c-dd08c3164a16.png)
<font color="purple"><b>私「おっ、なんかうまくいった感じですかね？」</b></font>

<font color="blue"><b>CTO「ですね。んで、このcdってのは、フォルダ移動で、エクスプローラでフォルダ入るのと同じですね」</b></font>

<font color="purple"><b>私「なるほどー」</b></font>

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

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

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/6b0b8cad-f1a2-5a36-2916-3726236e2afd.png)
やったー、表示できた！

<font color="purple"><b>私「できましたー」</b></font>

<font color="blue"><b>CTO＆メンバー達「おーっ」</b></font>
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/c1e7c1c5-4d57-6eaa-6014-62a083bce83c.png)

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

リアルはこんな感じでした
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/5b77b9db-a7ad-7156-08f6-838870928dba.png)

実際の、できあがった画面は、こんな感じ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/054098f8-d9cf-1e2f-8e73-048a9e17af0f.png)

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

この後、[第3回](https://qiita.com/piacere_ex/items/a7558adc6856e3577dc6)まで進み、PostgreSQLをインストールしたり（スタックビルダはインストールしなくて良いそうです）、VSCodeのインストールをしたり、色々やり、合宿最後の成果発表です
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/91cb656d-3633-1625-e196-dee99420f984.png)
VSCodeでElixirのコードをいじった様が、こんな感じで…
![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/8b891251-7a56-05ce-f7ec-b880592a7b59.png)
Phoenixで作ったWebページに、自分の名前や年齢などの情報が表示される改造を追加してみました

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/f4568906-2a81-235a-021b-296c51710ffb.png)
AngularやFlutterのテスト方法、GAE／GCE／GKEでElixirを動かし、Cloud SQLに繋ぐ方法、Vue.jsで既存プロダクトを置き換え、Jestでテストする方法など、内容はサッパリ分かりませんでしたが、メンバーはとても楽しそうに発表していたので、良い合宿でした

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

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

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

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

<font color="purple"><b>私「あ、はい…」</b></font>

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

# 終わり

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

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

[今回、CEOに実践してもらったElixir＋Phoenixチュートリアル](https://qiita.com/piacere_ex/items/6714e1440e3f25fb46a1)は、35年間、プログラミングしていなかった方でも入門できる内容ですので、どうぞあなたも下の画像をクリックして、チャレンジしてみてください:kissing_smiling_eyes:
[![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/8e4b85ac-2b51-44b5-cd30-72e7d463c48a.png)](https://qiita.com/piacere_ex/items/6714e1440e3f25fb46a1)

# p.s.「いいね」よろしくお願いします

ページ左上の ![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/4d515047-cc48-382e-c2b1-3ad0cc50dbbf.png) や ![image.png](https://qiita-image-store.s3.amazonaws.com/0/155423/a4e3da58-70a3-4197-95a2-6a6906650d01.png) のクリックを、どうぞよろしくお願いします:bow:
ここの数字が増えると、書き手としては「ウケている」という感覚が得られ、連載を更に進化させていくモチベーションになりますので、もっとElixirネタを見たいというあなた、私達と一緒に盛り上げてください！:tada: