Vite + Vue.js + Typescript で、クライアントサイドでのアプリ開発環境を作成する。
Vite + React + Typescript 開発環境 で少し、クライアントサイドのアップリ作成を試してみたが、なんとなくしっくりしない。
ならば、Vue.js を使うのはどうかと思って、試してみた。
Vite を使うのが、2026 現在のおすすめのようで、React と同じ要領で作成できる。
google で、[Vite + Vue.js + Typescript 開発環境作成] を問い合わせした回答に従って、開発環境を作成してみた。
1. インストール
google の回答にしたがって、環境を構築するだけ。
$ cd ~/www/vuejs --- 適当な、Vue.js の開発ディレクトリー。
$ npm create vite@latest my-vue-app
Project name: my-vue-app
Select a frame work: Vue
Select a variant: TypeScript
Use rolldown-vite(Experimental): No
Install with npm and Start now: Yes
ブラウザーで、 http://localhost:5173/ を開くと、見える。
ここで、ソース src/components/HelloWorld.vue 等をいじれば、即座に、ブラウザーに反映される。
Vite を使うと、これができるので、大変便利じゃ。
最後で、 No にした場合は、
$ cd my-vue-app
$ npm install
$ npm run dev
注) ここのオプションは、package.json の中の "scripts": に記載がある。
終了は、Ctl + c
一度、終了させて、再度、ローカルで実行するのは、
$ npm run dev
2. ファイルの階層図は、
index.html
|
src/main.ts
|
src/App.vue
|
src/Components/HelloWorld.vue
この時点は、xxx.ts, xxx.vue ファイルで存在する。
自分で、修正を加えるなら、src/App.vue か src/Components/HelloWorld.vue にする。
3. 実際のサーバーにアップロードするための、html、js ファイルへの変換をするには、
$ npm run build
dist/ ディレクトリー下に作成される。
index.html の中は、/src/main.ts の記述が消えて、 /assets/index-C-MhGW3J.js に 変換されるのが確認できる。
あとは、これらを、実サーバーにアップロードすれば、実際の表示内容が見える。
4. おんちゃんの思うところ。
Vue.js + Javascript の構成もできる。あえて、Vue.js + TypeScript を、最近、選ばれるのは、Typescript が、
ソース作成段階や、コンパイル段階( Javascript への変換)で、エラーを発見しやすいのが大きいみたい。
Typescript の最終的には、Javascript になるのだから、どちらも実現できる機能は同じだろう。
ただし、google al で質問すると、サーバーサイドの app を、node.js + express + typescript にしていると、
DB のテーブル定義の変更を、クライアントサイドの app でも把握しやすいみたいに回答があった。
ここは、今後詳しく、google ai で聞いてみないといかん。
5. 実際の クライアントサイドの app 作成例。
5.1 最初に、Vue.js + Javascript から勉強をしたほうがよさそうじゃ。
Vue.js サンプルコード
5.2 これからは、実際の app の作成を学ばないといかん。
Vue 3 with Typescript 超入門