ElixirのWebフレームワークPhoenix用ReactのCRUDのscaffoldingモジュール「Fushicho」入門

# まえがき

アルケミスト(Elixir使いのこと)でかつPhoenix使ってる人！！
Reactに興味有る方達。

scaffoldingツール「Fushicho（不死鳥）」をご存知だろうか？もちろん知ってますよね？
え？知らないの？

知るはずもない、僕が勝手に作ったので。

# Fushichoとは

名前の由来はPhoenixをローマ字の日本語にしただけ。

* Reactのコードを生成
* Phoenix用
* Don't repeat yourself (DRY)

ReactのCRUDのコードを書くのは面倒くさいです。
Phoenix用のReactのJavaSciptのコードを勝手に生成します。
Reactに対応したコードをAPIを見てから勝手に生成。
「API見てからReact構築余裕でした。」


brunchに対応しています。
※他のはあまりしらないので対応されていません。

# PostgreSQLインストール

Homebrewを使用してPostgreSQLインストール。
※SQLiteならこんな文章書かなくて済むのですが、なぜか僕の環境では`--database sqlite`オプションをプロジェクト生成時に指定したらエラーになるのでPostgreSQLにしてます。
※当方はWinows使ってないので保証できませんので手順は載せません。Mac OS X前提です。（このQiita記事の編集リクエストすれば載せます。）

```bash
brew install postgresql
```

## 初期化(文字コード:UTF-8)

```bash
initdb /usr/local/var/postgres -E utf8
```

## 起動しておく

```bash
postgres -D /usr/local/var/postgres
```

# Phoenixのインストール

まだの方は以下のコマンドで入れます。当方はWinows使ってないので保証できませんので手順は載せません。Mac OS X前提です。
※このQiita記事の編集リクエストすれば載せます。

```bash
brew install elixir
mix local.hex
mix archive.install https://github.com/phoenixframework/archives/raw/master/phoenix_new.ez
```

# プロジェクトの作成

```bash
mix phoenix.new student
```

※brunchを使うことを推奨していますので`--no-brunch`オプションをつけない前提です。使いたい方は自分でお願いしたいです。

以下のように依存を効かれたら`Y`を押下。

```bash
Fetch and install dependencies? [Yn] Y
```

studentのパスに入っておく

```bash
cd student
```

# Fushichoのインストール

```bash
mix archive.install mix archive.install https://github.com/shinriyo/fushicho/releases/download/v0.1.0/fushicho-0.1.0.ez
```

# Fushichoの使い方

## 1. まずはAPIを作ります。

生徒の試験(Exam)モデルに教科(subject)と内容(body)のものを生成します。

```bash
mix phoenix.gen.json Exam exams subject:string body:text
```

## API用のDB初期化

```bssh
mix ecto.create
```

僕はなぜか`mix ecto.create`のときに以下の

```bash
Compiling 4 files (.ex)

== Compilation error on file web/controllers/exam_controller.ex ==
** (CompileError) web/controllers/exam_controller.ex:18: undefined function exam_path/3
    (stdlib) lists.erl:1338: :lists.foreach/2
    (stdlib) erl_eval.erl:670: :erl_eval.do_apply/6
    (elixir) lib/kernel/parallel_compiler.ex:116: anonymous fn/4 in Kernel.ParallelCompiler.spawn_compilers/1
```

エラーが出るので、`web/controllers/exam_controller.ex`の18行目をコメントアウトしました。※コメントよろしくお願いします。

```ex:web/controllers/exam_controller.ex
        #|> put_resp_header("location", exam_path(conn, :show, exam))
```

`web/router.ex`のAPIに追加しておく。`/api`の内容がコメントアウトサれているので外しておきます。

```ex:web/router.ex
  scope "/api", Student do
    pipe_through :api
    resources "/exams", ExamController, except: [:new, :edit]
  end
```

### 以下のコマンドでマイグレーションする

```bash
mix ecto.migrate
```

以下にアクセスして起動の確認ができたらOK.

http://localhost:4000/

## 2. React用の準備です。

まずcssを生成するためにFuchichoの初期化コマンド

```
mix fushicho --init
```

これをすると`package.json`ファイルの生成と`web/static/assets/css`の中にファイルが生成されます。
※特に`package.json`は上書きされるのでバックアップしてくださいね。

```
Scaffolding...
initialize...

You should add them to your "web/templates/lauout/app.html.eex".
〜略〜
```

のメッセージがでますから、`web/templates/lauout/app.html.eex`の
`<link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>">`が書いてる下に以下を追加。

```
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css" integrity="sha256-K3Njjl2oe0gjRteXwX01fQD5fkk9JFFBdUHy/h38ggY=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" integrity="sha256-2YQRJMXD7pIAPHiXr0s+vlRWA7GYJEK0ARns7k2sbHY=" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="<%= static_path(@conn, "/css/cssloader.css") %>">
```

### npmコマンドの実行

インストールしましょう

```bash
npm install
```

## 3. Reactのコード生成

これが本題だ。
以下のコマンドでReact用のコードが生成される。
`mix fushicho`に対して先ほど生成したAPIのモデルの単数名の小文字の`exam`を引数に与えます。

```bash
mix fushicho exam
```

結果メッセージは以下のとおりです。

```bash
Add "web/static/js/exam" to your brunch-config.js autoRequire's array.

And also add the div tag yo your *.eex file.

<div class="container" id="exam-content"></div>
```

このメッセージ通りに、`brunch-config.js`に`, "web/static/js/exam"`を追加します。

```js:brunch-config.js
  modules: {
    autoRequire: {
      "js/app.js": ["web/static/js/app", "web/static/js/exam"]
    }
  },
```

今回のReactコードを表示するために、以下のcontainerの`div`タグを記載しておく。

```html:web/templates/layout/app.html.eex
<div class="container" id="exam-content"></div>
```

以下はいらないので削除しても構いません。


```html:web/templates/layout/app.html.eex
      <main role="main">
        <%= render @view_module, @view_template, assigns %>
      </main>
```

## 4.起動！

```bash
mix phoenix.server
```

`http://localhost:4000/`にアクセスします。

## 5.結果！

<img width="680" alt="Screen Shot 2016-09-11 at 6.35.13 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/11951/51a85a56-c351-03a0-e622-b88a96111ad4.png">

## その他

ソースコードは以下ですが、Elixirはまだ入門レベルなので勉強していけばもっと綺麗に書いていきます。
<div class='alert alert-warning'><h6>:bowtie: </h6>
githubのStarとPull Request頂けたら嬉しいな。
</div>

https://github.com/shinriyo/fushicho/

## W.I.P.

* 初期ファイル生成前に元々のファイルのバックアップ機能
* 現在全部テキスト扱いなので、型を判別してからHTML生成したい。
* 多言語ドキュメント（中国、ベトナム、韓国語）※現状は英語と日本語のみ
* コメントアウトが日本語なので英語にする・・。
* API生成時のモデルの型を判別してないので判別する
* テンプレートは現状はヒアドキュメントの手抜きなので、ファイル読み込みにする。
* `components`ディレクトリにコンポーネントを分割。（現状は手動で分割してくださいね）
* brunch以外の対応（僕は他のを知らないというかbrunchもあまりわからない）
* 以下対応したい。（現状僕がまだ学習できてないので未対応）

    1. Flux
    2. Redux
    3. Redux-Poll

* なんか要望あれば