自分用趣味アプリを作っている話

Kanazawa.rb meetup #148 のLightning talk資料です。

Transcript

1. 自分用趣味Webアプリを 作っている話 Kanazawa.rb meetup #148 Takayuki Takagi
2. 自己紹介 • Takayuki Takagi (髙木貴之 / ニボシーニョ) • @TAKAyuki_atkwsk / takayukiatkwsk • SRE @ ZOZO • AWS, Kubernetes, Scala, Ruby, Go, etc. • ビール、餃子、サッカー観戦が好き 2
3. 自分用趣味Webアプリに ついてゆるく話す 3
4. どんなWebアプリか？ • Nidera score viewer（限定公開） ◦ beatmania IIDX（弐寺）の過去スコアをさくっと確認できるもの ◦ ゲーセンにいるときにスマホから見る想定 • 機能一覧 ◦ 楽曲検索 ◦ 楽曲のスコア表示 ◦ 楽曲に対するメモの保存・表示 ◦ 楽曲スコアCSVファイルのアップロード 4
5. 雰囲気を紹介 5
6. 技術要素 • Webフレームワーク: Remix (v2) • CSSフレームワーク: Tailwind CSS • 実行環境: Cloudflare Workers • データベース: Cloudflare D1 6
7. なぜ作っているのか？ • 技術面 ◦ Cloudflareを使ってみたい ◦ Remixを使ってみたい • 実用面 ◦ 公式サイトでもスコアの確認はできるが、過去作を通しては不可 ▪ CSVダウンロードできるので、これを保存して集計することになる ◦ 需要を満たすサイトは既にいくつか存在する ◦ 車輪の再発明になるけど、技術的な興味含め作ってみることに 7
8. 作ってみた感想 • Remixのお作法に慣れてきた ◦ loaderとactionを抑えれば良い ▪ loader: ページ描画時にデータを渡すための関数 ▪ action: データを操作するための関数（例：フォームのsubmit時） ▪ どちらもサーバーで動く ◦ URLに対応するファイルの配置 ▪ /music/search -> app/routes/music.search.tsx ▪ /music/:id -> app/routes/music.$id.tsx ◦ シンプルな規約があると考えることが減ってありがたい ▪ （課題外在性の）認知負荷が下がるとも言えそう ▪ Ruby on Railsにも当てはまる ▪ 選択肢が多すぎるのは難しい 8
9. 作ってみた感想 • ブラウザでJavaScript無効にしても機能する ◦ 普通のWebサイトとして振る舞う ◦ 実装を変えているわけではない ▪ イベントハンドラやReactで状態遷移を伴う何かを実装していれば、それ は機能しないと思われる ◦ Progressive Enhancement | Remix ▪ > JavaScript なしで動作する方法でアプリを構築し、その後 JavaScript を重ねてエクスペリエンスを強化できるということです 9
10. 作ってみた感想 • 1ページに何でも詰め込まない方がいい ◦ 楽曲ページ (/music/:id) の例 ◦ 当初は楽曲のスコアとメモを同居させていた ▪ メモの保存のルーティングとページ再描画がどうにもうまくいかなかっ た（やりようはあるかもしれないが） ◦ ナビゲーションタブを設置して両者を分離した 10
11. before after 11
12. 作ってみた感想 • 1ページに何でも詰め込まない方がいい ◦ 楽曲ページ (/music/:id) の例 ◦ 当初は楽曲のスコアとメモを同居させていた ▪ メモの保存のルーティングとページ再描画がどうにもうまくいかなかっ た（やりようはあるかもしれないが） ◦ ナビゲーションタブを設置して両者を分離した ◦ 結果 12 ▪ データの流れがシンプルになった ▪ 操作が分かりやすくなった（主観）
13. さいごに • Remixの良さが少しだけ分かったかもしれない ◦ loaderとactionさえ気にしておけばひとまず良いという安心感 • フルスタックで開発するのは大変だけどおもろい ◦ ページ設計やコンポーネント書くのが新鮮 • 今後やりたいこと ◦ UIの拡充やスコア推移のグラフなど実装したい ◦ デプロイ自動化したい ◦ React Router v7にアップデートしたい 13
14. 以上 ありがとうございました！ 14