Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@kmizuno0211

Elixir ~外部APIをWeb表示~

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

ここまでのあらまし

北九州に生活の場を移し、しばらく生活の安定や音楽、デザイン、映像まわりを頑張っていたのですが、事情があって一ヶ月ほど中止していた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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What are the problem?