notwo commented 1 year ago

TypeScript同様にわからないことが多いのでここにまとめていく コードレベルで何かやるわけではないのでプルリクなし

VueJSについて

簡単な例で始めるVue3でTypeScript入門にある通りVueJSはVue3を基本とし、TypeScript記述が基本となるこれまでのVueJSや研修時点での知識がそのまま使えるか怪しいため、ある程度体系化して書き方を整理する必要がある

全体の作りとしてはvue/dist/vue.esm.js って何~【とりあえず動くからいいや】からの卒業~に倣ってhtml, js, vueを分けて書くのが良い

notwo commented 1 year ago

typescriptのStructural SubtypingについてはTypescript の Structural Subtypingを参照

Genericsについては【TypeScript】Generics(ジェネリックス)を理解するを参照

VueJS+TypeScriptについては[【2021年版】Vue.js + TypeScriptの開発スタイル](https://tech-blog.rakus.co.jp/entry/20210901/frontend)を参照本件ではObject Styleで書くことになりそう

notwo commented 1 year ago

VueJSについて(2)

よくチュートリアルで実行させるコマンドnpm init vue@latestはサーバ側での処理を含めたプロジェクトを生成するものであり、そこで構成されるディレクトリはmustではなく、あくまで見やすくするためにそうしているだけ →自分で個別にVueファイル等を使う場合はこのディレクトリ構成に従う必要はない。 →→ただし後で見てわかりやすいようにcomponents等は専用のディレクトリを用意してそこに配置すべきだとは思う

また、チュートリアルではよくnpm run devでサーバを立ち上げてVueJSのトップ画面を表示している。一見VueJSがまるでサーバ開発言語のように見えるが、実際にはただのJSフレームワークであり、これ自体がサーバ上で動く言語とは言えないはず。どっちかと言うとNode.jsがそれの役割を担っていて(npmコマンドがその証拠)、Node.jsとAWS Lambdaでサーバレスアプリを作成できる。

notwo commented 1 year ago

AltJSについて AltJSの選び方フローチャート VueJSを形作っているTypeScriptも、AltJSの一つ

notwo commented 1 year ago

Vue2とVue3

【Vue 3】Vue 2との違いについてで述べられている主にViteというビルドツールが使えるようになったこと、Composition APIが使えるようになったことが大きい
Vue3は2022/2以降にデフォルトになり、Vue2は2023いっぱいでサポート終了する→今後はVue3で書く必要がある
ネット上では古い記事だとVue2前提で書かれているので、1年以内の条件で検索するのはmust

Viteについて

Viteとは何なのかを参照高速ビルドが可能な次世代ビルドツールらしい

参考：Vue3とViteで作られた初期状態のサイト↓ localhost_5173_

JSXについて

JSの記述の中でHTMLを記述できるぶっちゃけ使わなくても良さげ

notwo commented 1 year ago

IDEどうするか問題

Django(Python)ならPyCharm1択なんだが、さすがにJSやCSSの記述はVSCodeに軍配が上がるというわけで、JS/CSSはVSCode、それ以外はPyCharmを使う。同時に立ち上げてPCの負荷が酷いことになるとは思えないので。

notwo commented 1 year ago

そういえばなんでReactじゃないのか？

Reactを使うとなぜjQueryが要らなくなるのかにあるような複雑な処理を本アプリではやらない予定だから
単に学習してスキルをつけておきたかったからまあぶっちゃけ後者が9割。TypeScriptも一緒にできますよ、って言いたいからね

notwo commented 1 year ago

VueJS学習がめんどすぎるので愚痴ったでも記事書きながら調べたりしたおかげでちょっと頭の中が整理された✌

notwo commented 1 year ago

VueJSについて(3)

CDNを利用する場合とcreate-vueで作成する場合でビルド方法が異なる。本サービスは前者想定のためViteは使わない

ESMビルドとは

vue/dist/vue.esm.js って何~【とりあえず動くからいいや】からの卒業~を参照紹介されてるコードはなんとなくVue2の書き方っぽいけど、概念は変わっていないだろうからそのまま信用して良さそう esmは完全ビルドを指す

ランタイムビルドのみの方が速いが、本サービスでは全体のコード量が多くなるわけでもなさそうなので、ぶっちゃけどっちもでいい。書きやすい方に合わせるのが吉

notwo commented 1 year ago

Pureなjsのイベント関連

HTMLButtonElementを参照

notwo commented 1 year ago

SFCについて

単一ファイルコンポーネントというらしい .vueの拡張子がついてるやつがそうこれはそのままでは.tsと違いTypecriptファイルとみなされないそれを解決するのがshims-vue.d.tsというファイル(参考：TypeScriptでVue.jsを書く – Vue CLIを使った開発のポイントを紹介)

notwo commented 1 year ago

VSCode上でのVueJS開発

Vue.js開発で役に立つVSCode拡張機能を元に拡張機能を入れる

notwo commented 1 year ago

Node.jsのnpmを使ったインストールについて

npmまとめ！を参照ローカルインストールとグローバルインストールがある現状は以下のようになっている

$ npm list
youknow@1.0.0 C:\Users\07k11\Desktop\work\youknow
└── typescript@5.1.6

$ npm list -g
C:\Users\07k11\AppData\Roaming\npm
└── npm@9.8.1

npm initから作ったスケルトンは以下

$ npm ls
vue-ts-test@0.0.0 C:\Users\07k11\Desktop\work\vue-ts-test
├── @vitejs/plugin-vue@4.2.3
├── eslint-plugin-vue@9.16.1
├── eslint@8.46.0
├── vite@4.4.8
└── vue@3.3.4

$ npm ls -g
C:\Users\07k11\AppData\Roaming\npm
└── npm@9.8.1

どちらも必要なパッケージをローカルインストールしている。node_modulesはルートディレクトリにあるし

notwo commented 1 year ago

(おさらい)VueJSのインストール方法

Vue.jsのインストール（ダウンロード・NPM・CDN）を参照本件ではCDN形式を取っている。チュートリアルだとnpm前提のものが多すぎてCDNだと開発しづらい問題 TypeScriptも使うんだから結局npmは必要なんだけど、VueJSもそっちで使えばよかったか？ →CDN経由でうまくいかないならnpm installしてpackage.jsonに含めるかもしれない

notwo commented 1 year ago

Vueをnpmインストールする

CDNだとSFCが使えないって書いてあったわ^^^^^^^^^^^^^^

というわけで…

Vue.js3でSFC（単一ファイルコンポーネント）を使う環境の構築を元に環境構築

# ルートディレクトリで
$ npm install vue@next
npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead

added 21 packages, and audited 23 packages in 4s

2 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

$ npm install @vue/compiler-sfc

added 10 packages, changed 3 packages, and audited 33 packages in 1s

2 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

$ npm install vue-style-loader

added 7 packages, and audited 40 packages in 1s

3 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

$ npm install vue-loader@16.1.2

added 10 packages, and audited 50 packages in 2s

5 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

# モジュールが入ったか確認
$ cat package.json
{
  "name": "youknow",
  "version": "1.0.0",
  "description": "記法は[基本的な書き方とフォーマットの構文](https://docs.github.com/ja/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax)に従う\r ___",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^5.1.6"
  },
  "dependencies": {
    "@vue/compiler-sfc": "^3.3.4",
    "vue": "^3.2.36",
    "vue-loader": "^16.1.2",
    "vue-style-loader": "^4.1.3"
  }
}

$ npm list
youknow@1.0.0 C:\Users\07k11\Desktop\work\youknow
├── @vue/compiler-sfc@3.3.4
├── typescript@5.1.6
├── vue-loader@16.1.2
├── vue-style-loader@4.1.3
└── vue@3.2.36

$ npm list -g
C:\Users\07k11\AppData\Roaming\npm
└── npm@9.8.1

notwo commented 1 year ago

package.jsonなどの位置を変えてある程度は解消した

you_know/static/you_know/js/
├──node_modules/
├──package.json
├──package-lock.json
├──shims-vue.d.ts
├──src/
├────library/
├──────app.vue
├──────index.js
├──────index.ts

それに伴ってnpx tscをjs/以下でないと実行できなくなった→build.shにも反映しないとだめそう

 ~/Desktop/work/youknow (you_know_28)
$ you_know/static/you_know/js/npx tsc
bash: you_know/static/you_know/js/npx: No such file or directory

cd you_know/static/you_know/js
npx tsc

この時点で以下のようなエラー

src/library/index.ts(1,27): error TS2792: Cannot find module 'vue'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?

調査してtsconfig.jsonを修正

    "target": "ES2015",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */

...

    //"module": "commonjs",                                /* Specify what module code is generated. */

...
    "moduleResolution": "node10",                     /* Specify how TypeScript looks up a file from a given module specifier. */

その後runserverすると以下エラー

Cannot use import statement outside a module

これは訳わかんねえから調査中

スケルトンvueプロジェクトにもtsを入れてみたので、こっちで問題なく動作するならスケルトンをお手本にして修正できるかもしれない

因みに、VSCode上でVueJS開発をしていると、実際にはエラーじゃないのにコード上にCan't find module 'vue'とか出るけど無視でいい。コンソールにその内容のエラーは出ない

notwo commented 1 year ago

スケルトン側で動かせたので結果報告

修正箇所

tsconfig.json

    "target": "ES5",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    "module": "ES2015",                                /* Specify what module code is generated. */
    "moduleResolution": "node10",                     /* Specify how TypeScript looks up a file from a given module specifier. */

src/shims.d.ts

declare module "*.vue" {
  import { defineComponent } from "vue";
  const component: ReturnType<typeof defineComponent>;
  export default component;
}

その他

tsconfig.jsonはルートディレクトリ配置でおｋ
shims.d.tsはnode_modules/やpackage.jsonと同ディレクトリでおｋ

notwo commented 1 year ago

Cannot use import statement outside a module対策

scriptタグにtype="module"をつければ解決

今度はrunserver後に別のエラー

Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".

スケルトン同様にviteをビルドツールとして入れても変わらず

notwo commented 1 year ago

Django+VueJSの実装に対するそもそもの考え方が間違ってたので一旦整理

全体の構成

ユーザ認証機能はそのままでいいとして、ライブラリ一覧等本作の本体である画面の制作にはDjango Rest Framework + VueJSの形を取る
フロントエンドはVueJS、バックエンドはDjangoで特化させる
Django Rest Frameworkでは各機能のCRUDに加え名前重複チェック等を担当する

ディレクトリ分け

static/you_know/以下にフロントエンド側のviewを実装するためのVueJSプロジェクトyou_know_vueを作る
library/index.html等に埋め込むためのviewは個別にyou_know_vue/以下で開発し、ビルド成果物をhtmlはtemplates/以下、cssはcss/以下、jsはjs/以下に出力する(ようにvite.config.jsで設定する)
本番環境ではビルド後、collectstaticですべてのJSが集約されるがそれでも読み込めるはず

上記をyou_know仕様書にまとめる

notwo commented 1 year ago

vue.config.jsとはなんぞや？

vue.config.js設定ファイルについてで解説されている VueJSのビルドはこれで設定した通りに行う

なのだが、Vite×Vue3で詰まったところを見るにvite.config.jsで巻き取れそうなのでそっちを使っていきたい

notwo commented 1 year ago

データ操作部分(ライブラリ等)については共通ヘッダ、フッタ含め全画面をSPAで制作するよってフロントエンド開発はVSCodeで行い、you_know_vue上で開発をするターミナルもVSCodeで完結させる→無理そうならitermとかでいいこちらはnpm run devとかして表示を確認する

一方でバックエンドでAPI開発をする際はPYCharmを用いてyou_know/以下で行うフロントエンドとは別窓でやった方がいいこちらはrunserverしてデバッグを行う

notwo commented 1 year ago

データ操作部分の外部フォーム(forms.pyで作られる)の読み込みはどうするのか？

実際に画面出力されるフォームを元にhtmlを組み、forms.pyのフォーム自体は使わないデータ操作部分はview部分を完全にフロントエンド特化したいので、templates/以下にはビルド成果物のindex.html以外は置かない前提で考える

notwo commented 1 year ago

導入完了し、全体の方針がまとまったのでclose

notwo / youknowFrontend

Vue3導入にあたる調査 #13

VueJSについて

VueJSについて(2)

Vue2とVue3

Viteについて

JSXについて

IDEどうするか問題

そういえばなんでReactじゃないのか？

VueJSについて(3)

ESMビルドとは

Pureなjsのイベント関連

SFCについて

VSCode上でのVueJS開発

Node.jsのnpmを使ったインストールについて

(おさらい)VueJSのインストール方法

Vueをnpmインストールする

スケルトン側で動かせたので結果報告

修正箇所

tsconfig.json

src/shims.d.ts

その他

Cannot use import statement outside a module対策

Django+VueJSの実装に対するそもそもの考え方が間違ってたので一旦整理

全体の構成

ディレクトリ分け

vue.config.jsとはなんぞや？

データ操作部分の外部フォーム(forms.pyで作られる)の読み込みはどうするのか？