やることリスト

ゴール

Vite で作成するプロジェクトの構造を理解する
TypeScript でSPAのチュートリアルプロジェクトを作成する

ストレッチゴール

なんらかの静的ホスティングサービスでデプロイする

$ yarn create vite

vue
typescript

yarn install

yarn dev

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

Daisuke Kusatake

特徴 | Vite

Vite は .ts ファイルをインポートすることをサポートしています。

Vite は .ts ファイルのトランスパイルを行うだけで、型チェックは行わないことに注意してください。型チェックは IDE やビルドプロセスで行われることを想定しています。

Vite が変換処理の一部として型チェックを行わないのは、この 2 つのジョブが根本的に異なる動作をするからです。トランスパイルはファイル単位で行うことができ、Vite のオンデマンドコンパイルモデルと完全に調和しています。これに対して、型チェックはモジュールグラフ全体についての知識が必要です。Vite の変換パイプラインに型チェックを組み込むと、必然的に Vite の利点であるスピードが損なわれてしまいます。

Vite の仕事は、ソースモジュールをできるだけ速くブラウザで実行できる形にすることです。そのため、Vite の変換パイプラインから静的解析チェックを切り離すことをお勧めします。この原則は、ESLint のような他の静的解析チェックにも当てはまります。

Daisuke Kusatake

Getting 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,
    }),
  ],
}

Daisuke Kusatake

// vite.config.ts
import { defineConfig } from 'vite'

モジュール 'vite' またはそれに対応する型宣言が見つかりません。ts(2307)

このVSCode上のエラーの解消方法が分からない

Daisuke Kusatake

Vite + React + TypeScript + EsLintで、vite.config.tsがEsLintに怒られた。

ESLintに対して、見なくていいよをしてしまっていいものなのだろうか

Daisuke Kusatake

詰んでるのでいったん無視する。

Daisuke Kusatake

参考になるかもしれない

モジュール解決 | TypeScript 日本語ハンドブック | js STUDIO

Daisuke Kusatake

一般的なエラー - TypeScript Deep Dive 日本語版

TS2307

おそらく、サードパーティのライブラリ(underscoreなど)を_モジュール_(モジュールの詳細はこちらです)として使用していて、それに対する環境宣言ファイルがありません。

Daisuke Kusatake

TypeScript: Documentation - Modules

Daisuke Kusatake

TypeScript: TSConfig Reference - Docs on every TSConfig option

Daisuke 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 Kusatake

特徴 | Vite

Vite は、特別な import.meta.glob 関数を介してファイルシステムから複数のモジュールをインポートすることをサポートしています:

const modules = import.meta.glob('./dir/*.js')

Glob is 何？

Daisuke Kusatake

特徴 | Vite

FOUC 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 ↩︎ ↩︎ ↩︎

Daisuke Kusatake

プラグインの使用 | Vite

プラグインを使うには、プロジェクトの devDependencies に追加し、 vite.config.js 設定ファイルの plugins 配列に含める必要があります。

プラグインを追加するには2つやる必要があると。

yarn add * -D 等で config の devDependenciesに追加
vite.config.js の plugins に追加

Daisuke Kusatake

ボヤキ

Viteを完全に理解するには、ESM , Rollup とかほかにも学習することがありそうだな～

Daisuke Kusatake

静的アセットの取り扱い | Vite

この違いは何？

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 Kusatake

Rollup is 何？

Daisuke Kusatake

Rollupは、JavaScriptのモジュールバンドラーです。小さなコード片をより大きく複雑なものにコンパイルします。JavaScriptのES6リビジョンで標準化されたコードモジュールの形式を使用しています。Viteは、Rollupをベースにした高速なフロントエンド開発ツールです。^[1] ^[2]

脚注

Daisuke Kusatake

RollupとViteの違いは、主に以下の点です。

Rollupはモジュールバンドラーで、Viteは開発ツールです。Rollupはコードをバンドルして出力することに特化していますが、Viteは開発サーバーやHMRなどの機能も提供します。^[1]

ViteはRollupをベースにしていますが、esbuildという高速なビルドツールを使っています。esbuildはGoで書かれており、JavaScriptよりも速くコードを変換できます。^[2]

ViteはRollupのプラグインインターフェースをサポートしていますが、すべてのRollupプラグインがViteと互換性があるわけではありません。また、Vite独自のプラグインもあります。

脚注

実際にやるときに後で読む

結果的にはこっち読んだ方がよかった。