タイトル長くてすみません。 ひと昔前までは、react-create-appで作成したプロジェクトの webpack.config を上書きするには、ejectするしか方法がなかったのですが、現在は react-app-rewiredを使うことで上書きが可能です。 この方法を使った場合、react-create-app が提供するツールの動作保証対象外となります。つまり、これ以降発...

「お父さんと 2 人だけでマイクラやりたい！」 GW に娘がそんなこと言い出したので、お父さん、ちょっと頑張ってプライベートサーバーを立ててみたよ！ 注意： この方法で立てたサーバーには、Minecraft pocket edition からはアクセスできません。Minecraft pocket edition で子供を一緒に遊びたい方は、こちらの記事を参考にしてください。 【親子...

プライベートで CSS を教える機会があるのですが、CSS に関しては特に苦手にしている人が多く、「どうやったらそうなれますか？」という質問をよくもらいます。 そこで普段あまり考えたことがなかったので、ちょっと考えてみました。 その中で感じたことは、自分には見えているものが、他の人には見えていないということでした。 いくつかキーとなる視点がありそうなので、シリーズ化してみます。 今回は...

今回は、TypeScript の React プロジェクトとreact-styleguidistを一緒に使う方法についての紹介です。 紹介する内容は、こちらの Github で見ることができます。 mitsuruog/react-styleguidist-typescript-demo: A sample for using react-styleguidist, React an...

新規プロダクトで「React + Redux + redux-observable + TypeScript」を使ってみました。 割と良く仕上がったので、全体アーキテクトを単純にしたサンプルを作ってまとめてみました。同じような構成を考えている人は参考にしてみてください。 対象者は、React と TypeScript(もしくは Flux)経験者です。初歩的な部分は割と割愛して説明しています...

最近、割と耳にするようになってきた、Webpack の bundle.js のサイズを減らす話。自分でもやってみたので、結果を紹介します。 本当はもう少し減らせるかもねー はじめに 現在の使っているライブラリはこんな感じです。 React Redux + redux-observable ちなみに 2 つのアプリケーションがあるので、bundle は 2 つに分...

今日は Redux ユーザーが最もハマるポイントだと個人的に思っている、state の不正変更とその検出方法について紹介します。 ちなみに React での話ですが、他のフレームワークでも同じ事なんではと、勝手に想像しています。 Redux の state 変更検知の仕組み まず最初に Redux の state 変更検知の仕組みについておさらいします。概要だけ紹介するため、詳細は公式ド...

React の Higher order component(以下、HOC)を TypeScript で作る方法の紹介です。 作り方を探したところ、こちらの記事がほぼ完璧だと思ったので、本人に許可をもらってゆるく翻訳しながら紹介することにしました。 (完全な翻訳を目指しているわけではないので、細かいニュアンスまで気になる方は英語の記事を直接読んでください。あと少しコードは自分好みに変えてま...

いつもお世話になっている「Postman」についての小ネタです。 「Postman」とは API クライアントソフトと呼ばれるもので、Web 開発時に API の動作検証を行う用途で使います。 Postman API Development Environment ...

TypeScript の Enum を使った小ネタです。 TypeScript の Enum を使っていると、Enum の値やメンバー名以外に、何かもう一つ値を追加したいことありませんか？ 自分の場合は、多言語化しているアプリケーションなどで、Enum の値に対するテキストを表示する際に、Enum にメッセージキーを割り当てたいことがよくあります。 今回は、Enum に関数を追加してメッ...