javascriptフレームワークでトップクラスのシェアを持つReact.js
フロントエンドエンジニアの求人をみると、ほぼ確実にReact.jsのスキルについて言及されるようになりました。そんな、フロントエンドエンジニアにとって必須の技術ともなったReact.jsの基本的な使い方について解説したいと思います。
そもそも、React.jsとはどのようなものなのでしょう？
React.jsの特徴
まずは、実際のソースの前に、Reactの特徴について説明します！
Viewに特化したフレームワーク
web業界にいれば、MVCという言葉を聞き飽きたかもしれませんが、ReactはMVCのV(View)に特化したjavascriptのフレームワークです。
単方向データバインディング
Reactでは、保持しているデータの変更によって見た目の変更が行われます。
そのデータの変更に関するフローが単方向に固定されていて、コードが複雑化することを避けています。
仮想DOM(バーチャルDOM)
UIに変更が生じたときに、実際のDOMではなく、仮想的に作られたDOMで変更箇所を特定し、実際に変更が起きている部分だけ実際のDOMを変更します。
この処理のおかげで、Reactは高速なUI表現を実現しています。
このような機能をもつReactが一般化した背景には、javascriptの進化によるweb上でのリッチな表現の必要性があります。
jsで様々な表現が可能になったため、webでもネイティブアプリに近い挙動が求められるようになり、バックエンドで担当していたロジックをフロントエンドが一部担当するようになってきています。
React.jsの基本的な書き方
上記でReactの特徴を説明してきましたので、ここからは簡単にReact.jsで現在の時間を表示するプログラムを紹介したいと思います。
Reactの書き方は非常にシンプルで、環境構築が完了している場合(環境構築に関しては、多くの情報がネット上にありますので、そちらを参照してください！)
にて、実行できます。(JSXという拡張機能を使っていますので、環境構築の際はJSXも共に構築してください)
この書き方通りに現在の時間を表示するプログラムを記述すると
|
1 2 3 4 5 6 7 8 9 10 |
<script type="text/babel"> // 描画先のDOM const root = document.getElementById('root') // Dateオブジェクトをインスタンス化 const date = new Date() ReactDOM.render( <div>{date.getHours()}:{date.getMinutes()}:{date.getSeconds()}</div>, root ) </script> |
となります。非常にシンプルですよね？
React.jsは、難しそうで避けていた方も多いと思います。しかし、一度手をつけてみると、そこまで複雑な処理はなく、基本的な構文の組み合わせでwebアプリを作っていけます。
React.jsを覚えよう！
Reactを使えるようになれば、最近増えつつあるSPA(シングルページアプリケーション)の構築も比較的かんたんに行えるようになります。
そして、なによりもフロントエンドとしてお仕事をしていく場合は、Reactは必須のスキルになりつつありますので、是非、勉強してみてください！
