前回ExcelからElixirをマスターするシリーズの1回目と2回目をやったので、今回はその3~5回目です。

※注意
・この記事は @piacere_ex さんの「ExcelからElixirをマスターする」シリーズをやってみた中で躓いたところや、試してみたことなどを書いてみたものです。
・そもそもコマンド叩いたりっていうのも不慣れな自分用のメモです。

Excelから関数型言語マスター3回目：WebにDBデータ表示

DBのインストール & DBを使うPhoenixのPJ作成、DB作成、起動

DBは以下の2つの方法があるそうなのですが、私は1番を選択しました。

Postgres

MySQL

もちろん3回目の記事に紹介されていたQiita記事を参考にしました。
MacにMySQLをインストールする

ただ、ここでめっちゃハマってしまいました。
該当の記事を読みながら、記事に書いてある通りのエラーが起こり記事の通り解決し、そこからいざ以下を実行しました。

$ mix phx.new sample_db --no-brunch
$ mix ecto.create
** (Mix) The database for SampleDb.Repo couldn't be created: ERROR 42501 (insufficient_privilege): permission denied to create database

config/dev.exs内のusername & passwordでアカウント作ったんですが全然うまくいかなくて。
エラー見たら実行属性がないのはわかったんですが、そこからどうやってつけたら良いかをけっこう探しました。
そしてこちらの記事を参考に、アカウント作成時に-dをつけたらいうのがわかったので、一旦全部やり直しました。
Elixir の RoR 風フレームワーク Phoenix のはじめ方 - A Memorandum
PostgreSQLへの接続 - PostgreSQLへの接続と切断 - PostgreSQLの使い方

※やり直し > Postgresのアンインストールからしまいた（いろんなサイト見てわけわかんないことしてたので。。。）
[MacOS] PostgreSQL の全バージョンをアンインストールする方法 ~ Homebrew 編 | CodeNote

そして改めて、Postgresインストール＆アカウント作成のときに実行した手順が以下です。

$ brew install postgresql
$ initdb /usr/local/var/postgres -E utf8 --no-locale

$ postgres --version

$ brew tap homebrew/services
$ brew services start postgresql

$ psql -l

$ createuser -P -d postgres
Enter password for new role: 
Enter it again:

その後も問題なく実行でき、ブラウザでlocalhost:4000にアクセスすると、無事Phoenixで作られたページを見ることができました。
※注意：$ mix phx.new sample_db --no-brunchを実行すると、ディレクトリができるのでディレクトリ作りたい場所に移動してから実行する

$ mix phx.new sample_db --no-brunch
$ cd sample_db
$ mix ecto.create
$ iex -S mix phx.server

複数列データと同じ構造のテーブル作成、データ投入

基本的に元記事の通り進めばすんなりでした！

ただ、psql実行時にユーザ指定はしました。

psql -U postgres

Password for user postgres:
psql (10.1)
Type "help" for help.

postgres=#

DBアクセスモジュールを作る & DBデータをWeb表示

こちらもすんなりでした。mkdirでutilを作りました。

※ sample_dbにいる状態で。
$ cd lib
$ mkdir util
$ cd util

db.exファイルはエディタでこしらえて保存しました。

その後もスムーズに進行しました。
@piacere_ex さんが書かれている通り、ソースを2回目のものと見比べてるとtableの部分は全く同じ。
これはわかりやすくて良いなぁと思いました。

Excelから関数型言語マスター4回目：Webに外部APIデータ表示

データ内にある「列名」で列表示 & 複数列データの「列の抽出」

超すっきり進行しました。
試している途中、ファイルを変更 → 保存したとき、自動でコンパイルがされてブラウザもReloadなしで表示が切り替わるのが便利だなぁと思いました。
フレームワークってそういうものなんかな？めっちゃ便利ですね。

外部API呼出のためのライブラリをインストール

書かれてあるとおりに、sample_db/mix.exs に追記しました。

sample_db/mix.exs（変更前）

...
  defp deps do
    [
      {:phoenix, "~> 1.3.4"},
      {:phoenix_pubsub, "~> 1.0"},
      {:phoenix_ecto, "~> 3.2"},
      {:postgrex, ">= 0.0.0"},
      {:phoenix_html, "~> 2.10"},
      {:phoenix_live_reload, "~> 1.0", only: :dev},
      {:gettext, "~> 0.11"},
      {:cowboy, "~> 1.0"}
    ]
  end
...

sample_db/mix.exs（変更後）

...
  defp deps do
    [
      {:smallex, "~> 0.1.2"}, 
      {:phoenix, "~> 1.3.0"},
      {:phoenix_pubsub, "~> 1.0"},
      {:phoenix, "~> 1.3.4"},
      {:phoenix_pubsub, "~> 1.0"},
      {:phoenix_ecto, "~> 3.2"},
      {:postgrex, ">= 0.0.0"},
      {:phoenix_html, "~> 2.10"},
      {:phoenix_live_reload, "~> 1.0", only: :dev},
      {:gettext, "~> 0.11"},
      {:cowboy, "~> 1.0"}
    ]
  end
...

その後、sample_dbにいる状態で、mix deps.getを実行しました。
データ内にある「列名」で列表示 & 複数列データの「列の抽出」で $ iex -S mix phx.serverを実行したままでは、さすがにブラウザにエラーが出てました。
一度 Ctrl + c を2回入力してserverを終了 → もう一度$ iex -S mix phx.serverを実行すると、ブラウザ上にQiitaのid + title + created_atのtableが表示されました！

今回は特に躓くことなく、スッキリできてよかったです。
Jsonからのデータの取得もシンプルでわかりやすかったです。
Jsonでも、DBでもデータ表示部分に手を入れなくていいのは便利ですね。

Excelから関数型言語マスター5回目：Webにグラフ表示

グラフ化する数値の追加 & 「Google Charts」によるグラフ表示

全然躓かず無事終えることができました！Google Chart便利だなぁという感想です。
var chart = new google.visualization.BarChart( document.getElementById( 'likes' ) );
この部分をいろいろ変えて遊んでました。データの受け渡す形式が変わらないから便利ですね。
※BarChartの部分を変更するだけでした。

■ PieChart
var chart = new google.visualization.PieChart( document.getElementById( 'likes' ) );

■ ComboChart
var chart = new google.visualization.ComboChart( document.getElementById( 'likes' ) );

掲載していただいているコードを参考に色々応用できそうですね。とてもありがたいです。

3回目~5回目の感想

Postgresの設定でドハマリしたのがつらかったですね。
Permissonがうまいこといってないのはわかったんですが、そこからどうやったらいいのかかなり迷走しました。
でもそれが終わってしまえばあっという間でしたね。
Elixir面白いなぁ。データを受け渡していくのが、体感も見た目もわかりやすくて好きですね。

どうにか全5回終わることができました（躓いたところはElixir意外のところだった記憶です）。
このシリーズをやりながらElixirでやりたいことができたので、それをやっていこうと思います。

[Elixir]Excelから関数型言語マスターの3~5回目をやってみた。