• 広報部

React開発のスキルセットには何が必要?!

更新日:4月13日



フロントエンドのフレームワークのひとつに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開発に注力しております。




100回の閲覧0件のコメント