Vite + Vue3 + TypeScript でSPAを作りたい
Daisuke Kusatakeやることリスト
ゴール
- Vite で作成するプロジェクトの構造を理解する
- TypeScript でSPAのチュートリアルプロジェクトを作成する
ストレッチゴール
- なんらかの静的ホスティングサービスでデプロイする
Daisuke Kusatake現時点でディレクトリ構造はこんな感じ。
$ tree
.
├── README.md
├── index.html
├── node_modules
├── package.json
├── public
│ └── vite.svg
├── src
│ ├── App.vue
│ ├── assets
│ │ └── vue.svg
│ ├── components
│ │ └── HelloWorld.vue
│ ├── main.ts
│ ├── style.css
│ └── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── yarn.lock
5 directories, 14 files
Vite は .ts ファイルをインポートすることをサポートしています。
Vite は .ts ファイルのトランスパイルを行うだけで、型チェックは行わないことに注意してください。型チェックは IDE やビルドプロセスで行われることを想定しています。
Vite が変換処理の一部として型チェックを行わないのは、この 2 つのジョブが根本的に異なる動作をするからです。トランスパイルはファイル単位で行うことができ、Vite のオンデマンドコンパイルモデルと完全に調和しています。これに対して、型チェックはモジュールグラフ全体についての知識が必要です。Vite の変換パイプラインに型チェックを組み込むと、必然的に Vite の利点であるスピードが損なわれてしまいます。
Vite の仕事は、ソースモジュールをできるだけ速くブラウザで実行できる形にすることです。そのため、Vite の変換パイプラインから静的解析チェックを切り離すことをお勧めします。この原則は、ESLint のような他の静的解析チェックにも当てはまります。
Daisuke KusatakeGetting Started | vite-plugin-checker
yarn add vite-plugin-checker -D
// vite.config.js
import checker from 'vite-plugin-checker'
export default {
plugins: [
checker({
// e.g. use TypeScript check
typescript: true,
}),
],
}
// vite.config.ts
import { defineConfig } from 'vite'
モジュール 'vite' またはそれに対応する型宣言が見つかりません。ts(2307)
このVSCode上のエラーの解消方法が分からない
Daisuke KusatakeVite + React + TypeScript + EsLintで、vite.config.tsがEsLintに怒られた。
ESLintに対して、見なくていいよをしてしまっていいものなのだろうか
Daisuke Kusatake詰んでるのでいったん無視する。
Daisuke Kusatake参考になるかもしれない
Daisuke Kusatake一般的なエラー - TypeScript Deep Dive 日本語版
TS2307
おそらく、サードパーティのライブラリ(underscoreなど)を_モジュール_(モジュールの詳細はこちらです)として使用していて、それに対する環境宣言ファイルがありません。
Daisuke KusatakeDaisuke KusatakeDaisuke Kusatake原因
package.json の内容をローカルにダウンロードするときのパッケージマネージャーの選択で挙動が変わっていた。
$ yarn install
node_modules/ に型定義ファイル（*.d.ts）がダウンロード されない 。
.yarn/cache には型定義ファイルの原液みたいなファイル（*.zip）がダウンロードされている。
$ npm install
node_modules/ に型定義ファイル（*.d.ts）がダウンロード される 。
暫定対応
viteプロジェクトを作成するときにnpmを使う。
$ npm create vite
宿題
yarnのcacheの仕組みを理解する。
Daisuke KusatakeVite は、特別な import.meta.glob 関数を介してファイルシステムから複数のモジュールをインポートすることをサポートしています:
const modules = import.meta.glob('./dir/*.js')
Glob is 何？
Daisuke KusatakeFOUC is 何？
CSSにおけるFOUCとは、Flash of Unstyled Contentの略で、Webページへアクセスした直後、CSSによるデザインが有効でないページが一瞬だけ表示される現象のことです[1]。これはCSSのロードタイミングの不備が引き起こすもので、見た目やパフォーマンスに悪影響を及ぼします[1:1]。
初心者向けにやさしく教えると、CSSはHTML要素にスタイルを適用するための言語です。CSSはHTMLと別のファイルに書くこともできますが、その場合はHTMLから<link>タグで読み込む必要があります。しかし、この<link>タグが<head>タグの中や<body>タグの最後にあると、HTML要素が先に表示されてしまう可能性があります。その結果、CSSが適用されていない素っ気ないページが一瞬だけ見えてしまうことになります。これを防ぐためには<link>タグを<head>タグの最初に置くことが推奨されます[1:2]。
- https://developer.mozilla.org/ja/docs/Web/CSS/:focus-visible
- https://ywork2020.com/content/css-focus.html
- https://developer.mozilla.org/ja/docs/Web/CSS/:focus
- https://html-css-dict.com/focus/
- https://ywork2020.com/content/css-focus.html
Daisuke Kusatakeプラグインを使うには、プロジェクトの devDependencies に追加し、 vite.config.js 設定ファイルの plugins 配列に含める必要があります。
プラグインを追加するには2つやる必要があると。
-
yarn add * -D等 でconfigのdevDependenciesに追加 -
vite.config.jsのpluginsに追加
Daisuke Kusatakeボヤキ
Viteを完全に理解するには、ESM , Rollup とかほかにも学習することがありそうだな～
Daisuke Kusatakeこの違いは何？
function getImageUrl(name) { return new URL(`./dir/${name}.png`, import.meta.url).href }// Vite はこれを変換しません const imgUrl = new URL(imagePath, import.meta.url).href
URL のコンストラクタに渡す第一引数が文字列であることが約束されているかどうかの違い？
Daisuke KusatakeRollup is 何？
Daisuke KusatakeDaisuke KusatakeRollupとViteの違いは、主に以下の点です。
Daisuke Kusatake結果的にはこっち読んだ方がよかった。