初めまして！21 卒新卒採用でクラッソーネにジョインした山之内です。
現在、UI デザイナーとしてプロダクト開発部に在籍しています。UI を取り扱うデザイナーなのでちゃんと実装の能力も身につけたいと思い、現在進行形で React の学習に励んでいます。
そんな僕が、React 学習でつまづいた React Hooks を数回に渡って記事化していきたいと思います。今回は初回として React Hooks について解説します。
<h2 id="%E5%8F%82%E8%80%83%E6%95%99%E6%9D%90"><a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E6%95%99%E6%9D%90" aria-hidden="true"></a> 参考教材</h2>
React を学習するにあたって、教科書にしたのが「基礎から学ぶ React/React Hooks」です。 
こちら弊社エンジニアの<a href="https://tech.crassone.jp/posts/entry-hattori" target="_blank" rel="nofollow noopener noreferrer">服部麻子</a>さんが著した本になります！ 
<img src="/images/posts/about-react-hooks/about-react-hooks.jpg" alt="基礎から学ぶ React/React Hooks" /> 
<iframe id="zenn-embedded__44b9a7a7c27c2" src="https://embed.zenn.studio/card#zenn-embedded__44b9a7a7c27c2" data-content="https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2FB09CP8T4TX" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://www.amazon.co.jp/dp/B09CP8T4TX" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.amazon.co.jp/dp/B09CP8T4TX</a>
<h2 id="react-hooks"><a class="header-anchor-link" href="#react-hooks" aria-hidden="true"></a> React Hooks</h2>
React Hooks は React 16.8 で追加された機能になります。
そもそも React にはコンポーネントを宣言する記述方法が２種類あります。
① クラスコンポーネント
<div class="code-block-container"><pre class="language-javascript"><code class="language-javascript">class Sample extends React.Component = () =&gt; {
 render(){
 return &lt;p&gt;クラスコンポーネント&lt;/p&gt;
 }
}
</code></pre></div>② 関数コンポーネント
<div class="code-block-container"><pre class="language-javascript"><code class="language-javascript">const Sample = () =&gt; {
 return &lt;p&gt;関数コンポーネント&lt;/p&gt;
}
</code></pre></div>このように、クラスコンポーネントは関数コンポーネントよりもコードの記述量が増加します。また、クラスコンポーネントは<code>this</code>や<code>bind</code>などのコードを記述する必要があるので、複雑性も増します。
しかし、以前はクラスコンポーネントが主流でした。というのも、クラスコンポーネントは <code>state</code> というものを取り扱うことができるのですが、従来の関数コンポーネントでは <code>state</code> を取り扱うことができなかったからです。しかし、React Hooks の登場により、React Hooks の一つである <code>useState</code> によって <code>state</code> の管理が関数コンポーネントでも実現可能となりました。
<code>state</code> や <code>useState</code> は次回の記事で紹介していきたいと思いますので、少々お待ちください 🙇‍♂️
Hooks は「〜に接続する、引き寄せる」などの意味を持つ hook in から来ています。つまり React Hooks は関数コンポーネントを React の機能に接続させることによって、クラスコンポーネントでしかできなかったことを関数コンポーネントでもできるようにさせるものになります。
<code>useState</code> 以外にも <code>useEffect</code> や <code>useCallback</code> などがあり、これら一つ一つを フック （hook）と呼び、まとめて React Hooks（hooks）と呼びます。
<h2 id="%E3%82%AF%E3%83%A9%E3%82%B9%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AF%E5%AD%A6%E7%BF%92%E3%81%99%E3%81%B9%E3%81%8D%E3%81%8B%EF%BC%9F"><a class="header-anchor-link" href="#%E3%82%AF%E3%83%A9%E3%82%B9%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AF%E5%AD%A6%E7%BF%92%E3%81%99%E3%81%B9%E3%81%8D%E3%81%8B%EF%BC%9F" aria-hidden="true"></a> クラスコンポーネントは学習すべきか？</h2>
上記でも記載した通り、クラスコンポーネントは関数コンポーネントと比べてコードの記述量が増加したり、コード自体が複雑になったりします。
しかし、関数コンポーネントでは <code>this</code> や <code>bind</code>などは利用しないので、シンプルに記述することが可能になります。
そのためクラスコンポーネントを学習しなくても、関数コンポーネントを扱うことはできるので、クラスコンポーネントを学習する必要はありません。<a href="https://www.amazon.co.jp/dp/B09CP8T4TX" target="_blank" rel="nofollow noopener noreferrer">「基礎から学ぶ React/React Hooks」</a>でもクラスコンポーネントのことは紹介程度で終わっていますが、アプリの開発まで実現できています。
もちろん、理解するに越したことはないので、時間に余裕ができたらクラスコンポーネントを勉強してみてください！
<h2 id="%E6%9C%80%E5%BE%8C%E3%81%AB"><a class="header-anchor-link" href="#%E6%9C%80%E5%BE%8C%E3%81%AB" aria-hidden="true"></a> 最後に</h2>
次回は <code>useState</code> について記述します！
また、クラッソーネでは一緒に開発してくれるメンバーを大募集中です！ 
少しでもご興味持っていただけたらお気軽にご連絡いただけると幸いです！ 
<iframe id="zenn-embedded__b177852dc5b38" src="https://embed.zenn.studio/card#zenn-embedded__b177852dc5b38" data-content="https%3A%2F%2Fwww.crassone.co.jp%2Frecruit%2Fengineer%2F" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://www.crassone.co.jp/recruit/engineer/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.crassone.co.jp/recruit/engineer/</a>


初めまして！21 卒新卒採用でクラッソーネにジョインした山之内です。

現在、UI デザイナーとしてプロダクト開発部に在籍しています。UI を取り扱うデザイナーなのでちゃんと実装の能力も身につけたいと思い、現在進行形で React の学習に励んでいます。

そんな僕が、React 学習でつまづいた React Hooks を数回に渡って記事化していきたいと思います。今回は初回として React Hooks について解説します。

参考教材

React を学習するにあたって、教科書にしたのが「基礎から学ぶ React/React Hooks」です。
こちら弊社エンジニアの服部麻子さんが著した本になります！
基礎から学ぶ React/React Hooks
https://www.amazon.co.jp/dp/B09CP8T4TX

React Hooks

React Hooks は React 16.8 で追加された機能になります。

そもそも React にはコンポーネントを宣言する記述方法が２種類あります。

① クラスコンポーネント

class Sample extends React.Component = () => {
 render(){
   return クラスコンポーネント
 }
}

② 関数コンポーネント

const Sample = () => {
 return 関数コンポーネント
}

このように、クラスコンポーネントは関数コンポーネントよりもコードの記述量が増加します。また、クラスコンポーネントはthisやbindなどのコードを記述する必要があるので、複雑性も増します。

しかし、以前はクラスコンポーネントが主流でした。というのも、クラスコンポーネントは state というものを取り扱うことができるのですが、従来の関数コンポーネントでは state を取り扱うことができなかったからです。しかし、React Hooks の登場により、React Hooks の一つである useState によって state の管理が関数コンポーネントでも実現可能となりました。

state や useState は次回の記事で紹介していきたいと思いますので、少々お待ちください 🙇‍♂️

Hooks は「〜に接続する、引き寄せる」などの意味を持つ hook in から来ています。つまり React Hooks は関数コンポーネントを React の機能に接続させることによって、クラスコンポーネントでしかできなかったことを関数コンポーネントでもできるようにさせるものになります。

useState 以外にも useEffect や useCallback などがあり、これら一つ一つを フック （hook）と呼び、まとめて React Hooks（hooks）と呼びます。

クラスコンポーネントは学習すべきか？

上記でも記載した通り、クラスコンポーネントは関数コンポーネントと比べてコードの記述量が増加したり、コード自体が複雑になったりします。

しかし、関数コンポーネントでは this や bindなどは利用しないので、シンプルに記述することが可能になります。

そのためクラスコンポーネントを学習しなくても、関数コンポーネントを扱うことはできるので、クラスコンポーネントを学習する必要はありません。「基礎から学ぶ React/React Hooks」でもクラスコンポーネントのことは紹介程度で終わっていますが、アプリの開発まで実現できています。

もちろん、理解するに越したことはないので、時間に余裕ができたらクラスコンポーネントを勉強してみてください！

最後に

次回は useState について記述します！

また、クラッソーネでは一緒に開発してくれるメンバーを大募集中です！
少しでもご興味持っていただけたらお気軽にご連絡いただけると幸いです！
https://www.crassone.co.jp/recruit/engineer/


クラッソーネ開発者ブログ

山之内瑞貴が執筆した記事

新卒デザイナーが学ぶReact 〜React Hooks〜

山之内 瑞貴が執筆した記事

新卒デザイナーが学ぶReact 〜React Hooks〜

山之内瑞貴が執筆した記事