I am mitsuruog
Preview Image

DefinitelyTypedに型定義ファイルを作ってコントリビュートする手順

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

Preview Image

docker imageの中身をデバックする方法

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

Preview Image

Reactのuncontrolled input warningで困った時に確認するべきたった1つのこと

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

Preview Image

ReactとTypeScriptで半年間サービスを走らせてみてよかった点を振り返って見る

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

Preview Image

リンククリック時にカスタムデータをGoogle tag managerに送信する

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

Preview Image

Dropboxのpublicフォルダが使えなくなったので、画像をCloudinaryに移行してみた

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

Preview Image

webpack+Sass+reactでカスタムフォントを使う

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