はじめに
私は新卒5年目としてSIerでエンジニアとしてWeb系の開発をおこなっています。
最近Reactを学んでおり、そこで知ったことをまとめてみました。
これからReactを始めようと思っている方やすでに学び始めている方の参考になれば幸いです。
この記事の対象読者
- ES6をある程度学んで、これからReactを始めようとしている方
- すでに学び始めているReact初学者
- Reactの基礎について振り返りたい方
この記事で触れないコト
- そもそもReactとは？などの概要
- ルーティング、TypeScript等応用的な内容
おことわり
学んだ内容の理解を深めるために、自分なりに言語化していますが、誤った内容が含まれる場合があります。
見つけた場合は優しくご指摘いただけると幸いです。
（前提）ES6のコトとか
以下の記事でES6のコーディングやJSフレームワークを学ぶ前に理解しておくと良さそうなことをまとめています。
合わせて読んでいただくと良いかと思います。
Reactの開発環境構築
以下2パターンに分けて、Reactで開発を行うための環境の構築方法についてご説明します。
1. ローカルPC上で開発を行う
2. Webブラウザ上で開発を行う
1. ローカルPC上で開発を行う
前提
- MacOS
- HomebrewとNodeはインストール済み
- ターミナルの基本的な操作方法を理解している
手順
1-1. 任意のReactプロジェクトを作成する
以下のコマンドを実行します。
npx create-react-app hello-react
hello-reactは作成するReactプロジェクトのフォルダ名です。
ここはお好みの名前にしてください。
作成後、hello-reactフォルダは以下の構成になっています。
hello-react/
├─ node_modules/
├─ public/
├─ src/
├─ .gitignore
├─ package-lock.json
├─ package.json
├─ README.md
1-2. hello-reactをビルドする
以下のコマンドを実行します。
npm run build
以下のメッセージが出ることを確認します。
Creating an optimized production build...
Compiled successfully.
ビルド成功のメッセージが出ず、エラーが出ましたら、
メッセージ内容を確認して修正してください。
1-3. hello-reactを立ち上げる
以下のコマンドを実行します。
npm start
ブラウザが立ち上がって、以下の画面が表示されれば完了です。
2. Webブラウザ上で開発を行う
前提
- Webブラウザが操作できる
手順
2-1. CodeSandboxにアクセスする
ブラウザ上でJavascriptの開発ができるCodeSandboxというサービスを利用します。
CodeSandbox
2-2. 新規登録orログインする
ページ上部のCreate AccountまたはSign inから新規登録かログインしてください。
GitHubやGoogle, AppleのアカウントがあればSSOログイン可能です。
2-3. テンプレートからReactを始める
ログイン後に表示されるダッシュボードから、
※＊Start from a template※＊に表示されているReactを選択します。
読み込みが終わって、以下のような画面が表示されれば完了です。
環境構築のまとめ
npxを利用するやり方（1.）だとhomebrewやnode.jsを入れておかないといけないですが、
実務ではコマンドを叩いてパッケージ管理することもあるので実践的かと思います。
とりあえずReact叩いてみたい、という方にはCodeSandboxを使うやり方（2.）で十分ですね。
（もちろん両方できておく分に越したことはありません。）
JSX記法
ReactはJSX記法を使ってコーディングします。
以下はJSX記法を使ってコーディングした例です。
// JSファイルでReactを使うためのおまじない
import React from 'react';
// ReactでDOM操作をするための設定
import ReactDom from 'react-dom';
// Javascriptなのでアロー関数が使える
// 複数のタグを返す場合は、必ず１つのタグで囲まないといけない
const App = () => {
return (
<>
<h1>Hello, React!!</h1>
</>
);
};
// rootというIDを持つ要素にApp関数の返り値をレンダリングする
ReactDom.render(<App />, document.getElementById('root'));
コンポーネント化
先述のApp関数の結果を他の箇所でも使いたい場合、画面のパーツごとにファイルを分割する
コンポーネント化のやり方
1. コンポーネントのファイルを作成する
今回は先述のApp関数をコンポーネント化したいので、App.jsxを作成します。
（拡張子は.jsでも良いが、ファイル管理の観点からReactでコーディングするのであれば.jsxの方が良さそう）
コンポーネント名は必ず先頭を大文字から始めなければいけません。
→ 必ずパスカルケースで命名する！
2. App.jsにコンポーネントの内容をコーディングする
import React from 'react';
const App = () => {
return (
<>
<h1>Hello, React!!</h1>
</>
);
};
// App関数を他のファイルで使えるようにするための設定
export default App;
3. index.jsでAppコンポーネントを読み込む
import React from 'react';
import ReactDom from 'react-dom';
// Appコンポーネントをインポートする
import App from './App';
ReactDom.render(<App />, document.getElementById('root'));
Props
Propsとはコンポーネントに渡される引数のようなもの。
例えばメッセージを表示するコンポーネントがあるとして、
メッセージの種類に応じて背景色を変えたいとか、あれば条件に応じたPropsをコンポーネントに渡す。
QiitaのMarkdownで使っているNoteがわかりやすい例かと。
:::note info
インフォメーション
infoは省略可能です。
:::
:::note warn
警告
○○に注意してください。
:::
:::note alert
より強い警告
○○しないでください。
:::
インフォメーション
infoは省略可能です。
警告
○○に注意してください。
より強い警告
○○しないでください。
→これらはnoteの後ろの単語「info」「warn」「alert」で色やアイコンが変わるが、noteの後に指定している単語こそReactでいうPropsにあたるものかと。
コード例
例えばpropsで文字の色colorと文字列messageを受け取るコンポーネントMessageがあるとして、
呼び出し側では以下のように実装する
// import文等は省略
<Message color="red" message="ここに表示したいメッセージを入力するよ" />
コンポーネント側では以下のように実装する
const Message = (props) => {
// propsというオブジェクトの中から、呼び出し側で指定した属性をキーとして値を参照できる
const messageStyle = {
color: props.color
}
// JSX記法ではHTMLタグ内でJavascriptを使う場合、
// {}で囲う必要がある。
return <p style={ messageStyle }>{ props.message }</p>
};
State
Stateとは全てのコンポーネントがそれぞれ保持する状態のこと。
Stateが変更されるたびにコンポーネントはレンダリングされる。
コード例
stateを使うにはuseStateをインポートする
import React, { useState } from 'react';
ここではボタンを押すたびに数字が0から1つずつ加算される機能について考える
import React, { useState } from 'react';
const Addnumber = () => {
// num : state
// setNum : stateを更新する関数名
// useStateの引数はstateの初期値
const [num, setNumber] = useState(0);
// buttonタグが押された時、呼び出される関数
// numというstateを1加算して、setNumに渡すことでnumが更新される。
const onClickCountUp = () => {
setNum(num + 1);
};
return(
<>
<button onClick={ onClickCountUp }>ボタン</button>
<p>{ num }</p>
</>
);
}
Effect
Effect（useEffect）とは、レンダリングの結果が画面に反映された後に動作する関数のことです。
コード例
useEffect(() => {
console.log("useEffectが実行されました。");
});
上記のコード例の場合だとすべてのコンポーネントがレンダリングされた際、必ず実行されるuseEffectとなっています。
場合によってはとある変数が変化された時だけ実行させたい。という場合もあると思います。
その場合のuseEffectは以下のようになります。
// valueという変数が変更されたときに処理されるuseEffect
useEffect(() => {
console.log("valueが変更されました。");
},[value]);
まとめると次のようになります。
| 詳細 | 型 | |
|---|---|---|
| 第1引数 | 処理内容 | 関数 |
| 第2引数 | 監視対象の変数を格納した配列 | 配列 |
さいごに
この記事ではReactの基礎についてまとめました。
といっても基礎の中でもごく一部だと思いますので、これも知っておくといいよなんてことあればコメントにお寄せください。（勉強になります。）
同じようにReact勉強中の方のためになれば幸いです。
参考