learn-library-like-react.md

title	emoji	type	topics	published	publication_name
言語とライブラリ/フレームワークの学習を並行して良いのか？ - Reactの例	📚	tech	フレームワーク React JavaScript	true	frontendflat

言語とライブラリ/フレームワークの学習を並行して良いのか？

昨今のフロントエンド開発の現場では、ReactやNext.jsなどのライブラリやフレームワークを使うことが当たり前になっています。つまりフロントエンドエンジニアになるためにはライブラリの習得が必須ということです。 そんな事情からライブラリの習得を目標に日々学習に励んでいる人も多いのではないでしょうか。

自分は4年ほどエンジニアとして働いてきて、さまざまなエンジニアを見てきましたが、やはり「ライブラリ/フレームワーク開発をやりたい！」というエンジニアは多いです。

しかしライブラリを正しく扱うためには、そもそも言語自体の深い理解が必要不可欠ということを忘れてはいけません。言語の理解が不十分な状態でライブラリに手を出すと、思ったように理解が進まず成長が鈍化するか、実力がともなっていないフロントエンドエンジニアが誕生します。

個人的には、以下の2ステップを正しく踏めると成長が早いと思っています。 2に進むタイミングが早かったり遅かったりすると成長が遅れます。

1. 言語の学習
2. （言語の理解が十分になったら）ライブラリ/フレームワークと言語の学習を並行する

ただ実際には、言語の理解が不十分な状態で2に進んでしまうことはよくあります。そのときはその状態に早く気づいて1に戻ることが重要です。

ここで「言語の理解が十分とは一体どれくらいの基準なのか？」と思うでしょう。 これはその技術ができる先輩エンジニアに聞くのが一番だと思います。 弊社では、この基準をメンバーに伝えるような教育をやっており、伝えた基準通りに学習を進められるメンバーはやはり成長が早いなと感じています。

今回はReact学習中の人を例にして、JavaScriptの習得が十分か不十分かを判断する基準の一例を紹介します。

Reactの一例

以下のコードはuseCallbackの一番基礎的な誤った使用法ですが、これが意図した通りに動作しない理由を正しく理解し説明できる人はReactの学習を続けて良いと思います。

const FunctionalComponent = () => {
  const [count, setCount] = useState();

  const handleClick = useCallback(() => {
    // setCountでcountが更新されても、undefinedが出力され続ける
    console.log(count);
  }, []);
  
  return (
    <>
        <button onClick={() => setCount((prev) => prev + 1)}>Count up</button>
        <button onClick={handleClick}>Log count</button>
    </>
  );
}

要点を整理すると

• setCountを呼ぶと、更新後のcountを持ってFunctionalComponentを再レンダリングする（Reactの話）
• 関数は作成されるたびにクロージャを作成する（JavaScriptの話）
• つまりhandleClick関数は、そのレンダリング時点のcount値を参照する（JavaScriptの話）
• useCallbackは引数に与えられたコールバック関数をキャッシュし、依存配列に含まれる値が変化した場合にキャッシュを更新する。上の例では依存配列が空なのでキャッシュが更新されることはない（Reactの話）
• つまりFunctionalComponentが再レンダリングされても、handleClickは新しい関数を生成せず、キャッシュにある古いクロージャを返す。だからsetCountでcountが更新されてもundefinedが出力され続ける（JavaScriptの話）

項目ごとにJavaScriptの話なのか、Reactの話なのかを記載しましたが、見てわかるように半分はJavaScriptの話です。このようにライブラリの理解は「言語の話なのか」「ライブラリの話なのか」を分別しながら進めていくものです。

言語の理解が不十分だとこの分別がつかないまま学習を進めていることになりますが、その状態でもライブラリを使ってコードを書くことができてしまうのがライブラリの恐ろしいところです。

今回の例では、仮にクロージャというJavaScriptの概念を理解していなくても、「useCallbackを使うと関数をキャッシュするから使っておけばパフォーマンスが良くなるでしょ！」という浅い理解でもuseCallbackを使用することはできてしまいます。 しかしその実態はおそらく、パフォーマンス的に全く意味のないuseCallbackを大量生産しているだけでしょう。

さいごに

今回の話をまとめると、言語とライブラリ/フレームワークの学習は並行して良いが、その前に一定の言語理解は必要ということです。 ライブラリの学習を進める過程で、「言語の話なのかライブラリの話なのか曖昧だな」と感じたら、ぜひ言語の学習に立ち返ってみてください。