2020/11/30 ゆるWeb札幌 ナンプレSPAを vue + TypeScript で作った話

Transcript

1. ナンプレ SPA を vue + TypeScript で作った話 http://numberp.net/ https://github.com/ysk8hori/n umberplace ナンプレSPA を vue + TypeScript で作った話
2. ⾃⼰紹介 ホリちゃん（@YSK8_ ） 株式会社LIGHTz フロントエンドエンジニア ナンプレSPA を vue + TypeScript で作った話
3. ※注意 選んだ盤のサイズが⼤きい場合、⾼い負荷がかかり問題の⽣成に時 間がかかる場合があります。 30 秒ほど待っても問題が⽣成されない場合はブラウザのタブを閉じ るか、戻るボタンやリロードボタンを押下し、初期画⾯に戻りやり 直してください。 負荷が掛かるせいでブラウザの他のタブに影響がないと⾔い切れな いため、作業中のタブがある場合は作業を完了するなどしてから問 題の⽣成を⾏ってください。 ナンプレSPA を vue + TypeScript で作った話
4. アプリ URL http://numberp.net/ GitHub URL https://github.com/ysk8hor i/numberplace ナンプレSPA を vue + TypeScript で作った話
5. 始め⽅ 1. まるい数値のボタンで盤の⼤きさを決める 2. START ボタンを押す 9x9 や10x10 など⼤きめの問題は、⽣成に時 間がかかります。 ⽣成中はフリーズしているように⾒えま す。20 秒くらいは待ってください。 待ちきれない場合はブラウザの当該タブを 閉じて最初からお試しください。 ナンプレSPA を vue + TypeScript で作った話
6. ルール １〜n の数値を縦・横・太枠の四⾓いエリアの 中で重複しないように埋めていき、全てのマ スを埋められたら成功です。 ナンプレSPA を vue + TypeScript で作った話
7. 遊び⽅ カーソルの動かし⽅ マスをタップまたはクリック タッチムーブ（画⾯上のどこでもタッチし たまま指を動かすことでカーソルを動かせ ます） キーボードの⽮印キー ナンプレSPA を vue + TypeScript で作った話
8. 数値の⼊⼒ 画⾯右下の半⽉状のコントローラの数値を タップ キーボードの数値キー ナンプレSPA を vue + TypeScript で作った話
9. 数値の削除 画⾯右下の半⽉状のコントローラの× をタッ プ キーボードのBackSpace キー ナンプレSPA を vue + TypeScript で作った話
10. 使った技術 Vue.js 2.x vue-class-component Vuetify Vue Router TypeScript 3.7 〜 tsyringe DI コンテナ ナンプレSPA を vue + TypeScript で作った話
11. デプロイ環境 ナンプレSPA を vue + TypeScript で作った話
12. 作った経緯 2019/ 夏 何か作りたい（作るの好き） ポートフォリオが欲しかった。 TypeScript の練習がしたかった。 DDD やクリーンアーキテクチャのプログラミングプラクティス の練習をしたかった。 → ナンプレを解くライブラリを作ってみよう！ ナンプレSPA を vue + TypeScript で作った話
13. 2019/10 ゆるゆると作り始める 2019/12 問題を解くロジックが完成 → ⽩紙から解いたら問題を⽣成できるのでは？ 2020/1 問題を⽣成するロジックが完成 →UI も作ってみるか〜 2020/2 UI 作って公開 ナンプレSPA を vue + TypeScript で作った話
14. アーキテクチャ Core とApplication は純粋な TypeScript のクラスで構成 されている（アノテーショ ンのみTSyringe に依存して いる） データを管理する部分はDI で実装 View は表⽰と⼊⼒受付に徹 する ナンプレSPA を vue + TypeScript で作った話
15. Core/Application/View 分離のメリ ット① 詳しくは書籍「クリーンアーキテクチャ」参 照のこと！ 私の感じたメリット 重要かつ複雑なCore とApplicaiton を扱いや すく作れた View の都合による変更が⼊り込まない UI を無視し単体で試験 永続化処理部分をMock 化して開発 ナンプレSPA を vue + TypeScript で作った話
16. Core/Application/View 分離のメリ ット② 決定の遅延 最終的なアプリケーションの形の決定を 遅らせることができる。 Web アプリ？CLI ？API ？ 最後に決めた。 RDB に保存？API 越しに保存？ 最初に決めたメモリでの保持のままに した。 ナンプレSPA を vue + TypeScript で作った話
17. 課題 ゲームはできるが楽しさややり込み要素が⾜りない もうちょい素敵なコントローラーにしたい Core とApplication とView のプロジェクトを別々にしたい 問題⽣成処理性能改善 レガシーコードからの脱却 テストを書いて無理やり動かしたクソコードと複雑な設計 理解不⾜のDDD プラクティス ナンプレSPA を vue + TypeScript で作った話
18. 学んだこと・経験したこと 複雑なロジックにテストを書いて⽴ち向かう Core 部分が複雑でテストがないと完成させられなかった フロントエンドもクリーンアーキテクチャは有⽤ 決定の遅延 / 開発速度UP / テスト容易性UP フロントエンドに DDD のプラクティス は有⽤か？ 本来はFW を有効利⽤して「表⽰部⇄API 」を実現したい。 ⼤抵の場合はそうならない。表⽰部ドメインの知識をView 部分 意外に持たせた⽅が後々楽になる。 今回のようにフロントエンドで完結するシステムならば有⽤。 ナンプレSPA を vue + TypeScript で作った話