IntelliJ で始めるElixir + Phoenix [Windows10]

## なんでIDE使うの？
コマンドベースで開発するのもいいけど、IDE使うのもいいよね！

## おしながき
1. Elixir入れる
1. Phoenix入れる
1. Phoenixプロジェクト作る
1. IntelliJ入れる
1. IntelliJからPhoenixプロジェクトを起動する

## まずは Elixir から

### 1. インストーラーをダウンロード
<https://elixir-lang.org/install.html#windows>
![Elixir.PNG](https://qiita-image-store.s3.amazonaws.com/0/86869/ec412275-a634-a620-2741-5c4d08b8cdab.png)

### 2. ぽちぽちでインストール

Erlangも勝手に入れてくれる。パスもデフォルトで通る。特に気にすることはなし。

### 3. ErlangとElixirが入ったかどうか、コマンドプロンプトで確認

Erlang確認

```bat
C:\>erl
Eshell V9.0  (abort with ^G)
1> 1 + 1.
2
2>
C:\Users\Owner>
```

Elixir確認

```bat
C:\>iex
Eshell V9.0  (abort with ^G)
Interactive Elixir (1.4.5) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)> IO.puts "Hello, Elixir!"
Hello, Elixir!
:ok
iex(2)> 
```

おーけーです！

## 次に Phoenix Framework

### コマンドを数回叩く

下記参照
<http://www.phoenixframework.org/docs/installation>

mixコマンドでインストールしていきます。

- mixって?  
プロジェクト管理ツール。  
プロジェクト作成、コンパイル、テストなどなどをよしなにやってくれる。  

### 1. Hexをインストール

- Hexって?  
パッケージ管理ツール。  
依存関係とか解決してくれる凄いやつ。yum, HomeBrewと同じ。  
※Elixirインストール時に一緒に入るが、下記を叩くと最新のHexに置き換えられる。  
　replaceしますか？と聞かれたらYes。  

※グローバルインストールなので、叩く場所はどこでもいいです。C直下でも、User直下でも。

```bat
mix local.hex
```

### 2. Erlangをインストール

Elixirインストール時に入ってるので省略。

### 3. Phoenixをインストール

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

## Phoenixを利用してプロジェクトの雛形を作る

コマンド一発でスケルトンを作ってくれる。

C:\Dev\Elixir配下に「web」って名前のプロジェクトを作ります。
聞かれたら、全てYes.

```bat
C:\>mkdir C:\Dev\Elixir

C:\>cd C:\Dev\Elixir

C:\Dev\Elixir>

C:\Dev\Elixir>mix phoenix.new web --no-brunch --no-ecto
* creating web/config/config.exs
* creating web/config/dev.exs
* creating web/config/prod.exs
* creating web/config/prod.secret.exs
* creating web/config/test.exs
* creating web/lib/web.ex
* creating web/lib/web/endpoint.ex
* creating web/test/views/error_view_test.exs
* creating web/test/support/conn_case.ex
* creating web/test/support/channel_case.ex
* creating web/test/test_helper.exs
* creating web/web/channels/user_socket.ex
* creating web/web/router.ex
* creating web/web/views/error_view.ex
* creating web/web/web.ex
* creating web/mix.exs
* creating web/README.md
* creating web/web/gettext.ex
* creating web/priv/gettext/errors.pot
* creating web/priv/gettext/en/LC_MESSAGES/errors.po
* creating web/web/views/error_helpers.ex
* creating web/.gitignore
* creating web/priv/static/css/app.css
* creating web/priv/static/js/app.js
* creating web/priv/static/robots.txt
* creating web/priv/static/js/phoenix.js
* creating web/priv/static/images/phoenix.png
* creating web/priv/static/favicon.ico
* creating web/test/controllers/page_controller_test.exs
* creating web/test/views/layout_view_test.exs
* creating web/test/views/page_view_test.exs
* creating web/web/controllers/page_controller.ex
* creating web/web/templates/layout/app.html.eex
* creating web/web/templates/page/index.html.eex
* creating web/web/views/layout_view.ex
* creating web/web/views/page_view.ex

Fetch and install dependencies? [Yn] Y
* running mix deps.get

We are all set! Run your Phoenix application:

    $ cd web
    $ mix phoenix.server

You can also run your app inside IEx (Interactive Elixir) as:

    $ iex -S mix phoenix.server


C:\Dev\Elixir>
```

おーけーです！！

## 最後に IntelliJ CE

### 1. Communityのインストーラーをダウンロード
<https://www.jetbrains.com/idea/download/#section=windows>

### 2. ぽちぽちでインストール完了

### 3. Elixirプラグインをインストール

#### configure -> Plugins からインストール
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/86869/0088c9c6-ca18-1fd9-a32f-c3be164aae32.png)

elixirをリポジトリから検索
![intellij.PNG](https://qiita-image-store.s3.amazonaws.com/0/86869/2f4a8fe7-0657-e189-347f-d89f8403f7c9.png)

さくっとインストール
![intellij-2.PNG](https://qiita-image-store.s3.amazonaws.com/0/86869/e90b57f9-b74e-8eb7-bc08-0dd2ee807c31.png)

#### IntelliJを再起動

#### 4. 作成したプロジェクトをインポート

![いんぽーと.PNG](https://qiita-image-store.s3.amazonaws.com/0/86869/f9ee8f23-2529-eb75-8d0a-f54940a6287b.png)

![いんぽーと2.PNG](https://qiita-image-store.s3.amazonaws.com/0/86869/030ab04b-191b-7f61-a33a-cce954b77891.png)

##### next
※既存プロジェクトではなく、Mixを明示的に選択  
明示的に選択しないと、プロジェクトが実行できない場合あり。(2017-07-08現在)
<https://github.com/KronicDeth/intellij-elixir/issues/203>

![image.png](https://qiita-image-store.s3.amazonaws.com/0/86869/9bc00d55-4d8f-5194-64f5-d04dee230413.png)

##### next!
![image.png](https://qiita-image-store.s3.amazonaws.com/0/86869/6e27aac8-9682-53ac-d0d5-80ee8952835a.png)

##### next!!
![image.png](https://qiita-image-store.s3.amazonaws.com/0/86869/f5c3fb74-6a2b-dfc9-6ba8-72588299aea1.png)

##### SDKの場所
![image.png](https://qiita-image-store.s3.amazonaws.com/0/86869/0cd70ff9-e450-80e8-64fb-7998c52156eb.png)

##### finish!
![finish.PNG](https://qiita-image-store.s3.amazonaws.com/0/86869/c09fa752-6bf4-ef7f-9746-2ef7722e2c07.png)

#### 4. 起動してみる

Run -> Edit configulations  
mix phoenix.server　で起動できるようにする。


![image.png](https://qiita-image-store.s3.amazonaws.com/0/86869/a4fe7a91-1593-45e3-f19b-54d8b2b09665.png)

![run-config.PNG](https://qiita-image-store.s3.amazonaws.com/0/86869/9cf0c522-6acb-f1ad-7167-3add524d2ad5.png)

##### Run!
![run.PNG](https://qiita-image-store.s3.amazonaws.com/0/86869/e994e877-9abb-4db7-d7d5-c315cbc139ac.png)

#### 5. Welcome to Phoenix!

##### 下記にアクセス。
http://localhost:4000/

##### 無事表示
![image.png](https://qiita-image-store.s3.amazonaws.com/0/86869/0344883c-9288-13df-1b4d-cee01ad59ee9.png)

素晴らしい！

## まとめ

ほとんどぽちぽちだけで、非常に簡単に環境構築できました！  
お次はREST-API作成いってみよう。