React.jsの基礎を初心者向けに徹底解説！元ぼっち大学生のフリーランスエンジニアがおすすめの本を紹介しつつ詳しく説明します
今回はプログラミング初心者のぼっち大学生のみなさんに向けて、大学ぼっち時代にプログラミングを学び始め、在学中にフリーランスエンジニアとして独立した経歴を持つ僕が、React.jsの基礎知識について、できるだけ分かりやすく解説していきます。React.js初心者におすすめの本も何冊か紹介しますので、興味のあるぼっち大学生はぜひ一度読んでいってください。
たっちゃん
ぼっちユニバーシティの運営者です。
大学ぼっち時代にプログラミングを学び始め、在学中にフリーランスのWebエンジニアとして独立。
本業はWebアプリケーションやWebサイトの受託開発がメインですが、最近はFlutterにハマっています。
趣味はバックパッカー旅行と立ち飲み屋さん巡り。
現在は都内でひとり法人を経営しながら、現役のぼっち大学生のみなさんへお役立ち情報を発信しています。
0. はじめに
ぼっち大学生のみなさんこんにちは！
今回は、プログラミング初心者のぼっち大学生の皆さんと一緒に、React.jsの基礎知識について学んでいきたいと思います。
1. Reactとは何か？
Reactは、ウェブサイトやアプリケーションを作るためのツールです。
小さなパーツを組み合わせて、大きなプロジェクトを作成することができます。
1-1. Reactの概要と歴史
1-1-1. Facebookによる開発の背景
Reactは、有名な会社「Facebook」が作りました。
Facebookは、たくさんの人が使うウェブサイトなので、速くて使いやすいものを作りたかったんです。
それで、Reactが生まれました。
1-1-2. Reactのバージョン履歴
Reactは、2013年に初めて公開されました。
それから、たくさんのバージョンが出て、どんどん良くなっています。
最新のバージョンでは、使いやすさや速さがさらに向上しています。
1-2. Reactが持つメリットとデメリット
1-2-1. 高速な描画性能
Reactは、ウェブサイトやアプリをとても速く表示できるのが特徴です。
それは、「仮想DOM」という技術を使っているからです。
画面の変更があったとき、全部を描き直す代わりに、変更された部分だけを描き直します。
これによって、速くなります。
例えば、こんなコードがあるとします。
function App() {
const [count, setCount] = useState(0);
return (
<div>
<h1>カウント: {count}</h1>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
}このコードは、「カウント」という数字を表示して、ボタンを押すと1ずつ増えるようになっています。
Reactでは、カウントが増えるときに、数字だけが変わるので、速く表示できます。
1-2-2. 再利用可能なコンポーネント
Reactでは、「コンポーネント」という小さなパーツを作って、それを組み合わせてウェブサイトやアプリを作ります。
コンポーネントは、何度でも使えるので、同じコードを書かなくても大丈夫です。
例えば、こんなコードがあるとします。
function Button({ onClick, children }) {
return <button onClick={onClick}>{children}</button>;
}
function App() {
return (
<div>
<Button onClick={() => alert('ボタン1が押されました')}>ボタン1</Button>
<Button onClick={() => alert('ボタン2が押されました')}>ボタン2</Button>
</div>
);
}このコードでは、「Button」というコンポーネントを作って、それを2回使っています。
ボタンを押すと、それぞれ違うメッセージが出るようになっています。
コンポーネントを使うことで、同じコードを何度も書かずに、簡単にボタンを作ることができます。
1-2-3. 学習コストとライブラリの選択肢
Reactはとても便利ですが、最初に学ぶことが少し難しいかもしれません。
ですが、たくさんの人が使っているので、質問したり、参考になるサイトを見つけたりすることができます。
また、Reactと一緒に使う便利なツールもたくさんあります。
たとえば、「Redux」というツールは、データを管理するのに役立ちます。
これらのツールを使うことで、もっと便利にReactを使うことができます。
これで、Reactについての基本的なことが分かりましたね。これからも、楽しくReactを学んでいきましょう！
2. Reactの基本概念を理解しよう
Reactを使ってウェブサイトやアプリを作るためには、いくつかの大切な概念を知る必要があります。
それらを理解することで、もっとReactを楽しく使えるようになりますよ。
2-1. コンポーネントとは
2-1-1. コンポーネントの役割
コンポーネントは、Reactの一番大切な部分です。
コンポーネントは、画面に表示されるものを小さなパーツに分けて、それぞれを独立した部品として扱います。
それぞれのコンポーネントを組み合わせて、ウェブサイトやアプリを作ります。
例えば、こんなコードがあります。
function Greeting({ name }) {
return <p>こんにちは、{name}さん！</p>;
}
function App() {
return (
<div>
<Greeting name="田中" />
<Greeting name="佐藤" />
</div>
);
}このコードでは、「Greeting」というコンポーネントがあります。
それを2回使って、名前が違う挨拶を表示しています。
2-1-2. コンポーネントの分割方法
コンポーネントを作るときには、それぞれが1つの役割を持つように分けることが大切です。
例えば、ボタンや入力欄、リストなど、それぞれ違う役割を持つコンポーネントを作ります。
これによって、コードがきれいになり、後で修正しやすくなります。
2-2. JSXとは何か
2-2-1. JSXの構文
JSXは、Reactで使われる特殊な構文です。
HTMLのように見えますが、実はJavaScriptの一部です。
JSXを使うことで、コードが見やすくなります。
例えば、こんなコードがあります。
function App() {
return (
<div>
<h1>こんにちは、世界！</h1>
<p>これは、Reactで作られたウェブサイトです。</p>
</div>
);
}このコードでは、JSXを使って、見出しと段落を表示しています。
2-2-2. JSXの特徴
JSXは、JavaScriptの中でHTMLのように書くことができます。
それによって、コードが見やすくなり、エラーが起こりにくくなります。
また、JSXでは、JavaScriptの変数や関数を簡単に使うことができます。
2-3. propsとstateの違い
2-3-1. propsの使い方
props は、コンポーネントの親から子にデータを渡すために使います。
これによって、子コンポーネントが親コンポーネントからデータを受け取って表示できます。
例えば、こんなコードがあります。
function Greeting({ name }) {
return <p>こんにちは、{name}さん！</p>;
}
function App() {
return (
<div>
<Greeting name="田中" />
<Greeting name="佐藤" />
</div>
);
}このコードでは、「App」コンポーネントから「Greeting」コンポーネントに、名前のデータをpropsとして渡しています。
2-3-2. stateの使い方
state は、コンポーネントの中でデータを管理するために使います。
state を使うことで、データが変更されたときに画面を自動的に更新できます。
例えば、こんなコードがあります。
import { useState } from 'react';
function App() {
const [count, setCount] = useState(0);
return (
<div>
<p>カウント: {count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
}このコードでは、「useState」という機能を使って、カウントのデータを state として管理しています。
ボタンを押すと、カウントが1ずつ増えます。
2-4. イベントハンドリングの方法
2-4-1. イベントリスナーの設定
イベントリスナーは、ユーザーが操作したときに実行される関数を設定するために使います。
例えば、ボタンをクリックしたときや、入力欄に文字を入力したときなどです。
function App() {
const handleClick = () => {
alert('ボタンがクリックされました！');
};
return (
<div>
<button onClick={handleClick}>クリックしてください</button>
</div>
);
}このコードでは、「handleClick」という関数を作って、ボタンがクリックされたときに実行されるように設定しています。
2-4-2. イベントオブジェクトの活用
イベントオブジェクトは、イベントが起こったときに詳細な情報を持つオブジェクトです。
これを使って、ユーザーの操作に応じてさまざまな処理を行うことができます。
function App() {
const handleChange = (event) => {
alert(`入力された文字: ${event.target.value}`);
};
return (
<div>
<input type="text" onChange={handleChange} />
</div>
);
}このコードでは、「handleChange」という関数を作って、入力欄に文字が入力されたときに実行されるように設定しています。
イベントオブジェクトの「event.target.value」を使って、入力された文字を取得しています。
これで、Reactの基本概念について学ぶことができましたね。
3. はじめてのReactアプリを作成しよう
Reactを使ってアプリを作るためには、まず環境を整えることが大切です。
そして、どのようなファイルがあるのか、どのように表示するのかを理解することが大切です。
3-1. Create React Appを使った環境構築
Create React Appは、Reactの環境を簡単に作ることができるツールです。
これを使って、新しいプロジェクトを始めましょう。
まず、コマンドラインで次のように入力します。
npx create-react-app my-appこれで、「my-app」という名前の新しいReactアプリが作られます。
3-2. ファイルとディレクトリ構成の解説
新しいアプリを作ると、いくつかのファイルとディレクトリができます。
それぞれの役割を知っておくと、後で役立ちます。
public ：公開されるファイルが入っています。例えば、index.htmlなどです。
src ：アプリのコードが入っています。ここにコンポーネントなどを作ります。
src/index.js ：アプリのエントリーポイントです。ここからReactアプリが始まります。
3-3. アプリの実行と表示確認方法
アプリを実行して、画面に表示する方法を見てみましょう。
まず、コマンドラインで次のように入力します。
cd my-app
npm startこれで、アプリが実行され、ブラウザで表示されます。
表示がうまくいったら、次に進みましょう。
4. Reactコンポーネントを作成してみよう
Reactでアプリを作るためには、コンポーネントを作って組み合わせることが大切です。
それについて学んでいきましょう。
4-1. 関数コンポーネントとクラスコンポーネント
4-1-1. 関数コンポーネントの基本形
関数コンポーネントは、簡単なコンポーネントを作るときに使います。
例えば、こんな感じです。
function Welcome(props) {
return <h1>こんにちは、{props.name}さん！</h1>;
}4-1-2. クラスコンポーネントの基本形
クラスコンポーネントは、もっとたくさんの機能が使えるコンポーネントを作るときに使います。
例えば、こんな感じです。
class Welcome extends React.Component {
render() {
return <h1>こんにちは、{this.props.name}さん！</h1>;
}
}4-2. コンポーネントの親子関係とデータの受け渡し
4-2-1. 親から子へのデータ渡し
親コンポーネントから子コンポーネントにデータを渡すことができます。
これを「props」と呼びます。
function Child(props) {
return <p>こんにちは、{props.name}さん！</p>;
}
function Parent() {
return (
<div>
<Child name="田中" />
<Child name="佐藤" />
</div>
);
}4-2-2. 子から親へのデータ通知
子コンポーネントから親コンポーネントにデータを伝える方法として、親が子にコールバック関数を渡すことがあります。
function Child(props) {
return (
<button onClick={() => props.onButtonClick("子からのデータ")}>ボタン</button>
);
}
function Parent() {
function handleButtonClick(data) {
console.log(data);
}
return (
<div>
<Child onButtonClick={handleButtonClick} />
</div>
);
}4-3. コンポーネントライフサイクルの理解
4-3-1. ライフサイクルの概要
コンポーネントライフサイクルとは、コンポーネントが作られたり、更新されたり、消されたりするときに、どのような順序で処理が行われるかを表したものです。
4-3-2. 主要なライフサイクルメソッド
クラスコンポーネントでは、ライフサイクルメソッドを使って、それぞれぞれの段階で特定の処理を行うことができます。主要なライフサイクルメソッドは以下の通りです。
componentDidMount：コンポーネントが画面に表示された直後に実行されるメソッド。ここでAPIからデータを取得する処理を書くことがよくあります。componentDidUpdate：コンポーネントが更新された後に実行されるメソッド。ここで、前の状態と比較して処理を行うことができます。componentWillUnmount：コンポーネントが画面から消える直前に実行されるメソッド。ここで、タイマーの解除など、後始末を行う処理を書くことができます。
例えば、こんな感じです。
class Example extends React.Component {
componentDidMount() {
// ここで、APIからデータを取得する処理を書くことができます。
}
componentDidUpdate(prevProps, prevState) {
// ここで、コンポーネントが更新されたときの処理を書くことができます。
}
componentWillUnmount() {
// ここで、コンポーネントが消される前に行うべき処理を書くことができます。
}
render() {
// ここで、コンポーネントの表示を行います。
}
}関数コンポーネントでは、「useEffect」を使って、同じような処理を行うことができます。
例えば、こんな感じです。
import React, { useEffect } from "react";
function Example() {
useEffect(() => {
// ここで、APIからデータを取得する処理を書くことができます。
return () => {
// ここで、コンポーネントが消される前に行うべき処理を書くことができます。
};
}, []);
// ここで、コンポーネントの表示を行います。
return <div>こんにちは！</div>;
}これで、Reactコンポーネントの作成方法や、親子関係・ライフサイクルについて学ぶことができました。
5. スタイリングとレイアウト
Reactアプリでは、見た目を整えるためにスタイリングとレイアウトが大切です。
今回は、CSSの適用方法やインラインスタイル、CSSフレームワークの活用について学びましょう。
5-1. CSSの適用方法
ReactアプリでCSSを使う方法は主に2つあります。
1つ目は、外部CSSファイルをインポートする方法。
2つ目は、コンポーネント内で直接スタイルを適用する方法です。
5-1-1. 外部CSSファイルのインポート
外部CSSファイルをインポートする方法は、普通のHTMLファイルと同じように使えます。
まず、CSSファイルを作成し、そこにスタイルを書きます。
例えば、 styles.css というファイルを作り、以下のようなスタイルを書くことができます。
/* styles.css */
.title {
font-size: 24px;
color: blue;
}次に、ReactコンポーネントでCSSファイルをインポートします。
以下のように import を使って、CSSファイルを読み込むことができます。
// App.js
import React from "react";
import "./styles.css";
function App() {
return <h1 className="title">こんにちは！</h1>;
}
export default App;5-1-2. コンポーネント内でのスタイル適用
コンポーネント内で直接スタイルを適用する方法は、CSS in JSと呼ばれる方法です。
例えば、 styled-components というライブラリを使うことで、コンポーネント内でスタイルを定義できます。
まず、 styled-components をインストールします。
npm install styled-components次に、コンポーネント内でスタイルを適用します。
例えば、以下のように書くことができます。
import React from "react";
import styled from "styled-components";
const Title = styled.h1`
font-size: 24px;
color: blue;
`;
function App() {
return <Title>こんにちは！</Title>;
}
export default App;5-2. インラインスタイルの使い方
インラインスタイルとは、HTML要素の style 属性に直接スタイルを書く方法です。
Reactでは、インラインスタイルをオブジェクト形式で記述することができます。
5-2-1. インラインスタイルの基本構文
インラインスタイルを使うときは、以下のようにオブジェクト形式でスタイルを定義し、 style 属性にそのオブジェクトを渡します。
import React from "react";
function App() {
const titleStyle = {
fontSize: "24px",
color: "blue",
};
return <h1 style={titleStyle}>こんにちは！</h1>;
}
export default App;5-2-2. インラインスタイルの活用例
インラインスタイルは、スタイルがコンポーネント内に閉じているため、他のコンポーネントに影響を与えにくいという特徴があります。
ただし、再利用性が低くなるため、一部のスタイルのみを適用する場合に使うことが適しています。
例えば、クリックで文字の色が変わるボタンを作成する場合、以下のようにインラインスタイルを活用できます。
import React, { useState } from "react";
function App() {
const [color, setColor] = useState("blue");
const handleClick = () => {
setColor(color === "blue" ? "red" : "blue");
};
const buttonStyle = {
backgroundColor: color,
padding: "10px",
borderRadius: "5px",
cursor: "pointer",
};
return (
<button style={buttonStyle} onClick={handleClick}>
クリックで色が変わるボタン
</button>
);
}
export default App;5-3. CSSフレームワークを活用したデザイン
CSSフレームワークは、デザインを素早く効率的に行えるため、多くの開発者に利用されています。
Reactアプリでも、CSSフレームワークを活用することで、簡単に見た目を整えることができます。
5-3-1. 代表的なCSSフレームワーク
いくつかの有名なCSSフレームワークがあります。
例えば、以下のようなものが挙げられます。
- Bootstrap
- Material-UI
- Bulma
- Tailwind CSS
5-3-2. フレームワークの導入方法
CSSフレームワークをReactアプリに導入する方法は、フレームワークによって異なります。
例として、Material-UIを導入する方法を紹介します。
まず、Material-UIのパッケージをインストールします。
npm install @mui/material @emotion/react @emotion/styled次に、ReactコンポーネントでMaterial-UIのコンポーネントをインポートし、使ってみましょう。
import React from "react";
import Button from "@mui/material/Button";
function App() {
return (
<div>
<h1>こんにちは！</h1>
<Button variant="contained" color="primary">
クリックしてね
</Button>
</div>
);
}
export default App;これで、Material-UIのボタンが表示されます。
他のCSSフレームワークも同様に、公式ドキュメントを参照しながらインストールし、Reactコンポーネントで利用することができます。
以上で、スタイリングとレイアウトの方法について説明しました。
Reactアプリでは、いくつかの方法を組み合わせて、綺麗で使いやすいアプリを作成しましょう。
これからも、Reactの勉強を頑張ってくださいね！
6. Reactで状態管理を行う方法
Reactアプリでは、データを扱うために状態管理が重要です。
状態管理をうまく行うことで、アプリがスムーズに動作し、バグも少なくなります。
今回は、Reactで状態管理を行う方法を紹介します。
6-1. useStateとは
useState は、関数コンポーネント内で状態（state）を扱うためのフックです。
これにより、関数コンポーネントでも状態を管理できるようになりました。
6-1-1. useStateの概要
useState を使うと、状態変数とその変更関数をペアで作成できます。
初期値を引数に渡すことで、状態変数の初期値を設定できます。
const [state, setState] = useState(initialState);6-1-2. useStateの使用例
例えば、カウンターアプリを作成する場合、以下のようにuseStateを使います。
import React, { useState } from "react";
function App() {
const [count, setCount] = useState(0);
return (
<div>
<p>カウント: {count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
}
export default App;6-2. useEffectの使い方
useEffect は、関数コンポーネント内で副作用（例えば、データの取得や更新など）を扱うためのフックです。
副作用はコンポーネントのレンダリング後に実行されます。
6-2-1. useEffectの概要
useEffect は、第一引数に副作用を行う関数、第二引数に依存配列を指定します。
依存配列には、副作用が依存する変数を列挙します。
useEffect(() => {
// 副作用を行う処理
}, [dependency1, dependency2]);6-2-2. 依存配列を使った副作用の制御
依存配列に変数を指定することで、その変数が変更されたときだけ副作用が実行されます。
例えば、データの取得を行う場合は、以下のように書くことができます。
import React, { useState, useEffect } from "react";
function App() {
const [data, setData] = useState(null);
useEffect(() => {
fetchData().then((result) => setData(result));
}, []); // 依存配列が空の場合、初回レンダリング時にのみ実行される
return <div>{data ? data : "データを読み込んでいます..."}</div>;
}
async function fetchData() {
// データ取得処理
}
export default App;6-3. コンテキストAPIとは何か
コンテキストAPIは、Reactアプリでコンポーネント間で状態を共有する方法です。
これにより、親コンポーネントから子コンポーネントにデータを渡すためのプロップスを削減できます。
6-3-1. コンテキストAPIの概要
コンテキストAPIを使うには、まず createContext 関数でコンテキストを作成し、 Provider コンポーネントでデータを共有したい範囲を囲みます。
そして、 useContext フックを使ってコンテキストからデータを取り出すことができます。
6-3-2. コンテキストAPIの実装例
例えば、テーマカラーをアプリ全体で共有する場合、以下のように書くことができます。
import React, { createContext, useContext } from "react";
const ThemeContext = createContext("light");
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
function Toolbar() {
return (
<div>
<ThemedButton />
</div>
);
}
function ThemedButton() {
const theme = useContext(ThemeContext);
return <button style={{ backgroundColor: theme === "light" ? "white" : "black" }}>ボタン</button>;
}
export default App;このように、コンテキストAPIを使って状態を共有することで、アプリケーション全体でデータを簡単に使い回すことができます。
以上で、Reactでの状態管理方法について説明しました。
これらの方法をうまく組み合わせて、アプリの状態管理を行いましょう。
7. 外部APIとの連携
外部APIとの連携によって、様々なデータをアプリに取り込んで使うことができます。
今回は、APIからデータを取得し、それをコンポーネントで表示する方法を学びましょう。
7-1. APIからデータを取得する方法
APIからデータを取得する方法として、Fetch APIとAxiosがあります。
どちらも簡単に使えるので、お好みで選んでください。
7-1-1. Fetch APIを使ったデータ取得
Fetch APIはJavaScriptの標準機能で、以下のように使います。
async function fetchData() {
const response = await fetch("https://api.example.com/data");
const data = await response.json();
console.log(data);
}7-1-2. Axiosを使ったデータ取得
Axiosは外部ライブラリで、以下のように使います。
まずはインストールが必要です。
npm install axiosそして、以下のように使います。
import axios from "axios";
async function fetchData() {
const response = await axios.get("https://api.example.com/data");
console.log(response.data);
}7-2. 取得したデータをコンポーネントで表示する方法
APIから取得したデータをコンポーネントで表示する方法を学びましょう。
7-2-1. データをコンポーネントに渡す
まず、データをコンポーネントに渡す方法です。
useState と useEffect を使って、データを保持し、APIからデータを取得します。
import React, { useState, useEffect } from "react";
function App() {
const [data, setData] = useState([]);
useEffect(() => {
fetchData();
}, []);
async function fetchData() {
// APIからデータを取得し、setDataで更新
}
return (
<div>
{/* コンポーネントにデータを渡す */}
<DataList data={data} />
</div>
);
}
function DataList({ data }) {
return (
<ul>
{data.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}
export default App;7-2-2. データの表示と更新
データを表示するために、受け取ったデータを使ってリストを作成します。
function DataList({ data }) {
return (
<ul>
{data.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}これで、APIからデータを取得して、コンポーネントで表示する方法ができました。
APIとの連携を上手く使って、データを活用しましょう。
8. ルーティングの実装
ルーティングとは、アプリ内でページ遷移を行う方法です。
今回は、React Routerを使って、ルーティングを実装してみましょう。
8-1. React Routerの概要
React Routerは、Reactアプリでルーティングを簡単に実装できるライブラリです。
8-1-1. React Routerの特徴
React Routerは以下のような特徴があります。
- シンプルなAPIでルーティングが実装できる
- 動的なルーティングが可能
- ネストされたルーティングが実現できる
8-1-2. React Routerのインストール
まず、React Routerをインストールしましょう。
npm install react-router-dom8-2. ルーティングの設定方法
次に、ルーティングの設定を行います。
8-2-1. ルートコンポーネントの設定
ルートコンポーネントを設定するには、 BrowserRouter と Route を使います。
import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
function App() {
return (
<Router>
<div>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</div>
</Router>
);
}
export default App;8-2-2. ネストされたルーティング
ネストされたルーティングは、親コンポーネントの中で子コンポーネントのルーティングを設定する方法です。
import React from "react";
import { Route } from "react-router-dom";
import Parent from "./components/Parent";
import ChildA from "./components/ChildA";
import ChildB from "./components/ChildB";
function App() {
return (
<Parent>
<Route path="/child-a" component={ChildA} />
<Route path="/child-b" component={ChildB} />
</Parent>
);
}
export default App;8-3. ページ遷移の実装
ルーティングが設定できたら、ページ遷移を実装しましょう。
8-3-1. リンクの作成方法
Link コンポーネントを使って、リンクを作成します。
import React from "react";
import { Link } from "react-router-dom";
function Navigation() {
return (
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</nav>
);
}
export default Navigation;8-3-2. プログラム的な遷移方法
useHistory フックを使って、プログラム的にページ遷移を実装する方法もあります。
import React from "react";
import { useHistory } from "react-router-dom";
function ButtonWithNavigation() {
const history = useHistory();
const handleClick = () => {
history.push("/about");
};
return (
<div>
<button onClick={handleClick}>Go to About Page</button>
</div>
);
}
export default ButtonWithNavigation;このように、 useHistory フックを使って history.push() で遷移先のパスを指定することで、プログラム的にページ遷移を実現できます。
これで、React Routerを使ってルーティングを実装し、ページ遷移を行う方法を学びました。
ルーティングを上手く活用して、アプリのナビゲーションを充実させましょう。
9. 実践的なアプリケーション開発
これまでに学んだReactの知識を活用して、実践的なアプリケーションを開発してみましょう。
今回は、天気予報アプリ、ショッピングカートアプリの2つのアプリを作成します。
9-1. 天気予報アプリの作成
次に、外部APIを利用して天気予報アプリを作成してみましょう。
今回はOpenWeatherMapのAPIを使います。
9-1-1. 天気APIを利用したデータ取得
まず、APIから天気データを取得する方法を学びましょう。
fetch や axios を使ってAPIにアクセスし、取得したデータをReactの状態に保存します。
import React, { useState, useEffect } from "react";
const API_KEY = "your_api_key_here";
function WeatherApp() {
const [weather, setWeather] = useState(null);
const [city, setCity] = useState("Tokyo");
useEffect(() => {
fetch(
`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}`
)
.then((response) => response.json())
.then((data) => setWeather(data));
}, [city]);
return (
// JSX部分は省略
);
}
export default WeatherApp;9-1-2. 地域ごとの天気表示
取得した天気データを元に、選択された地域の天気を表示しましょう。
セレクトボックスを使って地域を選択できるようにします。
// WeatherAppコンポーネント内
const handleChangeCity = (event) => {
setCity(event.target.value);
};
// JSX部分
<select value={city} onChange={handleChangeCity}>
<option value="Tokyo">Tokyo</option>
<option value="Osaka">Osaka</option>
<option value="Sapporo">Sapporo</option>
// 他の都市を追加
</select>
<div>
{weather && (
<>
<h3>{weather.name}</h3>
<p>{weather.weather[0].description}</p>
<p>{Math.round(weather.main.temp - 273.15)}°C</p>
</>
)}
</div>9-1-3. 週間天気予報の表示
最後に、週間天気予報を表示してみましょう。
APIから7日間の天気データを取得し、それをリストで表示します。
import React, { useState, useEffect } from "react";
const API_KEY = "your_api_key_here";
function WeatherApp() {
const [weeklyWeather, setWeeklyWeather] = useState([]);
const [city, setCity] = useState("Tokyo");
useEffect(() => {
fetch(
`https://api.openweathermap.org/data/2.5/forecast/daily?q=${city}&cnt=7&appid=${API_KEY}`
)
.then((response) => response.json())
.then((data) => setWeeklyWeather(data.list));
}, [city]);
return (
// JSX部分は省略
);
}
export default WeatherApp;次に、取得した週間天気予報データをリストで表示します。
// WeatherAppコンポーネント内
const formatDate = (timestamp) => {
const date = new Date(timestamp * 1000);
return `${date.getMonth() + 1}/${date.getDate()}`;
};
// JSX部分
<div>
<ul>
{weeklyWeather.map((day, index) => (
<li key={index}>
<h4>{formatDate(day.dt)}</h4>
<p>{day.weather[0].description}</p>
<p>{Math.round(day.temp.day - 273.15)}°C</p>
</li>
))}
</ul>
</div>これで天気予報アプリの作成が完了しました。
9-2. ショッピングカートアプリの作成
最後に、ショッピングカートアプリを作成してみましょう。
商品リストの表示、カートへの追加機能、カート内商品の削除機能を実装します。
9-2-1. 商品リストの表示
まずは、商品リストを表示する機能を作ります。
商品データをReactの状態として用意し、それをもとに商品リストを作成しましょう。
import React, { useState } from "react";
const products = [
{ id: 1, name: "Product 1", price: 100 },
{ id: 2, name: "Product 2", price: 200 },
{ id: 3, name: "Product 3", price: 300 },
// 他の商品データ
];
function ShoppingCartApp() {
const [cart, setCart] = useState([]);
return (
<div>
<h2>商品リスト</h2>
<ul>
{products.map((product) => (
<li key={product.id}>
{product.name} - {product.price}円
</li>
))}
</ul>
// 以下にカートの表示部分などを追加
</div>
);
}
export default ShoppingCartApp;9-2-2. カートへの追加機能
次に、商品をカートに追加する機能を実装しましょう。
各商品に「カートに追加」ボタンを設置し、そのボタンを押すとカートに商品が追加されるようにします。
// ShoppingCartAppコンポーネント内
const addToCart = (product) => {
setCart([...cart, product]);
};
// JSX内の商品表示部分
<ul>
{products.map((product) => (
<li key={product.id}>
{product.name} - {product.price}円
<button onClick={() => addToCart(product)}>カートに追加</button>
</li>
))}
</ul>9-2-3. カート内商品の削除機能
最後に、カート内の商品を削除する機能を実装しましょう。
カート内の商品に「削除」ボタンを設置し、そのボタンを押すと商品がカートから削除されるようにします。
// ShoppingCartAppコンポーネント内
const removeFromCart = (productToRemove) => {
setCart(cart.filter((product) => product.id !== productToRemove.id));
};
// JSX内のカート表示部分
<h2>カート内商品</h2>
<ul>
{cart.map((product, index) => (
<li key={index}>
{product.name} - {product.price}円
<button onClick={() => removeFromCart(product)}>削除</button>
</li>
))}
</ul>これで、ショッピングカートアプリの基本的な機能が完成しました。
これらのアプリケーションは、実践的な開発を通じてReactの基本概念や機能を理解するのに役立ちます。
各アプリケーションを作成することで、コンポーネントの作成や状態管理、イベントハンドラーなどの概念を身につけることができます。
さらに、これらのアプリケーションをカスタマイズして、自分だけのアプリケーションに進化させることができます。
例えば、Todoリストアプリにカテゴリ分け機能を追加したり、天気予報アプリに気温グラフを表示する機能を追加したり、ショッピングカートアプリに商品検索機能を追加するなど、アイデア次第でさまざまな機能を実装できます。
このように、実践的なアプリケーション開発を通じてReactの理解を深めることができます。
これらのアプリケーションを作成することで、実際のプロジェクトに取り組む際にも自信を持って開発ができるようになるでしょう。
10. プログラミング初心者のぼっち大学生におすすめしたいReact.js本を紹介します
まとめに入る前に、React.js初心者のぼっち大学生のみなさんに、現役エンジニアの僕がおすすめしたい書籍を何冊か紹介しておきたいと思います。
10-1. React.js&Next.js超入門 第2版
© 秀和システム
Node.jsの解説記事でも言及した通り、「React.js&Next.js超入門 第2版」をはじめとした掌田津耶乃さんの書籍は、全くの初心者から既に他の技術を学んでいる経験者まで、読む人を選ばない分かりやすさが最大の特徴。
この「React.js&Next.js超入門 第2版」は、これからReact.jsを学んでWebサイト制作やWebアプリケーション開発に活用したいというぼっち大学生に、真っ先におすすめしたい書籍となっております。
11. まとめ
今回は、プログラミング初心者のぼっち大学生向けに、React.jsの基礎知識を解説させていただきました。
今回紹介したReact.jsのスキルは、近年のWebフロントエンドの開発現場において、求められる機会が非常に多い技術のひとつ。
React.jsは、以前解説したJavaScriptやTypeScriptについて、ある程度学習の経験を積まれたぼっち大学生のみなさんに、ぜひ最初に学んでいただきたいJSフレームワークです。
そして、React.jsは、あらゆる学習プラットフォームや書籍、Webサイトなどで、初心者向けの学習コンテンツが多数提供されているフレームワークでもあります。
例えば、ぼっち大学生のみなさんが独学でReact.jsを学ぶような場合も、学習のためのリソースに困ることはまず無いでしょう。
しかし、ぼっち大学生のみなさんは、サブスク型プログラミングスクールのSAMURAI TERAKOYA（侍テラコヤ）であれば、飲み会1回分ほどの費用で、React.jsをより効率的かつ確実に学ぶことが可能です。
SAMURAI TERAKOYA（侍テラコヤ）の詳細については、こちらの記事で解説していますが、
- 40種類以上に及ぶ学び放題の教材
- 平均回答スピード30分以内のQ&A掲示板
- 月1回〜の現役エンジニアとのオンラインレッスン
- プログラミング学習を継続できる学習ログ
を、月額2,980円〜という破格の料金で利用することができます。
React.jsの学習に興味があり、プログラミングスクールで学ぶことも視野に入れていたが、費用面がネックとなり、なかなか学習に手を付けられなかったというぼっち大学生のみなさんは、ぜひ一度このSAMURAI TERAKOYA（侍テラコヤ）に無料で相談してみてはいかがでしょうか？
