1. HOME
  2. ブログ
  3. エンジニアになろう!
  4. React の学習の手引き

React の学習の手引き

Reactはユーザーインターフェースを構築するためのJavaScript

ミツオカミツオカ
最近は、便利なJavaScript の UI フレームワークがリリースされて、HTMLをクライアント側で動的に生成することが増えてきましたね!
にゃんこ師匠 にゃんこ師匠
ほほー、よく勉強してるにゃ!その中でも「React」「Angular」「Vue」「Riot」などでインタラクティブなサイトを簡単に構築できるようになったにゃ
ミツオカミツオカ
では、今回はその1つ「React」をお前に教えよう!
にゃんこ師匠 にゃんこ師匠
やったー!よろしくお願いします!…あれ?

React(リアクト)とは?

数年前までは、Webサイトを構築する場合、こんな感じで行うのがほとんどでした。

  1. PHPやRubyのサーバーサイドでHTMLを構築
  2. クライアントサイドではCSSでデザイン
  3. jQueryでちょっとした動きをつける

しかし、最近は、「React」「Angular」「Vue」「Riot」などのライブラリを使う方が増えてきました。

今回は、その中の1つ『React』について、どういったものなのか?

そして、どのように学習していくか?をご紹介していきたいと思います!

ReactはFacebook社によって開発された

Reactは、Facebook社によって開発され、2013 年にオープンソースコードとして、リリースされました。

公式サイト によるとこう書いてあります。

A JavaScript library for building user interfaces

翻訳すると「ユーザーインターフェースを構築するための JavaScript」です。

React単体では、 MVC ロジックの View だけを担当します。

React の人気

React は、現在(2019/04/21 執筆) Github のスター数で 5位の人気のプロジェクトです。(なお、ライバルの Vue は3位)

今、もっとも勢いのあるライブラリの一つと言えます。

また、Reactは、 MITライセンスで提供されています。

ちなみに、React が使われているサイトは、このようなものがあります。

  1. Facebook(フェイスブック)
  2. Instagram(インスタグラム)
  3. Pixiv(ピクシブ)

Reactの特徴

Reactは、宣言的です。

どのようなデータが入力され、どのような振る舞いを行うのか、宣言的な View を作成することで、コードの見通ししがよくなり、デバッグしやすくなります。

また、公式サイトでは、以下のような特徴があると言っています

  1. Declarative(宣言的)
  2. Component-Based (コンポーネントベース)
  3. Learn Once, Write Anywhare(一度学べば、どこでも書ける)

コンポーネントベース

React では、コンポーネント(component) と呼ばれる小さな部品を作成し、これらを組み合わせることで複雑なユーザーインターフェースを作成します。

例えば、サイト全体は HeaderComponents、 MainComponents からできていて、それらのコンポーネントは更に小さな部品のコンポーネントで構築されている具合です。

components

JavaScript で作成されたコンポーネントは、ロジックを書くことも容易です。

条件分岐によっては、特定のコンポーネントを表示させる、表示させない、表示内容を変更するといったことも簡単です。

Learn Once, Write Anywhere(一度学べば、どこでも書ける)

(Java のようですね。Java は "run once , run anywhere" ですが……。)

React は、 Webクライアントサイドのみならず、Nodejs を利用することでサーバーサイドでも利用できます。

さらに、モバイルアプリのライブラリとして、 React Native(リアクトネイティブ) が存在します。

React を学ぶことで、 Web アプリを作成することも、モバイルアプリを作成することもできるようになります。

Reactの学習環境

ここ最近で、Reactの学習がしやすい環境が整ってきました。

  1. 2019年1月30日 : Progate が React コースを開設
  2. 2019年2月23日 : React 公式ドキュメント & チュートリアルが日本語化

React の公式サイトが、詳しいチュートリアルを提供してくれています。

「React がどういうものなのか?」という解説が詳しく書かれているので熟読することをオススメします。

また、特に、Progate は実際に手を動かして学べるので便利だと思います。

にゃんこ師匠 にゃんこ師匠
React を学習する場合、二つの選択肢があるのにゃ
ミツオカミツオカ
1. オンライン環境で開発する
2. ローカル環境で開発する
にゃんこ師匠 にゃんこ師匠
オンライン環境で開発する場合は?
ミツオカミツオカ
React を試してみることができるオンラインエディタが「CodePen」や「CodeSandbox」「Glitch」 で提供されています!
にゃんこ師匠 にゃんこ師匠
正解!では次に、ローカル環境で開発する場合を紹介していくぞい

Reactをローカル環境で開発する

HTML で簡易的な開発環境を用意する場合

自前の手に馴染んだテキストエディタで開発したい場合、ローカルで開発すると良いでしょう。

以下の HTML を編集することで React を手軽に体験できます。

簡易 React 体験用 HTML テンプレート

ツールを使って開発環境を用意する場合

より快適な開発環境をローカルで求めるのなら、React 公式が提供している 'create-react-app' というツールチェーンを利用することをオススメします。

NodeJS がインストールされたパソコンで以下のコマンドを実行すると、webpack や Babel といったツール群が設定されたプロジェクトが用意されます。

作成されたプロジェクトに移動し以下のコマンドを実行してください。

http://localhost:3000 にライブプレビュー機能付きの開発サーバーが立ち上がります。変更内容を確認しながら開発を進めるのに便利です。

welcomeToReact

チュートリアルを進める

オンラインエディターや、ローカルでの簡易的な HTML ファイル、'react-create-app' を使い、学習環境が整えられたら公式のドキュメント を読み進めましょう。

Hello World を表示するところから、コンポーネントの作成、React での state の扱いといった内容を丁寧に説明してくれます。

もし、手を動かしながら学びたいのであれば チュートリアルを進めましょう。

こちらでは、三目並べの作り方が紹介されています。

さいごに

公式サイトのチュートリアルを追えると、React のコンポーネントの扱いが理解できているはずです。

今後 React の需要は増えていくと思われるので、スキルの一つとして身につけることをオススメします。

簡単ではありますが、さらにレベルアップを図りたい人のために、おすすめフレームワークをご紹介して終わりたいと思います。

React を使ったサイトを構築したい場合

NextJS(ネクストジェーエス) の学習を進めることをオススメします。

NextJSは、サーバーサイドレンダリングにも対応した Web サイトを簡単に構築するためのフレームワークです。

Web サイトをアプリのようにしたい場合

Redux(リダックス)の学習をオススメします。

React で大規模なアプリケーションを作成すると、state(状態)の管理に苦労するときがあります。

その解決策として Redux が提案されています。

React + Redux を使いこなせるようになれば Web アプリケーションの開発が捗ること間違いなしです!

こちらの記事もオススメ!

書いた人はこんな人

広告メディア事業部
広告メディア事業部
「好きを仕事にするエンジニア集団」の(株)ライトコードです!

ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もり大歓迎!

また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です!
インターンや新卒採用も行っております。

以下よりご応募をお待ちしております!
https://rightcode.co.jp/recruit

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア