Re:ゼロから始める文系プログラマ

未経験がプログラミングを通して人生を変える

Reactについて初心者向けに徹底解説


スポンサードリンク
 

f:id:ShotaNukumizu_1000:20220131090004p:plain

おはようございます。Shotaです。

今回の記事では、初心者向けにJavaScriptフレームワーク「React」について詳細に解説していきます。


Reactとは

f:id:ShotaNukumizu_1000:20220131085621p:plain

Reactとは、Webサイトの画面を構築するためのJavaScriptライブラリです。Facebook社によって開発されました。React.jsとも呼ばれることもあります。よくVueやSvelteと比較されますが、ReactはあくまでUIを構築するためのライブラリです。

FacebookInstagramのような世界的に有名な企業で採用されています。

Reactの特徴

f:id:ShotaNukumizu_1000:20220103130058p:plain

Reactの特徴は主に以下のようなものがあります。



それぞれ順番に解説していきます。

今流行りの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のメリット・デメリット

メリット

f:id:ShotaNukumizu_1000:20210921075852p:plain

ページの表示を速くできる

Reactを使うことで、Webページの表示速度が改善する可能性が高くなります。Reactはページを更新する際、ページ全体を移動せずに変更した部分だけを更新する仕組みになっているためです。

Webページの表示速度の速さはユーザにとって非常に重要な要素の一つで、少しでも速く表示されるように改善することで離脱率を下げることにつながります。

学習コストが低い

Reactは学習コストが低いので、JavaScriptの経験があるならすぐにマスターできます。機能もそこまで多くなく構文もわかりやすいので、初心者でも覚えるのに困らないでしょう。

様々な開発に向いている

Reactは機能が部品ごとに分かれているので、他の箇所に影響を及ぼしにくく効率的に修正箇所をリリースできるのが特徴です。それだけではなく、React NativeでAndroidiOS両対応のスマホアプリを簡単に開発できます。

このように、Reactは多種多様な開発に向いています。

デメリット

f:id:ShotaNukumizu_1000:20210924065330p:plain

日本語の情報が少ない

Reactは日本語で書かれた情報が少ないので、時には英語の情報で勉強する必要があります。Reactの公式サイトも英語で表記されています。

メモリを多く消費する

Reactはメモリを多く消費します。Reactは変更箇所だけ更新するので、ページの情報をメモリに保持しているためどうしてもメモリを酷使してしまいます。

表示速度を上げるためにメモリを消費するのはやむを得ないので、メモリ消費が致命的になるWebページでの使用は控えたほうがいいかもしれません。

HTMLとの親和性が高いPHPが使えない

PHPはWeb開発で汎用性の高いプログラミング言語です。HTMLで記述されたプログラム内にPHPコードを埋めるので、Webサイトに動的な処理を追加できます。

ところが、ReactではこのPHPを活用できません。

Reactの将来性

f:id:ShotaNukumizu_1000:20210924083429p:plain

今後需要が高くなる可能性がある

現在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は将来性の高いプログラミング言語だが、けっこう複雑なので私は使わない

f:id:ShotaNukumizu_1000:20210924094721p:plain

今回の記事では、初心者向けにReactについて詳細に解説しました。

Reactは将来性の高いJavaScriptライブラリですが、この記事を執筆している私は使うつもりはありません。理由は以下の通りです。

  • ReactではTypeScriptが推奨されていないから
  • シンプルにフロントエンドを開発したいから
  • Reactを使ってハイスペックなWebページを開発する予定がないから

詳細は後日、本ブログにて話していこうと思います。

今回の記事はこれで終了です。

参考サイト

www.geekly.co.jp

and-engineer.com

www.sejuku.net

torutsume.net