[[toc]] 前回の記事で、開発環境の構築が完了しました。今回は、フロントエンド側の実装に入りたいと思います。前回までの記事はこちらです。 - [React × DRFで画像アップロード機能作成 (環境構築編)](/blog/react-drf-img_uploader-environment) # 実行環境 - Mac OS X 11.2.1 - Docker 20.10.5 - docker-compose version 1.28.5 - node v15.10.0 - npm 7.9.0 - react 17.2.0 # コンテナに入る前回作成したclient用のコンテナが起動していること確認後、下記コマンドを実行して、client用のコンテナに入ります。 ```bash $ docker exec -it client sh ``` # Reactアプリの作成コンテナに入ったら、下記のコマンドを実行してReactのアプリを作成します。 ```bash $ cd client $ npx create-react-app --template typescript ``` コマンドを実行すると、各ライブラリのインストールが始まります。インストールが完了すると、下記メッセージが出力されます。 ```bash We suggest that you begin by typing: cd img_uploader yarn start Happy hacking! ``` ## 開発用サーバを起動アプリの作成が無事に完了しているか確認するために、一度開発用サーバを起動して確認します。 ```bash $ cd img_uploader $ yarn start ``` サーバを起動したら、[http://localhost:3000/](http://localhost:3000/)に接続します。下記画面が表示されていれば、アプリの作成とサーバに起動は成功です。 ![React初期画面](//images.contentful.com/d3b1looh8iwg/7qeGJOlMbP82VDU13FGYwO/8a27f0a6a76c4aa10aa79f36d9ceb333/React.png) # ライブラリのインストール次に、アプリ作成に必要なライブラリを別途インストールしていきます。今回インストールするライブラリは下記になります。 - axios - Material-UI - react-dropzone 下記コマンドを実行して、ライブラリをインストールします。 ```bash $ yarn add axios @material-ui/core react-dropzone $ yarn add -D @types/react-dropzone ``` # 機能概要ライブラリのインストールが完了したら、早速フロント側の機能実装に移りたいと思います。今回作成するアプリの機能は以下のようなものになります。 - ドラッグアンドドロップで画像選択 - 「Selectボタン」でファイル選択 - 選択された画像のプレビュー - 「Uploadボタン」でサーバに選択された画像を送信 # 実装早速、実装に移ろうと思います。まずは、画面を描画しているApp.tsxの編集を行っていきます。 ## 必要ライブラリのインポートまずは、今回使用するライブラリをインポートしていきます。 ```tsx import React, { useState, useCallback } from 'react' import { makeStyles } from '@material-ui/core/styles' import { Container, Card, CardContent, CardActions, Typography, Button, } from '@material-ui/core' import { useDropzone } from 'react-dropzone' import './App.css'; import bg from './assets/image/upload_bg.jpg' import axios from 'axios' ``` ## Material UIのデザインアレンジ次に、前回インストールした画面のデザインを簡単に作ってくれるライブラリであるMaterial UIのデザインを少しアレンジしていきます。 Material UIの詳しい使用方法は、[公式ドキュメント](https://material-ui.com/ja/)を参照してください。 ```tsx const useStyles = makeStyles({ root: { minWidth: 300, position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }, title: { textAlign: 'center', }, subtitle: { textAlign: 'center', }, actions: { justifyContent: 'center', } }) ``` ## コンポーネントの作成実際に描画されるコンポーネントの作成を行っていきます。 ```tsx // Dropzoneの設定 const acceptFile = 'image/*' type MyFile = File & { preview: string } const App:React.FC = () => { // Style const classes = useStyles() // State const [isShow, setIsShow] = useState(false) const [files, setFiles] = useState([]) // ドロップした時の処理 const onDrop = useCallback((acceptedFiles: File[]) => { setIsShow(true) setFiles(acceptedFiles.map( file => Object.assign(file, { preview: URL.createObjectURL(file) }) )) }, []) // Dropzone const { getRootProps, getInputProps, isDragActive, open } = useDropzone({ noClick: true, onDrop, accept: acceptFile }) const upload = () => { const data = new FormData() files.forEach(file => data.append('file', file)) axios.post('http://localhost:8000/api/image/', data) .then(res => { console.log(res) setIsShow(false) setFiles([]) }) .catch(e => { console.log(e) }) } return ( Image uploader drag & drop

{isShow ? ( files.map(file => ( {file.name}

)) ) : (

)}

{isShow && ( )} ) } export default App; ``` ### useStyles() ```tsx const classes = useStyles() ``` ここでは、上で定義したMaterial UIのデザインのアレンジするための関数を実行して、その戻り値を`classes`に格納することで、デザインを適用するための処理です。実際に、デザインを適用するためには、下記のように`className`に適用させたいクラス名を定義します。 ```tsx ``` ### usState() useState関数を使用して、コンポーネント内での状態管理を行います。useStateは下記のようにして使用します。 ```tsx const [変数, set変数] = useState(初期値) ``` 今回は、画像が選択された際に、画面の表示を切り替えるためのフラグをここで管理しています。 ```tsx const [isShow, setIsShow] = useState(false) const [files, setFiles] = useState([])// ドロップした時の処理 const onDrop = useCallback((acceptedFiles: File[]) => { setIsShow(true) setFiles(acceptedFiles.map( file => Object.assign(file, { preview: URL.createObjectURL(file) }) )) }, []) // ... // isShowがFalseなら、デフォルトで表示するべき画像を表示しています。 {isShow ? ( files.map(file => ( {file.name}

)) ) : (

)} ``` ### ドラッグアンドドロップの処理 [react-dropzone](https://react-dropzone.js.org/)というライブラリを使用して、コンポーネントの一部のエリアにドラッグアンドドロップをすることによって、画像を選択させるといった処理が可能になります。 ```tsx // ドロップした時の処理 const onDrop = useCallback((acceptedFiles: File[]) => { // setIsShow(true) setFiles(acceptedFiles.map( file => Object.assign(file, { preview: URL.createObjectURL(file) }) )) }, []) // useDropzone実行時に渡しているプロパティについて // noClick: trueを渡すことで、ドラッグアンドドロップでのみ画像選択を許可する // onDropを渡すことで、ドラッグアンドドロップ時に、実行する関数を指定できる // Dropzone const { getRootProps, getInputProps, isDragActive, open } = useDropzone({ noClick: true, onDrop, accept: acceptFile }) // ...

{isShow ? ( files.map(file => ( {file.name}

)) ) : (

)}

``` ### API呼び出し Uploadボタンを押した時に、このあと作成するAPIを呼び出すための処理の実装を見ていきます。 ```tsx {isShow && ( )} const upload = () => { const data = new FormData() files.forEach(file => data.append('file', file)) axios.post('http://localhost:8000/api/image/', data) .then(res => { // API成功時の処理 console.log(res) setIsShow(false) setFiles([]) }) .catch(e => { console.log(e) }) } ``` uploadボタンは、isShowフラグがtrueのときのみ表示され、ボタンを押下した時にupload関数が実行されます。 upload関数では、選択されたファイルをFormDataに格納していき、それをAxiosを使用して、APIを実行しています。 APIの処理が成功したときは、`.then` の処理に入りisShowフラグを折り、選択ファイルを空にしています。 ## デザインを整える App.tsxの実装が完了したら次は、CSSで細かいデザインを整えて行きます。 ```css body { background-color: #eee; } .upload_img { display: block; margin: 20px auto; border-style: dashed; border-radius: 10px; border-color: #7c88cb; } .upload_img.is-on { opacity: .7; } .hidden { display: none; } img { display: block; margin: 20px auto; } ``` ## 動作確認ここまで実装が済んだら、実際に画像をドラッグアンドドロップしてみます。 ![img-uploader-drug and drop](//images.contentful.com/d3b1looh8iwg/29C7Y1pwwfAa86h8WBadaH/6afafe9970bbc425ef8f9bd4d6370696/img-uploader-drug_and_drop.png) 選択した画像がプレビューされることが確認でき、Uploadボタンが表示されたら一先ずOKです。 ![img-uploader-preview](//images.contentful.com/d3b1looh8iwg/9MOcS10jJrZxDD4uWMLGM/61a07d4b630ad86d03bcf09bdb6a9d48/img-uploader-preview.png) # まとめ今回は、ドラッグアンドドロップで画像を選択して、選択された画像をプレビューするところまで実装しました。次回は、Uploadボタンを押下時に受け取るサーバ側の処理を実装していこうと思います。

Yoshihiko

Career

Skill

HTML

CSS

SCSS

JavaScript

jQuery

Vue

React

TypeScript

Java

Python

Django

Docker