• トップ
  • ブログ一覧
  • React の学習の手引き
  • React の学習の手引き

    広告メディア事業部広告メディア事業部
    2019.05.15

    エンジニアになろう!

    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 テンプレート
    1<!DOCTYPE html>
    2<html>
    3  <head>
    4    <meta charset="UTF-8" />
    5    <title>Hello World</title>
    6    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    7    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    8
    9    <!-- 本番環境の使用にはオススメしません: -->
    10    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    11  </head>
    12  <body>
    13    <div id="root"></div>
    14
    15    <!-- React 記述部分 -->
    16    <script type="text/babel">
    17      ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById("root"));
    18    </script>
    19    <!--
    20        注意:この HTMLReact を実験するには良い方法ですが、本番環境には適していません。
    21        なぜなら JSX はブラウザで読み込まれたBabelでゆっくりとコンパイルされ、開発ビルドの巨大な React を利用するためです。
    22
    23        JSXを用いた本番環境のセットアップは以下の文書を読んでください
    24        https://ja.reactjs.org/docs/add-react-to-a-website.html
    25      
    26        大規模プロジェクトでは、JSX を含む統合ツールチェーンを用いた開発を行うことができます。
    27        https://ja.reactjs.org/docs/create-a-new-react-app.html
    28
    29        また、JSX なしで React を利用することもできます。この場合、Babel を削除できます。
    30        https://ja.reactjs.org/docs/react-without-jsx.html
    31    -->
    32  </body>
    33</html>

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

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

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

    1npx create-react-app my-app

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

    1npm start

    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 アプリケーションの開発が捗ること間違いなしです!

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

    featureImg2020.08.07JavaScript 特集知識編JavaScriptを使ってできることをわかりやすく解説!JavaScriptの歴史【紆余曲折を経たプログラミン...

    featureImg2020.07.17ライトコード的「やってみた!」シリーズ「やってみた!」を集めました!(株)ライトコードが今まで作ってきた「やってみた!」記事を集めてみました!※作成日が新し...

    広告メディア事業部

    広告メディア事業部

    おすすめ記事