【Vue】Vue＋vuecli+Vuex+Vuetify+TypeScript+ClassComponent+Golang+ginでもろもろやったときの参照文献

プライベートで、タイトル通りの技術を使ってS3をアプリから登録して簡単に閲覧できるビュワーを作成した。

GitHub - pakuyuya/s3-web-browser

最近のWeb技術は独自のスキームが進んでいて追っかけていなかった身としてはなかなか踏み出せなかったが、手を出してみれば、洗練されている上チュートリアルも充実、品質の高いものばかりなのですぐに作れた。

同様な構成を考えている人のために、構築例と参考にしたURLをまとめる。

構成

サーバーサイド
- Golang + シンプルなWebフレームワークgin
- クライアントサイドのコードで生成したhtml、js、cssをpage系のリクエスト処理関数で読み込み表示
- URL に/api/ プリフィクスがついているものはシンプルなWebAPIを提供。クライアントサイドのリソース取得や操作はこれを介する。
- バックにPostgresqlあり。
- S3との接続はAWS CLI
- コード分割は正直下手だとおもう
クライアントサイド
- Vue(フレームワーク) + Typescript(言語) + Vuex(Fluxな処理) + Vuetify(Vueディレクティブ形式のCSS フレームワーク)
- vuecliでテンプレート生成
ビルドスクリプト
- Docker-composeで作成

参考リンクまとめ

Vuecli関連

vuecli公式 Vue CLI

ツールをインストールして動かすまでのガイド。
起動したら対話形式でほしい機能を選んでいくだけ

TypeScript関連

ライブラリを yarn add / npm install したけど型エラーになる

yarn add @types/ライブラリ名 / npm install @types/ライブラリ名 して、インストールできたら tsconfig.json の types にライブラリ名を追記する
できなければ、↓の方法で回避

ウェブエンジニア珍道中 typescriptでnodeのfsを動かそうとしてハマったこと - ウェブエンジニア珍道中

@types/ライブラリ名 がない場合の対処法。

Vue関連

Vue公式ガイドはじめに — Vue.js

だいたいの構文は載っている
基本的な機能は読んでいけばなんとなくわかる
「単一ファイルコンポーネント」の章が実質、実装の手引き

vue-class-component TypeScriptではじめるVueコンポーネント（vue-class-component） - Qiita

VueをTypeScriptのclassスタイルで無理やり実装するようにするコンポーネント
従来の.vueファイルの書き方を大きく変えるため、ググラビリティをちょっと下げる

環境変数ファイル Modes and Environment Variables | Vue CLI

ビルド環境ごとに設定ファイルを変える方法のデファクト
環境変数名に VUE_APP_ を接頭語としてつけないとだめらしい。

Vuex関連

Vuex公式ガイド https://vuex.vuejs.org/ja/guide/

基本的な機能は載っている

vuex-class-component vuex-class-componentを使ってVuexをクラススタイルでタイプセーフに書いてみよう｜ DevelopersIO

VuexをTypeScriptのclassスタイルで無理やり実装するようにするコンポーネント
従来の.vueファイルの書き方を大きく変えるため、ググラビリティをかなり下げる

Qiita https://qiita.com/hikaruna/items/fff8ed49556e659b9a06

実装サンプル記事
大変助かりました。 NewsStore.CreateProxy

Vuetify関連

Vuetify公式Document Material Component Framework — Vuetify.js

すべてが載っている
サンプルはちょっと貧弱

Qiita 【Vue.js】Vuetify と TypeScript を使用した環境を構築してサンプルプロジェクトを立ち上げるまでの手順 - Qiita

type.dがないとかで怒られる事象の解決の参考に。
tsconfig.json のtypes にvuetify追加
vuecliで自動fix対応まだっぽい

Qiita Vue でダッシュボードの雛形を作る最速の道 - Qiita

ダッシュボードなUIの枠組み作成の手順を詳細に公開いただいている記事。
自作ツールの枠組みとして大いに参考にさせていただきました。
Vue 2.xベースで記事が作成されており、現行バージョンのVue 3.xでは廃止されたコンポーネントあり。

iconのCSSでないぞ問題

public/index.html に追加

Golangまとめ

Golangの文法

実践Go言語 - golang.jp
Golangらしくミニマムでかわいい

Go modules

Go Modules - Qiita
npm init のノリでやっとけみたいなやつ

Postgresqlにdatabase/sqlでつなぐ

Go PostgreSQLにつないでみる - Qiita
ORMもないが、データモデルが貧相どころか無なのでシンプルなのした。

gin まとめ

公式兼最強のドキュメント・サンプル

https://github.com/gin-gonic/gin

セッションを扱う用の拡張

https://github.com/gin-contrib/sessions

Cookie based なセッションでstruct設定したら「securecookie: error - caused by: gob: type not registered for interface:」エラーになった

gob：typeがインタフェースに登録されていません：map [string]インタフェース{} - コードログ

作ってみて

Vue
- 数年前からちょいちょい使っている
- 楽でサンプル豊富。
- 色んな機能やツールを導入するのがしんどかったけど、今やvue cli ですべてボイラーテンプレートしてくれる。マジ敷居低い
Vuetify
- Vue版 Bootstrap + jQuery UI。Dialogもサポートしてる。神か
- 最初は「card・・・？caption・・・？」ってなるけど実はルール単純。 CSSを知っていれば、チュートリアルといくつかのサンプルをほいほいコピペしていってすぐ組める
- マジ強力なフレームワークだと思う。
TypeScript
- 使い込むほど「お前やっぱJavaScriptだな？？」ってなって安易な型安全なぞ焼け石に水と知る（jsonとかリクエストパースするやつ、型普通にすり抜けてきて残念な気持ちになる）
- 今回ServerSideをGolangにしたため相互のインタフェースが乖離したことを型で検知できなかったが、Isomorphicにすると違ったのかもね。
Vue class component
- TypeScriptを使うなら、これを導入しない手はない
- JavaScriptベースなVueのチュートリアルとは違った書き方になり、ググラビリティが下がるの注意
Vuex
- 最高
- db-update→reflesh→commit→$store.stateを見てるVue更新の流れを強制できる。コードがすっきり。
- 双方向バインディングがn:mで発生するのを防いでくれる
Vuex class component
- TypeScriptを使うなら、型安全性から導入推奨
- ただ、CreateProxy とかを組み込まなきゃ動かないとか、使い方がピュアなVuexと異なる。乗り越えればなんてことない。
Golang
- 直近１年でちょくちょく触れるようになった
- 手癖殺してとりあえずベストプラクティスに従っていけば「ｱｯｱｯｱｯ」って言いながらGolang道に吸い込まれる。オススメ。タノシイヨ。理想の世界だよ。
- test文化はいい文化。意識すると無駄にモジュール化が進んだり面倒くさいと気づいて作り直すループに入ったり。
- Go modulesでだいぶ楽になった気がする。GOPATHの中に入るやつ、あれちょっとすごかった。
gin
- ミニマリズムとHTTPの極致
- どんな処理も手で実装したいマンとして非常にマッチ
- 例えばログイン認証とかフレームワークで用意しといてよ・・・とかまでリッチな機能が欲しい人は、うーん、Golangじゃなくていいかも・・・。