Excelから関数型言語マスター4回目：Webに外部APIデータ表示...をやってみた

元記事様: https://qiita.com/piacerex/items/4c212615a4eb699dd109

実行環境

・Mac OS v10.15.7(スペックがゴミすぎてOSのアップデートが不能💦)

・Elixir v1.13.2 ( Erlang/OTP 24)

・Phoenix  v1.6.6

データ内にある「列名」で列表示

見出し行を追加↓

<%
result = Db.query( "select * from members" )
data = result |> Db.columns_rows
columns = result |> Db.columns
%>
<table border="1">
<%= for record <- data do %>
<tr>
 <%= for column <- columns do %>
 <td><%= record[ column ] %></td>
 <% end %>
</tr>
<% end %>
</table>

前回のがこちら↓ 間違い探し...

<%
result = Db.query( "select * from members" )
data = result |> Db.columns_rows
%>
<table border="1">
<%= for record <- data do %>
<tr>
   <td><%= record[ "name" ] %></td>
   <td><%= record[ "age" ] %></td>
   <td><%= record[ "team" ] %></td>
   <td><%= record[ "position" ] %></td>
</tr>
<% end %>
</table>

何が前回と違うか見比べてみる。

columns = result |> Db.columns

columns は、 resultの結果をDb.columnsに代入したもの？という認識であっているのかな？

※ 間違えてたらすみません。分かり次第修正します。

複数列データの「列の抽出」

 |> Enum.map( fn( record ) -> %{ "name" => record[ "name" ], "age" => record[ "age" ] } end )

record全体の中から、"name" と "age"  の要素だけ指定して表示に絞り込み

...あれ？要素の表示順がお手本と違う...どこかに変なソートでもかけたかな？とりあえずそのまま進みます。

|> Enum.filter( fn( column ) -> column == "name" || column == "age" end )

Enum.filterはExcelでいうところの「非表示」だったね。より短い書き方だとこうなる。

columns = [ "name", "age" ]

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

#mix.exsを開いて...

defmodule SampleDb.Mixfile do
 use Mix.Project
…
 defp deps do
   [
#以下の１行を書き加える
     { :smallex, "~> 0.1" }, 
     …
   ]
 end
…

第3回目で「qキーで抜け」と言われていたのでここでもqキーで抜けて、それからSmallexおよび関連ライブラリ一通りを取得

(最初、立ち上げたPhoenix PJ からの抜け忘れでmix deps.get を叩いてもエラーが返ってきて焦った😅)

mix deps.get

SmallexのJsonモジュールを使うと、外部API呼出は、URLのドメインとパスを指定するだけで実行でき、呼出結果もマップリスト化してくれます

すごい、簡単に呼び出しができる上、マップリスト化までしてくれる。これは手数が省ける〜！

Qiita APIを呼んでQiitaコラム情報をWeb表示する

んで、QuitaのURLのドメインとパスを指定して

#lib/sample_db_web/templates/page/index.html.heex を編集

<%
result = Json.get( "https://qiita.com", "/api/v2/items?query=elixir" )
data = result
columns = [ "id", "title", "created_at" ]
%>
<table border="1">
<tr>
 <%= for column <- columns do %>
 <th><%= column %></th>
 <% end %>
</tr>
<%= for record <- data do %>
<tr>
 <%= for column <- columns do %>
 <td><%= record[ column ] %></td>
 <% end %>
</tr>
<% end %>
</table>

出てくるのがこちら。

ちゃんと、新しい記事が投稿されたら表も更新されています。

ちなみに

"https://qiita.com", "/api/v2/items?query=elixir" 

の中身を覗きに行ったらどなたが書いたかわかる文字がちらほら...😁（脱線したので戻ります）

書き換えたHTML部分はここだけ

#lib/sample_db_web/templates/page/index.html.heex の一部


<%
result = Json.get( "https://qiita.com", "/api/v2/items?query=elixir" )
data = result
columns = [ "id", "title", "created_at" ]
%>

更に、「<table～」で始まるHTML部分は、DB表示のものと全く変えていません
つまり、外部APIで取得したデータも、DBと全く同じように扱える点に注目してください

また汎用性の高さを見せつけてくれる！

さあ、次回は何ができるだろう？

参考: https://academy.gmocloud.com/know/20160425/2259