react-router v4の小ネタ。 やりたかったこと 昔は<IndexRoute />があったんだけどね。。。 例えば、/users/1という URL にアクセスがきた時に/users/1/infoのページを表示させたい場合。 <Redirect />の中にこんな感じで書くと動くと思ったんですが。。。 <Redirect from="...

TypeScript を使っていると、結構必要になる型定義ファイル。 型定義が存在しなかったり、古かったりするライブラリを使って、苦労した経験があるひとは多いのではないでしょうか。 今回は、DefinitelyTyped にコントリビュートする機会が最近増えたので、個人的な手順をまとめておきます。 はじめに まず、今回は新しい型定義ファイルを作成するケースを想定しています。 コン...

docker image を docker hub に公開する方法についての小ネタです。 お仕事で docker image を作成して公開必要があったのですが、やり方よく知らなかったので、同僚の docker 得意なエンジニアに教えてもらいました。 docker image を作成する まずは、docker image を作成します。 今回は CircleCI 2.0 で使うフ...

docker image を作る際のデバック方法についての小ネタです。 お仕事で docker image を作成する必要があったのですが、docker image のコンテナ中に入ってデバックする方法をよく知らなかったので、同僚の docker 得意なエンジニアに教えてもらいました。 docker コンテナへの入り方 デバックするために docker image のコンテナの中に...

たまに見るuncontrolled input関連の警告についての小ネタです。 知っていると原因がすぐわかるのですが、知らないと結構デバックに時間が掛かる面倒な警告です。 まず、React の Form 関連コンポーネントの考え方にはcontrolledとuncontrolledの 2 つがあります。 簡単に両者の違いを説明すると、値が React の state で管理されているか...

自分はCODEPREPというオンラインプログラミング学習サービスをやっているのですが、今年の 2 月に React と TypeScript を使ってフロントエンドを再構築し、半年間サービスを走らせてみた結果について振り返ってみたいと思います。 はじめに CODEPREPは月間で 50 万 PV 以上ある Web サービスです。 そのため、それなりの事態は発生するだろうと思い、フロ...

Google tag manager を使った小ネタの紹介です。 想定ユースケース 特定のリンクをクリックした時に Google tag manager に  何か特別な値も一緒に送りたい。 Google tag manager のクリックイベントハンドラでは、ページの URL・遷移先 URL・リンクのラベルなどの基本的な情報は取れます。 しかし、それだけでは分析する上で十分では...

当ブログで使っている画像を Dropbox の public フォルダから、Cloudinary に移行した話です。 画像に限った話では、Dropbox の代替先として Cloudinary は結構いいんじゃないかと思います。 (うそです) 結局、Bandwidth が無料枠をオーバーしてしまったので、S3 にしました。(2017/06/15) はじめに 当ブログの画像は...

アイコンなどの画像には、少し前まで CSS Sprites を使うことが多かったと思います。しかし、最近は CSS でスタイリングできるため、カスタムフォントを作成して使用することが増えてきたように感じます。 今回は、webpack と Sass を使ってカスタムフォントを使用する方法と、その際にハマりやすいurl()での相対パス指定方法について紹介します。 tl;dr Sa...

react-intlを使って React アプリを国際化してみたところ、結構良かったので紹介します。 tl;dr react-intl を使った React アプリの国際化方法 react-intl を component だけではなく、utility function として使う方法 react-intl とは react-intlは、React アプリの国際化を支...