React に挑戦する人へ ~始める前に必要な知識~

2020年5月18日 03:23

この記事を読んでくださっているということは、React をこれから始めたいとおもっている方だと思います！React ってなんだかすごいものらしいぞとか面白そうなどのイメージがあると思いますが、そんなあなたへ、React とはなにかを簡単に説明して、必要となる事前知識を紹介します。

まず React とはなにか？

シングルページウェブアプリケーションのフロントエンドを効率的に作るためのツール（ライブラリ）です。

シングルページウェブアプリケーションとは、リアルタイムに表示される情報が更新される、入力 / 登録処理が必要、動的に UI が変更される、また動作の快適さが求められるシステムを想像してもらえればよく、facebook、twitter、Google Drive などがイメージしやすいと思います。

シングルページとついているのは、動作を高速にするため一度のサーバーへのアクセスでアプリケーションの大部分の要素を読み込み、基本的に UI の操作に対してブラウザタブの再読み込みが行われないことからそう呼ばれます。（ブログなどはページをめくるたびにサーバーへのアクセス、再読み込みが走りますよね？）

余談ですが、React は facebook が作ったライブラリでウェブアプリケーションの機能を効率的な開発また動作を高速にするために作られました。2014 年頃から徐々に使われ始め、2020 年の今ではウェブアプリケーション開発にもっとも使われているとも言われます。実際に私も React での開発案件はよく受けます。

React で作るべきものはなにか

まず、読者の方にまずやってほしいのが自分の作りたいものがウェブアプリケーションなのか (= React で作るべきものなのかどうか) です。駆け出しエンジニアさんが最初に取り組むような Web 制作案件のブログやホームーページなどは特殊な場合を除いて React で作るのはやりすぎです。きちんと対応しないと SEO 的に問題がでることもあります。ここを見誤ると時間をかけて React を勉強した挙げ句、SEO 的に問題のあるブログやホームページを作成して終わります、残念ながら。

React で作るべきもの具体例を少しあげます。たとえば実際に私が作ったものでいうと、放送局の番組管理システムのフロントエンド、ウェブ上で動画編集ができるサービスなどです。番組管理システムでは、番組情報や出演者の情報を検索して選んだり、紹介文を入力したりなど様々な機能が要求されます。これは React で作れば、素の JavaScript で書くよりも大幅に工数を削減することができます。React で作るべきで SEO が要求される（例えばSNS サービスを作りたい）場合には React に加えてサーバーサイドも特別な組み方をする必要があります。

じゃあなにがわかっていたら始められる？

まず、 HTML / CSS / JavaScript の基礎知識は必須です。React では JavaScript のなかに HTML を書けるようにした JSX という書式でアプリケーションを作っていきます。また、JavaScript の ES6 (ES2015) というバージョンから導入されたクラス、モジュールについて知っている必要があります。開発を始めるには JavaScript の複数ファイルをまとめて１つのファイルにする処理をコマンドラインで Node.js のアプリケーションを実行で行う必要があるため、コマンドラインで Node.js のスクリプトを最低限走らせられること、Node.js のモジュールの追加、削除について知っておく必要があります。

また、一般的に React は難しいと言われます。それは React が初学者向けに作られたものではなく、大規模システムを作るために作られたものだからでしょう。ただし、それは facebook ほどのシステム、すなわち全世界のどのシステムでも React で開発することができるということです。

ここまでの説明でハードルが上がりまくったことでしょう。でも、これまでのプログラミング経験で Google 検索をうまく活用して自分に必要なものを見つけられていた人であれば大丈夫です😃 僕も実際、React を始めた時は JavaScript の ES6 に対する理解が甘かったです。ただ、最低限 HTML / CSS / JavaScript の基礎は習得しておくこと、また、コマンドラインでのコマンド実行には慣れておいたほうがよいです。HTML / CSS / JavaScript に関しては、ストップウォッチや神経衰弱などの簡単なゲームを何も見ずに作れるくらいで、まずは十分ではないかと思います。

始める際には create-react-app というプロジェクト設定を簡単に行ってくれるツールがあるのでそれを利用することをおすすめします。

キモいと呼ばれる JSX

React でのコーディングについて、少し紹介します。上記で書いた JavaScript の拡張の JSX とは、HTML を JavaScript に直接書いて DOM 要素を動的にコントロールする事ができるものです。JSX は一部の人から HTML なのか JavaScript なのかわからん、キモいと言われたりしてます（泣）

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
 return (
   <div className="App">
     <header className="App-header">
       <img src={logo} className="App-logo" alt="logo" />
       <p>
         Edit <code>src/App.js</code> and save to reload.
       </p>
       <a
         className="App-link"
         href="https://reactjs.org"
         target="_blank"
         rel="noopener noreferrer"
       >
         Learn React
       </a>
     </header>
   </div>
 );
}

export default App;

見たことないでしょ、こんな不自然な見た目のコード ... 笑。でも、わかりそうなところもありますよね？😃 HTML タグが JavaScript の関数の中に書かれています。className という文字がありますが、CSS のクラスを設定する部分です。function App() は HTML のまとまりを返す関数です。こういったHTML タグを含んだ関数やクラスを作成、組み合わせながらアプリケーションを作っていきます。

最後に

なんとなく雰囲気はわかったと思います。まず、重要なことは自分は React を使うべきか、学ぶべきか判断すること。もちろん興味があって勉強してみるというのは OK です！HTML / CSS / JavaScript とコマンドライン実行の知識は必須。それ以外の知識に関しては、やりながら学べる人は上の文章の中からキーワードを拾って始めてみましょう！

０から学ぶ React の記事を今後公開したいと思いますので、よろしくおねがいします。twitter (@ryocoding) でお知らせをしますね😃