初めまして、vitalify.asia新卒入社3ヶ月目&IT経験3ヶ月目の小林です。先日の投稿でReact.jsの経験があるCVがたくさん届いていた事を知り、興味を持ったのでReact.jsについて知り得た情報をまとめて見ました。優しい目でお読みいただければ幸いです。

New11/17(金)IT企業向けベトナム情報満載の無料セミナー(先着50名様限定!東京で開催)

1. React.jsとは

React.jsに関して詳しく書いた文面はたくさん出回っている為、初心者目線でいかに簡易的に説明できるかが今回の課題です(僕が初心者なので)。

React.jsとは

– FacebookがOSSとして公開したもの

– つまりFacebook社が公開したUI構築のためのjsライブラリという事

– したがってjsフレームワークではない(フレームワークかと思っていました)

まとめると、コンポーネントの考え方を推し進めた、モダンな概念の少しかしこいViewライブラリ、という感じです。

先日まとめたデータを元に今Reactがどれくらい人気があるのか検証していきたいと思います。

 

sitesはLibscoreのsites数、scoreはhotframeworksのものです。あまり変動のないグラフになってしまいましたが、内容を調べて見ると、現在(24/7/2017)githubのstar数が71.7kとまだ世界での関心が高い言語と思われます。

またLibscoreのデータを見ると、現在React.jsを実装しているサイトも出てきたので少しpick upしました。以下の通りです。

実際にfeedly.comで使われているか調べてみたら

ありました。たくさんReactDOMがあります。

Reactの特徴は

– Just the UI:MVCのVにあたるUIのみを構築するためのもので、他にどういったライブラリと組み合わせるかは問わない

– Virtual DOM(=仮想DOM):実際のDOMに対する操作を抽象化し、シンプルなコードでそれなりのパフォーマンスを提供する

– Data flow:一方向のデータフローにより、従来の双方向データバインディングを実現するコードよりも簡素でわかりやすい

シンプルに一言で言うと、

– Component(コンポネート)を作る

以上!!!!笑

しかしそれによってアプリケーションの作り方を変えることが出来る(一番肝心)。

データの受け渡し方法は、2種類【props, state】(次回詳しく説明)

しかしReactが作れるのはView機能のみ。そこでView機能以外を補うアーキテクチャでFluxというものが出てきて、実装にはReduxというFluxのライブラリが主にReactでは使われています。

ここでFluxとReduxというワードをそれぞれ下記でまとめました。

2. Fluxとは

要点を説明すると、

– Facebookが考案したアーキテクチャスタイル

– ライブラリやフレームワークではない(当たり前)

– データの流れを一方向に限定するのが特徴的な設計パターン
 ここで間違えてはいけないのが、Fluxを導入する=コンポーネントの作り方が大きく変わるわけではない、という事です。Fluxは、あくまでデータフローとデータの更新ロジックの所在を明確にするためのものです。

3. Reduxとは

Fluxから派生したアーキテクチャスタイルで、Fluxの概念に則って開発されています。

特徴としては

– Reduxにはdispatcherがない。(上図のReducerで担う)

Reduxには3原則があるが、なぜこれがあるのかそれぞれ説明してみる。

– Single source of truth:1つだけのデータと決まっている為、汎用的なRedux DevToolのようなツールが設定なしですぐに使える。

– State is read-only:一言で言うと、読み取りのみ。値が同じであれば同じ内容であることが保証される(同じ値で配列の内容が違うということがない為)。reduxの場合、reducerを経由する。そのReducerを見れば、どのActionでどのデータを書き変えているかがひと目でわかる。Redux DevToolを使う事で、各アクションごとのstateの変化も見れる為何が原因でバグが起こったかをログから追うことも可能。

– Mutations are written as pure functions:actionがstateを変更する際にreducerを通して行う。reducerはactionとstateを受け取り、新しいstateを返す(=pureな関数となる)。

今回はReact.jsの表向きの仕組みだけ簡易的に説明しました。次回は実際にReact.jsを実装し、どんなメリットがあるのかを検証する予定です。

4.ベトナム・オフショアでのFront-end開発なら実績のあるバイタリフィへ

ベトナムへ進出されるならホーチミンで約9年、オフショア開発・アプリ開発を展開しているバイタリフィバイタリフィアアジアへお気軽にご相談ください。

ベトナムでのオフショア開発における『フロントエンド開発』や『アジャイル・スクラムでのサービス開発』も得意としております。またベトナム向けIT・WEBサービス/アプリの開発支援、ローカライズ、テストマーケティングといった進出支援に加えて、日本や他国向けのオフショア開発やアプリ開発も行っております。

New 11/17(金)開催
IT企業のためのベトナム進出セミナー!・ビジネス環境 ・進出方法 ・仮想通貨ソフト開発 ・マーケット開拓事例 開催日 2017年11月17日(金) お申し込みはこちら