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
110
自分用趣味アプリを作っている話
Kanazawa.rb meetup #148 のLightning talk資料です。
TAKAyukiatkwsk
December 21, 2024
Tweet
Share
More Decks by TAKAyukiatkwsk
See All by TAKAyukiatkwsk
Claude Codeと共に構成図を作る
takayukiatkwsk
0
17
argo-rolloutsにコミットした話
takayukiatkwsk
0
40
EnvoyのWasm filterを体験する
takayukiatkwsk
0
48
zoxideのご紹介
takayukiatkwsk
0
96
Kanazawa.rbに参加してからのふりかえり
takayukiatkwsk
0
50
git-secretsとgitフックをざっと理解する
takayukiatkwsk
0
340
計測プラットフォームSREチームとシステム障害対応 / measurement platform SRE team's incident response
takayukiatkwsk
0
1.1k
Flutterに入門して体重グラフアプリを作る / Get started Flutter and build a weight graph app
takayukiatkwsk
0
420
リモートワークを振り返る / Look back on remote-working
takayukiatkwsk
0
130
Other Decks in Programming
See All in Programming
A Gopher's Guide to Vibe Coding
danicat
0
170
ソフトウェアテスト徹底指南書の紹介
goyoki
1
110
State of CSS 2025
benjaminkott
1
120
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
3
1.2k
Introduction to Git & GitHub
latte72
0
120
学習を成果に繋げるための個人開発の考え方 〜 「学習のための個人開発」のすすめ / personal project for leaning
panda_program
1
110
パスタの技術
yusukebe
1
400
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
kfujikawa
0
1k
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
110
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
730
KessokuでDIでもgoroutineを活用する / Go Connect #6
mazrean
0
120
ワープロって実は計算機で
pepepper
2
1.4k
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Site-Speed That Sticks
csswizardry
10
790
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
Designing Experiences People Love
moore
142
24k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
183
54k
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