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
86
自分用趣味アプリを作っている話
Kanazawa.rb meetup #148 のLightning talk資料です。
TAKAyukiatkwsk
December 21, 2024
Tweet
Share
More Decks by TAKAyukiatkwsk
See All by TAKAyukiatkwsk
argo-rolloutsにコミットした話
takayukiatkwsk
0
24
EnvoyのWasm filterを体験する
takayukiatkwsk
0
44
zoxideのご紹介
takayukiatkwsk
0
86
Kanazawa.rbに参加してからのふりかえり
takayukiatkwsk
0
45
git-secretsとgitフックをざっと理解する
takayukiatkwsk
0
320
計測プラットフォームSREチームとシステム障害対応 / measurement platform SRE team's incident response
takayukiatkwsk
0
1.1k
Flutterに入門して体重グラフアプリを作る / Get started Flutter and build a weight graph app
takayukiatkwsk
0
400
リモートワークを振り返る / Look back on remote-working
takayukiatkwsk
0
120
ブログでのアウトプットが減っている件 / What long intervals my blog posts have!
takayukiatkwsk
0
100
Other Decks in Programming
See All in Programming
Java on Azure で LangGraph!
kohei3110
0
130
社内での開発コミュニティ活動とモジュラーモノリス標準化事例のご紹介/xPalette and Introduction of Modular monolith standardization
m4maruyama
1
120
生成AIで日々のエラー調査を進めたい
yuyaabo
0
580
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
irof
1
290
実はすごいスピードで進化しているCSS
hayato_yokoyama
0
110
F#で自在につくる静的ブログサイト - 関数型まつり2025
pizzacat83
0
300
Go Modules: From Basics to Beyond / Go Modulesの基本とその先へ
kuro_kurorrr
0
120
AIネイティブなプロダクトをGolangで挑む取り組み
nmatsumoto4
0
100
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
820
Webからモバイルへ Vue.js × Capacitor 活用事例
naokihaba
0
680
レガシーシステムの機能調査・開発におけるAI利活用
takuya_ohtonari
0
600
データベースコネクションプール(DBCP)の変遷と理解
fujikawa8
1
250
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Site-Speed That Sticks
csswizardry
10
640
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Music & Morning Musume
bryan
46
6.6k
Building Applications with DynamoDB
mza
95
6.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
660
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Unsuck your backbone
ammeep
671
58k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Optimizing for Happiness
mojombo
379
70k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
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