Hello! Uchii.code
バナー画像

【React】未経験からフロントエンドエンジニアになる方法 #8

2023-09-05に公開

バナー画像

まえがき

さて、前回の記事では【npm/yarn】について学習しました。今回の記事で紹介するReactではnode.jsを用いるのでこれらのパッケージマネージャーは必須となります。今回の#8ではReact学習のおすすめ手順について紹介します。そもそもReactとは何か、どのような順序で学習していけば良いか。という部分に焦点を当てています。早速ですが、フロントエンドには多くのjavascriptフレームワークが存在します。以下の画像からもわかるように、その利用率はReactが圧倒的に1位となっています。では、そもそもReactとは何か詳しくみていきましょう。

1. React学習の基本

1-1. Reactとは何か?

React(リアクト)は、ウェブアプリケーションを開発するためのJavaScriptライブラリです。Reactは、Facebookによって開発され、オープンソースとして提供されています。このライブラリは、ユーザーインターフェース(UI)を構築するための強力なツールで、コンポーネントベースのアーキテクチャを採用しています。コンポーネントは、小さな再利用可能な部品のようなもので、それらを組み合わせてアプリケーション全体を構築します。つまり、ボタンや記事1つ1つなど小さなコンポーネント(部品)を組み合わせてアプリ全体を作っていくというイメージです。Reactの特徴は以下の通りです。

  • 仮想DOM(Virtual DOM): Reactは仮想DOMを使用して、効率的なUI更新を実現します。これにより、UIの変更が効率的に行われ、パフォーマンスが向上します。
  • JSX: Reactでは、JSXと呼ばれるJavaScriptの拡張構文を使用して、UIを宣言的に記述します。これにより、コンポーネントの見た目と振る舞いを同じファイル内で管理できます。
  • 状態管理: Reactアプリケーションでは、状態(state)の管理が容易で、ユーザーインタラクションやデータの変更に対してリアルタイムな反応を提供します。

1-2.Reactに必要な基礎知識

Reactを学ぶためには、JavaScriptの基礎を理解することが不可欠です。JavaScriptはウェブ開発のためのスクリプト言語であり、Reactのコンポーネントやロジックを書くのに使用します。そのためreactのファイル拡張子はjs(jsx)もしくはts(tsx)となります。またHTML/CSSの知識も必要不可欠です。Reactの学習を始める前に最低限以下の実力はつけておきましょう。

  • HTML/CSSを用いて静的ページを難なく生成できる
  • Javascriptの基礎知識を一通り理解している
  • パッケージマネージャーの役割を理解している

2. Reactのコアコンセプト

2-1. コンポーネントとは?

Reactにおける最も重要なコンセプトの一つが「コンポーネント」です。コンポーネントは、UI要素や機能を再利用可能な部品に分割する方法です。例えば、ボタン、フォーム、ナビゲーションバーなどは、それぞれ個別のコンポーネントとして設計されます。これにより、コードの再利用性が向上し、保守性が高まります。つまり、アプリやwebページ全体で使いまわしている箇所(ロジックが同じなど)に変更があったときに、コンポーネントで管理していると、1箇所修正してあげるだけで、アプリ全体の部品が修正できるということです。

2-2. JSXの理解

JSXは、ReactでUIを記述するための構文拡張です。JavaScriptのコード内にHTMLライクな構造を埋め込むことができ、これによりコンポーネントの見た目が定義されます。JSXを理解することは、Reactで効果的なUIを構築するために不可欠です。ここで重要なのは、HTMLの中にJavascriptを埋め込む訳ではないということです。あくまでファイルはjsもしくはjsxであり、Javascriptの中にHTMLを埋め込んでページを生成しているという概念なのです。

2-3. ステートとプロップス

Reactコンポーネントは、状態(ステート)プロパティ(プロップス)を使用してデータを管理します。ステートはコンポーネント内で保持されるデータであり、コンポーネントの内部状態を表現します。例えば、ユーザーがログインしているかどうかボタンが押されたかどうか、それらを1つ1つ状態として管理します。一方、プロップスは親コンポーネントから子コンポーネントに渡されるデータです。コンポーネントに分割すると、親子関係ができあがります。親コンポーネントで保持している状態や関数、データを子コンポーネントで使用したい場合はこれをプロップスとして渡します。これらのコンセプトを理解し、適切に活用することで、コンポーネント間でデータを受け渡すことができます

  • Reactはコンポーネントベースの設計である
  • JSX記法でJavascriptの中にHTMLを埋め込んでいるイメージ
  • Reactの基礎知識はステートとプロップスを押さえよう

3-1.学習の流れ

個人的には以下の3つの流れで学習していくと、基礎をしっかりと固めた上で次のステップへ進めます。ここで重要なのはとにかく動画を見ながら手を動かしてください。最初は思考停止でもいいです。何度も繰り返しコードを書くことで、いやでも覚えていきますので安心してください。他にも様々な学習教材があるので、気になる方は以下のリンクからUdemyページへ飛び「React」と検索してみてください

1.Next.jsと一緒に学ぶReact講座

2.モダンJavaScriptの基礎から始める挫折しないためのReact入門(Udemy)

3.【2023年最新】React(v18)完全入門ガイド(Udemy)

プログラミング言語の人気オンラインコース

まとめ

今回の#8ではReact学習の方法と流れについて触れました。HTML/CSSさらにはJavascriptの基礎を抑えた方はいよいよフロントエンドエンジニアへの第一歩としてReactを学習していってください。次回の#9では今回のロードマップ最後の記事としてNext.jsの学習方法について説明していきます。

G e t i n T o u c h