広告メディア事業部React の学習の手引き
広告メディア事業部エンジニアになろう！
Reactはユーザーインターフェースを構築するためのJavaScript
ミツオカ
にゃんこ師匠ミツオカ にゃんこ師匠React（リアクト）とは？
数年前までは、Webサイトを構築する場合、こんな感じで行うのがほとんどでした。
- PHPやRubyのサーバーサイドでHTMLを構築
- クライアントサイドではCSSでデザイン
- 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 が使われているサイトは、このようなものがあります。
- Facebook（フェイスブック）
- Instagram（インスタグラム）
- Pixiv（ピクシブ）
Reactの特徴
Reactは、宣言的です。
どのようなデータが入力され、どのような振る舞いを行うのか、宣言的な View を作成することで、コードの見通ししがよくなり、デバッグしやすくなります。
また、公式サイトでは、以下のような特徴があると言っています
- Declarative(宣言的)
- Component-Based (コンポーネントベース)
- Learn Once, Write Anywhare(一度学べば、どこでも書ける)
コンポーネントベース
React では、コンポーネント(component) と呼ばれる小さな部品を作成し、これらを組み合わせることで複雑なユーザーインターフェースを作成します。
例えば、サイト全体は HeaderComponents、 MainComponents からできていて、それらのコンポーネントは更に小さな部品のコンポーネントで構築されている具合です。
JavaScript で作成されたコンポーネントは、ロジックを書くことも容易です。
条件分岐によっては、特定のコンポーネントを表示させる、表示させない、表示内容を変更するといったことも簡単です。
Learn Once, Write Anywhere（一度学べば、どこでも書ける）
（Java のようですね。Java は "run once , run anywhere" ですが……。）
React は、 Webクライアントサイドのみならず、Nodejs を利用することでサーバーサイドでも利用できます。
さらに、モバイルアプリのライブラリとして、 React Native（リアクトネイティブ） が存在します。
React を学ぶことで、 Web アプリを作成することも、モバイルアプリを作成することもできるようになります。
Reactの学習環境
ここ最近で、Reactの学習がしやすい環境が整ってきました。
- 2019年1月30日 : Progate が React コースを開設
- 2019年2月23日 : React 公式ドキュメント & チュートリアルが日本語化
React の公式サイトが、詳しいチュートリアルを提供してくれています。
「React がどういうものなのか？」という解説が詳しく書かれているので熟読することをオススメします。
また、特に、Progate は実際に手を動かして学べるので便利だと思います。
にゃんこ師匠ミツオカ2. ローカル環境で開発する
にゃんこ師匠ミツオカ にゃんこ師匠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 注意：この HTML は React を実験するには良い方法ですが、本番環境には適していません。
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 starthttp://localhost:3000 にライブプレビュー機能付きの開発サーバーが立ち上がります。変更内容を確認しながら開発を進めるのに便利です。
チュートリアルを進める
オンラインエディターや、ローカルでの簡易的な HTML ファイル、'react-create-app' を使い、学習環境が整えられたら公式のドキュメント を読み進めましょう。
Hello World を表示するところから、コンポーネントの作成、React での state の扱いといった内容を丁寧に説明してくれます。
もし、手を動かしながら学びたいのであれば チュートリアルを進めましょう。
こちらでは、三目並べの作り方が紹介されています。
さいごに
公式サイトのチュートリアルを追えると、React のコンポーネントの扱いが理解できているはずです。
今後 React の需要は増えていくと思われるので、スキルの一つとして身につけることをオススメします。
簡単ではありますが、さらにレベルアップを図りたい人のために、おすすめフレームワークをご紹介して終わりたいと思います。
React を使ったサイトを構築したい場合
NextJS（ネクストジェーエス） の学習を進めることをオススメします。
NextJSは、サーバーサイドレンダリングにも対応した Web サイトを簡単に構築するためのフレームワークです。
Web サイトをアプリのようにしたい場合
Redux（リダックス）の学習をオススメします。
React で大規模なアプリケーションを作成すると、state(状態)の管理に苦労するときがあります。
その解決策として Redux が提案されています。
React + Redux を使いこなせるようになれば Web アプリケーションの開発が捗ること間違いなしです！
こちらの記事もオススメ！
2020.08.07JavaScript 特集知識編JavaScriptを使ってできることをわかりやすく解説！JavaScriptの歴史【紆余曲折を経たプログラミン...
2020.07.17ライトコード的「やってみた！」シリーズ「やってみた！」を集めました！（株）ライトコードが今まで作ってきた「やってみた！」記事を集めてみました！※作成日が新し...
ライトコードでは、エンジニアを積極採用中！
ライトコードでは、エンジニアを積極採用しています！社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。
採用情報へ
広告メディア事業部
「好きを仕事にするエンジニア集団」の（株）ライトコードです！ ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。 現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。 いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。 システム開発依頼・お見積もり大歓迎！ また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です！ インターンや新卒採用も行っております。 以下よりご応募をお待ちしております！ https://rightcode.co.jp/recruit
おすすめ記事
移転したライトコード大阪オフィスを調査せよ！
広告メディア事業部
2024.04.03
日常
【GCP】BIG QUERYを触り程度に理解してみる
かねまさ（エンジニア）
2024.04.02
IT技術
【Android】Github ActionsでFirebase Test Labの実行を分散する
笹川（エンジニア）
2024.04.02
IT技術
【Next.js】App Router で使用できるキャッシュまとめ
モーリー（エンジニア）
2024.03.29
IT技術
GitHubActionsのランナーに触れてみた
こやまん（エンジニア）
2024.03.28
IT技術
