こんにちは。キャスレーコンサルティングSI(システム・インテグレーション)部の森外です。
今回はElixirとPhoenix Frameworkを使用したWebアプリケーションの作成について紹介します。

Elixirについて
Elixirとは、拡張性しやすくメンテナンスしやすいアプリケーションを構築できるよう設計されている関数型言語です。
Erlang VM上で動作します。(JavaとScalaの関係に似ています)
http://elixir-lang.org/

Phoenix Frameworkについて
サーバサイドMVCパターンを実装するためのElixirで作成されたフレームワークです。
http://www.phoenixframework.org/

作成するWebアプリケーションについて
ブラウザからデータの登録・参照・更新・削除をできることを目的とします。
これから紹介する手順はすべてターミナル上で行っています。

事前準備

以下の環境を準備します。

  • macOS (10.12.1)
  • Elixir (1.3.4)
  • Phoenix Framework (1.2.0)
  • PostgreSQL (9.6.1)
  • npm (3.10.9)

※ PostgreSQLとnpmのインストールについては省略します。

Elixir のインストール

Homebrew※を使用してインストールを行います。
※ macOS用のパッケージマネージャーです。http://brew.sh/

$ brew install elixir

バージョンの確認を行ってみます。

$ elixir -v
Erlang/OTP 19 [erts-8.1] 1 [64-bit] [smp:4:4] [async-threads:10] [hipe] [kernel-poll:false] [dtrace]

Elixir 1.3.4

macOS以外のインストール方法はインストールガイドを参照してください。
http://elixir-lang.org/install.html

Phoenix Frameworkのインストール

はじめに、パッケージマネージャのHexをmixコマンドでインストールします。
※ mixはElixirのプロジェクトを管理するコマンドラインユーティリティです。
Elixirのインストールと同時にインストールされています。

$ mix local.hex

つづいて、Phoenix Frameworkをインストールします。

$ mix archive.install https://github.com/phoenixframework/archives/raw/master/phoenix_new.ez

プロジェクトの作成

任意のディレクトリでmixコマンドを実行し、プロジェクトを作成します。
引数の player_phoenix がプロジェクト名になります。

$ mix phoenix.new player_phoenix

プロジェクト作成時にPostgreSQLが起動していないとエラーが発生します。
また、Phoenixはデフォルトでpostgresユーザを利用するように設定されています。

データベースの作成

アプリケーションが利用するデータベースを作成します。
player_phoenix ディレクトリに移動し、mixコマンドを実行します。

$ cd player_phoenix
$ mix ecto.create

psqlコマンドでデータベースが作成されていることを確認します。

$ psql -l
                                   List of databases
       Name         |  Owner   | Encoding |   Collate   |    Ctype    | Access privileges
--------------------+----------+----------+-------------+-------------+-------------------
 player_phoenix_dev | postgres | UTF8     | ja_JP.UTF-8 | ja_JP.UTF-8 |

Phoenixの起動

Phoenixが起動することを確認してみます。
mixコマンドでPhoenixを起動します。

$ mix phoenix.server

ブラウザで http://localhost:4000 にアクセスして以下の画面が表示されることを確認します。
hello_elixir

Phoenixの停止

ctrl-c を二回実行することでPhoenixを停止させることができます。

ジェネレータの実行

Phoenix Frameworkには、MVCパターンのファイルを自動生成するジェネレータ機能があります。
mixコマンドで自動生成させます。

$ mix phoenix.gen.html Player players name:string team:string position:string
* creating web/controllers/player_controller.ex
* creating web/templates/player/edit.html.eex
* creating web/templates/player/form.html.eex
* creating web/templates/player/index.html.eex
* creating web/templates/player/new.html.eex
* creating web/templates/player/show.html.eex
* creating web/views/player_view.ex
* creating test/controllers/player_controller_test.exs
* creating web/models/player.ex
* creating test/models/player_test.exs
* creating priv/repo/migrations/20161207134319_create_player.exs

各引数は以下の意味を持ちます。

  • Player ・・・ モデル名
  • players ・・・ リソース名
  • name:string以降 ・・・ テーブルのカラム名とその属性

ルーターファイルの編集

自動生成されたリソースにブラウザからアクセスできるようにするため、ルーターファイル(web/router.ex)を編集します。
20行目に resources “/players”, PlayerController を追加します。

  defmodule PlayerPhoenix.Router do
     use PlayerPhoenix.Web, :router

    pipeline :browser do
      plug :accepts, ["html"]
      plug :fetch_session
      plug :fetch_flash
      plug :protect_from_forgery
      plug :put_secure_browser_headers
    end

    pipeline :api do
      plug :accepts, ["json"]
    end

    scope "/", PlayerPhoenix do
      pipe_through :browser # Use the default browser stack

      get "/", PageController, :index
      resources "/players", PlayerController # <- ここを追加
  end

    # Other scopes may use custom stacks.
    # scope "/api", PlayerPhoenix do

マイグレーションの実行

mixコマンドでマイグレーションを実行します。

$ mix ecto.migrate

マイグレーションの内容は priv/repo/migrations/xxx_create_player.exs に定義してあります。
ジェネレータで指定したテーブルとカラムが定義されているのが分かります。(6〜9行目)

$ cat priv/repo/migrations/20161207134319_create_player.exs
defmodule Bar.Repo.Migrations.CreatePlayer do
  use Ecto.Migration

  def change do
    create table(:players) do
      add :name, :string
      add :team, :string
      add :position, :string

      timestamps()
    end

  end
end

psqlコマンドでテーブルが作成されていることを確認します。

$ psql -U postgres player_phoenix_dev
# \d
                List of relations
 Schema |       Name        |   Type   |  Owner
--------+-------------------+----------+----------
 public | players           | table    | postgres
 public | players_id_seq    | sequence | postgres
 public | schema_migrations | table    | postgres
(3 rows)

SQLを実行し、playersテーブルのレコードを確認してみます。

# SELECT * FROM players;
 id | name | team | position | inserted_at | updated_at
----+------+------+----------+-------------+------------
(0 rows)

Phoenixを起動

ここまで問題なく進めたならPhoenixを起動してみましょう。

$ mix phoenix.server

一覧画面の表示

先ほどルーターファイルに追記したコントローラにブラウザからアクセスすると、一覧画面が表示されます。
http://localhost:4000/players

players

データの登録

データの登録を行ってみます。
new

playersテーブルのレコードを確認してみます。
無事登録されていることが分かります。

# SELECT * FROM players;
 id |        name        |     team     | position |     inserted_at     |     updated_at
----+--------------------+--------------+----------+---------------------+---------------------
  1 | クレイ・トンプソン       | ウォリアーズ     | G        | 2016-12-07 14:16:27 | 2016-12-07 14:16:27
(1 row)

データの参照・編集

登録したデータの参照と編集を行ってみます。
編集ではチーム名を変更します。
※ いくつかデータを追加してあります。

show_edit

playersテーブルのレコードを確認してみます。
3行目のレコードが更新されていることが分かります。

# SELECT * FROM players;
 id |        name        |     team     | position |     inserted_at     |     updated_at
----+--------------------+--------------+----------+---------------------+---------------------
  1 | クレイ・トンプソン       | ウォリアーズ     | G        | 2016-12-07 14:16:27 | 2016-12-07 14:16:27
  2 | ティム・ダンカン        | スパーズ       | C        | 2016-12-07 14:33:02 | 2016-12-07 14:33:02
  3 | ケビン・デュラント       | ウォリアーズ     | F        | 2016-12-07 14:33:26 | 2016-12-07 14:36:51
(3 rows)

データの削除

登録したデータを削除してみます。
delete

playersテーブルのレコードを確認してみます。
削除したプレイヤーのレコードが削除されていることが分かります。

# SELECT * FROM players;
 id |        name        |     team     | position |     inserted_at     |     updated_at
----+--------------------+--------------+----------+---------------------+---------------------
  1 | クレイ・トンプソン       | ウォリアーズ     | G        | 2016-12-07 14:16:27 | 2016-12-07 14:16:27
  3 | ケビン・デュラント       | ウォリアーズ     | F        | 2016-12-07 14:33:26 | 2016-12-07 14:36:51
(2 rows)

まとめ

気づかれた方もいらっしゃると思いますが、今回プログラミングしたのはルーターファイルの編集で追記した1行だけです。
Phoenix Frameworkを使うことで、簡単なWebアプリケーションを短時間で作成することができます。

Elixirが気になっている方や勉強したい方は、今回のようにWebアプリケーションを作成して、
自動生成されたファイルを読んだり拡張したりすることで勉強になると思います。



  • Profile
    キャスレーコンサルティングの技術ブログです。
    当社エンジニアが技術面でのTips、技術系イベント等についてご紹介いたします。
  • CSV社長ブログ
  • チーム・キャスレーブログ