こんにちは。
こちらの記事を書かせていただきました、渡辺です。
今年で社会人2年目となり、React.jsに１年、2年目でNode.jsに半年触れてきて各機能に対し少しずつ理解が進んでいるとはいえ、
まだまだ知らないことやそもそもどういう目的で使われているのかを理解しておきたかったのでこの機に備忘録としてまとめておきます。
以下、目次になります。
1,React.jsとNode.jsについて
2,それぞれの違い
3,業務で印象に残った内容
4,まとめと今後の展望
1,React.jsとNode.jsについて
1-1 React.jsについて
ReactはFacebook社が開発した、Webサイトやアプリ上のUI開発に用いられるJavaScriptのライブラリです。
jQueryやVue.jsなどのフレームワークと異なり、ReactはあくまでUIを構築するためのライブラリとなっています。
Reactは直感的にUIを実装・調整できることが特徴で、
誰が見てもわかりやすくシンプルなソースコードとなり、スムーズにテストやデバッグを行えます。
また、Reactでは仮想DOMをもちいたレンダリング機能があり、
本番のDOMと仮想DOMの差異のみを更新するため本番DOMでの調整が最小限となり、
描画処理が高速化されパフォーマンス向上が図れます。
ほかにもコンポーネントベースの設計がされており、部分ごとにコンポーネントが分けられているため、再利用可能な部品を作成したり、変更したい部分のみを変更することができます。
現在はFacebookはもちろん、インスタ、Netflix、Discord、UberEatsなど有名なアプリで利用されています。
1-2 Node.jsについて
Node.jsは本来Webサイト・アプリなどフロントエンドで開発するために用いるjsを、
サーバー側であるバックエンドで動作させるためのプラットフォーム(実行環境)です。
Node.jsはライブラリやプログラミング言語ではなくオープンソースのJS実行環境となっています。
Node.jsの特徴としてWebサイト(クライアントサイド)側で動作するJSをサーバーサイド側でも同様に開発に用いることができるため、
プログラムの統一化ができ管理や調整がしやすくなります。
また、Node.jsでは「ノンブロッキングI/O」が用いられておりサーバーへの大量アクセスに強く、リアルタイム処理が可能です。
加えてシングルスレッドが採用されておりノンブロッキングI/Oと合わせてサーバーでのC10K問題の解決を行うことも可能です。
ただNode.jsのデメリットとして、対応しているサーバーの種類が少なかったり、
処理内の一部が重たいものだとシングルスレッドの特性上待ち時間発生してしまい、タイムアウトなどでエラーとなる可能性があります。
2,それぞれの違い
React.jsとNode.jsはそもそも用いる目的や機能がかなり異なるため比較するものではありません。
それぞれの役割・機能を簡単に表でまとめると以下の通りになります。
| React.js | Node.js | |
|---|---|---|
| 目的 | ・フロントエンドで用いられるJSライブラリ | ・JSをバックエンドで動作させるプラットフォーム(実行環境) |
| 役割 | ・動的なUIの構築 | ・サーバーサイドでJSを実行でき、クライアントサイドと言語を合わせることが可能 |
| パフォーマンス | ・仮想DOMを用いた描画処理高速化によるパフォーマンス向上 | ・ノンブロッキングI/Oを用いた、大量アクセス対応可能のリアルタイム処理 |
各機能は適切な場面で適切な機能を使用することが肝要です。
3,業務で印象に残った内容
ここからは業務で触れていく中で印象に残った内容を紹介します。
3-1 React Data Grid
Reactデータグリッドは取得したテーブルデータを列ごとに画面に出力し、
列に対する様々なアクションをサポートしてくれるコンポーネントです。
(参考画像：MUI公式)
JSにて指定した条件から列の非活性化、編集・移動可能かどうかの管理や
グリッドデータの統計、ソート、１ページ当たりのデータ表示数など、
データをわかりやすく可視化、操作しやすくすることが可能です。
また各データ列を操作した際のフォーカスアウト時やデータの値が変化した時のみ実行される処理を組み込むことができ、それなりのカスタマイズ性を持っています。
現場ではReactデータグリッド用いており、大量のデータを一目でわかるように画面上でデータ操作ができるようにすることが目的であったため、
Reactデータグリッドについて理解することは開発をしていくうえでかなり重要なものでした。
3-2 useEffect
useEffectはReactのフックの1種です。
フックはReactにてクラスを用いずに使用することが可能になる機能のことで、
再利用性が高くかつ分かりやすいコードにすることができます。
またuseEffectでは「関数の実行タイミングをレンダリング後まで遅らせられる」機能が備わっており、
これにより、コードを一括で管理することが可能なため、かなりきれいなコードにまとめることができます。
ただ改めて調べたところ、
useEffectは公式から「副作用フック」と呼ばれており、
関数によっては、仮に同じ引数で同じ関数を呼んだとしても結果変わってしまう可能性があるため、テストやデバッグに向いておらず、実際に使用する際に意図しない影響が発生する場合があるため十分に注意する必要があります。
「addEventListener」と「removeEventLister」を用いてイベント管理やダイアログの表示などを行うことが可能ですが、useEffectの無限ループやイベント管理を制御することが大切です。
3-3 A-Auto
こちらはソースやコマンドなどではなくジョブ管理ツールの一つなのですが、
現在の現場でとても便利だと感じたので、少しご紹介します。
A-Autoはバッチジョブを統合的に管理できるほか、システムの稼働状況監視、ログ管理、バッチの実施スケジュール調整、開発・運用・オペレーターなどの役割権限を詳細に設定できる機能が備わっています。
私が業務で使用した際には設定されたバッチジョブを指定されたコマンドで実施する内容だったのですが、
過去実施したバッチ、現在実施しているバッチ、完了したバッチ、異常終了したバッチが一目でわかるため複数のバッチを実施する場合でも、現在どのバッチまで実行したか、どのバッチ実施で問題が発生しているかがすぐに把握できてスムーズにテストを実施することができました。
↑実施したバッチがどのような状態なのか一目でわかる(青：実施完了、緑：実施中、金：実施待機 等)
(参考画像：A-Auto公式)
4,まとめと今後の展望
今回は業務で触れてきた内容について自分なりに再度まとめました。
まだ現場の場数が少なく触れた内容自体も少ないですが、
1年目で触れたReactについては大量のデータをわかりやすく画面上で管理できたことがかなり印象に残っています。
ただReactにはまだまだ便利な機能が備わっており、私が業務で触れられたのはほんの1部分です。
現在HTML5プロフェッショナルLevel2に挑戦していますが、資格勉強が落ち着いたらReactについても改めて勉強したいと考えています。
また、Node.jsについてもバックエンドでJSを使用できる特徴があるということで、
フロントエンドにReact、バックエンドにNode.jsを用いるといった欲張りセットで開発が行えたら将来的に需要があるエンジニアになれるのではないかと感じました。
ただ有能になるには知識だけでなく実際の現場での経験やマネジメント・コミュニケーションといったビジネススキルも必須になるため、
日々の業務で役に立つスキルを積極的に吸収して過ごせるように意識したいと思います。
ここまでお読みいただきありがとうございました。
来年は何か成果物を記事にできたらなと思っています。
それでは！
参考：MUI公式サイト
(https://mui.com/x/react-data-grid/)
A-Auto公式
(https://a-auto50.unirita.co.jp/manual/how-to-install/how-to-install-5/how-to-install-5-6/)