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'…

案件などでも使えそうな実装だったので、メモがてらブログ記事に残しておく。 例えば、何かしらの記事一覧を取得してきて、3点リーダーで省略した文一覧として表示してから「もっと見る」ボタンで表示するなど、様々な応用例が考えられる。 index.js (エント…

今回、React hooksによるToDoアプリを作って、従来のclassコンポーネントによる書き方と比べて、そのように書き方が変わったかというところを検証してみた。 結果からいうと、React hooksを導入して書いた方が圧倒的に書きやすかった。 コードがはるかにリー…

asyncファンクション asyncファンクションが通常のファンクションと何が違うかは、以下の2つの例を見ればわかる。 function hello(ms) { return new Promise(resolve => setTimeout(() => { resolve('Hello from the other side!') }, ms)) } console.log(he…

Promiseを組み合わせる JavaScriptはPromiseの組み合わせのために、Promise.all()とPromise.race()という2つのビルトイファンクションが用意されている。 Promise.all() Promise.all()はpromiseからなる配列を組み合わせて、それらの処理結果を含むかたちで…

Promiseのthen()メソッドをコールすることは、既存のpromiseにハンドラをアサインするだけでなく新しいpromiseを作ることである。 const newPromise = promise.then(handleSuccess, handleRejection) Promiseチェーン successまたはerrorハンドラがpromiseを…

モダンなJavaScriptでは、非同期処理においてpromiseとasync/awaitが主流となっている。 Webpackはコードスプリッティングをpromiseによって簡便化している ブラウザにはビルトインファンクションであるfetchが存在し、resultをawaitできる ReactではReact.S…

macOS 10.15 CatalinaにアップデートしてMongoDBを起動しようとしたときに直面したエラーの対処法。 エラー内容 MongoDB exit code 100 Read-only system volume in macOS Catalina macOS Catalina runs in a read-only system volume, separate from other …

Reduxイントロ Reduxとはアプリケーションの状態（state）を管理するためのJSライブラリ。 ではアプリケーションの状態とは具体的に何かというと、いろんな目的で後に使用する情報を保持しておくためのグローバルオブジェクト。 小さな例ではページロード時…

HOCとAnt Designとやってきたので、それらのコンセプトを頭に置きながらContext APIというものを学んでみる。 コンポーネントが増えてアプリケーションが大きくなればなるほど、stateやpropsの受け渡しは大変になる。 そんなときに使える手段の一つとしてCon…

コメント追加するUIをAnt designを用いて作成。 ant.design create-react-appでのAnt designの導入 create-react-appの設定をオーバーライドする必要がある。 ant.design eslintの設定 Standardを用いた。 github.com Codesandbox

例えば、複数のコンポーネント間で同じファンクションやロジックを使用している場合、繰り返しが発生していることになりDRYではない。そんなときに使えるのがHigher Order Components (HOC)である。 実はVanillaJSにもHigher Order Functionsが存在していて…

今までPropTypesやTypeScriptによる静的型付けを述べてきたが、今回はFlowを用いた実装をしてみる。 flow.org 次のようなディレクトリ構造で、5つ星評価のUI実装を考える。 . ├── Stars.css └── Stars.js インストール インストール方法は公式ドキュメントに…

Reactでは、状態管理がDOMではなくReact componentで行われる。 Reactなしである場合、例えばformのinput要素の状態を取ってくる場合は従来はDOM操作によって取ってくるという手法だった。 ではどちらの方法がベターであるのか？ この質問に付随して出てくる…

JavaScriptにはBoolean, Null, Undefined, Number, String, Symbol, Objectの7種類のデータ・タイプが存在する。 それらの型をハンドリングする際にFlowとかTypeScriptなどのツールが導入されているわけだが、Reactのプロジェクトでそこまで導入するのが面倒…

new binding /** * new Binding */ const Animal = function(color, name, type) { this.color = color this.name = name this.type = type } const zebra = new Animal('black and white', 'shimauma', 'plant-eating animal') console.log(zebra) 下記のよ…

Implicit binding 次のようなファクトリーファンクションがあるとする。 いわゆる実行時にオブジェクトを返却するファンクション。 /** * Implicit Binding * Left of the dot at call time */ const Person = function(name, age) { return { name, age, sa…

webpack + babelでの開発環境に加えて、eslint + prettierの設定まで。 パッケージのインストール react + react-dom npm install react react-dom ちなみにreact-domはreactをDOM向けにコンパイルするパッケージで、 DOM以外の環境などにコンパイルする際に…

チェックボックス、ラジオボタン、複数セレクト、テキスト入力など。 inputs.vue <template> <div id="app"> <h4>Check Boxes</h4> <input type="checkbox" id="checkbox" v-model="checked" /> <label for="checkbox">This box is {{ checked ? 'checked' : 'unchecked' }}</label> <hr /> <h4>Radio Buttons</h4> </hr></div></template>

たまに見返したいので。dark.min.cssは下記のものを使用。 github.com tobuy.vue <template> <div> <h1>Vue tobuy list</h1> <form @submit.prevent="addItem" autocomplete="off"> <input type="text" v-model="itemToAdd" @keypress.enter="addItem" /> <button>{{ buttonText }}</button> </form> </div></template>

フォームの初期状態 下記のようなファイル構成。 . ├── app.js └── index.html index.html <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vue form validation</title> </meta></meta></meta></head></html>