Reactとは
ReactとはウェブブラウザでUI（ユーザーインターフェース）コンポーネントを容易に生成するためのJavaScriptライブラリになります。
Reactで作成された代表的なアプリケーションは以下になります。
- Uber
- Netflix
- Airbnb
そもそもJavaScriptを知らないという方はこちらをご覧ください。2024年開発者調査では人気No.1となっているプログラミング言語です。
本記事では、プログラミング初心者向けに向けて「JavaScriptとは何か」「JavaScriptを学習するメリットとデメリット」などについて、分かりやすく解説いたします！ なお、本記事を執筆したのは、プログラミングスクール「アキバ・[…]
Reactの歴史
ReactはMeta社(旧:Facebook社)により開発されました。元々はFacebookの機能改善のために使用されましたが2013年にオープンソースとしてリリースされました。
Stack Overflow Developer Surveyでの調査において2021年～2024年「Webフレームワークとテクノロジー」のランキングになります。
※Stack Overflow Developer Survey…毎年開発者へアンケートを取っており、現在広く使用されている技術をチェックすることができます。
| 1位 | 2位 | |
|---|---|---|
| 2021年 | React 40.14% | jQuery 34.42% |
| 2022年 | Node.js 47.12% | React 42.62% |
| 2023年 | Node.js 42.65% | React 40.58% |
| 2024年 | Node.js 40.8% | React 38.5% |
現在、Reactは「Webフレームワークとテクノロジー」の部門において1位のNode.jsと僅差で2位に位置しておりとても人気なライブラリということが分かります。
Reactを使用する上でNode.jsも一緒に使うことが多いのでこの結果となったのでしょう。
なぜReactを使うのか
- 再利用可能なコンポーネントReactはUIを「コンポーネント」という単位で作成します。
コンポーネントとはボタンなど画面の部品のことで、一度作成したものを再利用することでコードが短くなり、整理しやすくなります。
この画像は以下のような形でまとめることができます。
赤枠→「リンクコンポーネント」…「卒業生インタビュー」～「法人のお客様向け」それぞれリンクコンポーネント
青枠→「ナビゲーションコンポーネント」…リンクコンポーネントが集まったもの
黄枠の「ヘッダーコンポーネント」…ナビゲーションコンポーネントや左上のSEARCHボタン、SNSのアイコンなどのコンポーネントが集まったもの - 状態管理が簡単X（旧Twitter）やInstagramなどで投稿に「いいね」を押すと、いいねの数が増えてハートアイコンの色が変わります。再度「いいね」を押すと、いいねの数が減り、ハートアイコンの色が元に戻る、といった動作です。このように、ユーザーの操作に応じて変化するデータ（いいねの数やアイコンの色など）を状態管理といいます。
Reactでは、この状態を簡単に管理できます。状態が変わると、Reactが自動でUIを更新してくれるため、データの変更がリアルタイムで表示に反映されます。たとえば、いいねを押すとその状態が更新され、Reactがその変更に基づいて画面を自動的に再描画します。
Reactの特徴
- JSX記法
まずReactの特徴と言えばJSX記法になります。JSXとはJavaScriptの関数でHTMLを返す書き方です。
const Button = () => {
return (
<div>
<button>ボタン</button>
</div>
)
}
export default Button- コンポーネントベースで構成
WebアプリなどのUIをコンポーネント(再利用可能な小さな部品)に分割して管理します。このコンポーネントを組み合わせて1つのWebアプリを構築していきます。
例えばHTMLでプロフィール一覧を表示させる場合以下の構成になります。
index.html
<div class="profile_list">
<div class="profile">
<span>名前はエンジニア太郎</span>
<span>年齢は30歳です</span>
</div>
<div class="profile">
<span>名前はエンジニア次郎</span>
<span>年齢は25歳です</span>
</div>
<div class="profile">
<span>名前はエンジニア花子</span>
<span>年齢は20歳です</span>
</div>
</div>次にReactの場合を見てみましょう。
このようにReactはProfileを1つのパーツとして定義し、ProfileListで使用します。それぞれ変えたい部分は引数のような形で値を渡す(Props)ことで変更することができます。
これにより共通箇所(名前は～、年齢は～の部分)を何度も記述する必要がありません。
ProfileList.jsx
<div class="profile_list">
<Profile name="エンジニア太郎" age="30" />
<Profile name="エンジニア次郎" age="25" />
<Profile name="エンジニア花子" age="25" />
</div>
Profile.jsx
<div class="profile">
<span>名前は{name}</span>
<span>年齢は{age}歳です</span>
</div>Reactは勉強したほうがいいの?
ここまでReactの特徴など説明しましたが実際に勉強は必須なのでしょうか?
結論から言うと目指すキャリアやプロジェクトの内容によって異なります。
JavaやPython、PHPなどのバックエンド言語を主に勉強している方、JavaScriptは使うがコーポレートサイトのような状態管理が不要な場合は優先度は低めと言えるでしょう。
XやInstagramのようなソーシャルメディアアプリやチャットアプリ、タスク管理アプリなど作成したい場合や、スキルアップを目指す方は勉強することをおすすめします。
ただ「状態管理が不要な場合は優先度は低め」と申し上げましたがReactで作成するソースコードはシンプルで整理されるので可読性の向上に期待できます。また拡張が必要な場合はコンポーネントの使い回しができ、改修が必要な場合はコンポーネントを1つを改修するだけで解決したりするので状態管理が不要なアプリケーションでもReactを取り入れることは大きなメリットとなるでしょう。
Reactを学習するメリット・デメリット
メリット
- スキルの向上
コンポーネント化、状態管理などのJavaScriptにはない概念を学ぶことができるので今までに無い考え方を習得できその考え方を用いてHTMLの構成など別の分野に応用できるでしょう。
またReactを学ぶ上でNode.jsやWeb APIも併せて勉強することが多いので関連技術も学ぶことができます。
- 求人市場での競争力の向上
ランキングを見て頂いた通りReactは非常に人気なライブラリです。こちらの求人サイトの調査でもReactが求められていることが分かります。Reactを学ぶことでより求められる人材となるでしょう。
出典：SOKUDAN Magazine ( https://magazine.sokudan.work )
デメリット
- 学習コストが高い
まずReactとしてJSXの記法や状態管理、フック(Hooks)といったJavaScriptでは登場しなかった考え方や概念が登場するので理解に時間が必要になります。次に状態管理をより容易にさせたReduxや、フレームワークであるNext.jsを学ぶことになるでしょう。
またNode.jsも併せて使用することが多いのでこちらの理解も必要になります。
- 情報があまりない
JavaScriptや歴史の長いライブラリであるjQueryなどと比較するとインターネットやYouTubeの情報がかなり少ないように感じられます。しかし世界を通して人気なライブラリで多言語での文献はたくさんあるので翻訳を活用したり、Chat GPTなどの機能を利用することでそのデメリットは感じられなくなります。
まとめ
Reactは非常に人気なJavaScriptライブラリです。
学習コストがかかりますが、その分得られるものは非常に大きいでしょう。
JavaScriptをより深く学びたい方におすすめしたいライブラリなので、ぜひReactの勉強を検討してみてください。