前回は、Cotoami のアーキテクチャについて、コレオグラフィ型を採用するという話を書いた。しかし、開発の最初からコレオグラフィを前提にした構成にするのはスモールスタートとは言い難いので、まずは核となるWebアプリケーションを作るところから初めて、徐々にイベント駆動の箇所を増やしてく感じで進めたい。
このWebアプリケーションを実装する環境として選んだのが、Phoenix Framework と Elm である。両方とも関数型の言語なので、Webアプリケーション全体を関数型の枠組みで実装することになる。
Elixirの強みについてはゆびてくで何度か触れているのでここでは割愛するが、Elm を選択したのは何故だろうか?
大きな要因としては、Elmアプリのアーキテクチャを参考にデザインされたという JavaScript のライブラリ Redux での開発経験が挙げられる。その過程で、複雑化するフロントエンドを実装する技術として、全てのビジネスロジックを「変換の連鎖」へと落とし込む関数型の有効性を実感した(参考: 関数型つまみ食い: 関数型とはプログラミング言語ではなく、プログラムデザインの問題であることに気づく | ゆびてく)。Elm の場合は、Redux では冗長になりがちだったこの仕組みを簡潔に表現出来る上に、Static Typing があるというのも大きなアドバンテージだと考えた。

Phoenix と Elm の相性については、最近 Elm 側で Phoenix のサポートが入ったというのが明るい材料ではあるが… こればかりは試してみないと分からない。
[2016/12/09追記]
素晴らしいツッコミを頂く。
「Elmの方がReact Reduxより簡潔というのはどうだろう。簡単なサンプルでの実際の比較 github.com/uehaj/react-re… github.com/uehaj/elm-bmi/」 b.hatena.ne.jp/entry/31051345… フム……たしかにreduxのが簡潔
—
武藤スナイパーカスタム🔫🕵🏻 (@__tai2__) December 07, 2016
以下に Phoenix/Elmアプリケーションのひな形を作るまでの手順をまとめてみた。
関連ツールのインストール
Node.js
以下を参考に nvm をインストールする。
creationix/nvm: Node Version Manager – Simple bash script to manage multiple active node.js versions
- Phoenixのサイトに「Phoenix requires version 5.0.0 or greater.」とある。
筆者の環境:
$ node -v v5.4.1
Elixir
Mac OS X で Homebrew を利用している場合。
$ brew update $ brew install elixir
筆者の環境:
$ elixir -v Erlang/OTP 19 [erts-8.0.2] [64-bit] [smp:4:4] [async-threads:10] [hipe] [kernel-poll:false] [dtrace] Elixir 1.3.4
PostgreSQL
標準構成の Phoenix が利用するデータベース。環境によってパッケージも様々なのでインストール方法については割愛。データベースを使わないのであれば省略可。
以下のコマンドでデータベース一覧が取得出来ればデータベースのスタンバイは出来ている。
$ psql -l
筆者の環境:
# SELECT version(); version ----------------------------------------------------------------------------------------------------------------------------------- PostgreSQL 9.4.0 on x86_64-apple-darwin13.4.0, compiled by Apple LLVM version 6.0 (clang-600.0.56) (based on LLVM 3.5svn), 64-bit (1 row)
Phoenix
$ mix archive.install https://github.com/phoenixframework/archives/raw/master/phoenix_new.ez
筆者の環境:
$ mix phoenix.new -v Phoenix v1.2.1
Elm
インストーラが用意されているので簡単。
Install · An Introduction to Elm
筆者の環境:
$ elm -v 0.18.0
Phoenix/Elm アプリケーションを作る
Phoenixアプリのひな形を作る
$ mix phoenix.new cotoami
依存関係の取得とデータベースの作成。
$ cd cotoami $ mix deps.get $ mix ecto.create # PostgreSQLを使わなければ省略可 $ npm install
アプリを起動してブラウザでチェックしてみる。
$ mix phoenix.server
http://localhost:4000
にアクセスすると「Welcome to Phoenix!」のページが表示される。
elm-brunch をセットアップする
Phoenix に標準で付いてくる Brunch というJavaScriptのビルドツールがあるのだが、elm-brunch という Elm をビルドするための拡張があるのでそれをインストールする。
$ npm install --save-dev elm-brunch
brunch-config.js
に elm-brunch の設定を追加。以下の二カ所を修正。
1) ... watched: [ "web/static", "test/static", "web/elm" ], ... 2) ... plugins: { elmBrunch: { elmFolder: "web/elm", mainModules: ["App.elm"], outputFolder: "../static/vendor" }, babel: { // Do not use ES6 compiler in vendor code ignore: [/web\/static\/vendor/] } }, ...
Elmアプリのひな形を作る
$ mkdir web/elm && touch web/elm/App.elm $ cd web/elm $ elm package install elm-lang/html
App.elm
の内容を以下のように編集。
module App exposing (..) import Html exposing (Html, text) main : Html msg main = text "Hello Cotoami!"
ElmアプリをPhoenixアプリに配置する
Phoenixアプリのファイルをそれぞれ以下のように編集。
web/templates/layout/app.html.eex
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<meta name="description" content=""> | |
<meta name="author" content=""> | |
<title>Hello Cotoami!</title> | |
<link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>"> | |
</head> | |
<body> | |
<div class="container"> | |
<main role="main"> | |
<%= render @view_module, @view_template, assigns %> | |
</main> | |
</div> | |
<script src="<%= static_path(@conn, "/js/app.js") %>"></script> | |
</body> | |
</html> |
web/templates/page/index.html.eex
<div id="elm-container"></div>
web/static/js/app.js
に以下の二行を追記:
const elmDiv = document.querySelector("#elm-container") const elmApp = Elm.App.embed(elmDiv)
これで準備は完了。ブラウザをリロードすると「Hello Cotoami!」と表示される。さらには、App.elm
の内容を編集して保存すると、ブラウザが自動的にリロードされて即座に変更を確認出来るようになっているはずだ。
- ここまでの手順に従って作ったひな形アプリのソース
Hello Cotoami!! と出るところまでできました。
いちおう、手順通りでできなかった部分を書いておきます。
* ecto.creatの前にmix deps.getが必要だった
* 実行前にnpm installが必要だった
いいねいいね
ありがとうございますー! 追記しておきました。
いいねいいね