---
marp: true
---
# 良いサンプルアプリケーションの作り方
---
# 業務連絡
都合上、とりあえず最初にブラウザで
https://github.com/hamajyotan/active_record_compose-example
のサイトの README から、
> ## Open in a GitHub Codespaces
>
> you can open it from the following link:
>
> [](https://codespaces.new/hamajyotan/active_record_compose-example)
のボタンを押下、次の画面から `Create codespace` をさらに押下してブラウザを放置しておいてください。
(準備に4,5分かかるので)
---
# `p self.inspect`
Takashi SAKAGUCHI (さかぐちたかし)
- Rubyist
- freelance engineer (Office UMMM inc.)
- GitHub: https://github.com/hamajyotan
- dev.to: https://dev.to/hamajyotan
- zenn.dev: https://zenn.dev/hamajyotan
---
# active_record_compose という gem を作ってます
https://github.com/hamajyotan/active_record_compose
https://rubygems.org/gems/active_record_compose
- 複数の ActiveRecord モデルを抱合し、あたかもそれがひとつのモデルであるかのように透過的なインターフェースを提供する
- Smart way to update multiple models simultaneously in Rails
- https://dev.to/hamajyotan/smart-way-to-update-multiple-models-simultaneously-in-rails-51b6
- ( dev.to の当方のページに pin しています https://dev.to/hamajyotan )
---
# Version 1.0.0 にしたいなぁと考えてますが
- v1.0 化できない理由を考える
- 機能面でのやりたいことが満たされたか?
- ドキュメント
- README
- 背景
- 使い方
- etc.
- サンプルアプリケーション :arrow_left: (ここの話です)
- ノリと勢い
---
# 入門ハードル
---
# 良いサンプル
\#とは?
---
# 良いサンプル
- 本来説明したいことに対し、良い具体となっている
- 入門できる
- 「例え」はなるべく避ける
- 理解しているもの同士で取り交わされる言葉遊び
- わからなくなったときに、かえってこれる
- etc.
---
# 良いアプリケーション
\#とは?
---
# 良いアプリケーション
- アプリケーションは課題を解決できるものであるべき
- 課題を解決するために…… とりあえずは動くものでなければ話にならない
---
# 良いサンプルアプリケーション
---
# 良いサンプルアプリケーション
- これから入門する人がターゲットなのだから
- 動かすこと、そのもののハードルが極小であることが望ましい
- 動く状態をベースに、**試して壊すことができる**
- ここが大きい！
---
# サンプルアプリケーション (2度目の出現)
https://github.com/hamajyotan/active_record_compose-example
(そろそろ codespace の準備できたかな? )
---
# GitHub Codespaces
---
https://github.com/features/codespaces
---
# GitHub Codespaces
GitHub が提供しているクラウドベースの開発環境
https://github.com/features/codespaces
- ブラウザひとつで開発が始まる環境
- ブラウザ版 vscode (github.dev) はエディタだけ
- (GitHub のウェブ画面でピリオドを押すとでてくるやつ)
- GitHub Codespaces はエディタだけじゃなくてちゃんと環境が動くぞ
---
# 動かしてみましょう
`README.codespaces.ja.md` に GitHub Codespaces についての簡単な動かし方をおいています。
https://github.com/hamajyotan/active_record_compose-example/blob/main/README.codespaces.ja.md
---
# 動かしてみましょう (やることメモ)
- ブラウザでの動作確認
- `bin/rails s`
- テストの実行
- `rake`
- サッとコードを確認
- `db/schema.rb`
- `app/models/*` の AR モデルを少し
- `ActiveRecordCompose::Model` のサブクラスを少し
---
# Rails on GitHub Codespaces
- `rails new` に `--devcontainer` オプション付与の状態で基本的にはおおよそ動きます
---
# Rails on GitHub Codespaces (少しだけハマりポイント)
- GET はそのまま動くけど、 POST がエラーになる。
- [`config.action_controller.forgery_protection_origin_check`](https://railsguides.jp/configuring.html#config-action-controller-forgery-protection-origin-check)
- > CSRFの追加対策として、HTTPの`Origin`ヘッダーがサイトのoriginと一致することをチェックすべきかどうかを設定します。
- どうやら Codespace でポート解放する仕組みの中で、Origin ヘッダを書き換えている
- 回避策として codespace で動かす場合は無効にしている
該当 commit
- [bee2eeda54d99b45a68d7d1868de1c2b5e643fb9](https://github.com/hamajyotan/active_record_compose-example/commit/bee2eeda54d99b45a68d7d1868de1c2b5e643fb9) for codespaces
---
# まとめ
- 良いサンプルアプリケーション
- 良いかどうかはさておき、挙動の観測の導入ハードルは極小であるべき
- そこで GitHub Codespace は良い選択だと言えそう
- Rails アプリケーションを GitHub Codespace で動かすことをワンパス試した
- `--devcontainer` オプションで作られる構成でおおよそ OK
- とりあえず現時点で過去に困ったのは 1点だけ
- (環境を限定して `forgery_protection_origin_check` 無効に)
- それ以外は元気に動いた
---
# 付録: 料金関連 FAQ
- 無料枠
- 無課金ユーザ :arrow_right: 15 GB/月 ストレージ および 120コア時間
- GitHub Pro :arrow_right: 20 GB/月 ストレージ および 180コア時間
- お掃除される時間
- 30分放置でアイドルに、30日放置で削除される。設定変更可能
- 設定 https://github.com/settings/codespaces
- GitHub Codespacesの支払いの管理
- https://docs.github.com/ja/billing/managing-billing-for-your-products/managing-billing-for-github-codespaces
---
# 付録: パフォーマンス関連 FAQ
- なんか遅いので Codespaces をローカルの vscode で動かしたい
- 本発表での目的からそれるけど、それは可能らしいです。
- VSCodeのExtension
- https://marketplace.visualstudio.com/items?itemName=GitHub.codespaces
- ただし、当方は試したことはないです。
---
# 付録: パーソナライズ FAQ
- 俺にとっての快適な環境にカスタマイズしたい。例えば俺だけ vim プラグイン使いたい
- Settings Sync 、いわゆる設定の同期は可能です。
- [`Settings`](https://github.com/settings/codespaces) > `Codespaces` > `Settings Sync` > `Enable`
- アカウントの GitHub Codespaces をパーソナライズする
- https://docs.github.com/ja/enterprise-cloud@latest/codespaces/setting-your-user-preferences/personalizing-github-codespaces-for-your-account
---
# 付録: その他 FAQ
- codespce と codespaces 結局どっちなの?
- 当方がいくつかの情報を読み込んで、このような理解に至った
- サービス名自体は GitHub Codespaces
- GitHub Codespaces を使って操作するインスタンスおよびその環境のことは、 codespace と呼ばれている
- ただ、この読み分けについて一次情報は見つけられてないので違うのかも :bow:
hamajyotan
panda_program
twada
nealle
yodakeisuke
tkikuc
sakawe_ee
kajitack
.png){kind=avatar}
honmarkhunt
agatan
yamamotok
lnit
warashi
chriscoyier
productmarketing
lemiorhan
palkan
kastner
addyosmani
thoeni
jcasabona
mza
jmmastey
sergeychernyshev
zakiyama
](https://codespaces.new/hamajyotan/active_record_compose-example){kind=link}
