Arsaga Partners, Inc.

TOP

>

KNOWLEDGE

>

DX用語辞典

>

React.js

React.js

読み方:りあくとじぇーえす

  

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

制作・監修

アルサーガパートナーズ
DX技術用語辞典 制作チーム

当社は、営業部隊を持たないDX開発パートナースタジオです。

お問い合わせはこちら

CONTACT

下記よりお気軽にご相談ください。

LINEでお問い合わせ

RECRUIT

採用情報

アルサーガパートナーズ株式会社は、一緒に働く仲間を募集しています。 「人間らしく生きる」「自分で考えて行動する」という文化を重視しており、「バグを否定しない」という言葉を掲げています。 挑戦をし続けることが一番の成長に繋がると信じているからです。 まずは挑戦する第一歩を踏み出してもらえれば幸いです。

RECRUIT

採用情報