コンポーネントとは

webページの構成パーツのこと
- htmlタグ
- CSSスタイルシート
- JSコード
  これらで構成されている
単一コンポーネントファイル
- scriptブロック、テンプレートブロック、スタイルブロックがそれぞれ１つのファイルで構成されるファイルのこと

かなり雑に調べたこと
学んだことを書いていく

スクリプトブロックで用意した変数を表示するための構文をマスタッシュ構文という
- {{ 変数 }}
テンプレートブロックで使用する変数のことをテンプレート変数という
Vue3ではref()関数を使用する

<script setup lang="ts">
  import {ref} from "Vue";

  const name = ref("田中");
</script>

<template>
  <h1> こんにちは{{ name }}さん</h1>
</template>

にったま

関数やクラス、オブジェクトを別ファイルに記述し、それを読み込んで使用する仕組みをモジュールという
- 使用するために、外部から利用できることを明示するためにexportキーワードを指定する

export function ref() {...
}

こうしてexportされたモジュールを利用するために、利用する側ではimportをする必要がある
- エクスポートとインポートされるクラス名や関数名は一致させておく必要がある
エクスポートにはバリエーションがあり、defaultキーワードが付いたエクスポートをデフォルトエクスポートという

export default function showName() {
...
}

デフォルトエクスポートは「名無し」としてエクスポートされるので、インポート側で名前をつける必要がある

にったま

リアクティブシステム

リアクティブとは、「その値が監視され、変更が検知される状態のこと」を指す
ref()関数を使用することで、引数で渡した値をリアクティブにすることができる

リアクティブ変数の値を書き換える際にはvalueを使用しないとエラーになるので注意

const 変数 = ref(値);
変数.value = 新しい値;

にったま

computed
これもリアクティブなデータの変更監視を行うための機能
動的な値を計算するために使用される
compotion APIではimportして定義することができる
キャッシュされるのも大きな特徴

にったま

スクリプトブロックで用意した変数や、外部から与えられた変数を使用して計算した結果をリアクティブデータとする場合、このcomputedを利用する（算出プロパティ）

<script setup lang="ts">
  import {ref, computed} from "vue";

  const radiusInit = Math.round(Math.random() * 10);
  const PI = ref(3.14);
  const radius = ref(radiusInit);

  const area = computed(
    ():number => {
      return radius.value * radius.value * PI.value;
    }
  );

  setInterval(
    ():void => {
      radius.value = Math.round(Math.random() * 10)
    },
    1000
  );
</script>

<template>
  <p>半径{{ radius }}の円の面積を円周率{{ PI }}で計算すると{{ area }}</p>
</template>

にったま

PCリプレイスしたから環境立ち上がらなくなってしまった
Viteが実行できないんだと思う

+] Running 1/0
 ✔ Container hello-vue  Created                                                                                                                                                                                  0.0s
Attaching to hello-vue
hello-vue  |
hello-vue  | > hello-vue@0.0.0 dev
hello-vue  | > vite "--host"
hello-vue  |
hello-vue  | failed to load config from /hello-vue/vite.config.ts
hello-vue  | error when starting dev server:
hello-vue  | Error:
hello-vue  | You installed esbuild for another platform than the one you're currently using.
hello-vue  | This won't work because esbuild is written with native code and needs to
hello-vue  | install a platform-specific binary executable.
hello-vue  |
hello-vue  | Specifically the "@esbuild/linux-x64" package is present but this platform
hello-vue  | needs the "@esbuild/linux-arm64" package instead. People often get into this
hello-vue  | situation by installing esbuild on Windows or macOS and copying "node_modules"
hello-vue  | into a Docker image that runs Linux, or by copying "node_modules" between
hello-vue  | Windows and WSL environments.
hello-vue  |
hello-vue  | If you are installing with npm, you can try not copying the "node_modules"
hello-vue  | directory when you copy the files over, and running "npm ci" or "npm install"
hello-vue  | on the destination platform after the copy. Or you could consider using yarn
hello-vue  | instead of npm which has built-in support for installing a package on multiple
hello-vue  | platforms simultaneously.
hello-vue  |
hello-vue  | If you are installing with yarn, you can try listing both this platform and the
hello-vue  | other platform in your ".yarnrc.yml" file using the "supportedArchitectures"
hello-vue  | feature: https://yarnpkg.com/configuration/yarnrc/#supportedArchitectures
hello-vue  | Keep in mind that this means multiple copies of esbuild will be present.
hello-vue  |
hello-vue  | Another alternative is to use the "esbuild-wasm" package instead, which works
hello-vue  | the same way on all platforms. But it comes with a heavy performance cost and
hello-vue  | can sometimes be 10x slower than the "esbuild" package, so you may also not
hello-vue  | want to do that.
hello-vue  |
hello-vue  |     at generateBinPath (/hello-vue/node_modules/esbuild/lib/main.js:1887:17)
hello-vue  |     at esbuildCommandAndArgs (/hello-vue/node_modules/esbuild/lib/main.js:1968:33)
hello-vue  |     at ensureServiceIsRunning (/hello-vue/node_modules/esbuild/lib/main.js:2132:25)
hello-vue  |     at build (/hello-vue/node_modules/esbuild/lib/main.js:2024:26)
hello-vue  |     at bundleConfigFile (file:///hello-vue/node_modules/vite/dist/node/chunks/dep-3b8eb186.js:66055:26)
hello-vue  |     at loadConfigFromFile (file:///hello-vue/node_modules/vite/dist/node/chunks/dep-3b8eb186.js:66031:31)
hello-vue  |     at resolveConfig (file:///hello-vue/node_modules/vite/dist/node/chunks/dep-3b8eb186.js:65628:34)
hello-vue  |     at _createServer (file:///hello-vue/node_modules/vite/dist/node/chunks/dep-3b8eb186.js:64905:26)
hello-vue  |     at createServer (file:///hello-vue/node_modules/vite/dist/node/chunks/dep-3b8eb186.js:64902:12)
hello-vue  |     at CAC.<anonymous> (file:///hello-vue/node_modules/vite/dist/node/cli.js:743:30)
hello-vue exited with code 1

ので作り直し

これを参考に

イメージを作成

docker-compose build

create-vueを使用してVueプロジェクトを作り直す

docker compose run frontend npm init vue@latest

docker compose run frontend npm install

これでViteを実行できるようになるはず

できた

にったま

Viteって「ヴィート」って発音するんだ・・・・・・

にったま

Vue3からプロジェクト作成ツールはVue CLIからViteをベースにしたcreate-vueへ変更
Vue CLIはWebpack使用してJS上で実行可能なファイルに変換して実行してたけど、ファイルの生成に時間がかかるのが問題だった
Viteに変更することで高速化
Viteで開発用サーバを立てている

にったま

reactive()関数で複数のリアクティブデータを１つのオブジェクトとしてまとめることができる

にったま

コンテナに入るのはshだった

% docker exec -it hello-vue /bin/sh
/hello-vue #

にったま

npm run buildでdistディレクトリのファイルを作成することができる
distはデプロイ用のファイルセットが格納されたフォルダ

/hello-vue # npm run build

> hello-vue@0.0.0 build
> run-p type-check "build-only {@}" --


> hello-vue@0.0.0 type-check
> vue-tsc --noEmit -p tsconfig.app.json --composite false


> hello-vue@0.0.0 build-only
> vite build

vite v4.4.11 building for production...
✓ 11 modules transformed.
dist/index.html                  0.42 kB │ gzip:  0.28 kB
dist/assets/index-84a34640.css   1.99 kB │ gzip:  0.76 kB
dist/assets/index-6640a3b8.js   50.41 kB │ gzip: 20.49 kB
✓ built in 986ms
/hello-vue #

このスクラップは2024/11/19にクローズされました