はてなブックマーク

最近 Redux Toolkit というReduxのツールがあることを知りました。 公式ドキュメントのチュートリアルを写経してみたところ、かなり良かったのでご紹介します。 Redux Toolkit とは Redux ToolkitとはReduxをより簡潔に記述するためのツールです。 はじめはredux-starter-kitという名前で2018年から開発され、2019/10にv1.0がリリースされました。 Redux Toolkitは公式に作られたツールでReduxの公式サイトでも紹介するページがあります。 サンプルコード Redux Toolkitを使ったコードを見てみましょう。 const todosSlice = createSlice({ name: 'todos', // ① initialState: [], // ② reducers: { addTodo(state, a

はじめに ES2019のアップデートで配列のメソッドflatMap()が追加されました。 はじめてflatMap()を見たときは「これはどんなときに使うのだろう」と思いました。 私のようにflatMap()をいつ使うのかピンと来ていない方も多いと思います。 しかし調べていくうちに色々使える事がわかったので、flatMap()の使いどころをご紹介します。 flat()とは まず事前知識として同じくES2019で追加されたflat()について説明します。 flat()は配列のメソッドで、自身の配列の次元を1つ下げたものを返します。 const example1 = [ [1, 2, 3], [4, 5, 6], [7, 8, 9], ]; example1.flat(); // 実行結果：[1, 2, 3, 4, 5, 6, 7, 8, 9] const example2 = [ 1, 2,

「ランサーズ Advent Calendar 2018」9日目の記事になります。 ランサーズでは最近Reactのフロントエンドの開発にTypeScriptを導入しました。 導入当初の自分のスペックは以下の通りでした。 React/Reduxで過去にプロダクト開発経験アリ Flowはすこし使ったことがある TypeScriptはまったく触ったことがない 過去にFlowを使ったことがあったのでTypeScriptに乗り換えても何とかなるだろうと思っていたのですが、 ReduxとReactのconnectでベストプラクティスが見つからずに苦労したのでまとめます。 TL;DR import * as React from 'react'; import { bindActionCreators, Dispatch } from 'redux'; import { connect } from 'r

<header>は画面上部に表示されるメニューバー、<header>内部の<nav>がドロップダウンメニューの中身になる。 <ul>がメニューのリスト。<li>がそれぞれのメニューを示している。 #menu_buttonを押すと<ul>が開閉するように実装する。 <main>はメインコンテンツを示す。 <header> <div class="menu_button"><span>menu</span></div> <nav class="nav"> <ul> <li>メニュー１</li> <li>メニュー２</li> <li>メニュー３</li> </ul> </nav> </header> <main> <div style="width: 50%; height:1000px; background-color: #aaa; margin: 0 auto;"> メイン </div>