Nuxt + TypeScriptで
個人アプリを作って
得られたTips
v-sapporo MeetUp #2
2019.9.6.Fri 山田 典明
![](https://s3.amazonaws.com/media-p.slid.es/uploads/834715/images/4714381/ojin.jpg)
パンセのwebサイトにツッコミを入れることを勤しんでおります
@noliaki
![](https://s3.amazonaws.com/media-p.slid.es/uploads/834715/images/6468973/GitHub-Mark-Light-120px-plus.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/834715/images/6468977/Twitter_Social_Icon_Circle_Color.png)
話すこと
-
何を作ったの?
-
なんで作ったの?
-
使ってる技術
-
サーバーサイド
-
クライアントサイド
-
-
Tips
-
まとめ
何を作ったの?
なんで作ったの?
こんなアプリを
作ってみたかったから
こんな技術を
使ってみたかったから
-
Dockerで開発環境を構築したかった
-
Nuxtのサーバーサイドのスクリプトを書きたかった
-
DBと連携させたかった
使ってる技術
TypeScript
Nuxt
サーバーサイド
-
express
-
Socket.io
-
TypeORM
-
MariaDB
-
ImageMagick
クライアントサイド
-
Socket.io-client
-
tailwindcss
アプリの起動は
ts-nodeを使用して
起動しています
Tips
docker遅い
-
最初、alpine Linuxにnode、ImageMagickをインストールしてNuxtを起動させていたが、起動も変更検知も色々遅いので開発体験は良いものではなかった
-
dockerはmariaDBのコンテナだけ起動させて、nodeとImageMagickはMacにインストールして開発した
pathが解決できない
![](https://s3.amazonaws.com/media-p.slid.es/uploads/834715/images/6491334/Screen_Shot_2019-08-30_at_22.27.24.png)
tsconfig.jsonで
こんな感じに設定してあげれば
こんな感じで読み込めるはず
![](https://s3.amazonaws.com/media-p.slid.es/uploads/834715/images/6491359/Screen_Shot_2019-08-30_at_22.33.18.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/834715/images/6491351/Screen_Shot_2019-08-30_at_22.25.17.png)
\(^o^)/
![](https://s3.amazonaws.com/media-p.slid.es/uploads/834715/images/6491376/Screen_Shot_2019-08-30_at_22.37.05.png)
issue発見
![](https://s3.amazonaws.com/media-p.slid.es/uploads/834715/images/6491381/Screen_Shot_2019-08-30_at_22.39.39.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/834715/images/6491385/Screen_Shot_2019-08-30_at_22.40.34.png)
-r tsconfig-paths/register ってオプションを付与して起動で解決
tsconfigのmoduleが
サーバーと
クライアントで
違う
サーバーサイドはcommonjsで
クライアントサイドはesnextで
コンパイルしたい
![](https://s3.amazonaws.com/media-p.slid.es/uploads/834715/images/6497480/Screen_Shot_2019-09-02_at_21.51.03.png)
怒られる
-
サーバーサイド用、クライアントサイド用でtsconfigを分けることも考えた
-
でも、moduleのみ変更したいだけなんだよなぁ…
-
と思って、いろいろ調べてたら
![](https://s3.amazonaws.com/media-p.slid.es/uploads/834715/images/6497492/Screen_Shot_2019-09-02_at_21.56.43.png)
あった
Nuxtの起動コマンドは
TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' ts-node -r tsconfig-paths/register ./server/index.ts
こんな感じになった
サーバーサイドのスクリプトも
保存したら
Nuxtを再起動させたい
Nuxtはnodemonを使って
nodeを走らせてる
今回はTypeScriptで
書いてるので、
TypeScriptを走らせる
nodemon.json
{
"watch": ["server", "./nuxt.config.ts", "src/serverMiddleware"],
"ext": "ts",
"env": {
"TS_NODE_COMPILER_OPTIONS": "{\"module\":\"commonjs\"}"
},
"exec": "ts-node -r tsconfig-paths/register ./server/index.ts"
}
これでサーバーサイドも
保存したらNuxtが
再起動される✌️
vuexの型
-
Nuxtってかvuexの型について結構色々苦労話が多い印象
-
いろんな方法で何とかしようと思ったが、とりあえず完成までやりたかったので、ものすごく雑な方法でなんとかした
export interface State {
socketId?: string
roomName?: string
status: Status
stream?: MediaStream
selectedFrameIndex?: number
paused: boolean
decided: boolean
animationFileName?: string
videoScreenCanvas: HTMLCanvasElement | null
}
src/store/signage.ts
import Vue from 'vue'
if (!('$signage' in Vue.prototype)) {
Object.defineProperty(Vue.prototype, '$signage', {
get(this: Vue) {
return this.$store.state.signage
}
})
}
if (!('$controller' in Vue.prototype)) {
Object.defineProperty(Vue.prototype, '$controller', {
get(this: Vue) {
return this.$store.state.controller
}
})
}
src/plugins/inject.ts
import Vue from 'vue'
import * as Signage from '@/store/signage'
import * as Controller from '@/store/controller'
declare module 'vue/types/vue' {
interface Vue {
$signage: Signage.State
$controller: Controller.State
}
}
@types/nuxt.d.ts
![](https://s3.amazonaws.com/media-p.slid.es/uploads/834715/images/6497629/Screen_Shot_2019-09-02_at_22.28.12.png)
余談
注: @hiro_41さんの
パクリです🙇♂️
-
アプリを作ってる途中で3Dに出来ねーかなーって思った
-
すぐ思いつかなかったので、とりあえずいいやってなってた
![](https://s3.amazonaws.com/media-p.slid.es/uploads/834715/images/6497754/Screen_Shot_2019-09-02_at_22.57.05.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/834715/images/6497762/20100526181137592.png)
深度マップさえ自動生成出来れば何とかなりそう
ごめんなさい、Reactで作りました
(最近Reactにもハマってて)
-
Tensorflow.jsを使って人物(の部位)を検出
-
そこを白っぽくしてあとは黒っぽくしただけ
-
たぶん、深度マップを生成するモデルは存在するはず
-
でも機械学習全然わかってないので、どうやって利用すれば良いかもわかってない
-
→ 勉強あるのみ
-
まとめ
と
個人制作のすすめ
-
フロントエンドの開発に限って言えばDockerを使うまでもないかな
-
TypeScriptにすることで、躓くことがまぁまぁある
-
型の恩恵を受けれるのは、やっぱりすばらしい
-
昔から母親に「かたづけなさい!!」って言われてた意味がようやく身を持ってわかった
-
サーバー、クライアントサイドとNuxtに全部突っ込んだけど、これはこれで便利なんだけど、規模が拡大していくようなものには不向きだと思った
-
例えばフロントエンドでNuxtよりも最適なフレームワークが出てきた場合、Nuxtから乗り換えることが結構たいへんになる
-
-
ちょうどNuxt2.9が出たので、試してみたら動かなくなった
-
たぶん、サーバーサイドのスクリプトのせいだと思う
-
サーバーサイドのスクリプトを書いていないNuxt案件は2.9でもすんなり動いたので…
-
-
新たな目標が見つかる
-
テスト書く
-
機械学習について勉強してみる
-
-
実際に手を動かしてみないと見えてこない問題がわかる
ご静聴
ありがとうございました
deck
By noliaki
deck
- 1,417