はじめまして！
7月から入社したエンジニアの中島です。
日々、楽しくコーディングしています。
さて、
エンジニアチームの新人課題として話に挙がっている「React」についてアウトプットの意味も込めて話していこうと思います。
そもそも「React」ってなに？
皆さんお馴染みのFacebook社が開発を行なっているコンポーネント指向のJavaScriptライブラリで、インタラクティブなUIの設計に特化しています。
スマートフォンやタブレットが生活に欠かせない時代。
老若男女誰もが使いやすいアプリケーションを開発する必要があります。
その手段の1つとして「React」にフォーカスを当てていきます。
仮想DOM
Reactは、仮想DOM(Document Of Model)という技術が使われています。
仮想DOMと言われてもパッとこない方もいらっしゃるかと思います。
（ドキュメントなどでは「React要素」と呼ばれています。）
実際にブラウザ表示されているDOMに操作を加えるjQueryに対して、
仮想DOMをあらかじめ生成し、ユーザーアクションによってDOMと仮想DOMの差分のみ更新を行うReact。
全体を読み込まずに更新された一部分のみレンダリングするため、表示切り替えがスムーズになります。
簡単な例として、コンポーネントを作成しました。
input要素にテキストを入力すると自動で更新されるのがわかるかと思います。
See the Pen
React at CodePen by shu nakajima (@nakajima_archetyp)
on CodePen.
コンポーネント化のメリット
複雑なUIを「コンポーネント」と呼ばれる小さく独立した部品から組み立てていくのですが、コンポーネント単位でUIを設計することで多くのメリットがあります。
再利用で作業工数を減らす
コンポーネント化したUIは、複数の画面で再利用できます。
Reactに限った話ではありませんが、複雑に設計してしまったUIを再利用したいときにCSSやJSなどで上書きに上書きを重ねて流用、なんてことありませんか？
そんな問題も払拭できるのが「コンポーネント化」です。
仕様変更に強い
アジャイル開発が主流となり、開発途中に仕様変更することはよくあります。仕様変更に伴って、調整が別途必要になることが高確率で起きます。デザイナーさんと話し合いの末、どこかで妥協しなければならないことも。
しかし、コンポーネント化されたUIは画面に依存しないので、仕様変更における負担を減らすことに繋がります。
並行開発のしやすさ
多数ページある大規模な開発となると、複数人が並行して作業できる環境が理想的です。
さきほどお話ししたようにUIをコンポーネント化する場合、画面とは切り離してコンポーネント単位で開発を行います。なので、1つの画面にも複数人で並行開発することが可能になります。
開発環境について
Reactは、ES2015以降の構文が推奨されていることに加えて、JSX（JavaScript XML）というそのままではブラウザで動かない構文を取り入れています。
そのため、JavaScriptファイルを互換性のあるES2015に変換するトランスパイラ（Babel等）とES ModulesのJSファイルをまとめるモジュールバンドラー（webpack等）の利用を前提とします。
簡易的な環境を構築してみましょう。
package.jsonを生成します。
$ npm init -yBabelとwebpackに必要なパッケージをインストールします。
Babel用$ npm i -D @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/register
webpack用$ npm i -D webpack webpack-cli
Reactのパッケージをインストールします。
React用$ npm i -S react react-dom
webpack-dev-serverをインストールします。
webpack-dev-serverはサーバーを通して動作確認をすることができ、ソースコードの変更も検知して自動でビルドします。
$ npm i -D webpack-dev-server html-webpack-pluginこれで環境はひとまず完成です。
それではwebpack-dev-serverを立ち上げて、下記ソースのh1タグに”hellow”を入力＋保存してみます。
index.jsxclass App extends React.Component {
render() {
return (
<h1></h1>
);
}
}
render(<App />, document.getElementById("app"));
下記環境で動作します。
package.json{
"name": "react_develop",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "^7.0.0",
"@babel/register": "^7.5.5",
"babel-loader": "^8.0.6",
"html-webpack-plugin": "^3.2.0",
"react-hot-loader": "^4.5.3",
"webpack": "^4.39.3",
"webpack-cli": "^3.3.7",
"webpack-dev-server": "^3.8.1"
},
"dependencies": {
"react": "^16.9.0",
"react-dom": "^16.9.0",
"styled-components": "^4.3.2"
}
}
しかし、プロジェクトとなると開発環境を構築するのも骨が折れますよね。また、Reactがどのようなものか試してみたいという方もいるかと思います。
Create React AppはFacebook公式ツールでReact開発に必要な環境をコマンド１つで構築できます。
公式のチュートリアルが分かりやすいので試してみるのもオススメです。
それではまた！