1
/
5

【フロントエンド】React開発に必要なスキルとは?!

こんにちは!

株式会社グロシード HR事業部のKOHです。

フロントエンドのフレームワークのひとつにReact.jsがあります。

React開発のスキルセットには何が必要だろう?!そんな疑問にお答えするべく、今回のストーリーでは、React開発における最近の動向をご紹介します。

はじめに

近年では、フロントエンドにJavaScriptのフレームワークが利用されるようになり、Vue.js、React.js、AngularJSの利用が促進されました。

React.jsは小規模から大規模までスケールしやすいメリットがあると言われます。静的型付言語のTypeScriptを用いて型宣言を厳格に開発することから、本番公開後に型エラーを起こすことがありません。

それでは、React.jsでのSPA開発において、当社で取り組んでいるスキル習得を中心にご紹介します。

最近の動向

<Hooks>

2019年にHooksが登場しました。これまで関数型コンポーネントではState管理を行えなかったのですが、ContextAPI / Hooks を用いることで、コンポーネントスコープ内のデータ渡しを含むState管理を扱えるようになりました。これは2021年も主流の開発になっています。

<Redux Toolkit>

2020年にRedux Toolkitの導入が主流になりました。コンポーネントを超えたグローバルなデータ渡しを行うにはReduxを用いるのですが、ローカルState管理と比較するとコンポーネント数が増加します。Redux ToolKitを導入することで、コンポーネント数を抑える形で、Reduxを用いたグローバルstateを状態管理できるようになりました。これにより2021年ではReduxを用いた開発機会が多くなっています。

<React Testing Libraly>

2021年はReact Testing Libralyの活用機会が増える傾向です。フロントエンドエンジニアはテストフレームワークとしてJESTを用います。JESTはテストランナーであり、コマンドラインからJESTでテストを実行します。ここに加えて、React Testing Libraryは、Reactコンポーネントをテストするためのテストライブラリです。Reactコンポーネントをレンダリングしてユニットテスト、結合テストを実現します。

今後の流れ

近年は、Next.jsやGatsbyJSの登場により、SSRやSSGでのWEBアプリを開発できるようになりました。SEO管理が必要となるサイトではSSRやSSGでフロントエンドを構築できることに魅力があります。又、GraphQLの利用によりAPI結果セットをまとめて取得できるようになり、Next.js / GraphQLにてBFF(Backends For Frontends)を構築されている企業様もいらっしゃいます。

まとめ

グロシードでは顧客要件を実現するReact開発に取り組んでおります。

WEB制作経験をいかして既存CSSを活用するCSS ModulesでのReact開発をはじめ、styled-components / Material-UI / StorybookにてCSS in JSでのReact開発に注力しております。

フロントエンドエンジニアを募集中ですのでこちらも見ていただけましたら幸いです。

Reactエンジニア
フロントエンド領域で市場価値を高める!Reactエンジニア募集!
┏ーーーーーーーーーーーー |◾ ソフトウェア開発事業 ┗ーーーーーーーーーーーー 株式会社グロシードはクライアントの開発プロジェクト支援を担っている会社です。 WEBアプリ、スマホアプリの設計や開発を中心に、保守開発まで支援しております。バックエンド、フロントエンド、スマホアプリ、デザイナーまで、アプリ開発に必要となる技術領域にて、スキル保有者が揃っていることを強みとしております。 ┏ーーーーーーーーーーーー |◾ IT関連教育事業 ┗ーーーーーーーーーーーー 「成長環境」「尊重文化」をMISSIONに掲げ、WEB業界におけるエンジニア・デザイナーのキャリアプランの更新に取り組んでいます。 未経験から始まり、アプリをサービスインできるようになり、エンジニアの市場価値を獲得できるまでのステップを仕組化してキャリアを構成しています。
株式会社グロシード
株式会社グロシード's job postings
2 Likes
2 Likes

Weekly ranking

Show other rankings
If this story triggered your interest, go ahead and visit them to learn more