【React.js】スキルシートからレベル感分かっちゃう
木村です！
前回書いたvue.jsが頑張ってる件が未だ皆様に見ていただけているようだったので、
今回はReact.jsについても最新技術含め、金額に関わるキーワードを発信していきます。良ければ↓も呼んでみてくださいね。
■React Hooks(リアクトフックス)
■SPA/SSG/SSRとNext.js(ネクストジェーエス)
■コンポーネント設計
■状態管理
■その他
■最後に
■React Hooks
React.jsで絶対に聞かれることは
(React)Hooks使えますか？
です。
営業として知っていて欲しいのはこの3つ
・現在のReactを使う際に必要な機能でコードの簡略化ができる
・ver.16から追加された
・画面のいろんなタイミング(状態管理)を連携するもの
つまり、必須な技術ですね。
最近のVue.jsに追加された機能、ComposionAPIがこれに当たります。
■SPA/SSG/SSR/ISRとNext.js(ネクストジェーエス)
呼び方はそのままアルファベットでok。
正式名称やどんな特徴なのかは省きますが、レベル感でお話すると
SSR/ISR>>>SSG>SPA
SSGやSPAよりもSSRやISRがレベル高いです。
つまり、できると金額も高くなるという意味ですね。
で、さらに公式が、、、
SSR/ISRが使いこなせる人≒Next.jsが使いこなせる人
となります。ちなみにNext.jsの覚え方は
・React.jsのフレームワーク(⇦初級編)
・React.jsでSSRやISRの環境をパッケージにしたもの
で今のところ良いです。
SPAやSSGでNext.jsを使わない訳ではないので、
スキルシートにNext.jsがあるだけで判断できない
ということは頭に入れておきましょう。
Next.jsはReact.jsのフレームワーク
Nuxt.jsはVue.jsのフレームワーク
■コンポーネント設計
よくコンポネコンポネ言われるところです。
覚えておくべきは下記5点ありますが、知識として難しいのもあるので、上3つは理解しておきましょう！
・JSX記載にはロースキルが多く存在
・設計したか運用として触ったかでレベチ
・Atomic Design（アトミックデザイン） の理解
・Styled-components/emotion/CSS-Modules
・CSSのFW：Tailwind-CSSとMaterial-UI(MUI)
JSXというReactの中でも画面側の実装で使うJavascriptみたいなものは、
運用フェーズでも使うのでスキルシートに記載されている場合は、
①丁寧
②ロジックなどを理解していない可能性高い
と考えられます。
ちなみにAtomic designは1ページのパーツを最大5段階に分割して管理するという運用方法コンポネ設計のタイミングで絶対と言っていいほど出てくる
設計のタイミングでどう分けてました？
という質問。回答例は記載しませんが、設計の考えは現場により迷う部分が多いため様々な障害が発生します。
■状態管理
Next.jsを使う場合には既に覚えなくても大丈夫になってますが、経験浅めのReactエンジニアを見た時には、Checkすべきポイントです。
・Redux (リダックス)
・Redux Toolkit(リダックスツールキット)
■その他
意味を知らなきゃいけない訳ではないので羅列しますが、スキルシートにあると「おっ」って思われるもの
・Vercel(ヴァーセル) / Firebase(ファイアベース)
・API方法：GraphQL(グラフキューエル)/WebSocket(ウェブソケット)
・AWSサービス(S3/Lambda/CloudFrontなど)
・アーキテクチャ(DDD/TDD含む)
上記の記載があれば比較的最新の環境や上流ポジションだったことがイメージつくので金額感も上がります。
■最後に
今日の内容はかなり難しい話になってしまいました。。
ただ、徐々に慣れていくことでフロントエンドはVue.jsとReact.jsだけ特徴覚えれば全部話せるようになっていますので、めげずに頑張っていきましょう！
もちろん年数やポジション、経験フェーズなど一般的な部分も必要とはなりますが、そこはやってれば覚えます爆
ちなみにvue.jsからReact.jsに移行する件も増えてきていて、金額感はさらに上昇中。。
この期に100万を超えるような人材がどんな方なのかをイメージできるようにしましょう！
この記事が気に入ったらサポートをしてみませんか？