What's New Qiita

20201119のReactに関する記事は7件です。

  • 投稿日：2020-11-19T23:06:00+09:00

VScodeでESlintが適用されない

りあクト!第３版【II.React基礎編】をやっています。
6-1.ESlintでsrc/App.tsxを開いたけど、あんまりエラーが発生していない。
何か設定を間違えたかなと思いました。

VScodeの右下に「?ESlint」とあったので、そこをクリックして、「✔︎ESlint」としたらESlintが有効になって、エラーが複数あらわれました！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-11-19T22:09:36+09:00

SPAとは？

はじめに

最近SPA開発に興味を持ったので、簡単ではありますが、メリット・デメリットなどをまとめました。
（文字だらけですが・・・）

SPAとは

「Single Page　Application」の略。単一ページ中でコンテンツの切り替えを行うWebアプリケーションのこと。

SPAを開発する上で、Vue.jsやReactなどのJavaScriptのフレームワーク・ライブラリを利用することが多い。

ブラウザでのページ遷移を必要とせずに新しい情報を読み込むことができる。

SPAの代表例
  • slack Webページ
  • Facebookメッセンジャー Webページ
  • GoogleMap
  • trello

など・・・

これらはWebではありますが、ページ遷移が無いので、スムーズに情報を閲覧できる。

SPAのメリット

①ユーザーのページ遷移ストレスが無くなる

ページのリロード（読み込み）が無いので、ページ遷移時にいちいちリロードされるのでユーザーにとってはストレスに感じる。
SPAは従来のWebサイトのように、ページ遷移ごとにページを丸々差し替える（新しいHTMLを表示させる）ことがなく、必要な部分のコンテンツのみ遷移させるので、画面全体が再描画されるストレスから解放される。

②アプリのようなUX

SPAでは共通の部品は更新しないで、差分だけ更新するので、ユーザー一覧を表示したまま別の一覧ページさせたりすることができる。

③開発の手間を省くことができる

SPAは幅広いUIを実装可能なので、iOSアプリやAndroidアプリのような端末内にダウンロードするネイティブアプリの代用として使用できる。
ネイティブアプリはアプリのリリース前に審査を通過させる必要がある、デバイスごとの挙動を考慮する必要があるというハードルがありますが、そういった問題を考慮せずに公開することができる。

デメリット

①初期ローディングに時間を要する

SPAは差分だけ更新させる動作をさせるので、フロントエンド側（JavaScript）で記述をするが、そのコード量が増加しがちなので、コードを読み込む時間がかかり、最初のページ読み込み時に時間がかかる。

②実装コストがかかる

ブラウザ側に処理を任せていた部分を実装する必要があるので、特にフロントエンドの実装コストがかかる。

③ネイティブアプリのようにモバイルのホーム画面に登録してもらい辛い

モバイルの場合、Webページをホーム画面に登録してもらえる機会が減る可能性が高い。普段使いには厳しいかも。

④SPAが実装できるエンジニアがまだまだ少ない

国内だと、まだまだSPAはメジャーでは無いので、開発実装に対応できるフロントエンドエンジニアが少ない（少しずつ増えてきているのかも？？）

どんなサービスに向いてる？

最初の読み込みは時間がかかるものの、初回読み込み後の各操作については更新のタイムラグが無い。そのためユーザー操作が多く、滞在時間が長いサービスがSPAに向いている。
映画館や新幹線などのチケットの座席指定やグラフ・図などを用いたデータ可視化サービスなどに向いている。これらサービスは、検索が行われる度にページ遷移が発生し、頻繁に待ち時間が発生するのでSPA化することで、検索→結果表示が単一画面上で行われ、待ち時間を最小限に抑えることができる。

どんなサービスが向いていない？

滞在時間が長くないサービス、つまり直帰率が高い(１ページのみ閲覧して、ページから離脱してしまった割合）サービスはSPAに不向き。
ブログなどの１ページのみのサイトなどが挙げられる。
直帰率の高いサービスにSPAを採用しても、最初のアクセス時に読み込み時間を多く要してしまうので時間がかかるばかりでメリットが感じられない。

「サービスの挙動を早くするためにSPAを採用したい！！」というのは少し考える必要がある。
SPAは同時に情報処理をすることは得意だが、データ更新が早くなるわけでは無いので、データ処理を早くするためにはバックエンドの構築を再考するのが良い。

まとめ

SPAを採用する際はどういうサービスを開発したいのかを明確にして、SPAのメリット＆デメリットを考慮しながら導入していきたいところ。

参考

https://digitalidentity.co.jp/blog/creative/about-single-page-application.html
https://www.oro.com/ja/technology/001/

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-11-19T19:16:54+09:00

Recharts Tooltipの数値をフォーマットする

RechartのTooltipの数値をフォーマットする際に迷ったので備忘録。

Tooltipのフォーマット

Rechartでは、Tooltipを使うと、マウスオーバで数値の詳細が確認できるようになる。

<BarChart>
  <Tooltip />
</BarChart>

表示される数値は、formatter propに関数を渡せばフォーマットできる。

<BarChart>
  <Tooltip formatter={(value) => new Intl.NumberFormat('ja-JP', {maximumFractionDigits: 0}).format(value)} />
</BarChart>

TypeScrpitの場合は、valueを数値に変換してNumberFormat.formatに渡せばok

<BarChart>
  <Tooltip formatter={(value) => new Intl.NumberFormat('ja-JP', {maximumFractionDigits: 0}).format(+value)} />
</BarChart>

変数に名前を付ける場合は、[formatted_value, name]の配列を返す

<BarChart>
  <Tooltip formatter={(value, name) => [new Intl.NumberFormat('ja-JP', {maximumFractionDigits: 0}).format(+value), idToLabelMap.get(name)]} />
</BarChart>

参考

https://stackoverflow.com/questions/51382831/recharts-add-commas-to-number-on-tooltip-on-bar-chart

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-11-19T18:22:47+09:00

React Developer Tools を Electron@9, 10, 11 で利用する方法

はじめに

公式ドキュメントで紹介されている方法

  • DevTools Extension ページの内容はすでに古いです（アップデートされていない）
  • 現在推奨されている方法は、メインプロセスの session.loadExtension に記述されています

スクリーンショット 2020-11-19 17.44.09.png

このサンプルの通りに実行すると、実際には以下のようなエラーメッセージが表示され、デベロッパーツールに React 関連のタブが現れません。

console
ExtensionLoadWarning: Warnings loading extension at /Users/sprout2000/Library/Application\ Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/4.10.0_0: 
Unrecognized manifest key 'browser_action'. 
Unrecognized manifest key 'update_url'. 
Permission 'contextMenus' is unknown or URL pattern is malformed. 
Cannot load extension with file or directory name _metadata. 
Filenames starting with "_" are reserved for use by the system.

スタンドアローン版 react-devtools の利用

npm パッケージ react-devtools をインストールします。

bash
$ yarn add -D react-devtools
// or
$ npm i -D react-devtools

ドキュメントの Usage with React DOM にしたがって、 index.html にてスクリプトを読み込みます。

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- head タグの先頭でスクリプトを読み込む -->
    <script src="http://localhost:8097"></script>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- CSP の設定はしない -->
    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self';" /> -->
  </head>

※ CSPの設定しだいでは、上記のスクリプト読み込みを拒否されます
※ Electron のデベロッパーツールには CSP 関連の警告が表示されます
※ 本番のビルドで削除するのを忘れないように

react-devtools を起動してから Electron を起動します。
（ここでは npm-run-all を使います。適宜、concurrently などに読み替えてください。

package.json
{
  "scripts": {
    "start": "run-p devtool build",
    "build": "run-s build:dev serve",
    "build:dev": "NODE_ENV=development webpack --progress",
    "serve": "electron .",
    "devtool": "react-devtools"
  }
}

webpack で 'html-webpack-plugin' を利用している場合は以下のようになると思います。

webpack.config.js
  plugins: [
    new HtmlWebpackPlugin({
      template: isDev ? './src/index.dev.html' : './src/index.html',
      filename: 'index.html',
    }),
  ],

参考コード

  • メインプロセス
main.ts
import { app, BrowserWindow } from 'electron';

const createWindow = () => {
  const mainWindow = new BrowserWindow();
  mainWindow.loadFile('dist/index.html');
};

app.whenReady().then(createWindow);
app.once('window-all-closed', () => app.quit());
  • レンダラープロセス
App.tsx
import React from 'react';
import ReactDOM from 'react-dom';

const App: React.FC = () => {
  return (
    <div>
      <h1>Hello Electron!</h1>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
  • webpack.config.js
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const isDev = process.env.NODE_ENV === 'development';

/** @type import('webpack').Configuration */
const base = {
  mode: isDev ? 'development' : 'production',
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.json'],
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        loader: 'ts-loader',
      },
    ],
  },
  devtool: isDev ? 'inline-source-map' : false,
};

/** @type import('webpack').Configuration */
const main = {
  ...base,
  target: 'electron-main',
  entry: {
    main: './src/main.ts',
  },
};

/** @type import('webpack').Configuration */
const renderer = {
  ...base,
  target: 'web',
  entry: {
    renderer: './src/App.tsx',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: isDev ? './src/index.dev.html' : './src/index.html',
      filename: 'index.html',
    }),
  ],
};

module.exports = [main, renderer];

出典

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-11-19T16:24:19+09:00

Webアプリ未経験者がReactに手を出す

妻が「こんなアプリがあったらいいのに」と話していたのを聞いて、ノリでちょっと作ってみようと思ったのだが、そもそもC言語しか知らない人間にとっては「WebアプリってCSSとJavascriptで作るもんでしょ？」ぐらいしか知識がなく。

しかし、断念するのもアレなので色々とググったら、ReactとかVue.jsとかどっかで見たことある言葉がたくさん出てきてしまって更に悩むことになったが、なんとなくReactを使おうと決めた。

Reactのことなら巷に情報は溢れているし、Webアプリ開発者の方々ならサクサク進めるであろうが、未経験者はいちいち躓いていくという現実を、備忘録込みで記録を残してみようと思う。

今の理解

Reactについての認識はこんなところ。

  • WebのUI用JavaScriptライブラリ群
  • これを使えばWeb画面であれやこれやできる
  • Facebookが開発しているOSSで、今は商用に使っても大丈夫

また、このReactを用いてWebアプリ開発を行うには、以下の２つのパッケージが必要と知った。

  • npm ・・・ 「Node.js」に関連するパッケージを独自で管理するアプリケーションのこと
  • Node.js　・・・クライアントだけでなくサーバ側でも動作するJavascript実行環境で、Reactでの生産物をサーバ側で動作させるための土台

ということでnpmとnode.jsを手元に揃えるところから着手する。

開発環境の準備

開発環境は以下のスペック(古いノート)。

  • PC：FMV-BIBLO MG70W(2007年製)
    • CPU：Core2Duo T7100＠1.80GHz
    • Mem：4GB
    • SSD：50GBぐらい
  • OS：Linux Mint 20 Cinnamon

インストール

aptを使って「npm」をインストールする。

$ sudo apt install npm
:
$ npm -v
6.14.4

$ sudo apt install nodejs
パッケージリストを読み込んでいます... 完了
依存関係ツリーを作成しています                
状態情報を読み取っています... 完了
nodejs はすでに最新バージョン (10.19.0~dfsg-3ubuntu1) です。
nodejs は手動でインストールしたと設定されました。
アップグレード: 0 個、新規インストール: 0 個、削除: 0 個、保留: 0 個。
$ nodejs -v
v10.19.0

「nodejs」はnpmと依存関係ということで自動的に入っていた。

バージョンアップ

執筆時点(2020/11/19)でのバージョンは以下となっていた。

npm Node.js
Mint 20 6.14.4 10.19.0
安定版 6.14.8 14.15.1
最新版 7.0.12 15.2.1

npmはまだしも、Node.jsはバージョンが離れすぎ。

Node.js

先にNode.jsをアップデートする。

(1) npmでNode.jsのパッケージ管理アプリの「n」をインストール

$ sudo npm cache clean
$ sudo npm install -g n

(2) nを使って、安定版(stable)を導入する

$ sudo n stable
   :
   installed : v14.15.1 (with npm 6.14.8)
$

(3) バージョンを確認する

$ nodejs -v
v10.19.0
$ node -v
v14.15.1

ん？どういうことだ？？

$ which node
/usr/local/bin/node
$ ls -l /usr/local/bin/node*
-rwxr-xr-x 1 root root 73828464 11月 19 13:19 /usr/local/bin/node

$ which nodejs
/usr/bin/nodejs
$ ls -l /usr/bin/node*
-rwxr-xr-x 1 root root 14416  3月 31  2020 /usr/bin/node
lrwxrwxrwx 1 root root    40  3月  7  2020 /usr/bin/node-gyp -> ../share/nodejs/node-gyp/bin/node-gyp.js
lrwxrwxrwx 1 root root     4  3月 31  2020 /usr/bin/nodejs -> node

$ env | grep PATH
PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin

/usr/local/binにはnodejsがないので、/usr/binにある方が動いてるのはわかるが、ファイルサイズが全然違うし、どないなってんのやん？？

(4) aptでインストールしたnodejsとnpmを削除する
調べたところ、aptで入れた「nodejs」と「npm」は上記の新しいバージョンを導入するために必要としただけであり、もう用済みであることがわかった。ということでaptで削除する。

$ sudo apt purge -y nodejs npm
　：
　(ガッツリ削除されるが気にしない)
　：
$

(5) 再度、バージョンを確認する

$ npm -v
6.14.8
$ node -v
v14.15.1
$ nodejs -v
bash: /usr/bin/nodejs: そのようなファイルやディレクトリはありません
$

nodejsってのは古いコマンド表記なのかな？
とりあえず入れ替わったし、このままとする。

npm

一方のnpmだが、バージョンアップしたNode.js 14.15.1にnpm6.14.8が同梱されていたため、知らずにバージョンアップが済んでしまっていた。

$ npm -v
6.14.8

# 個別にバージョンアップする場合は「sudo npm install -g npm」を実行する

Hello World!

これで開発環境は出来上がったので、定番の「Hello World」をやってみた。

しかし、プログラムというと「viで.cファイル開いてmake」の認識であり、Eclipseですらほとんど触ったこと無いので、今のモダンな開発手法・ツールにいちいち驚く始末。

(1) 「Create-React-App」で雛形を作る
昔ながらにviで１ファイルずつ丹精込めて・・・でもいつかは出来るだろうが、Reactにはアプリ開発するのに必要な雛形が提供されているとのことなので、未経験者としてはこれを使わない手は無い。

$　npx create-react-app helloworld
：
(ズラズラズラズラと結構時間がかかった)
：
Happy hacking!
$ ls -l
合計 4
drwxrwxr-x 5 xxx xxx 4096 11月 19 14:50 helloworld
$

(2) 動作確認
この雛形のみでもブラウザで確認できるというので、以下の手順を実行。ブラウザから「localhost:3000」にアクセスするとReactの画面が表示された。

$ cd helloworld
$ npm start
：
(しばらく時間がかかった)
：
Compiled successfully!

You can now view helloworld in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://xxx.xxx.xxx.xxx:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

(3)「Hello World」の実現
ブラウザに「Edit src/App.js and save to reload」とあるので、これに従ってApp.jsを編集(Hello Worldを追記)→保存→ブラウザをリロードした(npmを再実行しなくてよい)。

$ cd src
$ vi App.js
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
+       <p>
+        Hello World!!
+       </p>
        <img src={logo} className="App-logo" alt="logo" />
　　　：
　　　(省略)
　　　：
      </header>
    </div>
  );
}

export default App;
$

結果
qiita_20201119_2.png
できた！

雑感

  • 本当にひとまずWebアプリを作れる環境は出来上がったが、大抵「Hello World」で終わることが多いので、ここから続けられるのかが一番の課題。
  • 作りたいもののイメージはあって、ロジックだけPythonで試作してみていけそうな感じはしているのだが、Webアプリのお作法が全くわかっていないので、Reactを利用しながら進められるのか不安。
  • 次はどこに進めばいいのだろうか？
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-11-19T16:24:19+09:00

Webアプリ未経験者のReact入門

妻が「こんなアプリがあったらいいのに」と話していたのを聞いて、ノリでちょっと作ってみようと思ったのだが、そもそもC言語しか知らない人間にとっては「WebアプリってCSSとJavascriptで作るもんでしょ？」ぐらいしか知識がなく。

しかし、断念するのもアレなので色々とググったら、ReactとかVue.jsとかどっかで見たことある言葉がたくさん出てきてしまって更に悩むことになったが、なんとなくReactを使おうと決めた。

Reactのことなら巷に情報は溢れているし、Webアプリ開発者の方々ならサクサク進めるであろうが、未経験者はいちいち躓いていくという現実を、備忘録込みで記録を残してみようと思う。

今の理解

Reactについての認識はこんなところ。

  • WebのUI用JavaScriptライブラリ群
  • これを使えばWeb画面であれやこれやできる
  • Facebookが開発しているOSSで、今は商用に使っても大丈夫

また、このReactを用いてWebアプリ開発を行うには、以下の２つのパッケージが必要と知った。

  • npm ・・・ 「Node.js」に関連するパッケージを独自で管理するアプリケーションのこと
  • Node.js　・・・クライアントだけでなくサーバ側でも動作するJavascript実行環境で、Reactでの生産物をサーバ側で動作させるための土台

ということでnpmとnode.jsを手元に揃えるところから着手する。

開発環境の準備

開発環境は以下のスペック(古いノート)。

  • PC：FMV-BIBLO MG70W(2007年製)
    • CPU：Core2Duo T7100＠1.80GHz
    • Mem：4GB
    • SSD：50GBぐらい
  • OS：Linux Mint 20 Cinnamon

インストール

aptを使って「npm」をインストールする。

$ sudo apt install npm
:
$ npm -v
6.14.4

$ sudo apt install nodejs
パッケージリストを読み込んでいます... 完了
依存関係ツリーを作成しています                
状態情報を読み取っています... 完了
nodejs はすでに最新バージョン (10.19.0~dfsg-3ubuntu1) です。
nodejs は手動でインストールしたと設定されました。
アップグレード: 0 個、新規インストール: 0 個、削除: 0 個、保留: 0 個。
$ nodejs -v
v10.19.0

「nodejs」はnpmと依存関係ということで自動的に入っていた。

バージョンアップ

執筆時点(2020/11/19)でのバージョンは以下となっていた。

npm Node.js
Mint 20 6.14.4 10.19.0
安定版 6.14.8 14.15.1
最新版 7.0.12 15.2.1

npmはまだしも、Node.jsはバージョンが離れすぎ。

Node.js

先にNode.jsをアップデートする。

(1) npmでNode.jsのパッケージ管理アプリの「n」をインストール

$ sudo npm cache clean
$ sudo npm install -g n

(2) nを使って、安定版(stable)を導入する

$ sudo n stable
   :
   installed : v14.15.1 (with npm 6.14.8)
$

(3) バージョンを確認する

$ nodejs -v
v10.19.0
$ node -v
v14.15.1

ん？どういうことだ？？

$ which node
/usr/local/bin/node
$ ls -l /usr/local/bin/node*
-rwxr-xr-x 1 root root 73828464 11月 19 13:19 /usr/local/bin/node

$ which nodejs
/usr/bin/nodejs
$ ls -l /usr/bin/node*
-rwxr-xr-x 1 root root 14416  3月 31  2020 /usr/bin/node
lrwxrwxrwx 1 root root    40  3月  7  2020 /usr/bin/node-gyp -> ../share/nodejs/node-gyp/bin/node-gyp.js
lrwxrwxrwx 1 root root     4  3月 31  2020 /usr/bin/nodejs -> node

$ env | grep PATH
PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin

/usr/local/binにはnodejsがないので、/usr/binにある方が動いてるのはわかるが、ファイルサイズが全然違うし、どないなってんのやん？？

(4) aptでインストールしたnodejsとnpmを削除する
調べたところ、aptで入れた「nodejs」と「npm」は上記の新しいバージョンを導入するために必要としただけであり、もう用済みであることがわかった。ということでaptで削除する。

$ sudo apt purge -y nodejs npm
　：
　(ガッツリ削除されるが気にしない)
　：
$

(5) 再度、バージョンを確認する

$ npm -v
6.14.8
$ node -v
v14.15.1
$ nodejs -v
bash: /usr/bin/nodejs: そのようなファイルやディレクトリはありません
$

nodejsってのは古いコマンド表記なのかな？
とりあえず入れ替わったし、このままとする。

npm

一方のnpmだが、バージョンアップしたNode.js 14.15.1にnpm6.14.8が同梱されていたため、知らずにバージョンアップが済んでしまっていた。

$ npm -v
6.14.8

# 個別にバージョンアップする場合は「sudo npm install -g npm」を実行する

Hello World!

これで開発環境は出来上がったので、定番の「Hello World」をやってみた。

しかし、プログラムというと「viで.cファイル開いてmake」の認識であり、Eclipseですらほとんど触ったこと無いので、今のモダンな開発手法・ツールにいちいち驚く始末。

(1) 「Create-React-App」で雛形を作る
昔ながらにviで１ファイルずつ丹精込めて・・・でもいつかは出来るだろうが、Reactにはアプリ開発するのに必要な雛形が提供されているとのことなので、未経験者としてはこれを使わない手は無い。

$　npx create-react-app helloworld
：
(ズラズラズラズラと結構時間がかかった)
：
Happy hacking!
$ ls -l
合計 4
drwxrwxr-x 5 xxx xxx 4096 11月 19 14:50 helloworld
$

(2) 動作確認
この雛形のみでもブラウザで確認できるというので、以下の手順を実行。ブラウザから「localhost:3000」にアクセスするとReactの画面が表示された。

$ cd helloworld
$ npm start
：
(しばらく時間がかかった)
：
Compiled successfully!

You can now view helloworld in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://xxx.xxx.xxx.xxx:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

(3)「Hello World」の実現
ブラウザに「Edit src/App.js and save to reload」とあるので、これに従ってApp.jsを編集(Hello Worldを追記)→保存→ブラウザをリロードした(npmを再実行しなくてよい)。

$ cd src
$ vi App.js
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
+       <p>
+        Hello World!!
+       </p>
        <img src={logo} className="App-logo" alt="logo" />
　　　：
　　　(省略)
　　　：
      </header>
    </div>
  );
}

export default App;
$

結果
qiita_20201119_2.png
できた！

雑感

  • 本当にひとまずWebアプリを作れる環境は出来上がったが、大抵「Hello World」で終わることが多いので、ここから続けられるのかが一番の課題。
  • 作りたいもののイメージはあって、ロジックだけPythonで試作してみていけそうな感じはしているのだが、Webアプリのお作法が全くわかっていないので、Reactを利用しながら進められるのか不安。
  • 次はどこに進めばいいのだろうか？
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-11-19T12:14:49+09:00

Reactを学ぶXII〜React Hooksその3 第二引数を使う〜

■ はじめに

タイトルについて記事にしました。
この記事で得る内容は以下の通りです。

・ Reactの基礎知識が増える
・ useEffectの第二引数を使った流れ

■ 前回まで

前回、useEffectメソッドを使ってライフサイクルの動きをいいねボタンで実演してきました

LikeButton.jsx
// 中略

    useEffect(() => {
        document.getElementById("counter").addEventListener("click", countUp);
        if (count >= 10) {
            counter(0)
        }
        return() => {document.getElementById("counter"}.removeEventListener("click", countUp);
    }):

// 中略

■ 例

今度は番外編として、第二引数を使った動きを見るので、まずは空の配列を渡します

LikeButton.jsx
// 中略

    useEffect(() => {
        document.getElementById("counter").addEventListener("click", countUp);
        if (count >= 10) {
            counter(0)
        }
        return() => {document.getElementById("counter"}.removeEventListener("click", countUp);
    }, []): // 空の配列を渡す

// 中略

最初のマウント時にしかイベントリスナーが設定されないので、ボタンを連打してもカウントが増えません

からの配列を渡す.gif

一度クリックをする　→　次のレンダーになる　→　次のレンダーになるとクリーンアップ関数が呼ばれてイベントリスナーが解除される　→　第二引数が空なので次のレンダーの時にはイベントリスナーが呼ばれないのでいいねが一度しかできない

いいねを何回もしたいと思った時、前回記事のパターン④で紹介をしましたlimitを使います

LikeButton.jsx
// 中略

const LikeButton = () => {
  const [count, counter] = useState(0);
  const [limit, release] = useState(true); // limitというstateを初期値trueで作ります

    useEffect(() => {
        document.getElementById("counter").addEventListener("click", countUp);
        if (count >= 10) {
            counter(0)
        }
        return() => {document.getElementById("counter"}.removeEventListener("click", countUp);
    }, [limit]): // 第二引数の配列にlimitを指定

// 中略

この状態でボタンをクリックしても、いいね数は1回しか増えません。
limitの値が変わらず、前回と今回を比較しても同じなので、クリーンアップ変数を2回目以降は
呼ばれなくても良いと判断されてしまいます

LikeButton.jsx
// 中略

const LikeButton = () => {
  const [count, counter] = useState(0);
  const [limit, release] = useState(true);

    useEffect(() => {
        document.getElementById("counter").addEventListener("click", countUp);
        if (count >= 10) {
            counter(0)
        }
        return() => {document.getElementById("counter"}.removeEventListener("click", countUp);
    }, [limit]):

    return (
      <>
        <button id={"counter"}>いいね数： {count}</button>
        <button onClick={() => release(false)}>更に追加でいいねする</button> // limitを解除するボタン
      </>
    );
};

// 中略

limitを解除するボタンを作ります（onClickイベントでuseState宣言したrelease関数を実行し、渡す引数の内容は状態をfalseにする）

更にいいね.gif

もっといいねボタンを押すと、releaseメソッドによって、trueの状態からfalseに変わっていいね数が増えるようになりました
falseの状態なので2回目以降は数は増えませんが、もっと増やしたい場合は

LikeButton.jsx
// 中略

    return (
      <>
        <button id={"counter"}>いいね数： {count}</button>
        <button onClick={() => release(!limit)}>更に追加でいいねする</button>
      </>
    );
};

// 中略

releaseの処理をlimitの現在の値を反転させるようにすると

反転したら.gif

いいね数が増えるようになります

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧