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
190
2020/11/30 ゆるWeb札幌 ナンプレSPAを vue + TypeScript で作った話
ysk8hori
November 30, 2020
Tweet
Share
More Decks by ysk8hori
See All by ysk8hori
2023年 認知負荷との戦い
ysk8hori
0
110
Other Decks in Programming
See All in Programming
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
260
Git Rebase
bkuhlmann
11
1.6k
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
230
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
810
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.4k
Elm Form Validation
bkuhlmann
0
510
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
400
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
430
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
540
GitHub Copilotのススメ
marcy731
1
200
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
960
Featured
See All Featured
How to Ace a Technical Interview
jacobian
272
22k
Agile that works and the tools we love
rasmusluckow
325
20k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.6k
GitHub's CSS Performance
jonrohan
1025
450k
A Tale of Four Properties
chriscoyier
151
22k
Optimising Largest Contentful Paint
csswizardry
8
2.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
25
2.3k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
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 で作った話