yuki0920 / go-notes

Go×Nuxt.js製WEBノート

Stats

My Portfolio

https://www.company-ranking.net

• Title(in English): Japan Listed Companies
• Title(in Japanese): 上場企業ランキング
• Description: Website of Japanese listed companies. You can see rankings by sales, profits and salaries by English or Japanese.
• Tech Stack: Ruby, Go, Next.js

go-notes's Issues

CSSをBootstrapに移行する

Goのリクエストからレスポンスの流れをREADMEにまとめる

type,struct,method,interfaceについてREADMEにまとめる

記事にカテゴリー用タグを付けられるようにする

TODO

• テーブル設計
• マイグレーション作成 & 適用
• カテゴリー一覧取得API追加、カテゴリー作成作成API追加
• 記事一覧取得取得API修正、記事取得API修正
• API実装
• フロントエンドライブラリ選定 => Vue Multiselect
• フロントエンド記事編集時カテゴリ紐付け
• フロントエンド記事作成時カテゴリ紐付け
• フロントエンドカテゴリ表示実装(詳細、一覧)

認証が必要なページのリンクを非表示にする

Docker環境を用意する

参考

全般: https://qiita.com/Le0tk0k/items/c2945c260f28f7ee2d47
air: https://teitei-tk.hatenablog.com/entry/2020/12/04/164126

TODO

• DBとの接続
• マイグレーション
• ホットリロード

go-clean-archのコードリーディング

https://github.com/bxcodec/go-clean-arch のコードリーディングをして、設計を改善する

• middleware #106
• handler
• usecase #116
• repository
• domain
• helper

一覧画面ロード時にロードアイコンを追加する

Herokuの起動時間が30秒なため、現行だと記事がまったくないように見えるため

ログイン状態の有無を取得できるエンドポイント追加

各ページにnuxt-linkで移動できるようにする

バリデーションを追加する

エラーのログ出力をする

エラー時に発生箇所と呼び出し元のどちらでログを出力するのが良いか調べて追加してみる

DB作成,テーブル作成,マイグレーション適用を自動化する

NOTE

• DB作成: init.sqlで対応
• マイグレーション適用はmakefileを定義し、コンテナ実行時にmakeを叩くようにした

全体のレイアウト調整

• ヘッダー・フッターの色
• フッターの位置を下部に固定する
• fontawesomeのアイコンをBootstrap Iconに置き換える
• aタグをnuxt-linkに変更
• 外部サイトのaタグを別タブで開くようにする

ログをカスタマイズする

時間表示できたら便利そう
https://echo.labstack.com/guide/customization/

フロントをNetlifyにホストする

• URL: https://nuxtjs.org/ja/integrations/deployments/netlify#nuxt-%E3%82%92-netlify-%E3%81%A7%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E3%81%99%E3%82%8B

Herokuにコンテナをデプロイする

• Herokuのアプリを作成する
• APIディレクトリをデプロイする
• 環境変数を追加する
• DBにMySQLを指定する
• DB作成、マイグレーションをする

参考

デプロイ関連

• https://devcenter.heroku.com/ja/articles/getting-started-with-go?singlepage=true#-4
• https://qiita.com/sunnyG/items/95f61a39ca3303a6c85f
• https://qiita.com/pokotyan/items/51f28eae698c3f7b4d8c#dockerfile

環境変数定義

• https://shi-mo-web.com/golang/gogodotenv-environment-setting-file/

dependabotでパッケージを自動アップデートする

記事とユーザーを関連づける

APIに関わるファイルを`/api`に移動する

全体のレイアウト調整

• 赤、青のボタンを無職にする
• 背景をグレーからホワイトにする

既存機能をテンプレートエンジンからNuxtに移行する

TODO

• 詳細画面
• 編集画面
• 一覧画面
• レイアウト調整

APIサーバーを追加する

JSONを返すAPIを追加する

参考

Createのハンドラ: #24
Index, Delete: #27
JSONからStructへの変換: https://mholt.github.io/json-to-go/
チュートリアル: https://qiita.com/K-juju/items/f6d0eedb9aee5714cb73

GitHub Actionsでテストを自動実行する

参考

• https://qiita.com/x-color/items/f60025c20a547a7355b5

並び順をドラッグ&ドロップで変えられるようにする

参考

• https://reffect.co.jp/vue/trello-drag-drop-clone

ログアウト用のエンドポイント追加

認証追加により落ちたテストを直す

DBをモックしてリクエスト、レスポンスのテストをする

現状handelrはrepositoriyをimportして使っているため、repositoryをモックしづらい(できない?)状況にある。
各リポジトリの役割、設計を見直し、テスタビリティを高めたい

残TODO

• api/v2/articles/:id のテストを追加する https://qiita.com/ogady/items/34aae1b2af3080e0fec4

TODO

• https://github.com/bxcodec/go-clean-arch のコードリーディングで各レイヤーのテスト方法確認
• https://qiita.com/ogady/items/34aae1b2af3080e0fec4

画像のアップロードを追加する

クリーンアーキテクチャでエンドポイントを追加してみる

• エンドポイント /api/v2/articles/:id でやってみる

本番環境に記事を用意する

ドメインをFakerでモックする

ref: github.com/bxcodec/faker

APIの既存実装削除

/API に使用しないエンドポイント、HTML,JS,CSS,が残っているので削除する

削除可能なハンドラ

ArticleIndex
ArticleNew
ArticleShowData
ArticleEdit
ArticleUpdateData
ArticleSample

認証用エンドポイントのHandlerリファクタリング

APIにCORSの制限を追加する

認証用エンドポイントのリファクタリング

クリーンアーキテクチャに則ってリファクタ
下位レイヤーからテストを書いていく

• domain/repository
• usecase
• handler
• main, injector

CORSの設定を追加する

参考

• https://echo.labstack.com/middleware/cors/
• https://echo.labstack.com/cookbook/cors/
• https://qiita.com/sola-msr/items/828e2eb45cf05b1a2ad4

記事作成・更新・削除に認証を追加する

参考

• https://echo.labstack.com/middleware/jwt/
• https://github.com/yuki0920/company_board_back/search?q=jwt

モデル

# paswordはハッシュ化したバイト列のためjson,dbにマッピングしない
type User struct {
	Id        uint   `json:"id" db:"id"`
	Name     string `json:"name" db:"name"`
	Password  []byte `json:"-"`
}

エンドポイント

Method	URL	Parameter	Response	説明
GET	/user	Authorization	ユーザ名を返す	ユーザ情報を返す

Method	URL	Body	Response	説明
POST	/login	id, password	Tokenを返す	ログインを行う

JWTのトークン(Claim)

カスタムせず、既存のを使う

• name: ユーザー名
• exp: 有効期限

TODO

タスク1

• JWT認証に関するフローをREADMEにまとめる
• ユーザー情報保存用のテーブルを生成する
• ユーザー用のサンプルデータを生成する
• ユーザーの検証用のログイン用のエンドポイントを追加する

タスク2

• ログイン用のエンドポイントでJWTを生成し返すようにする
• ユーザー情報取得用のエンドポイントを用意する
• ログアウト用のエンドポイントでJWTを破棄する
• ログイン画面追加

フロントエンドNuxt.js化の課題点洗い出し

• マークダウン記法の対応 Remarkable

ホットリロードできるようにする

d60d211

リクエスト、レスポンスのテストを追加する

参考

• https://echo.labstack.com/guide/testing/
• https://github.com/xesina/golang-echo-realworld-example-app/blob/2afa470f1b1d0f28cdb589170826075f372cf1ee/handler/user_test.go
• アサーション用マッチャー https://pkg.go.dev/github.com/stretchr/testify/assert#JSONEq

記事のCodeをハイライトさせる

Go Moduleを導入する

Nuxt.jsを導入する

OpenAPI Genでコードを生成する

デバッグ環境を用意する

DBと接続する

seedデータを用意する

レイアウトを整える