脱Go初心者のためにGoとNuxt.jsでWebアプリ開発してみた

# はじめに
[【電子版】NuxtとGoではじめるWebアプリ開発](https://project-aiiro.booth.pm/items/1576346)
を購入してお勉強しました。
その中でわからないこと、あいまいだったことを以下にメモとして残します。
Goのチュートリアルを終えた人でWebアプリを作りたい人の参考になると思います。

# Go
## Go全般
### blank import
[Go言語のperiod(.) importとblank(_) importについて](https://qiita.com/shiena/items/c1ac3192af3b00f413ac)
>インポート宣言は、インポート「する側」と「される側」の依存関係を宣言します。自分自身のパッケージをインポートすること、またはインポートしたパッケージ内でエクスポートされている識別子を一切参照しないことは誤った使い方です。インポートによる副作用(初期化)のためだけにパッケージをインポートするときは、パッケージ名としてブランク識別子を使ってください。

### ホットリロード
`oxequa/realize`パッケージを使うとできる

### ロギング
`sirupsen/logrus`パッケージを使うとできる

### ORM
`jinzhu/gorm`パッケージを使うとできる
一部不評もある↓
[Gormが本番テーブルの数億件のデータを消そうとした話](https://scrapbox.io/keroxp/Gorm%E3%81%8C%E6%9C%AC%E7%95%AA%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%81%AE%E6%95%B0%E5%84%84%E4%BB%B6%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E6%B6%88%E3%81%9D%E3%81%86%E3%81%A8%E3%81%97%E3%81%9F%E8%A9%B1)

### 外部ファイルからAPIキーを読み取る
`joho/godotenv`パッケージを使うとできる

↓APIキー読み込み方
[【Go】.envファイルをGolangでも使用するためのライブラリ「godotenv」](https://qiita.com/sola-msr/items/fb7d6889d7bd7a6705d0)

## Echo
### ログ出力
https://echo.labstack.com/middleware/logger

```go
e := echo.New()
e.Use(middleware.Logger())
```

```:ログのイメージ
$ go run .

   ____    __
  / __/___/ /  ___
 / _// __/ _ \/ _ \
/___/\__/_//_/\___/ v3.3.10-dev
High performance, minimalist Go web framework
https://echo.labstack.com
____________________________________O/_______
                                    O\
⇨ http server started on [::]:8080
{"time":"2020-05-16T10:26:01.4460558+09:00","id":"","remote_ip":"::1","host":"localhost:8080","method":"GET","uri":"/","user_agent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36","status":404,"error":"code=404, message=Not Found","latency":0,"latency_human":"0s","bytes_in":0,"bytes_out":24}
```

### Context
https://echo.labstack.com/guide/context

> echo.Context represents the context of the current HTTP request. It holds request and response reference, path, path parameters, data, registered handler and APIs to read request and write response. As Context is an interface, it is easy to extend it with custom APIs.

### CORS
https://echo.labstack.com/middleware/cors

```go
e := echo.New()
e.Use(middleware.CORS())
```

【参考】CORSとは？
[なんとなく CORS がわかる...はもう終わりにする。](https://qiita.com/att55/items/2154a8aad8bf1409db2b)

### echo.MiddlewareFunc型
頻繁に使うAPIはecho.MiddlewareFunc型のメソッドとして切り出す

```go:hoge_middleware.go
package middlewares

func HogeService() echo.MiddlewareFunc {
	return func(next echo.HandlerFunc) echo.HandlerFunc {
		return func(c echo.Context) error {
			service, err := *xxx.Service型のメソッド
			c.Set("hs", service)
			if err := next(c); err != nil {
				return err
			}
			return nil
		}
	}
}
```

```go:呼び出し元.go
func Yobidashimoto() echo.HandlerFunc {
	return func(c echo.Context) error {
		hs := c.Get("hss").(*xxx.Service)
		~~~~
	}
}
```

```go:main.go
func main() {
    e := echo.New()
    e.Use(middlewares.HogeService())
    ~~~~
```

# JavaScript
## JS全般
### モジュール
[JAVASCRIPT.INFO](https://ja.javascript.info/modules-intro)

### export
[MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/export)

### use strict
[【JavasScript】use strictとは](https://qiita.com/miri4ech/items/ffcebaf593f5baa1c112)

### encodeURIComponent()
[MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent)
URLをエンコードしてくれる関数

## Vue
### スタイルガイド
[スタイルガイド - Vue.js](https://jp.vuejs.org/v2/style-guide/index.html)

### スコープ付きCSS
[Vue Loader](https://vue-loader-v14.vuejs.org/ja/features/scoped-css.html)

## Vuex
[Vuexとは何か？ - Vuex公式](https://vuex.vuejs.org/ja/)

## Nuxt.js
### axios
#### 詰まった点
axiosの動作確認をしたところ、以下のようなエラーが発生した。

<img width="1040" alt="err_axios.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113263/5ae1c829-e7e0-7ae1-a797-5c05a670db03.png">

#### 対処
Nuxt.jsのプロジェクト作成時にaxiosをインストールしたつもりができていなかった。
以下のコマンドでインストール＆`nuxt.config.js`の`modules`に追記

```
$ npm add '@nuxtjs/axios'
```

```js:nuxt.config.js
 modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
  ],
```

### プラグイン
[プラグイン - NuxtJS](https://ja.nuxtjs.org/guide/plugins/)

> Nuxt.js では JavaScript プラグインを定義することができ、それはルートの Vue.js アプリケーションがインスタンス化される前に実行されます。この機能は、自前のライブラリや外部のモジュールを使用する際にとりわけ有用です。

### cookie-universal-nuxt
[Nuxt.jsでCookieを使って閲覧したデータを取得する方法](https://qiita.com/sauzar18/items/6eb3fe0218e3cf6badbc)

> Nuxt.js用のCookieを扱うためのモジュール

# Firebase
[Firebaseとは？Google社の強みを活かしたメリットや機能をご紹介](https://udemy.benesse.co.jp/development/web/what-is-firabase.html)

## 認証
フロントエンドから送られてきたjwt_tokenを使っても、バックエンドで認証ができなかった。
firebaseの管理画面から作成した秘密鍵を使えばできたので、間違えて他プロジェクトの秘密鍵を使っていたかも。。

# その他
## JWT(JSON Web Token)
[JSON Web Token（JWT）の紹介とYahoo! JAPANにおけるJWTの活用](https://techblog.yahoo.co.jp/advent-calendar-2017/jwt/)

> JWTとはJSON Web Tokenの略称であり、属性情報（Claim）をJSONデータ構造で表現したトークンの仕様です。
特徴として、署名、暗号化ができ、URL-safeであることなどが挙げられます。発音は"ジョット"です。