mktmkt.hatenablog.com 前回の投稿で、従来のReact, Reduxで書いていた部分をRedux Toolkit (RTK) でリファクタしたが、今回はRTKのメソッドについてまとめていく。 Redux Toolkit (RTK) のメソッド一覧 configureStore() configureStore()に渡すオプション…

React, Redux, TypeScriptの組み合わせだと、どうしてもファイル数が増えて、記述があちらこちらに散らばることが多々あり、リーダビリティが下がってしまう。 Redux Toolkit (RTK) を使えば、あちらこちらに記述していた書き方を集約して書ける以外にも、re…

こちらのBen Awadのサンプルがよかったのでメモしておく。 github.com ディレクトリ構造 . ├── package.json ├── public │ └── index.html ├── src │ ├── App.tsx │ ├── Counter.tsx │ ├── ReducerExample.tsx │ ├── TextField.tsx │ ├── index.tsx │ └── re…

github.com useSelector, useDispatchを用いたReduxの書き方 ディレクトリ構造 container, presentationalディレクトリで分けて、atomic design風に分ける。 . ├── App.css ├── App.tsx ├── components │ ├── container │ │ ├── molecules │ │ │ └── Colorfu…

Node.js環境上でCSVファイルを取り込んで何かしらの加工をして吐き出すプログラムを書きながら、使い回しのし易いTypeScriptの書き方を学ぶ。 セットアップ Packages yarn add -D @types/node @typescript-eslint/eslint-plugin @typescript-eslint/parser c…

リファクタプロセス hooksを一つずつ導入 useState カウンターアプリを、まずはstate hookを使って書いてみる。 import React, { useState } from 'react' import ReactDOM from 'react-dom' const Counter: React.FC = () => { const [count, setCount] = u…

デザインパターン1 Google Maps JavaScript APIを利用して、Google Mapsのヘルパークラスと、そのヘルパークラスに渡されるインスタンス生成用のクラスを複数用意するパターン。 . ├── Company.ts -- Creates instance to pass to CustomMap.ts ├── CustomMa…

Nuxt.jsはVue.jsアプリケーションを作成するためのフレームワーク。 Nuxt.jsを使うことによって、トップノッチなテクノロジーを素早く、簡単に、整理された状態で導入することができる。 Nuxt.jsの主要な3つの機能としては、以下がある。 SSR (サーバーサイ…

一般的なVueコンポーネントの書き方は、オブジェクト志向でclassコンポーネントに慣れている人にとっては特殊な書き方である面が大きいだろう。 vue-class-componentを導入すれば、classスタイルなVueコンポーネントが書ける。 vue-class-componentの特徴 me…

変数定義（var / let / const） var使うことはもうほとんどないし、今さらだが、重要なポイント。 var: function scoped undefined when accessing a variable before it's declared let: block scoped ReferenceError when accessing a variable before it'…