Reactについて初心者向けに徹底解説
スポンサードリンク
おはようございます。Shotaです。
今回の記事では、初心者向けにJavaScriptフレームワーク「React」について詳細に解説していきます。
- Reactとは
- Reactの特徴
- Reactのメリット・デメリット
- Reactの将来性
- Reactのサンプルコード
- まとめ:Reactは将来性の高いプログラミング言語だが、けっこう複雑なので私は使わない
- 参考サイト
Reactとは
Reactとは、Webサイトの画面を構築するためのJavaScriptライブラリです。Facebook社によって開発されました。React.jsとも呼ばれることもあります。よくVueやSvelteと比較されますが、ReactはあくまでUIを構築するためのライブラリです。
FacebookやInstagramのような世界的に有名な企業で採用されています。
Reactの特徴
Reactの特徴は主に以下のようなものがあります。
- 今流行りのUIを構築できる
- 高速
- コンポーネント指向
- SPA向け
それぞれ順番に解説していきます。
今流行りのUIを構築できる
UIはユーザインタフェース(User Interface)の略で、ユーザがシステムを利用するための画面を指します。Reactは、Webシステムの画面を作る上では非常に便利なライブラリです。
高速
Webサイトにアクセスする際、画面が表示されるまでに時間がかかることはよくあると思います。ところが、Reactを使って作成したWebサイトの場合は描画が高速なので、この待ち時間を短縮できます。
Reactは仮想DOM(Document of Model)を使っています。仮想DOMを使うと、Webサイトに表示させる内容を一部分だけ更新できます。これを活用することで必要最小限の処理で済むので、高速で画面を表示できるのです。
コンポーネント指向
コンポーネント指向は、Webサイトに表示する構成要素をそれぞれ独立したオブジェクトとして扱う概念です。それぞれのオブジェクトが独立しているので、Webサイトの一部分だけでも変更したい際でも必要箇所の変更だけで済みます。
SPA向け
SPAはSingle Page Application
の略で、一つのページだけで構成されたWEBアプリケーションです。複数のWebページを用意する場合と比較して、動作しやすいのが特徴です。
SPAではWebページを複数持たない分、JavaScriptを多用してアプリケーションに動きをつける必要があります。ReactはJavaScriptベースで動作も速いので、SPA開発に向いています。
Reactのメリット・デメリット
メリット
ページの表示を速くできる
Reactを使うことで、Webページの表示速度が改善する可能性が高くなります。Reactはページを更新する際、ページ全体を移動せずに変更した部分だけを更新する仕組みになっているためです。
Webページの表示速度の速さはユーザにとって非常に重要な要素の一つで、少しでも速く表示されるように改善することで離脱率を下げることにつながります。
学習コストが低い
Reactは学習コストが低いので、JavaScriptの経験があるならすぐにマスターできます。機能もそこまで多くなく構文もわかりやすいので、初心者でも覚えるのに困らないでしょう。
様々な開発に向いている
Reactは機能が部品ごとに分かれているので、他の箇所に影響を及ぼしにくく効率的に修正箇所をリリースできるのが特徴です。それだけではなく、React NativeでAndroidやiOS両対応のスマホアプリを簡単に開発できます。
このように、Reactは多種多様な開発に向いています。
デメリット
日本語の情報が少ない
Reactは日本語で書かれた情報が少ないので、時には英語の情報で勉強する必要があります。Reactの公式サイトも英語で表記されています。
メモリを多く消費する
Reactはメモリを多く消費します。Reactは変更箇所だけ更新するので、ページの情報をメモリに保持しているためどうしてもメモリを酷使してしまいます。
表示速度を上げるためにメモリを消費するのはやむを得ないので、メモリ消費が致命的になるWebページでの使用は控えたほうがいいかもしれません。
HTMLとの親和性が高いPHPが使えない
PHPはWeb開発で汎用性の高いプログラミング言語です。HTMLで記述されたプログラム内にPHPコードを埋めるので、Webサイトに動的な処理を追加できます。
ところが、ReactではこのPHPを活用できません。
Reactの将来性
今後需要が高くなる可能性がある
現在Reactは日本では流行っていませんが、海外では導入企業が高いので今後日本でも需要が高まることが予想されます。
現状Reactを使えるプログラマーが少ない
現状Reactを使えるプログラマーはそこまで多くないでしょう。そのため、今のうちにReactの基本的なスキルを身に着けておけばReactが日本で主流になった際にも活躍できます。
今後流行すると予想される技術を先回りで習得するのは、プログラマーが市場価値を高める方法の一つです。
Reactのサンプルコード
下記のコードはReactで簡単な数字を入力するためのフォームを作るプログラムです。
import React, {Component} from 'react' //******数字を入力するフォームのコンポーネント******* export default class NumberForm extends Component { constructor (props) { super(props) this.state = { value: ''} //****状態の初期化。stateオブジェクトはフォーム内で入力してもらう数字** } //***setState()メソッドを呼び出してコンポーネントの状態を変更しているdoChange()メソッド********* //***ユーザーが入力したテキストがe.target.valueとして得られる******** doChange (e) { const curValue = e.target.value const newValue = curValue.replace(/[^0-9]/g, '') //***数字でない場合は削除する*** this.setState({value: newValue}) //***setState()で改めて新しい値を設定する*** } //***送信ボタンが押されるとdoSubmit()メソッドが実行される。this.state.valueの値は更新されている*********** doSubmit (e) { window.alert('値を送信: ' + this.state.value) e.preventDefault() } //****画面の描画****** render() { //****イベントdoSubmitとイベントdoChangeにイベントハンドラを設定している********** const doSubmit = (e) => this.doSubmit(e) const doChange = (e) => this.doChange(e) return ( <form onSubmit={doSubmit}> <input type='text' value={this.state.value} onChange={doChange} /> <input type='submit' value='送信' /> </form> ) } }
Reactでプログラムを作成する手順は以下の通りです。
①必要なライブラリをインポート
②Webページの状態を初期化
③メソッドを作成して処理内容を完結に記す。このとき予約語function
は使わない
④最後にrender
関数を使って、表示する内容をHTMLを使って記述する。この際、データは直接タグの属性に記す
まとめ:Reactは将来性の高いプログラミング言語だが、けっこう複雑なので私は使わない
今回の記事では、初心者向けにReactについて詳細に解説しました。
Reactは将来性の高いJavaScriptライブラリですが、この記事を執筆している私は使うつもりはありません。理由は以下の通りです。
- ReactではTypeScriptが推奨されていないから
- シンプルにフロントエンドを開発したいから
- Reactを使ってハイスペックなWebページを開発する予定がないから
詳細は後日、本ブログにて話していこうと思います。
今回の記事はこれで終了です。