※このブログではサーバー運用、技術の検証等の費用のため広告をいれています。
記事が見づらいなどの問題がありましたらContactからお知らせください。

【Web開発】はじめてのReact開発で知っておきたいことまとめ

投稿日：2022年8月28日

このエントリーをはてなブックマークに追加
ReactではじめてのWeb開発をするときに知っておきたいことについて詳しく解説します。

はじめに

この記事について

この記事ではReactでのはじめてのWeb開発をするまでに知っておくべきことと、開発のはじめかた（実際に筆者がやったこと）について詳しく解説します。初心者レベルの内容になっています。

Reactについて

公式ページで以下のように記載されています。

ユーザインターフェース構築のための JavaScript ライブラリ

以下のイメージで筆者はしっくりきました。

※あくまでイメージですが、間違っているなどはコメントからお願いします。

Reactは、動的なページを扱いやすくするためHTMLをJavaScriptの値として組み込んだライブラリ

JavaScriptは、DOM（ドキュメントオブジェクトモデル）と呼ばれるHTMLのツリー構造を操作するためのスクリプト言語

環境

この記事の内容は以下の環境で確認しています。

  • PC：MacBook Air (13-inch, Mid 2013)
  • OS：Mac OS Big Sur バージョン11.6.8

Node.jsについて

なぜNode.jsの説明をするのか？

このあとにReact公式チュートリアルについて触れていきますが、ローカル開発環境で進めるためにNode.jsをインストールする必要があるため、Node.jsについて理解していきます。

先ほどReactはHTMLを動的に扱いやすくしたJavaScriptライブラリであると説明しました。作り出された当初は、JavaScriptは主にブラウザ上で動作しフロントエンドで使われるものでした。

ではNode.jsとは一体何なのでしょうか？

公式ページで以下のように記載されています。

Node.js® は、Chrome の V8 JavaScript エンジン で動作する JavaScript 環境です。

つまり、JavaScriptという言語をブラウザではなくバックエンドで使えるものにしたJavaScript実行環境がNode.jsです。

npmについて

Node.jsでは他の有名言語と同じようにパッケージを使用して他者が開発したプログラムを利用することができます。もし手動でそれらを利用するには各パッケージの依存関係や競合関係を調べて、競合が起きないようにしなくてはいけません。
パッケージのインストールと整合性の管理を自動的に解決してくれるものが、npm(Node Package Manager)がです。

ちなみに参考までにnpmはインストール方法によってNode.jsに同梱している場合もあります。その場合Node.jsをインストールした際に同時にインストールされます。こちらはインストール方法やインストールするバージョンによって異なりますのでご注意ください。

nvmについて

環境で使用するNode.jsのバージョンもnvm(Node Version Manager)というNode.jsのバージョン管理システムで管理することができます。nvmで管理することでプロジェクト間でのバージョン切り替えに簡単に対応することができます。

今回のチュートリアルでは必要ありませんが、複数人での開発プロジェクトで同一バージョンを使う場合は.nvmrcファイルをプロジェクトのルートディレクトリに追加します。

例えば、最新バージョン18を指定するには次のようにします。

ターミナル
% echo "18" > .nvmrc
% nvm use

React 学びの進め方

ここからはReactについて学びの進め方を解説していきます。

公式チュートリアル

Reactは、UIを「コンポーネント」という部品単位で構築することができます。

公式チュートリアルでは、インタラクティブな三目並べゲーム (tic-tac-toe) の作り方をなぞっていく中でその「コンポーネント」を学ぶことができます。

チュートリアル：React の導入

チュートリアルでは、三目並べゲームの中で以下の機能を作成していきます。

  • 3×3マスのボード作成
  • “X” と “O” を交互に置けるようにすること
  • どちらのプレーヤが勝利したか判定できるようにすること
  • 過去の着手の履歴管理

主にコンポーネントの組み合わせで機能が出来上がっていく技法が理解できるようになります。チュートリアル内でのコンポーネントの組み合わせ例を一つ紹介すると、1マスをSquareというコンポーネントで作成しそれを9つ組み合わせBoardというコンポーネントにすることで、三目並べの3×3マスボードを作ります。

また、コンポーネント以外ではpropsとstateが特に重要な基礎概念です。ここからはこの２つについて簡単に触れます。

props

propsは親コンポーネントから子コンポーネントへ値を渡すための仕組みと理解して進めると良いかと思います。ちなみにpropsは“properties” の略のようです。

公式チュートリアルと以下の公式Documentの説明を参考にしてみてください。

コンポーネントと props

state

stateは各コンポーネントごとに持つ、コンポーネントの状態を管理する仕組みと理解して進めると良いかと思います。チュートリアルでは、クリックされたという状態を管理しています。

公式チュートリアルと以下の公式Documentの説明を参考にしてみてください。

state とライフサイクル

参考文献

このエントリーをはてなブックマークに追加
関連記事
記事へのコメント
　　　　
検索
カテゴリ
Web開発
機械学習
プログラミング
その他
サーバー開発
Linux
目次