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
240
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
2.2k
2023年 認知負荷との戦い
ysk8hori
0
250
Other Decks in Programming
See All in Programming
XSLTで作るBrainfuck処理系
makki_d
0
210
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
210
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
410
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.3k
生成AIで日々のエラー調査を進めたい
yuyaabo
0
650
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
46
30k
Team operations that are not burdened by SRE
kazatohiei
1
210
Is Xcode slowly dying out in 2025?
uetyo
1
190
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
400
Java on Azure で LangGraph!
kohei3110
0
170
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
510
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
390
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
694
190k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
940
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
210
Become a Pro
speakerdeck
PRO
28
5.4k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
For a Future-Friendly Web
brad_frost
179
9.8k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Agile that works and the tools we love
rasmusluckow
329
21k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
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 で作った話