LiveView深掘りPhoenix フレームワークシリーズ vol.1

LiveView深掘りPhoenixフレームワークシリーズ

公式ドキュメントを読みながらちゃんと理解する

このシリーズでは、Phoenixフレームワークの特にフロント周り（例えば、LiveViewやJavaScriptとの連携など）しばらく触らないとすぐに忘れてしまう。orz　ので、忘れた時の思い出すようとしてアウトプットしていこう。と言う個人的な備忘録ですが、学習中の方や同じくすぐ忘れてしまう同士にも役立つ記事を目指します。

Phoenixとは

まず初めにPhoenixとは、について簡単に公式に記載されている中からピックアップしておきます。

PhoenixはElixirで書かれたWeb開発フレームワークで、サーバサイドのModel View Controller (MVC)パターンを実装しています。そのコンポーネントやコンセプトの多くは、Ruby on Rails や Python の Django のような他の Web フレームワークの経験者には理解しやすいフレームワークです。

Phoenixの特徴は、高い開発生産性と高いアプリケーションパフォーマンスという、両者の長所を兼ね備えています。また、リアルタイム機能を実装するためのチャンネルや、高速化のためのプリコンパイルされたテンプレートなど、興味深い新機軸も備えています。（この記事では新基軸の一つであるLiveViewやJavaScriptとの連携部分がすぐ忘れるのでそこを深掘りしていく予定です。その他の部分は端折ります）

Phoenixインストール手順

インストールの方法は、@piacerexさんが記事をまとめてくれているのでこちらを参考にしてください。
Phoenixバージョン確認／アンインストール／インストールの手順をまとめてみた

Phoenix用のmix Taskコマンド一覧

mix help --search "phx"を利用してコマンド一覧を調べてみました。

mix local.phx        # Updates the Phoenix project generator locally
mix phx              # Prints Phoenix help information
mix phx.digest       # Digests and compresses static files
mix phx.digest.clean # Removes old versions of static assets.
mix phx.gen          # Lists all available Phoenix generators
mix phx.gen.auth     # Generates authentication logic for a resource
mix phx.gen.cert     # Generates a self-signed certificate for HTTPS testing
mix phx.gen.channel  # Generates a Phoenix channel
mix phx.gen.context  # Generates a context with functions around an Ecto schema
mix phx.gen.embedded # Generates an embedded Ecto schema file
mix phx.gen.html     # Generates controller, views, and context for an HTML resource
mix phx.gen.json     # Generates controller, views, and context for a JSON resource
mix phx.gen.live     # Generates LiveView, templates, and context for a resource
mix phx.gen.notifier # Generates a notifier that delivers emails by default
mix phx.gen.presence # Generates a Presence tracker
mix phx.gen.release  # Generates release files and optional Dockerfile for release-based deployments
mix phx.gen.schema   # Generates an Ecto schema and migration file
mix phx.gen.secret   # Generates a secret
mix phx.gen.socket   # Generates a Phoenix socket handler
mix phx.new          # Creates a new Phoenix v1.6.15 application
mix phx.new.ecto     # Creates a new Ecto project within an umbrella project
mix phx.new.web      # Creates a new Phoenix web project within an umbrella project
mix phx.routes       # Prints all routes
mix phx.server       # Starts applications and their servers

翻訳してみた。

mix local.phx        # ローカルでPhoenixプロジェクトジェネレータを更新する
mix phx              # Phoenixのヘルプ情報を表示する
mix phx.digest       # 静的ファイルのダイジェストと圧縮を行う
mix phx.digest.clean # 古いバージョンの静的アセットを削除する
mix phx.gen          # 利用可能なPhoenixジェネレータを全てリストアップする
mix phx.gen.auth     # リソースの認証ロジックを生成します。
mix phx.gen.cert     # HTTPSテスト用の自己署名証明書を生成します。
mix phx.gen.channel  # Phoenix のチャンネルを生成します。
mix phx.gen.context  # Ecto スキーマに関連する関数を含むコンテキストを生成します。
mix phx.gen.embedded # 組み込みの Ecto スキーマファイルを生成する
mix phx.gen.html     # HTML リソース用のコントローラ、ビュー、コンテキストを生成する
mix phx.gen.json     # JSONリソースのコントローラ、ビュー、コンテキストの生成
mix phx.gen.live     # リソースのライブビュー, テンプレート, コンテキストを生成する
mix phx.gen.notifier # デフォルトでメールを配信するノーティファイアを生成する
mix phx.gen.presence # プレゼンストラッカーを生成します。
mix phx.gen.release  # リリースベースのデプロイメントのためのリリースファイルやオプションの Dockerfile を生成します。
mix phx.gen.schema   # Ecto スキーマとマイグレーションファイルを生成します。
mix phx.gen.secret   # シークレットファイルを生成します。
mix phx.gen.socket   # Phoenix ソケットハンドラを生成する
mix phx.new          # 新しいPhoenix v1.6.15アプリケーションを生成する
mix phx.new.ecto     # アンブレラプロジェクト内に新しい Ecto プロジェクトを作成する
mix phx.new.web      # アンブレラプロジェクトの中に新しいPhoenixのWebプロジェクトを作成する
mix phx.routes       # 全てのルートを表示する
mix phx.server       # アプリケーションとそのサーバを起動する

Phoenixプロジェクトの作成

今回は、Phoenixプロジェクトを作るのですが、フロント側の深掘りしたいので、DBは不要という事で DBモジュールであるEctoを入れずに作成したいと思います。

そこで、mix phx.newの引数を知りたいと思い、ヘルプを参照してみます。

$ mix help phx.new

                                  mix phx.new                                   

Creates a new Phoenix project.

It expects the path of the project as an argument.

    $ mix phx.new PATH [--module MODULE] [--app APP]

A project at the given PATH will be created. The application name and module
name will be retrieved from the path, unless --module or --app is given.

## Options

  • --umbrella - generate an umbrella project, with one application for
    your domain, and a second application for the web interface.
  • --app - the name of the OTP application
  • --module - the name of the base module in the generated skeleton
  • --database - specify the database adapter for Ecto. One of:
    • postgres - via https://github.com/elixir-ecto/postgrex
    • mysql - via https://github.com/elixir-ecto/myxql
    • mssql - via https://github.com/livehelpnow/tds
    • sqlite3 - via https://github.com/elixir-sqlite/ecto_sqlite3

    Please check the driver docs for more information and requirements.
    Defaults to "postgres".

  • --no-assets - do not generate the assets folder. When choosing this
    option, you will need to manually handle JavaScript/CSS if building HTML
    apps
  • --no-ecto - do not generate Ecto files
  • --no-html - do not generate HTML views
  • --no-gettext - do not generate gettext files
  • --no-dashboard - do not include Phoenix.LiveDashboard
  • --no-live - comment out LiveView socket setup in assets/js/app.js and
    also on the endpoint (the latter also requires --no-dashboard)
  • --no-mailer - do not generate Swoosh mailer files
  • --binary-id - use binary_id as primary key type in Ecto schemas
  • --verbose - use verbose output
  • -v, --version - prints the Phoenix installer version

When passing the --no-ecto flag, Phoenix generators such as phx.gen.html,
phx.gen.json, phx.gen.live, and phx.gen.context may no longer work as expected
as they generate context files that rely on Ecto for the database access. In
those cases, you can pass the --no-context flag to generate most of the HTML
and JSON files but skip the context, allowing you to fill in the blanks as
desired.

Similarly, if --no-html is given, the files generated by phx.gen.html will no
longer work, as important HTML components will be missing.

## Installation

mix phx.new by default prompts you to fetch and install your dependencies. You
can enable this behaviour by passing the --install flag or disable it with the
--no-install flag.

## Examples

    $ mix phx.new hello_world

Is equivalent to:

    $ mix phx.new hello_world --module HelloWorld

Or without the HTML and JS bits (useful for APIs):

    $ mix phx.new ~/Workspace/hello_world --no-html --no-assets

As an umbrella:

    $ mix phx.new hello --umbrella

Would generate the following directory structure and modules:

    hello_umbrella/   Hello.Umbrella
      apps/
        hello/        Hello
        hello_web/    HelloWeb

You can read more about umbrella projects using the official Elixir guide
(https://elixir-lang.org/getting-started/mix-otp/dependencies-and-umbrella-apps.html#umbrella-projects)

どうやら、--no-ecto でEctoを外して生成できるようです。という事で早速、次のコマンドでプロジェクトを生成してみよう。

$ mix phx.new hook_learn --no-ecto

$ cd hook_learn
$ mix phx.server

locolhost:4000 で下記確認できたら成功。

とりあえず、キリがいいのと長くなるので、続きはvol.2に書きます。