Vue.js + TypeScript + GAE/Go で SPA 開発をしている感想

# 自己紹介

Twitter [@mochizukikotaro](https://twitter.com/mochizukikotaro)

普段の仕事は、

- Rails、CakePHP がメイン
- Laravel はこれから入門
- Vue.js、AWS、GCP、k8s、Go は少し触ります

プライベートで、

- SPA の Webアプリケーションを作り中
- 英語勉強中。2019年中に TOEIC 900点をとりたい（615点/2018年）

---

# 構成

今
Vue.js + TypeScript + Go + GAE/Go 1.11

1年前
Vue.js + Vuex + Go + heroku

---

# 変更の理由

- わりと勉強がてらのプロジェクトなので、深い理由はなく。
- TS はみんなが良いっていうから。
- GAE/Go は Go の runtime を動かすだけなら heroku よりカンタンなイメージだから。
- Vuex は前しんどくて、今はつくり直し中でそこまで大きくないから。なので、今後導入する可能性は高い。

---

### Vue.js + TypeScirpt + Vuex 使っている方いたら、感触教えてください :bow: 

---

# 良い点、学んだ点

- TS 気持ちいいい
- GAE/Go へのデプロイが楽
- 開発環境の CORS は vue の proxy で対応

# 困った点

- TS の declaration file がない問題
- GAE/Go のスタンダード環境だとインスタンスに ssh できない（そんな困ってない）
- GAE/Go へのデプロイ `gcloud app deploy` が遅い

---

## 良い点、学んだ点 

---

# TS 気持ちいい

あんまり頑張ってないです。使えるところは使う感じです。
例えば interface 使うので、オブジェクトがどんなものか分かるし、エディタの補完も気持ちいい。

```IUser.vue
<script lang="ts">
export interface IUser {
  ID: number;
  ScreenName: string;
  TwitterID: number;
  ProfileImage: string;
}
</script>
```

interface に対して `I` prefix を使う使わない問題みたいのもあるようですが、ぼくは結論 `I` をつけています。

---

# GAE/Go へのデプロイが楽

```yaml:app.yaml
runtime: go111
```

```
$ gcloud app deploy
```

これだけで、GAE にデプロイができる。

---

# 開発環境の CORS について

開発環境は docker-compose でやっていますので、node(frontend) と go(backend) のコンテナがあります。

```yaml:docker-compose.yml
version: '3'
services:
  golang:
    ports: 
      - "8081:8080"
      ...
  note:
    ports:
      - "8080:8080" 
      ...
```

node は `loalhost:8080` で server は `localhost:8081` で動かしているので、フロントからサーバーへのリクエストで CORS 問題がおきます。

---


# 以前はサーバー側でなんとかしてました 🙄

```go:server.go
e.Use(middleware.CORSWithConfig(middleware.CORSConfig{
	AllowOrigins:     []string{"http://localhost:8080"},
	AllowCredentials: true,
}))
```

---

# 今は vue の proxy で対応 😀

```js:vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://golang:8080'
      }
    }
  }
}
```

これで、 AllowOrigins とか書かなくて済みました。

[Vue CLI 3 Configuration Reference: devServer.proxy](https://cli.vuejs.org/config/#devserver-proxy)

---

## 困った点

--- 
# TS declaration file がない問題

なにかしらのパッケージを使っている状態で `yarn build` などすると現れるエラー。

```js
import Prism from "vue-prism-component";
```

```
$ yarn build
...
Could not find a declaration file for module '...'.
```
---

# PullRequest を見てみると

![スクリーンショット 2019-01-27 13.27.29.png](https://qiita-image-store.s3.amazonaws.com/0/45822/c3a2c7a7-18f4-6339-d753-26b023929982.png)

ちゃんとでています。が、マージはされていません。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/45822/e2729eb5-cb32-0b8f-0425-4633a345b63a.png)

マージされるのを祈るばかり...🙏

---

# 結局どうしたのか

今回使いたかったのは、 [vue-prism-component](https://github.com/egoist/vue-prism-component) というコードハイライターの [Prismjs](https://prismjs.com/) を vue で使いやすくするパッケージでした。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/45822/2d5082b2-d0d1-62ab-8194-9d2786abaefd.png)

なので、vue-prism-component を使わずに直接 Prismjs を使ってごにょごにょしようとおもったのですが...。

なんかうまく動かなかったのでフロントでやるのをやめて、サーバーサイドで対応することにしました 😳

[chroma](https://github.com/alecthomas/chroma): A general purpose syntax highlighter in pure Go

結果、フロントのコンポーネント構成などがスッキリしてよかったです...。

---

# GAE/Go 1.11 の困りごと

- スタンダード環境だと ssh できないけどフレキシブル環境だといけそう（ためしてません）
- gcloud app deploy は普通に遅いと思いますが、 `.gcloudignore` で適切に ignore しておかないと、本当に無駄な時間をすごくことになるとおもいます。（泣きそうでした 😣

```tex:.gcloudignore
frontend/node_modules/
frontend/public/
frontend/src/
vendor/
```

---


# 以上ありがとうございました！

--- 

# 補足（全体のファイル構成）

```bash
$ tree . -L 2
.
├── Gopkg.lock
├── Gopkg.toml
├── README.md
├── app.yaml
├── containers
│   ├── golang
│   └── node
├── db
│   └── db.go
├── docker-compose.yml
├── frontend
│   ├── README.md
│   ├── babel.config.js
│   ├── dist
│   ├── node_modules
│   ├── package.json
│   ├── postcss.config.js
│   ├── public
│   ├── src
│   ├── tsconfig.json
│   ├── vue.config.js
│   ├── yarn-error.log
│   └── yarn.lock
├── handler
│   ├── about.go
│   ├── auth.go
│   ├── note.go
│   └── user.go
├── highlight
│   ├── transform.go
│   ├── transformNote.go
│   ├── transformNote_test.go
│   └── transform_test.go
├── migrations
│   ├── 1812151700_add_users_table.down.sql
│   ├── 1812151700_add_users_table.up.sql
│   ├── 1812160000_add_notes_table.down.sql
│   └── 1812160000_add_notes_table.up.sql
├── model
│   ├── note.go
│   └── user.go
├── repository
│   └── note.go
├── server.go
├── templates
│   └── index.html
└── vendor
    ├── github.com
    └── google.golang.org
```