コンポーネント

SolidJS では、コンポーネントはアプリケーションの再利用可能なビルディングブロックです。コンポーネントを使って UI を構築することで、コードの可読性と再利用性が向上します。このセクションでは、基本的なコンポーネントの作成と使用方法について、具体例を通じて学びます。

コンポーネントの作成

コンポーネントは、単純な関数として定義されます。これらの関数は JSX を返し、UI の一部を表します。以下に、シンプルなメッセージを表示するコンポーネントの例を示します。

1. Message コンポーネントの作成:
   src/components/Message.jsという新しいファイルを作成し、以下のコードを追加します。

   function Message(props) {
     return <div>Hello, {props.name}!</div>;
   }
   
   export default Message;
   

   Copy to clipboard
   
   このコードは、propsオブジェクトを受け取り、そのnameプロパティを使用してメッセージを表示するMessageコンポーネントを定義しています。

コンポーネントの使用

作成したコンポーネントは、他のコンポーネント内で簡単に使用できます。この例では、MessageコンポーネントをAppコンポーネントで使用してみます。

1. App コンポーネントでの Message コンポーネントの使用:
   src/App.jsを開き、Messageコンポーネントをインポートして使用します。

   import Message from './components/Message';
   
   function App() {
     return (
       <div>
         <Message name='SolidJS' />
       </div>
     );
   }
   
   export default App;
   

   Copy to clipboard
   
   このコードでは、Messageコンポーネントにnameプロパティとして"SolidJS"を渡しています。これにより、ブラウザにHello, SolidJS!と表示されます。

Props と状態（State）の管理

SolidJS では、createSignal関数を使用してコンポーネントの状態を管理します。以下に、カウンター機能を持つコンポーネントの例を示します。

1. Counter コンポーネントの作成:
   src/components/Counter.jsという新しいファイルを作成し、以下のコードを追加します。

   import { createSignal } from 'solid-js';
   
   function Counter() {
     const [count, setCount] = createSignal(0);
   
     const increment = () => {
       setCount(count() + 1);
     };
   
     return (
       <div>
         <p>Count: {count()}</p>
         <button onClick={increment}>Increment</button>
       </div>
     );
   }
   
   export default Counter;
   

   Copy to clipboard
   
   このコードは、countという状態を持つCounterコンポーネントを定義しています。ボタンをクリックするとcountの値が増加します。

コンポーネントの組み込み

これらの基本的なコンポーネントを作成し、互いに組み合わせることで、SolidJS を使用したアプリケーションの基礎を築くことができます。コンポーネントベースのアプローチは、アプリケーションの構造を明確にし、コードの再利用とメンテナンスを容易にします。