はじめに
【電子版】NuxtとGoではじめるWebアプリ開発
を購入してお勉強しました。
その中でわからないこと、あいまいだったことを以下にメモとして残します。
Goのチュートリアルを終えた人でWebアプリを作りたい人の参考になると思います。
Go
Go全般
blank import
Go言語のperiod(.) importとblank(_) importについて
インポート宣言は、インポート「する側」と「される側」の依存関係を宣言します。自分自身のパッケージをインポートすること、またはインポートしたパッケージ内でエクスポートされている識別子を一切参照しないことは誤った使い方です。インポートによる副作用(初期化)のためだけにパッケージをインポートするときは、パッケージ名としてブランク識別子を使ってください。
ホットリロード
oxequa/realize
パッケージを使うとできる
ロギング
sirupsen/logrus
パッケージを使うとできる
ORM
jinzhu/gorm
パッケージを使うとできる
一部不評もある↓
Gormが本番テーブルの数億件のデータを消そうとした話
外部ファイルからAPIキーを読み取る
joho/godotenv
パッケージを使うとできる
↓APIキー読み込み方
【Go】.envファイルをGolangでも使用するためのライブラリ「godotenv」
Echo
ログ出力
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
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
e := echo.New()
e.Use(middleware.CORS())
【参考】CORSとは?
なんとなく CORS がわかる...はもう終わりにする。
echo.MiddlewareFunc型
頻繁に使うAPIはecho.MiddlewareFunc型のメソッドとして切り出す
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
}
}
}
func Yobidashimoto() echo.HandlerFunc {
return func(c echo.Context) error {
hs := c.Get("hss").(*xxx.Service)
~~~~
}
}
func main() {
e := echo.New()
e.Use(middlewares.HogeService())
~~~~
JavaScript
JS全般
モジュール
export
use strict
encodeURIComponent()
MDN Web Docs
URLをエンコードしてくれる関数
Vue
スタイルガイド
スコープ付きCSS
Vuex
Nuxt.js
axios
詰まった点
axiosの動作確認をしたところ、以下のようなエラーが発生した。

対処
Nuxt.jsのプロジェクト作成時にaxiosをインストールしたつもりができていなかった。
以下のコマンドでインストール&nuxt.config.js
のmodules
に追記
$ npm add '@nuxtjs/axios'
modules: [
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios',
],
プラグイン
Nuxt.js では JavaScript プラグインを定義することができ、それはルートの Vue.js アプリケーションがインスタンス化される前に実行されます。この機能は、自前のライブラリや外部のモジュールを使用する際にとりわけ有用です。
cookie-universal-nuxt
Nuxt.jsでCookieを使って閲覧したデータを取得する方法
Nuxt.js用のCookieを扱うためのモジュール
Firebase
Firebaseとは?Google社の強みを活かしたメリットや機能をご紹介
認証
フロントエンドから送られてきたjwt_tokenを使っても、バックエンドで認証ができなかった。
firebaseの管理画面から作成した秘密鍵を使えばできたので、間違えて他プロジェクトの秘密鍵を使っていたかも。。
その他
JWT(JSON Web Token)
JSON Web Token(JWT)の紹介とYahoo! JAPANにおけるJWTの活用
JWTとはJSON Web Tokenの略称であり、属性情報(Claim)をJSONデータ構造で表現したトークンの仕様です。
特徴として、署名、暗号化ができ、URL-safeであることなどが挙げられます。発音は"ジョット"です。