BETA

React.jsに再入門した

投稿日:2019-09-28
最終更新:2019-09-28

0. Reactを勉強しようと思ったきっかけ。

普段の業務ではほとんどフルスタックでのRailsによるサービス開発に専念してきた。
けど昨今のWeb開発の流れをTwitterやQiitaで見聞きしているとこれから先バックエンドエンジニアという職種の透明性に不安が出てきた。
いわゆるスタートアップにおけるPMF(Product Market Fit)段階までならそもそもサーバ処理を書かなくてもfirebaseやamplifyで済ませるいわゆるサーバレスの流れが来ていると感じた。
別にバックエンドエンジニアがいなくなるどうこうの話をしたいのではなくて単純に今の自分のスキルセットだけではこれから先のエンジニア人生に不安があるというだけだ。
しかし普段Railsを書いていてRailsが提供する
設定より規約(convention over configuration)
に嫌気がさしていたのも事実だった。
Railsが提供する独特の挙動を発揮するヘルパーメソッドやmodelとViewの密接な結合、レンダリングパフォーマンスの低さなど諸々。
そんな中でSPAやBFF、SSRといった概念が提唱されサービスで使われるのを見聞きするのはエンジニアとして未熟な自分にとって苦痛であり恐怖だった。
レガシーな開発環境・体制で停滞する自分。
エンジニアとしての市場価値が刻々と下がっているのでは?という不安。
そんな中、様々な機会が重なりまとまって勉強する時間を確保できた。
今勉強しないと後で後悔する事になる。そう確信した。
Webという仕組みが誕生してからおよそ30年。これから先も情報のやり取りのプラットフォームの主戦場はWebであり続けるだろうし様々なサービスが誕生して人々が抱える課題やペインを解決していくだろう。そしてユーザとサービスをつなぐインターフェースを構築するフロントエンドエンジニアの技術や知識はこれから先のエンジニア人生にきっと役に立つ。そう考えてフロントの勉強をする事を決意した。

今の自分のスキルセット

前職の会社には未経験の状態でエンジニアインターン生として雇って頂き様々なタスクを経験させて頂いた。退職する少し前にはReact Nativeによるアプリ開発にも携わらせてもらった。
今まで経験した技術をまとめると

  • Ryby on Rails: 1年ほど。最近クラス継承の概念やSOLID原則などがなんとなく掴めてきた。DB設計も多少経験済み
  • React Native: React.jsではなくていきなりNativeを実務で3カ月ほど経験した。Stateの更新やPropsの受け渡し、クラスコンポーネントと関数コンポーネントの違い、ライフサイクルなどはなんとなくわかってる程度。ReduxやFluxアーキテクチャに関してはQiitaや参考書を読んだ程度でさっぱり分かっていない。

こんな所だろうか。大学の学部は工学部なのでプログラミングに関しては独学ということもあり知識に穴だらけなのは自覚している。

Hooksに出会うまで

さて、僕が前職でReactを書いていた時はStateやPropsの概念、React Native Navigationの使い方など基本的なことを頭に入れるので精一杯でHooksなんてものを使う余裕はなかった。ましてTypescriptなど頭にすら無かった(前職の方ごめんなさい)。
そして上記の通りReduxやFluxなども分かっていなかった(いまだに分かっていない)わけだからとにかくクラスコンポーネントのオンパレードだった。全てのコンポーネントにStateが存在しPresentationaly component/Container componentの区別など存在しなかった。
そんな中で出会ったのがReact ver16.8から導入されたHooksだった。

Hooksの魅力とメリット

さて、Hooksの導入はReact界隈ではホットな話題だったと記憶している(僕個人の主観だが)。
理由は関数コンポーネントがStateを持てるようになったことだと思う。
Hooksが導入される前はStateをもつ必要がないコンポーネントに関しては関数型コンポーネントで実装し運用していく中でStateをもつ必要が出てきた時にはクラスコンポーネントに書き直すという苦痛な作業を強いられてきた。それがHooksの導入で無くなった。そしてそもそも関数型コンポーネント自体がStateを持てるようになったことで以前よりスッキリ記述できるようになったというのが魅力だと個人的には感じている。

Hooksの導入(まずはuseStateから)

さて、ここまで長々と書いてきてサンプルコードの一つもないのではエンジニアの名が泣く。
とりあえずReact初学者の方であれば目に穴が開くほど読んだであろうこちらのコードから。

import React, { useState } from 'react';  

function Example() {  
  // Declare a new state variable, which we'll call "count"  
  const [count, setCount] = useState(0);  

  return (  
    <div>  
      <p>You clicked {count} times</p>  
      <button onClick={() => setCount(count + 1)}>  
        Click me  
      </button>  
    </div>  
  );  
}  

おなじみのReact公式ドキュメントのHooks部分の最初のコードだ。
useStateにstateの初期値を引数として渡すと新しいstateとそのstateを更新する関数(action)を返してくれる。
例えばカウンターアプリを作る場合stateとしてもつのはカウントなので

import React, {useState} from 'react';  

const App = () => {  
  const [count, setPrice] = useState(0)  

  return (  
    <>  
      <p>現在のカウントは{count}です。</p>  
      <button onClick={() => {setPrice(count + 1)}}>+1</button>  
      <button onClick={() => {setPrice(count - 1)}}>-1</button>  
    </>  
  );  
};  

export default App;  

こんな感じにかくと画像のようなカウンターが画面に表示される。

ボタンコンポーネントをクリックするとsetPriceアクションが発火して現在のstate(ここではcount)に±1される。
もしこれを以前のReactで表現するためにはクラスコンポーネントを定義してconstructorの中で初期stateを書いて。。。という面倒な書き方をしなければならなかった。
それをスッキリ表現できるようにしたのがHooks。注意点としてはHooksはクラスコンポーネント内では使えないこと。まあ、それはそうだよねって感じだけど(笑)
今回はuseStateしか紹介しなかったけど他にもuseReducerとかuserContextとか色々あるから公式ドキュメントを漁ってみるといいかも。

最後に

さて今日は簡単なカウンターアプリもどきしか作れなかったけど明日はuseEffectとかも勉強しようかな。
それではまた明日。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう