フロントエンドのフレームワークのひとつに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開発に注力しております。
フロントエンドエンジニア募集中でございます。こちらも見ていただけましたら幸いです。
