SolidJSについて

はじめに

いくつかフロントエンドフレームワークについてまとめて自分用のメモとして残すため記事にしました。
初歩的なものになるので、初心者さん向けかと思います。

SolidJS って？

SolidJS とはリアクティブな UI を構築するフレームワークになります。
一番の特徴はシンプルさとパフォーマンスの高さになるかと思います。
また、仮想 DOM を使用していないのも特徴の一つとして挙げられるかなと思います。
詳細は公式サイトをご確認ください。

さて…実際に使ってみる

SolidJS は完全に初めてですが、React に慣れてるとわかりやすいとのことなので、詰まらないことを祈って実際に使ってみようと思います。
React、Vue.js に引き続き、Reactについてで作ったものと同じ TODO リストを作ってみたいと思います。

セットアップ

npx degit solidjs/templates/js simple-todo-list
cd simple-todo-list
npm i
npm run dev

コンポーネント作成

• App.jsx

import { createSignal } from "solid-js";

import TodoList from "./components/TodoList/TodoList";

function App() {
  const [todoList, setTodoList] = createSignal([]);
  const [addText, setAddText] = createSignal("");

  /**
   * 入力欄ハンドラー
   */
  const handleInput = (e) => {
    setAddText(e.target.value);
  };

  /**
   * 追加ボタンハンドラ
   */
  const handleAddButton = () => {
    const tmpTodoList = todoList()
    const newId = tmpTodoList.length < 1 ? 1 : tmpTodoList[tmpTodoList.length - 1].id + 1
    setTodoList([...tmpTodoList, {
      id: newId,
      text: addText(), 
      completed: false
    }])
    setAddText('');
  }

  /**
   * チェックボックスハンドラ
   */
  const handleCheck = (id) => {
    setTodoList((prevTodoList) => {
      return prevTodoList.map((todo) => {
        if (todo.id !== id) {
          return todo;
        }
        const newTodo = { ...todo, completed: !todo.completed };
        return newTodo;
      });
    });
  };

  return (
    <div class="container">
      <header>
        <h1>TODO リスト</h1>
      </header>
      <main>
        <div>
          <input
            type="text"
            onInput={handleInput}
            class="text-input"
            value={addText()}
          />
          <button
            type="button"
            onClick={handleAddButton}
            disabled={addText() === ""}
          >
            追加
          </button>
        </div>
        <div>
          <TodoList todoList={todoList()} onToggle={handleCheck} />
        </div>
      </main>
    </div>
  );
}

export default App;

• TodoList.jsx

import TodoItem from '../TodoItem/TodoItem';
import './index.css'

const  TodoList = (props)  => {
  return (
    <div class='todo-list'>
      <For each={props.todoList}>
        {(todo, index) => (
          <TodoItem todo={todo} onToggle={props.onToggle} />
        )}
      </For>
    </div>
  );
}

export default TodoList;

• TodoItem.jsx

import "./index.css";

const TodoItem = (props) => {
  return (
    <div key={props.todo.id} class="todo-item">
      <input
        type="checkbox"
        checked={props.todo.completed}
        class="check-box"
        onChange={() => {
          props.onToggle(props.todo.id);
        }}
      />
      <span class={props.todo.completed ? "text text--done" : ""}>
        {props.todo.text}
      </span>
    </div>
  );
};

export default TodoItem;

npm start

実行してみるとこんな感じです。

React によく似た書き方なので、React に慣れてる人は比較的楽に始められるのではないかと思いました。
ただpropsで分割代入してはいけなかったり、Forなどのコンポーネントが用意されていたりとやはり違いはあります。
少々手こずった部分はありましたが、大きく詰まることはなかったのでよかったです。

ちなみ

SolidJS はパフォーマンスが高いことがメリットとして挙げられますが、React、Vue と比較してみました。

React

Vue.js

SolidJS

シンプルな画面なのでぱっと見はわからないですが、パフォーマンスの値を見ると SolidJS が一番パフォーマンスが高いことがわかります。

まとめ

State of Javascript をみる限り利用度や認知度は低いものの、満足度が一番高いようです。
まだ新しいフレームワークということで、利用可能なライブラリが少なかったり、コミュニティが成長中だったりするのかなと思います。
フレームワークを選択する場合はその辺りも含め検討が必要ですかね。

参考