DX技術用語辞典

React.jsとは

React.js（通称：React）は、Facebookと、個人開発者のコミュニティによって開発された、オープンソースのJavaScriptライブラリです。

 

React.jsの特徴

• JSXの利用
  ReactではJavaScript XML（JSX）というJavascriptに、HTML要素のようなものを記述することができます。
  これによりJavaScriptのcreateElementを使うことなく、HTML要素を生成できるのでコードの記述量が少なくなります。

   

  // JSXありの場合
  function render() {
  return (
  <ul>
  <li>アルサーガパートナーズ</li>
  <li>arsaga.jp</li>
  </ul>
  );
  }

   

  // JSXなしの場合
  function render() {
  return React.createElement(
  ‘ul’,
  null,
  React.createElement(‘li’, null, ‘アルサーガパートナーズ’),
  React.createElement(‘li’, null, ‘arsaga.jp’),
  );
  }

   

• 記述を細かく切り分けがしやすい
  見た目を司るビュー部分のファイルと、ロジックを司るファイルを切り分けることができるので、それぞれのファイルが担う役割が分かりやすく、結果としてファイルごとの記述量が少なくなり、見やすくなります。

 

React js関連の歴史

2011年:Facebook広告の管理ツールにおいて、機能が増えていくことにより、コードが複雑になり保守が困難な状況に。そこで社員の1人がReactのプロトタイプを開発しプロダクトに導入した。

 

2013年: Reactが公に発表され、OSSとなった。

 

2015年: モバイルアプリの開発ができるReactNativeがリリース。

 

現場の声

Reactで開発してTypeScriptとの相性が良いがいいなーと思います！
Vue.jsでもTypeScriptサポートはしてますが、子コンポーネントファイルで毎回デコレータ（※）を書く必要があります。その点、Reactはデコレータの記述が不要なので、記述量を減らすことができます！

 

その他にもVue.jsの場合、propsの必須（required）などを、毎回子コンポーネントファイルで書かないといけないのですが、Reactではその点、デフォルトがrequiredで不要であれば「？」をつければいいだけなので楽です！

 

※クラスやメソッドの定義などに修正や追加を行うこと。

 

 

関連用語

JSX
ReactNative
TypeScript
Vue.js

 

 

＜執筆・監修＞
アルサーガパートナーズ株式会社　DX技術用語集制作チーム　フロントdivision