代表通信～３Dプリンタでの食事生成とReactのHooks APIと

こんばんは。代表の草場です。

本日ラボメンのスーパーライターの佐藤さんと３Dプリンタでお菓子を作っている若手の方にインタビューしました。形状が味にどう影響するか、なかなか測定が難しそうです。新たな分野なので、楽しみです。佐藤さんが記事にまとめてくれるので、こうご期待です！

さて、AmazonみたいなモノとかInstagramみたいなモノとかReactで作っています。Hooks API使っています。Hooks APIはReact 16.8で新たに追加された機能です。classを書かずに、Stateや他のReactの機能を利用できるようになります。基本以下のような形です（公式より）。

import React, { useState} from 'react';
function Example() {
//新しいstate変数、count、の宣言
const[count, setCount] = useState(0);
return(
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)} > Click me </button>
</div>
);
}

もちろん、

import React, { useState } from 'react';

も忘れずに。

そもそもHookって？というと、

Hookとは、Reactの機能に「フックイン」するための特別な関数です。例えば useState は、関数コンポーネントに React の状態を追加できるようにする Hook です。他のフックについては後ほど説明します。

どんなときにフックを使うのか？

関数コンポーネントを書いていて、そこにステートを追加する必要があることに気づいた場合、以前はそれをクラスに変換しなければなりませんでした。今では、既存の関数コンポーネントの中でフックを使うことができます。今すぐそれを実行してみましょう。

便利だなー。今後詳しく記事にしていきますが、皆さんお勧めです。

明日もHook。