ニッチ過ぎて誰得なのか全くわからないのですが、同じようなことで苦しめられるであろう未来の誰かのために、ここに手がかりを残しておきます。 正直このあたりのライブラリの変化が早過ぎるので、この情報がいつ風化するかわからないのだけれど。。。 はじめに 詰まるところcreate-react-appをベースに React アプリを作っているのですが、Redux のconnectを使っ...
よく忘れるシリーズ。 AWS の特定の S3 バケットにだけアクセスできる IAM ユーザーを作る方法です。 想定される用途 自分の場合、最近のフロントエンドは SPA を作ることが多いので、フロントエンドのコードを Webpack で bundle にビルドして S3 へデプロイします。 この辺りは CI サービスを利用して自動化しているのですが、その時に AWS の IAM ...
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) はじめに 当ブログの画像は...