Zenn
Closed1

Qwik 勉強メモ、useStore, useTaskなど

Vite
Qwik
knaka Tech-Blogknaka Tech-Blog

概要

Qwik + viteで、お試し的なメモです。

  • Qwikの知識は無いのですが。vite + Qwikを試す内容です。
  • QwikCity等は、使用しません。
  • テストは、vercelにデプロイする形です。
  • 実装は、難しいイメージでした。
  • 関連の情報量が少なく。調査は難航しました。。。

[ 公開: 2024/02/26 ]

環境

  • @builder.io/qwik:　1.4.5
  • vite: 5.1.4
  • vercel

関連

install

  • viteの、Qwikスターターから開始。

  • Qwik選択します。

npm create vite@latest

書いたコード

https://gist.github.com/kuc-arc-f/44a8b7a3ecdf042e83802d0ad343206a

useStore

  • useStore, useSignal は、データ保存できました。
  • hooks の、useStateに似ているかもです。
  • 値の更新で、レンダリングされるようです。
const state = useStore({ count: 0, items: [] });
const count = useSignal(0)

...
<button onClick$={() => count.value++}>count is {count.value}</button>

useTask$

  • useStore更新できそうです。

  • 画面起動処理など使えそうでした。

useTask$(({ track, cleanup }) => {
    const value = track(() => text.value);
    const id = setTimeout(() => (state.items = dataItems)
    , 100);
    cleanup(() => clearTimeout(id));
});

$

  • イベント処理から、呼べるようです。
...
const increment = $(() => {
    console.log("increment="+ new Date().toString());
    count.value++
});

...
<button onClick$={increment}>count2 is {count.value}</button>
  • デプロイしたコード(上のgistと同じです。)
  • src/test.tsx
test.tsx
import { component$, useSignal, useStore, useComputed$, useTask$, $ } from '@builder.io/qwik';

import './app.css'
//
const dataItems = [
  {id:1 , title: "title_1"},
  {id:2 , title: "title_2"},
  {id:3 , title: "title_3"},
];
//
export const App = component$(() => {
  const text = useSignal('qwik');
  const state = useStore({ count: 0, items: [] });
  const count = useSignal(0)
  const time = useSignal('paused');

  //init
  useTask$(({ track, cleanup }) => {
    const value = track(() => text.value);
    const id = setTimeout(() => (state.items = dataItems)
    , 100);
    cleanup(() => clearTimeout(id));
  });
  //add
//console.log("taskAdd"+ new Date().toString());
  const increment = $(() => {
console.log("increment="+ new Date().toString());
    count.value++
  });
  //
  return (
    <>
      <div>
      </div>
      <h1>Test!!!</h1>
      <hr />
      <div class="card">
        <lavel>Title:
          <input type="text" id="title"/>
        </lavel>
        <hr />
        <button onClick$={() => count.value++}>count is {count.value}</button>
        <button onClick$={increment}>count2 is {count.value}</button>
        {/* add */}
        <button onClick$={() => {
            const target =state.items;
console.log("#btn" + new Date().toString() + ",Len=" +target.length);
            const title = document.querySelector("#title");
            let titleValue = "";
            //@ts-ignore
            if(title){ titleValue = title.value }
            const addId = target.length + 1;
            target.push({id: addId, title: titleValue});
            //@ts-ignore
            title.value = "";
        }}>[ Add ]</button>
        {/*
        */}
        {/* test */}
        <button 
          type="button"
          class="btn btn__danger"
          onClick$={() => {
            console.log("#btn" + new Date().toString())
          }}
        >Test2
        </button>
      </div>
      <p class="read-the-docs">
        Click on the Vite and Qwik logos to learn more
      </p>
      <hr />
      <p>Count: {state.count}</p>
      <hr />
      {state.items.map((item: any) => {
        return (
        <div key={item.id}>
          <h3>title= {item.title}</h3>
          <span>id: {item.id}</span>
          <hr />
        </div>
        );
      })}
      <div>{time}</div>
    </>
  )
})
このスクラップは2024/04/14にクローズされました