react勉強会 #3 の資料です。

1. react勉強会#3
本⽇のテーマ
コンポーネントを活⽤してアプリを作ってみよう
本⽇の達成⽬標
カレンダーアプリの完成
本⽇の流れ
1. 環境構築 (Create React Appを使います)
node (8.1.0以上)、 npm (5.6.0以上) が必要となります。
1. node、npmのバージョン確認
※Mac はターミナル、Windows はコマンドプロンプトにて以下コマンドで確認
nodeのバージョン確認
node --version
npmのバージョン確認
npm --version
2. nodeのインストール
※上記確認でバージョンが表⽰されなかった⽅のみ
1. https://nodejs.org/en/ を開く
2. 左側の LTS 版をダウンロードする
3. ダウンロードしたインストーラーを実⾏
4. 「次へ」を選択していきインストール
3. node、npmのアップデート
※nodeまたはnpmのバージョンが条件を満たしていない⽅のみ
アップデートして問題ないかご⾃⾝の環境を考慮の上、アップデートしてください。
4. Create React Appでプロジェクトを作成
1. 以下コマンドを打つ
npx create-react-app my-app(任意の名前でOKです)
こちらの記事の「3. 現状のソースの確認」までに詳しく記載されておりますので、ご確
認ください。
https://qiita.com/rioc/items/8723c236e10d989e827d
1. カレンダーアプリの実装 (~20:50)
各⾃、⾃由に実装いただければと思いますが、どこから⼿をつけたら良いかわからないという⽅
は、以下に参考ページのリンクや1例として最低限のサンプル⼿順を記載しておりますのでご参考
ください。
参考ページ
Reactでカレンダーを使う

2. (https://qiita.com/Hitomi_Nagano/items/c6f0e84f1c892c6e69b3)
React.js ライブラリ「react-dates」を使⽤してカレンダーを実装する
(https://mebee.info/2020/03/03/post-6848/)
Reactカレンダーを簡単に実装できるライブラリ「react-calendar」
(https://cpoint-lab.co.jp/article/202001/13484/)
１ヶ⽉のカレンダーをつくる (https://reactapp.dev/posts/create-react-
app-calendar)
Airbnbが作ったReactのCalendarライブラリ、react-datesを試してみる
(https://shinshin86.hateblo.jp/entry/2019/10/05/084442)
サンプル⼿順
このサンプルでは Material-UI の Date picker を使⽤します。
DataPickerの公式ドキュメント: https://material-ui-pickers.dev/demo/datepicker
1. 環境構築が終わったら Create React App で作成したプロジェクトフォルダに
移動
cd [フォルダ名]
2. @material-ui/core をインストール
npm install --save @material-ui/core
3. Date picker をインストール
npm install --save @material-ui/pickers
4. Date pickerを使うために必要な @date-io adapters をインストール
npm install --save @date-io/date-fns@1.x date-fns
この Date picker を使うための準備については下記公式ページに詳細が記載さ
れています。
https://material-ui-pickers.dev/getting-started/installation#peer-library
5. カレンダーのテンプレートを適⽤する
src/App.js を編集し、Date picker の Static mode を表⽰させる

3. import React, { useState } from "react";
import { MuiPickersUtilsProvider, DatePicker } from
"@material-ui/pickers";
import DateFnsUtils from '@date-io/date-fns';
function App() {
const [date, changeDate] = useState(new Date());
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<DatePicker
autoOk
orientation="landscape"
variant="static"
openTo="date"
value={date}
onChange={changeDate}
/>
</MuiPickersUtilsProvider>
);
}
export default App;
6. カレンダーが表⽰されていることを確認
npm start
7. Date picker の Props をいじってみる
Propsの詳細はこちら: https://material-ui-pickers.dev/api/DatePicker
1. 先程編集した App.js の orientation="landscape" を
orientation="portrait" に変更
2. 先程とカレンダーのレイアウトが変わっていることを確認
npm start
各⾃ Props をいじってどう変わるか確認し、お好きなレイアウトにしてみてく
ださい。
8. スケジュール機能の追加
1. 同じ⽇付をクリックしたことを認識する処理を追加
onChangeは、任意の⽇付をクリックしたときに呼ばれる Props のた
めこれに⼿を加える。
また、新たな状態 previousDate、setPreviousDate を追加する。
現時点での App.js は以下のようになる。

4. import React, { useState } from "react";
import { MuiPickersUtilsProvider, DatePicker } from
"@material-ui/pickers";
import DateFnsUtils from '@date-io/date-fns';
function App() {
const [date, changeDate] = useState(new Date());
const [previousDate, changePreviousDate] =
useState(new Date());
const handleSelectDate = (selectedDate) => {
changePreviousDate(date); // クリックされる前
の⽇付を格納
changeDate(selectedDate); // クリックされた後
の⽇付を格納
if (previousDate.getDate() == date.getDate()) {
//同じ⽇付を選択された場合のレンダリング
}
};
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<DatePicker
autoOk
orientation="landscape"
variant="static"
openTo="date"
value={date}
onChange={handleSelectDate}
/>
</MuiPickersUtilsProvider>
);
}
export default App;
2. スケジュール内容を記述するダイアログの作成
@material-ui/core の Dialog コンポーネントを使う。
参考ページ: https://material-ui.com/components/dialogs/
Dialog コンポーネントを埋め込むと App.js は以下のようになる。
import React, { useState } from "react";
import { MuiPickersUtilsProvider, DatePicker } from
"@material-ui/pickers";
import DateFnsUtils from '@date-io/date-fns';
import { Dialog, DialogTitle, DialogContent,
DialogContentText,
TextField, DialogActions, Button } from
'@material-ui/core';
function App() {
const [date, changeDate] = useState(new Date());

5. const [previousDate, changePreviousDate] =
useState(new Date());
const [openDialog, changeOpenDialog] =
useState(false);
const [title, changeTitle] = useState("");
const [time, changeTime] = useState(new Date());
const [description, changeDescription] =
useState("");
const handleSelectDate = (selectedDate) => {
changePreviousDate(date);
changeDate(selectedDate);
if (previousDate.getDate() == date.getDate()) {
//同じ⽇付を選択された場合のレンダリング
changeOpenDialog(true);
}
};
const handleGetTitle = (event) => {
changeTitle(event.target.value);
};
const handleGetTime = (event) => {
changeTime(event.target.value);
};
const handleGetDescription = (event) => {
changeDescription(event.target.value);
};
const handleCloseDialog = () => {
changeTitle("");
changeTime(new Date());
changeDescription("");
changeOpenDialog(false);
};
const handleCompleteDialog = () => {
changeOpenDialog(false);
};
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<p>前の⽇付: {previousDate.getDate()}</p>
<p>選択された⽇付: {date.getDate()}</p>
<p>{title}</p>
<DatePicker
autoOk
orientation="portrait"
variant="static"
openTo="date"
value={date}

6. onChange={handleSelectDate}
/>
<Dialog open={openDialog} onClose=
{handleCloseDialog} aria-labelledby="form-dialog-
title" >
<DialogTitle id="form-dialog-title">スケジュー
ル</DialogTitle>
<DialogContent>
<DialogContentText>
内容を記⼊してください。
</DialogContentText>
<TextField
autoFocus
margin="dense"
id="name"
label="タイトル"
type="email"
fullWidth
onChange={handleGetTitle}
/>
<TextField
autoFocus
margin="dense"
id="name"
label="時間"
type="time"
inputProps={{step: 300}}
fullWidth
onChange={handleGetTime}
/>
<TextField
autoFocus
margin="dense"
id="name"
label="詳細"
type="email"
fullWidth
onChange={handleGetDescription}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleCloseDialog}
color="primary">
キャンセル
</Button>
<Button onClick={handleCompleteDialog}
color="primary">
確定
</Button>
</DialogActions>
</Dialog>
</MuiPickersUtilsProvider>

7. );
}
export default App;
ここまでの実装で、ダイアログに記⼊した内容（title, time,
description）がstateに保存されるようになっている。
2. 感想・意⾒等の募集 (20:50~)
各⾃、1つ以上コメントいただいて解散とさせていただきます。
今後の勉強会の参考にさせていただきます。
本⽇の勉強会の感想
(分かりにくかった・簡単すぎたなど)
意⾒
(今後勉強したいと思っているものなど)
などひと⾔いただければ幸いです！
まとめ
今回はカレンダーアプリをテーマにしてみましたが、既存のコンポーネントを活⽤することでレイアウト部
分は簡単に実装できます。カレンダーアプリに限らず、様々な UI コンポーネントを活⽤することで、アプ
リ作成のハードルが低くなると思います。
もし、難しく感じた⽅は react チュートリアル (https://ja.reactjs.org/tutorial/tutorial.html) に取り組
まれてから、コードを⾒直してみると理解しやすいかもしれません。
お知らせ
チャットツール「discord」で勉強会の告知や、やりとりの場を設けております。
もしよろしければ下記 URL からご参加ください。
https://discordapp.com/invite/fr8CqPH