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
210
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.7k
2023年 認知負荷との戦い
ysk8hori
0
210
Other Decks in Programming
See All in Programming
月刊 競技プログラミングをお仕事に役立てるには
terryu16
1
1.2k
htmxって知っていますか?次世代のHTML
hiro_ghap1
0
410
Kaigi on Railsに初参加したら、その日にLT登壇が決定した件について
tama50505
0
140
shadcn/uiを使ってReactでの開発を加速させよう!
lef237
0
280
Запуск 1С:УХ в крупном энтерпрайзе: мечта и реальность ПМа
lamodatech
0
920
ChatGPT とつくる PHP で OS 実装
memory1994
PRO
3
170
20年もののレガシープロダクトに 0からPHPStanを入れるまで / phpcon2024
hirobe1999
0
1k
Findy Team+ Awardを受賞したかった!ベストプラクティス応募内容をふりかえり、開発生産性向上もふりかえる / Findy Team Plus Award BestPractice and DPE Retrospective 2024
honyanya
0
140
Fibonacci Function Gallery - Part 1
philipschwarz
PRO
0
270
良いユニットテストを書こう
mototakatsu
11
3.5k
Compose UIテストを使った統合テスト
hiroaki404
0
130
Внедряем бюджетирование, или Как сделать хорошо?
lamodatech
0
910
Featured
See All Featured
Building an army of robots
kneath
302
44k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Raft: Consensus for Rubyists
vanstee
137
6.7k
Building Your Own Lightsaber
phodgson
104
6.2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.2k
Facilitating Awesome Meetings
lara
50
6.2k
The Invisible Side of Design
smashingmag
299
50k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
29
2.1k
For a Future-Friendly Web
brad_frost
176
9.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.4k
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 で作った話