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
250
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.3k
2023年 認知負荷との戦い
ysk8hori
0
280
Other Decks in Programming
See All in Programming
Design Foundational Data Engineering Observability
sucitw
3
200
Testing Trophyは叫ばない
toms74209200
0
890
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
560
Deep Dive into Kotlin Flow
jmatsu
1
370
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.9k
スケールする組織の実現に向けた インナーソース育成術 - ISGT2025
teamlab
PRO
2
170
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
170
旅行プランAIエージェント開発の裏側
ippo012
2
930
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.5k
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
550
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
BBQ
matthewcrist
89
9.8k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Producing Creativity
orderedlist
PRO
347
40k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Fireside Chat
paigeccino
39
3.6k
Done Done
chrislema
185
16k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Thoughts on Productivity
jonyablonski
70
4.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
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 で作った話