fbpx
  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社によって開発され、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 アプリケーションの開発が捗ること間違いなしです!

参考サイト

  1. React – A JavaScript library for building user interfaces
  2. facebook/react – GitHub

一緒に働いてくれる仲間を募集しております!

ライトコードでは、仲間を募集しております!

当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。

また、ライトコードは現在、急成長中!だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております!

なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。

ライトコードでは一緒に働いていただける方を募集しております!

採用情報はこちら

関連記事