7
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2020-05-22

はじめに

【電子版】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型のメソッドとして切り出す

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
func Yobidashimoto() echo.HandlerFunc {
	return func(c echo.Context) error {
		hs := c.Get("hss").(*xxx.Service)
		~~~~
	}
}
main.go
func main() {
    e := echo.New()
    e.Use(middlewares.HogeService())
    ~~~~

JavaScript

JS全般

モジュール

JAVASCRIPT.INFO

export

MDN Web Docs

use strict

【JavasScript】use strictとは

encodeURIComponent()

MDN Web Docs
URLをエンコードしてくれる関数

Vue

スタイルガイド

スタイルガイド - Vue.js

スコープ付きCSS

Vue Loader

Vuex

Vuexとは何か? - Vuex公式

Nuxt.js

axios

詰まった点

axiosの動作確認をしたところ、以下のようなエラーが発生した。

err_axios.PNG

対処

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

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

プラグイン

プラグイン - NuxtJS

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であることなどが挙げられます。発音は"ジョット"です。

7
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?