Upgrade to Pro — share decks privately, control downloads, hide ads and more …

良いサンプルアプリケーションの作り方

 良いサンプルアプリケーションの作り方

---
marp: true
---

# 良いサンプルアプリケーションの作り方

---

# 業務連絡

都合上、とりあえず最初にブラウザで

https://github.com/hamajyotan/active_record_compose-example

のサイトの README から、
> ## Open in a GitHub Codespaces
>
> you can open it from the following link:
>
> [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](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

![](codespaces.png)

---

# 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:

Avatar for SAKAGUCHI Takashi

SAKAGUCHI Takashi

March 22, 2025
Tweet

More Decks by SAKAGUCHI Takashi

Other Decks in Programming

Transcript

  1. 業務連絡 都合上、とりあえず最初にブラウザで https://github.com/hamajyotan/active_record_compose-example のサイトの README から、 Open in a GitHub

    Codespaces you can open it from the following link: のボタンを押下、次の画面から Create codespace をさらに押下してブラウザを放置し ておいてください。 (準備に4,5分かかるので)
  2. 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
  3. 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 )
  4. GitHub Codespaces GitHub が提供しているクラウドベースの開発環境 https://github.com/features/codespaces ブラウザひとつで開発が始まる環境 ブラウザ版 vscode (github.dev) はエディタだけ

    (GitHub のウェブ画面でピリオドを押すとでてくるやつ) GitHub Codespaces はエディタだけじゃなくてちゃんと環境が動くぞ
  5. Rails on GitHub Codespaces (少しだけハマりポイン ト) GET はそのまま動くけど、 POST がエラーになる。

    config.action_controller.forgery_protection_origin_check CSRFの追加対策として、HTTPの Origin ヘッダーがサイトのoriginと一 致することをチェックすべきかどうかを設定します。 どうやら Codespace でポート解放する仕組みの中で、Origin ヘッダを書き換 えている 回避策として codespace で動かす場合は無効にしている 該当 commit bee2eeda54d99b45a68d7d1868de1c2b5e643fb9 for codespaces
  6. まとめ 良いサンプルアプリケーション 良いかどうかはさておき、挙動の観測の導入ハードルは極小であるべき そこで GitHub Codespace は良い選択だと言えそう Rails アプリケーションを GitHub

    Codespace で動かすことをワンパス試した --devcontainer オプションで作られる構成でおおよそ OK とりあえず現時点で過去に困ったのは 1点だけ (環境を限定して forgery_protection_origin_check 無効に) それ以外は元気に動いた
  7. 付録: 料金関連 FAQ 無料枠 無課金ユーザ 15 GB/月 ストレージ および 120コア時間

    GitHub Pro 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
  8. 付録: パーソナライズ FAQ 俺にとっての快適な環境にカスタマイズしたい。例えば俺だけ vim プラグイン使 いたい Settings Sync 、いわゆる設定の同期は可能です。

    Settings > 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
  9. 付録: その他 FAQ codespce と codespaces 結局どっちなの? 当方がいくつかの情報を読み込んで、このような理解に至った サービス名自体は GitHub

    Codespaces GitHub Codespaces を使って操作するインスタンスおよびその環境のこ とは、 codespace と呼ばれている ただ、この読み分けについて一次情報は見つけられてないので違うのかも