# WEB+DB PRESS企画会議　#1

* 2021年10月3日22時00分-23時59分

## アジェンダ案

* 2200-2240: 下記の課題について認識合わせができること
* 2240-2330: 各自でHackMDを編集
* 2330-23:59: 変更点を発表

# 認識合わせが必要な課題

## inaoさんから指摘されている課題

[アウトラインをブラッシュアップする · Issue #10 · elixirjp-slack-com/webdbpress-vol127](https://github.com/elixirjp-slack-com/webdbpress-vol127/issues/10)

* 冒頭の「# 〜とは何か」の粒度をそろえる
* RealWorld関連の見出しでの打ち出し方をそろえる
* すべてRealWorldで実装している機能？

> 鍵は、本issueのような共著由来のチグハグ感をいかに解消し、1つの特集としていかにまとまり、統一感を出すかにありそうですね。
>
> 今後ですが、10/4までにみなさまどうしで相互レビューを行いブラッシュアップしていただき、その後、私のほうで詳細にレビューさせていただく、という流れでいかがでしょうか？

## 高瀬先生のコメント

* 「原理とか仕組みの説明」と「手を動かす系」が混じっている。それぞれまず「原理」というか「嬉しさ」を説明しきってから，じゃあ手を動かして血肉にしましょう！って流れにすると良さそう
* 題材がなんなのか？が読み取れない。１章の最後あたりで，「この特集ではRealWorldってのを題材にします．こういうアプリです．最初はとりまPhoenixって，EctoでDB足して，しかもphx.gen.authで手軽に認証機能を足せて，うおーっLiveViewでナウくなるぜっ！」てなストーリーが，ここまでに出てくる「いまなぜElixir/Phoenix？」という理由と対応付いて分かるようになると嬉しいです．
* 追記：1章がこの特集の大見出しで，全体のサマリ（＋Elixir/Phoenixの全体的な良さ）に位置づけられると思うのですが，カッコ内は書けているけど，サマリ的な対応が取れていないのが良くなさそうな気がしています＞ @あんちぽ さん
* WEB+DB Pressさんって，コラムはアリですっけ？流れにそぐわないような発展的な話題（テストとかEcto.Queryとか）はコラム扱いにしてもらうのもありかと思います．
* 追記：もちろんこの辺りの技術が大事で伝えるべきことなのは理解しています．ただしこの特集号でわたしたちがやりたいのは「Elixir/Phoenixに触れてもらって一通りのモダンなWebアプリを作ってもらって，これええやん！と思ってもらう」だと思います．これに合わないものを上記では「流れにそぐわないような発展的な話題」と言っています．

https://elixirjp.slack.com/archives/C02BZ4CFL8N/p1633095988132100

## その他の確認事項

* テストの話をどう盛り込むか
* 基本、2章で大枠を書いて、3章以降はその章のポイントとなる機能やテスト手法について大見出し（`#`一個分でかくのが良さそう）

> 自動生成されるテストコードはディレクトリベースでいくと context controller live の3種類(viewは除く)だと思うので、 mix phx.gen.html/auth は基本的には同じかもですね :thinking_face:
> * 2章 -> テストの基本的な説明, controller のテストの説明
> * 3章 -> context のテストの説明
> * 4章 -> conn_case.ex に追加されるヘルパーの説明?
> * 5章 -> live の説明

https://elixirjp.slack.com/archives/C02BZ4CFL8N/p1632751582109400?thread_ts=1632730854.105400&cid=C02BZ4CFL8N

# 決めたこと

* 「とは何か」問題
* 2-5章で、以下のような見出し構造に統一する。

# Phoenixとは何か

WAFでーす。

## Phoenixが解決すること

3つあります

### 1.
### 2.
### 3.

## Phonixの特徴

3つあります

### 1.
### 2.
### 3.

* 1章に持っていく内容

# Phoenix1.6にともなう〜のポイント

## 1.6でました〜
## phx.gen.authがデフォになったー

## RealWorld：シンプルなブログの実装例
## RealWorldに基づいて作るよ

* それぞれの章は3部構成
* 〜とは何か？
* 技術的な説明
* 〜でのRealWorldの開発
* （＋おわりに）
* ↑の3部構成にハマらないけど入れておきたい関連する話題は、コラムへ
* 具体的には、2章のfly.ioへのデプロイなど
* 2-4章のはじめに、「`# この章で達成すること`」を入れる
* テスト問題
* 「〜でのRealworldの開発」の`##`見出しに、代表的な機能のテストについて書く

----

□1章：なぜいまWebサービス開発でElixirなのか

# いまElixirとPhoenixが求められる理由
## 昨今のWebサービスへの要求
### 大量のクライアントによる接続
### リッチなUXを提供するフロントエンド
## 軽量プロセスを活かした並行処理
### Elixirの軽量プロセス
### ケーススタディ：WebSocket
## LiveViewによるフロントエンド開発
### バックエンドとフロントエンドのElixirによる統合
### ケーススタディ：Spotify
## ElixirとPhoenixによるもうひとつのWeb開発手法

# Elixirを始める
## Elixirのインストール
### asdfによるインストール
### Dockerによる実行
## IExでREPL操作
## 依存パッケージの利用
### 依存パッケージの宣言
### 依存パッケージの動的な利用

# Elixirの特色
## パイプライン
### 関数型言語としてのElixir
### パイプ演算子によるフロー処理
## モジュール
### モジュールの命名規約
### モジュールの実装
## プロセス
### プロセスの起動
### OTPによる高度なプロセス

# 本特集の構成

# おわりに

#### IoTやAI分野でもElixir
コラム（執筆担当：@takasehideki、0.5ページ）

---

□2章：Phoenixを用いたWebサービスの開発

# この章で達成すること

- この章ではRealWorldアプリに以下を追加します
- 。。。
- 。。。
- 。。。

# Phoenixとは何か

WAFでーす。

## Phoenixが解決すること

3つあります

### 1.
### 2.
### 3.

## Phonixの特徴

なんかたくさん捌けまーす。3つあります

### 1.
### 2.
### 3.

## Phoenixの特徴
## Phoenixのディレクトリ構成
## Mixタスクによるスキャフォールディング

# Phoenixの開発環境
## 事前準備
## Phoenixのインストール
## Phoenixプロジェクトの作成
## Phoenixの起動

# PhoenixでのRealWorldの開発
## サンプルブログアプリ `RealWorld` を実装してみる
## 画面の実装 --- 記事一覧/作成/削除/更新 画面
## REST APIの実装 --- コメント一覧/作成/削除/更新
## 実装した機能のテスト
### 記事一覧機能をテストする

# おわりに

# コラム: Phoenixアプリケーションのデプロイについて

---

□3章：EctoによるDBアプリケーションの開発

# Ectoとは何か

## Ectoの対象とする問題領域

RailsでいうところのARみたいなORMですよー

## Ectoの特徴

Elixirのオブジェクトとなんか透過的になっていい感じ

## Ecto.Repo --- データストアのラッパー
## Ecto.Query --- Elixirシンタックスで書けるクエリ
## Ecto.Schema --- データソースとElixir構造体のマッピング
## Ecto.Changeset --- 外部パラメータのフィルター、キャスト、バリデーション
## トランザクション
## マイグレーション

~~# コンテキストのテスト~~

# Ectoの使い方
## データベース作成
## マイグレーション
## データ操作
### 作成(Create)
### 読み出し(Read)
### 更新(Update)
### 削除(Delete)
## データリセット

# EctoでのRealWorldの開発
## タグによる記事の検索機能実装
### N 対 N の関連を持つテーブル --- many_to_many

## 他のテーブルとの関連付け
### 1 対 N の関連を持つテーブル --- has_many と belongs_to
### N 対 N の関連を持つテーブル --- many_to_many
## Ecto.MultiによるDBトランザクション
## 複雑な検索 --- Ecto.Query で SQL を表現
## Blogsのテスト

# おわりに

---

□4章:phx.gen.auth を用いた安全な認証機能の開発

# この章で達成すること

- この章ではRealWorldアプリに以下を追加します
- mix phx.gen.authで認証機能を生成する
- ArticleとUserを関連付ける
- CommentとUserを関連付ける
- ArticleとCommentをユーザーと関連付けて保存できるようにする

# `phx.gen.auth` とは何か
- phx.gen.authは認証機能をアプリケーションに提供するライブラリです
## phx.gen.authが解決すること
- 必要不可欠だが実装が複雑になりがちになる認証機能をコマンド1つで生成する
## 特徴
- 認証トークンをDBに保存する
- 実装コードが全てプロジェクト内に生成される
# `phx.gen.auth` を使って認証システムを生成する
## 認証機能付きユーザーの生成
`mix phx.gen.auth Accounts User users`
## 生成された機能を見てみる
### 認証機能
### 新規登録
### 確認処理による本登録
### ログイン・ログアウト
### email・パスワード変更
### パスワードリセット

# アクセスコントロール
## pipelineによる処理の共通化
## 認証を必要とするscope 必要としない scope

# パスワードの最低文字数を変更する
## パスワードバリデーション
## テストの修正

# メールの送信方法を変更する
## ブラウザで見る
## SMTP
## SendGrid

# phx.gen.authによるRealWorldの開発
## 認証機能を追加する
## 現在ログイン中のユーザーを取得する
## 記事の投稿に Author を追加する
## コメントの投稿に Author を追加する
## アクセスコントロールをテストする
- 生成されたテストと追加するテストとの差分

# おわりに

---

□5章：LiveViewによるフロントエンドの開発

# この章で達成すること
- RealWorldアプリをLiveView化し、リッチなフロントエンドを実現する

# LiveViewとは何か
## LiveViewが解決すること
## LiveViewの特徴
### LiveViewの仕組み
### 他のフロントエンド技術との比較
### LiveViewのユースケース

# LiveViewの技術仕様
## LiveViewのディレクトリ構造
## LiveViewのライフサイクル
## UIの制御
### HEExテンプレート
### DOMバインディング
### ルーティング
### JavaScriptとの連携
## 状態の制御
### 状態の管理と更新
### ファイルアップロード
### PubSubによるリアルタイム更新
## Phoenix.LiveViewTestによる結合テスト
## 実装例 --- シンプルなカウンター

# LiveViewでのRealWorldの開発
## 画面の実装 --- 記事一覧/作成/削除/更新
## コンポーネント分割
### Phoenix.Component --- ステートレスなコンポーネント
### Phoenix.LiveComponent --- ステートフルなコンポーネント
## データの更新をリアルタイムに反映
### 記事の登録を一覧と詳細に反映
### 記事の更新を一覧と詳細に反映
### 記事の削除を一覧と詳細に反映
## タグによる記事検索のテスト

# おわりに

---

##
### 記事一覧画面
### コメント投稿
### 認証機能
### 記事タグ検索機能

# PhoenixでのRealWorldの開発
## 記事一覧画面を実装する
## コメント投稿機能を実装する

# EctoでのRealWorldの開発
## タグによる記事の検索機能実装

# phx.gen.authによるRealWorldの開発
## 認証機能の追加

# LiveViewによるRealWorldの開発
## 記事一覧画面をLiveViewにする