プライベートで 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 に関数を追加してメッ...

あけましておめでとうございます。 PageSpeed Insightsを使ってこのブログを計測したところ、画像の最適化とキャッシュを提案されたので、年末年始はAWS Lambdaを使って画像の最適化を試していました。 はじめに やりたかったことは、ブログで使う画像を最適化してサイズを小さくすることです。 ブログの画像ファイルは全て S3 から配信しているので、特定の S3 バケットに...

2017 年も終わるので、今年どうだったかということを振り返りたいと思います。 CODEPREP な一年 今年を一言で言い表すと 「CODEPREP」 の年でした。 「CODEPREP」はプログラミングを書いて動かしながら学ぶ実践型のプログラミング学習サービスですが、残念ながら「2018 年 3 月 26 日」でサービスを終了してしまいます。 今年の 2/1 のリニュ...