Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
自分用趣味アプリを作っている話
Search
TAKAyukiatkwsk
December 21, 2024
Programming
0
98
自分用趣味アプリを作っている話
Kanazawa.rb meetup #148 のLightning talk資料です。
TAKAyukiatkwsk
December 21, 2024
Tweet
Share
More Decks by TAKAyukiatkwsk
See All by TAKAyukiatkwsk
argo-rolloutsにコミットした話
takayukiatkwsk
0
35
EnvoyのWasm filterを体験する
takayukiatkwsk
0
44
zoxideのご紹介
takayukiatkwsk
0
92
Kanazawa.rbに参加してからのふりかえり
takayukiatkwsk
0
47
git-secretsとgitフックをざっと理解する
takayukiatkwsk
0
330
計測プラットフォームSREチームとシステム障害対応 / measurement platform SRE team's incident response
takayukiatkwsk
0
1.1k
Flutterに入門して体重グラフアプリを作る / Get started Flutter and build a weight graph app
takayukiatkwsk
0
410
リモートワークを振り返る / Look back on remote-working
takayukiatkwsk
0
120
ブログでのアウトプットが減っている件 / What long intervals my blog posts have!
takayukiatkwsk
0
110
Other Decks in Programming
See All in Programming
AI Ramen Fight
yusukebe
0
120
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
170
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
810
型で語るカタ
irof
1
850
Jakarta EE Meets AI
ivargrimstad
0
370
slogパッケージの深掘り
integral0515
0
160
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
170
Go製CLIツールをnpmで配布するには
syumai
0
740
Prompt Engineeringの再定義「Context Engineering」とは
htsuruo
0
110
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
260
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
210
NEWT Backend Evolution
xpromx
1
160
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Optimizing for Happiness
mojombo
379
70k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Typedesign – Prime Four
hannesfritz
42
2.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Speed Design
sergeychernyshev
32
1k
Done Done
chrislema
184
16k
Rails Girls Zürich Keynote
gr2m
95
14k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Transcript
自分用趣味Webアプリを 作っている話 Kanazawa.rb meetup #148 Takayuki Takagi
自己紹介 • Takayuki Takagi (髙木貴之 / ニボシーニョ) • @TAKAyuki_atkwsk /
takayukiatkwsk • SRE @ ZOZO • AWS, Kubernetes, Scala, Ruby, Go, etc. • ビール、餃子、サッカー観戦が好き 2
自分用趣味Webアプリに ついてゆるく話す 3
どんなWebアプリか? • Nidera score viewer(限定公開) ◦ beatmania IIDX(弐寺)の過去スコアをさくっと確認できるもの ◦ ゲーセンにいるときにスマホから見る想定
• 機能一覧 ◦ 楽曲検索 ◦ 楽曲のスコア表示 ◦ 楽曲に対するメモの保存・表示 ◦ 楽曲スコアCSVファイルのアップロード 4
雰囲気を紹介 5
技術要素 • Webフレームワーク: Remix (v2) • CSSフレームワーク: Tailwind CSS •
実行環境: Cloudflare Workers • データベース: Cloudflare D1 6
なぜ作っているのか? • 技術面 ◦ Cloudflareを使ってみたい ◦ Remixを使ってみたい • 実用面 ◦
公式サイトでもスコアの確認はできるが、過去作を通しては不可 ▪ CSVダウンロードできるので、これを保存して集計することになる ◦ 需要を満たすサイトは既にいくつか存在する ◦ 車輪の再発明になるけど、技術的な興味含め作ってみることに 7
作ってみた感想 • 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
作ってみた感想 • ブラウザでJavaScript無効にしても機能する ◦ 普通のWebサイトとして振る舞う ◦ 実装を変えているわけではない ▪ イベントハンドラやReactで状態遷移を伴う何かを実装していれば、それ は機能しないと思われる
◦ Progressive Enhancement | Remix ▪ > JavaScript なしで動作する方法でアプリを構築し、その後 JavaScript を重ねてエクスペリエンスを強化できるということです 9
作ってみた感想 • 1ページに何でも詰め込まない方がいい ◦ 楽曲ページ (/music/:id) の例 ◦ 当初は楽曲のスコアとメモを同居させていた ▪
メモの保存のルーティングとページ再描画がどうにもうまくいかなかっ た(やりようはあるかもしれないが) ◦ ナビゲーションタブを設置して両者を分離した 10
before after 11
作ってみた感想 • 1ページに何でも詰め込まない方がいい ◦ 楽曲ページ (/music/:id) の例 ◦ 当初は楽曲のスコアとメモを同居させていた ▪
メモの保存のルーティングとページ再描画がどうにもうまくいかなかっ た(やりようはあるかもしれないが) ◦ ナビゲーションタブを設置して両者を分離した ◦ 結果 12 ▪ データの流れがシンプルになった ▪ 操作が分かりやすくなった(主観)
さいごに • Remixの良さが少しだけ分かったかもしれない ◦ loaderとactionさえ気にしておけばひとまず良いという安心感 • フルスタックで開発するのは大変だけどおもろい ◦ ページ設計やコンポーネント書くのが新鮮 •
今後やりたいこと ◦ UIの拡充やスコア推移のグラフなど実装したい ◦ デプロイ自動化したい ◦ React Router v7にアップデートしたい 13
以上 ありがとうございました! 14