LoginSignup
3
1

More than 5 years have passed since last update.

Elixir ~外部APIをWeb表示~

Last updated at Posted at 2019-03-19

おひさしぶりです。水野です。

ここまでのあらまし

北九州に生活の場を移し、しばらく生活の安定や音楽、デザイン、映像まわりを頑張っていたのですが、事情があって一ヶ月ほど中止していたElixir学習を再開しました。

自分の記事を振り返ると"あれっ、ここなんで理解できてたのかわからない"といったことが大いにあることも気づきでした。

DBから取得したデータから "列の抽出"

piacereさんのドキュメントExcelから関数型言語マスター4回目:Webに外部APIデータ表示 の前半部分、DBから取得したデータからの列の抽出を行っていきます。

lib/sample_db_web/templates/page/index.html.eex

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

ここまでのコードで表示させたDBの内容に対し、


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

Enum.filterで名前と年齢のカラムのみフィルターします。スクリーンショット 2019-03-19 10.19.50.png
DBに重複データが残っているため、同じ名前が何度も出てきてしまいます。DB側でこれを綺麗にできないかが課題です。

外部APIを呼び出し、Web表示

Smallex導入およびmix deps.getは割愛します。

lib/sample_db_web/templates/page/index.html.eex

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

以降のHTML部分はDB表示と変わっていない。
つまり、先頭のDBからのデータ取得の部分を外部APIからのデータ呼び出しに書き換えるだけで、同じようにWeb表示させ扱えるということになります。

(この肝要なポイントに気づかず全部写経していたのは効率が悪かったかもしれない。このシリーズは通算で5回くらいずつ復習しているのですが...苦笑)

で、このような表示になりました。

スクリーンショット 2019-03-19 10.18.22.png

前回猛烈なペースでQiitaドキュメントを書いていたときは、この一覧に自分のそれも混じっていて、そのときはなかなかタイムリーなスクリーンショットが撮れました。(笑

#わかるようになったこと

DB表示から列の抽出には、上記Enum.filterの式が肝要。

DB表示の際に書いたコードの上部3行ほどを書き換えるだけで、DB表示と同様に外部API呼び出し、Web表示ができる。

まだまだコード自体自分で体系的理解を以って書き上げるのは難しいのですが、以上2点を肝要なポイントとして押さえることができました。

うまず、たゆまず、頑張ります。
Kento Mizuno

3
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1