【TypeScript】SolidJSで高速で軽量なWEBサイトを作る方法

npx degit solidjs/templates/ts-minimal MyApp
cd MyApp
npm install

npm run dev

npm run build

import type { Component } from 'solid-js';
import Comp from './Comp';

const App: Component = () => {
  return (
    <>
      <h1>Hello world!!!!</h1>
      <Comp />
    </>
  );
};

export default App;

render(() => <App />, document.getElementById("root") as HTMLElement);

import type { Component, ParentProps } from 'solid-js';

// propsありのコンポーネント
export const Profile: Component<{
  name: string;
  job: string;
}> = (props) => {
  return (
    <div>
      <h3>{props.name}</h3>
      <p>{props.job}</p>
    </div>
  );
};

// propsとchildrenありのコンポーネント
// 子要素はprops.childrenで取得できます
export const ProfileWithChildren: Component<ParentProps<{
  name: string;
  job: string;
}>> = (props) => {
  return (
    <div>
      <h3>{props.name}</h3>
      <p>{props.job}</p>
      {props.children}
    </div>
  );
};

export const App: Component = () => {
  return (
    <main>

      <article>
        <h2>Profile</h2>
        <Profile name={'Example User'} job={'Developer'} />
      </article>

      <hr />

      <article>
        <h2>Profile with children</h2>
        <ProfileWithChildren name={'Test User'} job={'Designer'}>
          <div>profile description</div>
        </ProfileWithChildren>
      </article>

    </main>
  );
};

const [count, setCount] = createSignal(0);

// signalの値を取得する
count();

// signalの値をvalueに変更する
setCount(value);

import { Component, createEffect, createSignal } from "solid-js";

// signalをグローバルに宣言する
const [count, setCount] = createSignal(0);

export const Counter: Component = () => {
    return (
        <div>
            <button onClick={() => setCount(v => v + 1)}>Click here!</button>
        </div>
    );
};

export const CountDisplay: Component = () => {
    return (
        <div>Count: {count}</div>
    );
};

import { Component, createEffect, createSignal } from "solid-js";

export const Like: Component = () => {

    // 追跡対象のsignal
    const [like, setLike] = createSignal(0);

    // signalの値を監視して変化があった時に処理を実行する
    createEffect(() => {
        console.log(`Like: ${like()}`);
    });

    return (
        <div>
            <button onClick={() => setLike(v => v + 1)}>{like} Like</button>
        </div>
    );
};

const [vote, setVote] = createStore({
  good: 0,
  bad: 0,
});

// 値を取得する
vote.good;

// 値をvalueに変更する
setVote("good", value);

const RatingContext = createContext({
  store: {
    rate: 3,
  },
  increment() {},
  decrement() {},
});

// 機能を提供する上位コンポーネント
export const Rating: Component = () => {

    // 値を格納するためのstore
    const [store, setStore] = createStore({ rate: 3 });

    // 子孫コンポーネントに提供する機能の実装。型はRatingContextの初期値と一致させる必要がある
    const value = {
        store,
        increment: () => {
            if (5 <= store.rate) {
                return;
            }
            setStore("rate", (rate) => rate + 1);
        },
        decrement: () => {
            if (store.rate <= 1) {
                return;
            }
            setStore('rate', (rate) => rate - 1);
        },
    };

    // コンテキストプロバイダに値を渡す。valueがない場合はcontextの初期値が使用される
    return (
        <RatingContext.Provider value={value} >
            <RatingInput />
        </RatingContext.Provider >
    );
};

const { store, increment, decrement } = useContext(RatingContext);

// 機能を使用する子孫コンポーネント
// contextのスコープ内であればもっと深いコンポーネント階層の場合でも同じように使用できる
export const RatingInput: Component = () => {
    // コンテキストからstoreと関数を取得する
    const { store, increment, decrement } = useContext(RatingContext);

    return (
        <div>
            <div>{store.rate}</div>
            <button onClick={increment}>+ 1</button>
            <button onClick={decrement}>- 1</button>
        </div>
    );
};

[{
    "title": "本を10冊読む"
}, {
    "title": "朝の５時からジョギングをする"
}, {
    "title": "６時間以上の睡眠"
}, {
    "title": "記事を5本書く"
}]

[{
    "title": "本を10冊読む"
}, {
    "title": "６時間以上の睡眠"
}]

// フィルタ条件の型
type FilterString = 'all' | 'completed';

// JSONデータの型
type Item = {
    title: string;
};

// シグナルの変更時にフィルタ条件を受け取るfetcher関数
const fetchData = async (filter: FilterString) => {
    // 受け取ったフィルタ条件に応じたAPIリクエストを行う
    const url = filter == "completed"
        ? '/completed_items.json'
        : '/all_items.json';
    return await fetch(url).then(resp => resp.json()).catch(err => {
        console.error(err.message);
        throw err;
    });

// フィルタ条件用のシグナル
const [filter, setFilter] = createSignal<FilterString>("all");

// シグナルが変更される度にfetcher関数が実行される
const [data] = createResource<Item[], FilterString>(filter, fetchData);

export const FilterableList: Component = () => {

    // フィルタ条件用のシグナル
    const [filter, setFilter] = createSignal<FilterString>('all');

    // シグナルが変更される度にfetcher関数が実行される
    const [data,] = createResource<Item[], FilterString>(filter, fetchData);

    // ErrorBoundaryでラップするとエラー処理がスマートに書ける
    return (
        <ErrorBoundary fallback={err => <p>Error: {err.message}</p>}>
            <div>
                <button onClick={() => setFilter('all')}>All</button>
                <button onClick={() => setFilter('completed')}>Completed</button>
                {data.loading && <p>Loading...</p>}
            </div>
            <For each={data()}>
                {(item, i) => (
                    <div>{i() + 1} / {item.title}</div>
                )}
            </For>
        </ErrorBoundary>
    );
};