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
2020/11/30 ゆるWeb札幌 ナンプレSPAを vue + TypeScript て...
Search
ysk8hori
November 30, 2020
Programming
0
220
2020/11/30 ゆるWeb札幌 ナンプレSPAを vue + TypeScript で作った話
ysk8hori
November 30, 2020
Tweet
Share
More Decks by ysk8hori
See All by ysk8hori
TypeScript Graph でコードレビューの心理的障壁を乗り越える
ysk8hori
3
1.8k
2023年 認知負荷との戦い
ysk8hori
0
220
Other Decks in Programming
See All in Programming
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
340
定理証明プラットフォーム lapisla.net
abap34
1
670
AHC041解説
terryu16
0
550
Alba: Why, How and What's So Interesting
okuramasafumi
0
240
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
140
DMMオンラインサロンアプリのSwift化
hayatan
0
270
rails newと同時に型を書く
aki19035vc
6
750
BEエンジニアがFEの業務をできるようになるまでにやったこと
yoshida_ryushin
0
260
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
120
ecspresso, ecschedule, lambroll を PipeCDプラグインとして動かしてみた (プロトタイプ) / Running ecspresso, ecschedule, and lambroll as PipeCD Plugins (prototype)
tkikuc
2
2.3k
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
1
200
Scaling your build logic
antalmonori
1
150
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.4k
Rails Girls Zürich Keynote
gr2m
94
13k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Agile that works and the tools we love
rasmusluckow
328
21k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2k
Automating Front-end Workflow
addyosmani
1367
200k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
3
380
Designing for Performance
lara
604
68k
The World Runs on Bad Software
bkeepers
PRO
67
11k
We Have a Design System, Now What?
morganepeng
51
7.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Fireside Chat
paigeccino
34
3.2k
Transcript
ナンプレ SPA を vue + TypeScript で作った話 http://numberp.net/ https://github.com/ysk8hori/n umberplace
ナンプレSPA を vue + TypeScript で作った話
⾃⼰紹介 ホリちゃん(@YSK8_ ) 株式会社LIGHTz フロントエンドエンジニア ナンプレSPA を vue + TypeScript
で作った話
※注意 選んだ盤のサイズが⼤きい場合、⾼い負荷がかかり問題の⽣成に時 間がかかる場合があります。 30 秒ほど待っても問題が⽣成されない場合はブラウザのタブを閉じ るか、戻るボタンやリロードボタンを押下し、初期画⾯に戻りやり 直してください。 負荷が掛かるせいでブラウザの他のタブに影響がないと⾔い切れな いため、作業中のタブがある場合は作業を完了するなどしてから問 題の⽣成を⾏ってください。
ナンプレSPA を vue + TypeScript で作った話
アプリ URL http://numberp.net/ GitHub URL https://github.com/ysk8hor i/numberplace ナンプレSPA を vue
+ TypeScript で作った話
始め⽅ 1. まるい数値のボタンで盤の⼤きさを決める 2. START ボタンを押す 9x9 や10x10 など⼤きめの問題は、⽣成に時 間がかかります。
⽣成中はフリーズしているように⾒えま す。20 秒くらいは待ってください。 待ちきれない場合はブラウザの当該タブを 閉じて最初からお試しください。 ナンプレSPA を vue + TypeScript で作った話
ルール 1〜n の数値を縦・横・太枠の四⾓いエリアの 中で重複しないように埋めていき、全てのマ スを埋められたら成功です。 ナンプレSPA を vue + TypeScript
で作った話
遊び⽅ カーソルの動かし⽅ マスをタップまたはクリック タッチムーブ(画⾯上のどこでもタッチし たまま指を動かすことでカーソルを動かせ ます) キーボードの⽮印キー ナンプレSPA を vue
+ TypeScript で作った話
数値の⼊⼒ 画⾯右下の半⽉状のコントローラの数値を タップ キーボードの数値キー ナンプレSPA を vue + TypeScript で作った話
数値の削除 画⾯右下の半⽉状のコントローラの× をタッ プ キーボードのBackSpace キー ナンプレSPA を vue +
TypeScript で作った話
使った技術 Vue.js 2.x vue-class-component Vuetify Vue Router TypeScript 3.7 〜
tsyringe DI コンテナ ナンプレSPA を vue + TypeScript で作った話
デプロイ環境 ナンプレSPA を vue + TypeScript で作った話
作った経緯 2019/ 夏 何か作りたい(作るの好き) ポートフォリオが欲しかった。 TypeScript の練習がしたかった。 DDD やクリーンアーキテクチャのプログラミングプラクティス の練習をしたかった。
→ ナンプレを解くライブラリを作ってみよう! ナンプレSPA を vue + TypeScript で作った話
2019/10 ゆるゆると作り始める 2019/12 問題を解くロジックが完成 → ⽩紙から解いたら問題を⽣成できるのでは? 2020/1 問題を⽣成するロジックが完成 →UI も作ってみるか〜
2020/2 UI 作って公開 ナンプレSPA を vue + TypeScript で作った話
アーキテクチャ Core とApplication は純粋な TypeScript のクラスで構成 されている(アノテーショ ンのみTSyringe に依存して いる)
データを管理する部分はDI で実装 View は表⽰と⼊⼒受付に徹 する ナンプレSPA を vue + TypeScript で作った話
Core/Application/View 分離のメリ ット① 詳しくは書籍「クリーンアーキテクチャ」参 照のこと! 私の感じたメリット 重要かつ複雑なCore とApplicaiton を扱いや すく作れた
View の都合による変更が⼊り込まない UI を無視し単体で試験 永続化処理部分をMock 化して開発 ナンプレSPA を vue + TypeScript で作った話
Core/Application/View 分離のメリ ット② 決定の遅延 最終的なアプリケーションの形の決定を 遅らせることができる。 Web アプリ?CLI ?API ?
最後に決めた。 RDB に保存?API 越しに保存? 最初に決めたメモリでの保持のままに した。 ナンプレSPA を vue + TypeScript で作った話
課題 ゲームはできるが楽しさややり込み要素が⾜りない もうちょい素敵なコントローラーにしたい Core とApplication とView のプロジェクトを別々にしたい 問題⽣成処理性能改善 レガシーコードからの脱却 テストを書いて無理やり動かしたクソコードと複雑な設計
理解不⾜のDDD プラクティス ナンプレSPA を vue + TypeScript で作った話
学んだこと・経験したこと 複雑なロジックにテストを書いて⽴ち向かう Core 部分が複雑でテストがないと完成させられなかった フロントエンドもクリーンアーキテクチャは有⽤ 決定の遅延 / 開発速度UP / テスト容易性UP
フロントエンドに DDD のプラクティス は有⽤か? 本来はFW を有効利⽤して「表⽰部⇄API 」を実現したい。 ⼤抵の場合はそうならない。表⽰部ドメインの知識をView 部分 意外に持たせた⽅が後々楽になる。 今回のようにフロントエンドで完結するシステムならば有⽤。 ナンプレSPA を vue + TypeScript で作った話