カテゴリー
React

React SPA作成時にかゆいところに手が届いた記事

SPAでエラー処理導線の設計したことがなかった私へ

Reactアプリにおける非同期通信エラー処理の実装案 | Hypertext Candy
https://www.hypertextcandy.com/react-error-handling

useEffectをあまり調べずにcomponentDidMountと同じでしょ?と思っていた私へ

React.useEffect でハマったポイントのまとめ
https://snamiki1212.com/react-useeffect-pitfall

react関係ねぇ。JS基礎で調べながら実装してた私へ

async-awaitでもforEachしたい! – Qiita
https://qiita.com/jkr_2255/items/62b3ee3361315d55078a

JavaScriptの配列・連想配列のキーの存在チェック方法 | てらこや.work

JavaScriptの配列・連想配列のキーの存在チェック方法

カテゴリー
React

memo localstrage redux-saga

次の案件用のメモ

【サンプル付き】Local Storageとは?使い方を詳しく解説 | webliker

【サンプル付き】Local Storageとは?使い方を詳しく解説

redux-sagaを用いたReact/Reduxアプリケーションにおけるデータ通信の実現事例 | Fintan

redux-sagaを用いたReact/Reduxアプリケーションにおけるデータ通信の実現事例

redux-sagaで処理をタイムアウトする | ハックノート

redux-sagaで処理をタイムアウトする

JSの新機能、Async Iterationの使いどころ – Qiita
https://qiita.com/cognitom/items/e67c7df29a238decf49f

JavaScript の イテレータ を極める! – Qiita
https://qiita.com/kura07/items/cf168a7ea20e8c2554c6

カテゴリー
React

APIレスポンスをNormalizeして格納する

大型案件が来たらマストでやるやつ

前にチェックしたtwitterのやつ解読するんとかどこいったん・・・

とりあえず手元に残ってたURLメモ

[Redux/Fluxでも役立つ] サーバーが返却するデータは正規化して格納すべし | by Muukii (Hiroshi Kimura) | Eureka Engineering | Medium
https://medium.com/eureka-engineering/normalizing-data-shape-5a94cb89c9a2

カテゴリー
js React

JSでのファイルDL download blob axios react

変なとこでハマりました

基本素直にWebに落ちてる内容で行けそうなのにいざDLすると真っ白なpdfが・・・
ハマりました。

結局わかったこと

responseType: ‘blob’ ダイジ・・・

axiosの設定って知らないと通り過ぎそうになるけど、ちゃんとファイルが来るよ〜〜って
指定しないと準備できてないから、ちょ、待てよバリに空白のファイルがDLされてたみたい。

Ajaxで複数ファイルをダウンロードさせる方法 – console dot log

Ajaxで複数ファイルをダウンロードさせる方法

sonota

これではなかった

ボタンを押されたらaxiosで取得したBlobデータをダウンロードさせたくてやった事 – Qiita
https://qiita.com/tk_zawa/items/a0e65e7a9106a6535c79

ファイルをダウンロードさせるには?[JavaScript]:.NET TIPS – @IT
https://www.atmarkit.co.jp/ait/articles/1603/30/news026.html

【JavaScript】各ブラウザでダウンロード処理を実装する(Chrome, Firefox, IE, MS Edge, Safari) | Black Everyday Company
https://kuroeveryday.blogspot.com/2016/05/file-download-from-browser.html

jsでダウンロードを実装した話 – Qiita
https://qiita.com/Ohtak/items/b7fb05c4e3dee13c0d1f

jsでファイルを一括ダウンロードしてみる – Qiita
https://qiita.com/saki_kawa/items/ecf24297943a37ce0626

ファイルをダウンロード保存する方法 – JavaScript の基本 – JavaScript 入門
https://javascript.keicode.com/newjs/download-files.php#1-3

Blob() – Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob

カテゴリー
React

React-Routerでページ遷移時にカスタムデザインのモーダルで遷移確認プロンプトを出す方法

うおおおお〜!!!ありがとう!

この投稿にclapをつけるためにMediumのアカウント作ったよ

Using React-Router v4/v5 Prompt with custom modal component | by Michael Chan | Medium
https://medium.com/@michaelchan_13570/using-react-router-v4-prompt-with-custom-modal-component-ca839f5faf39

とりあえずmessageはメッセージ表示用の文言か、遷移OKのtrueかが帰ってくる関数になってるからうまいことカスタムしてねって!(語彙!

取り合えず私は「TypeScript and React 16+ version」の記述をTSからJSに変更したら行けました。
ほぼ同じ内容のコンポーネントを通常のmodal用に作っていたので、
それを複製してfunctionをいじるだけでブラウザのpronptからmaterial-uiのmodalに変更出来ました。
(もたせてるプロパティがボタンのラベルと分岐ごとのfunctionとかでほぼ同じでデスヨネーって嬉しかった)

ありがとう〜〜〜!!投稿者〜〜〜!

その他参考

Reactでページ遷移時にアラート・確認ダイアログなどを出す方法 – Qiita
https://qiita.com/seya/items/c48a2c1618252f058dd1

カテゴリー
React

Reactサイト上でバーコードリーダーからバーコードを読み込む

ニッチ過ぎて忘れそうなのでメモ

結論

javascript – How to register event with useEffect hooks? – Stack Overflow
https://stackoverflow.com/questions/55565444/how-to-register-event-with-useeffect-hooks

hookでaddeventlistenerする。
removeも忘れない。

その他めも(通常のinputなど入力欄があるタイプ

javascript – How to handle the onKeyPress event in ReactJS? – Stack Overflow
https://stackoverflow.com/questions/27827234/how-to-handle-the-onkeypress-event-in-reactjs

ReactでonKeyPressを取得する – ゆったりWeb手帳
https://blog.zatsuzen.com/react/keypress/

keyの判定はkeyCodeよりkeyが無難

最新はそうなってんねや・・・(老害コードをばらまかないように気をつけよう
https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent/keyCode

イベントのkeyCodeとcharCode – hogehoge @teramako

Document: keydown event – Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/Document/keydown_event
keydownとkeypressは処理の対象となるkeyの数が違うよって話

カテゴリー
React

redux toolkit のかゆいところに手が届く公式docs

エラーハンドリング実装しようとして出会った森のくまさん。

thunkの処理のキャンセルの仕方とかまとめ。わかりやすい。

https://redux-toolkit.js.org/api/createAsyncThunk#canceling-while-running

テストに出ます

なにの・・・?

## そのた追記

createAsyncThunk

functionにわたすargsはふたっつ。
勝手に増やさない

https://redux-toolkit.js.org/api/createAsyncThunk#payloadcreator

2つ目の引数にパラメータなどfunctionに自分から渡したいものを
dispatchしたいときは2つ目の引数にthunkAPI(またはthunkAPI内の{dispatch}を呼び出し)を追記

カテゴリー
React

Storybookなれるまでやっかいだなー

ReactのUI見本帳、testerとしてStorybookを使ってみている
つまづきのめも

ほぼすべてのブログ記事が古い

現状バージョンで記事書いている人いない
それだけ昔から使われているのか、メジャーバージョンアップがおおいのか、もはや誰も使っていないのか・・・

themeやグローバルのcssが読み込まれない

なんじゃこら
コンポーネントごとなので、上位階層で指定していた上記が読み込まれない。
そうか・・・
config.jsでcssを読み込む記述しか見当たらない・・・ので

この記事で書いていた

Storybook による UI & Unit Testing のススメ – Mercari Engineering Blog
https://tech.mercari.com/entry/2018/12/19/123834

if (process.env.NODE_ENV !== 'test') {
  addDecorator(story => (
    <React.Fragment>
      <GlobalStyle />
      {story()}
    </React.Fragment>
  ));
}

を参考にした。
ラッパーを入れればいいらしい
そのラッパーはデコレーターと呼ぶらしい

公式サイト
Intro to Addons
https://storybook.js.org/docs/addons/introduction/#storybook-decorators

公式の記述の感じでdecoratorsが毎回使われるように設定を追記した。

import Layout from '../../containers/LayoutForStory';
import SimpleTable from './Table';

export default {
  component: SimpleTable,
  title: 'SimpleTable',
  // Our exports that end in "Data" are not stories.
  excludeStories: /.*Data$/,
  decorators: [storyFn => <Layout>{storyFn()}</Layout>],
};

...

classじゃなくてclassNameだよと怒られる

webアプリ本体ではbabel-plugin-react-html-attrsを使っているのだけど、それをStorybookは知らないからめっちゃおこってくる

Storybook v5 を TypeScript × React 環境に導入する | blog.kwst.site
https://blog.kwst.site/201907293042/

このなかの記述のようにwebpackでbabelの設定すれば良さそう
とおもって、
.storybook/webpack.config.js
をつくってbabelのことだけ追加して配置したらこんどはcssの記述がキモいって怒り出した。

Can’t import css · Issue #1603 · storybookjs/storybook
https://github.com/storybookjs/storybook/issues/1603

自分のにしたからデフォの設定がなくなったのか・・・
これをみて最終的にこうなった

var webpack = require('webpack');
var path    = require('path');
const includePath = path.resolve(__dirname, '..');

module.exports = {
  module: {
    rules: [{
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components)/,
      use: [{
        loader: 'babel-loader',
        options: {
          plugins: [
            'react-html-attrs',
            'babel-plugin-styled-components',
            [require('@babel/plugin-proposal-decorators'), {legacy: true}]
          ],
          presets: ['@babel/preset-react', '@babel/preset-env']
        }
      }]
    },
    {
      test: /\.css$/,
      include: includePath,
      use: [
        {
          loader: 'style-loader',
        },
        {
          loader: 'css-loader',
          options: {
            sourceMap: true,
          },
        },
      ],
    },
    {
      test: /\.(woff|woff2|eot|ttf|svg)$/,
      include: includePath,
      use: 'url-loader'
    }
  ]
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".json"]
  }
};

これでええかは知らない。resolveのあたりこれでええんか?とおもうけど、動いたのでいったんメモ。

[add 2020.0206]

画像のパスがあわない

静的においている画像をcss in jsで呼ぼうとしたらそんなの無いって怒られた

Serving Static Files
https://storybook.js.org/docs/configurations/serving-static-files/

npm scriptsに基準となるディレクトリを指定してパスをあわせる。

    "storybook": "start-storybook -s ./public -p 6006",

[//add 2020.0206]

カテゴリー
React

tab退避ーStorybook polished styled-components

Storybook

プロダクト間共通の React コンポーネントライブラリを運用する話 – SmartHR Tech Blog

Storybook for React
https://storybook.js.org/docs/guides/guide-react/

Writing Stories
https://storybook.js.org/docs/basics/writing-stories/

StoryBook(React)最初の1歩 – Qiita
https://qiita.com/sugasaki/items/66d260f9602921196b07

polished

Sass(SCSS)の関数をstyled-componentsでも使いたい
https://diff001a.netlify.com/sass-styled-components/

polished | Documentation
https://polished.js.org/docs/#rgba

styled-components

styled-componentsを使ったCSS設計 – Qiita
https://qiita.com/taneba/items/4547830b461d11a69a20#%E5%AE%9A%E6%95%B0%E3%82%92%E7%AE%A1%E7%90%86%E3%81%99%E3%82%8B

Reactでstyled-componentを使ってベースとなるstyleを当てる方法 – Qiita
https://qiita.com/102Design/items/e9f3ede130999d3a1061
テーマや共通cssを使いたかったけどよくわからんかった。

次の記事で書いているようにThemeProviderを読み込む必要があった。

How to use Themes in styled-components – DEV Community 👩‍💻👨‍💻
https://dev.to/aromanarguello/how-to-use-themes-in-styled-components-49h

これでリセットcssと共通のベースcssが読み込めた。