MacでPhoenix環境構築〜Hello,world!まで

こんにちは、piyopiyo.ex共同開催者のnakoです。

本記事は 2021/11/6開催の [piyopiyo.ex#1：Phoenix環境構築〜Hello,world!](https://piyopiyoex.connpass.com/event/225997/) のMac環境向け振り返り記事です。

Windows向け内容は [こちらのスライド](https://speakerdeck.com/ymn/piyopiyo-dot-ex-number-1-phoenix-install-hello-world-windows) をご覧ください。

本記事の内容は2021/11/6時点のものです。

## Elixirをインストール

公式を参考にインストールしていきます。

https://elixir-lang.org/install.html

### ターミナルを起動

* DockでLaunchpadのアイコンをクリックして、検索フィールドに「ターミナル」と入力してから、「ターミナル」をクリック。
* もしくは、commandキー＋スペースキーを押して、Spotlight(検索ツール)を起動、「ターミナル」と入力。
* すでにターミナルアプリをインストールしている方は好きなアプリを立ち上げてください。

### homebrewでElixirをインストール

起動したターミナルで下記を実行。

```
$ brew install elixir
```

インストールが完了したらバージョン確認。

```
$ elixir -v
Erlang/OTP 24 [erts-12.1.4] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] [jit] [dtrace]

Elixir 1.12.3 (compiled with Erlang/OTP 24)
```

ちなみにPhoenix v1.6はElixir v1.9以上が必要。

https://github.com/phoenixframework/phoenix/blob/master/CHANGELOG.md
> Phoenix v1.6 requires Elixir v1.9+.

## Phoenixをインストール

ターミナルで下記を実行。バージョンは1.6.0をインストールします。
※2021/11/6時点では2021/8/26にリリースされた最新バージョンです。

```
$ mix archive.install hex phx_new 1.6.0
```

インストールできたらバージョンを確認します。

```
$ mix phx.new -v
Phoenix installer v1.6.0
```

## Visual Studio Code（VSCode）のダウンロード

VSCodeのダウンロードページにアクセスします。

https://code.visualstudio.com/Download

自分の使っているOS（ここではMac）を選んでポチーします。

|![スクリーンショット 2021-11-13 0.18.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/f60c0a11-4a23-76d2-0259-e4672b37342f.png)|
|:-:|

zipファイルがダウンロードできるので、ダブルクリックして展開しましょう。
展開したappファイルはアプリケーションフォルダに移動しましょう。

|![スクリーンショット 2021-11-13 0.20.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/a3899437-29db-9c9b-4c7f-f3484f189f82.png)|
|:-:|

### VSCodeのelixirの拡張機能をインストールする

VSCodeの拡張機能アイコンをクリックし、「elixir」と検索、「ElixirLS」をインストールします。

![スクリーンショット 2021-11-13 0.24.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/f6a09386-2fb1-4db3-613e-9b9ff60977da.png)

## Hello, world!

### Phoenixプロジェクトを作成する

今回はDBを使わないので`--no-ecto`オプションを指定します。
EctoはElixirのデータベースラッパーです。

```
$ mix phx.new sample --no-ecto
* creating sample/config/config.exs
* creating sample/config/dev.exs
* creating sample/config/prod.exs

〜略〜

Fetch and install dependencies? [Yn] Y # 途中で依存するライブラリのインストールをするか聞かれるのでYで
```

最後に作成されたプロジェクトの起動方法が表示されたら完了です。

```
We are almost there! The following steps are missing:
    $ cd sample

Start your Phoenix app with:
    $ mix phx.server

You can also run your app inside IEx (Interactive Elixir) as:
    $ iex -S mix phx.server
```

sampleディレクトリに移動して、アプリケーションを起動します。

```
$ cd sample/
$ mix phx.server
Compiling 13 files (.ex)
Generated sample app
[info] Running SampleWeb.Endpoint with cowboy 2.9.0 at 127.0.0.1:4000 (http)
[info] Access SampleWeb.Endpoint at http://localhost:4000
[debug] Downloading esbuild from https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.12.18.tgz
[watch] build finished, watching for changes...
```

`http://localhost:4000` をブラウザのアドレスバーに入力する。

|![スクリーンショット 2021-11-25 1.23.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/89efc1cd-5969-4b3d-16ba-6b76a42f22dd.png)|
|:-:|

### ビューを書き換えてHello,world!する

今回はビューのページを少し変更してみましょう。
`sample/lib/sample_web/templates/page/index.html.heex`を開いて、

2行目のh1タグを

```sample/lib/sample_web/templates/page/index.html.heex
<section class="phx-hero">
  <h1><%= gettext "Welcome to %{name}!", name: "Phoenix" %></h1>
```

このように書き換えてみましょう。

```sample/lib/sample_web/templates/page/index.html.heex
<section class="phx-hero">
  <h1>Hello, world!</h1>
```

無事変更されました。ようこそPhoenixへ！

|![スクリーンショット 2021-11-25 1.41.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/e7c4332a-4695-ec54-6ae1-a3a70f949b27.png)|
|:-:|

## おわりに

elixir.jpコミュニティの方々に助けてもらいながら、無事piyopiyo.ex#1が開催できました。
本当にありがとうございます！

なお、本記事では説明をはしょりましたが、ディレクトリ構造については公式ドキュメントや、日本語訳ならこちらがおすすめです。

https://zenn.dev/koga1020/books/phoenix-guide-ja-1-5/viewer/directory_structure