toshi-toma blog

主にフロントエンド、作業ログあとは色々なメモ ✍️ 🍅

2021-01-01から1年間の記事一覧

2021年の振り返り

今年も1年を振り返っていこうと思います。 本州から四国に行く電車からの景色 去年の振り返り toshi-toma.hatenablog.com 仕事 仕事面でのアウトプット 複業 TechTrain フロントエンドの業務委託 開発、学習 プライベート 今年買った/契約したもの さいごに …

WYSIWYGエディタ TinyMCEを使った開発

リッチテキストエディタ及びWYSIWYGエディタのライブラリは世の中にたくさんあります。 ourcodeworld.com 最近、TinyMCEというWYSIWYGエディタを使った開発をしました。とても高機能で使いやすく、基本的には無料で利用することができます。 www.tiny.cloud …

React Queryを使った開発

最近、React QueryやSWRといった、キャッシュ機構をもったHooksを使う開発が多くなっています。 自分も、ReactのプロジェクトでReact Queryを採用しました。その過程で迷ったことなどのメモです。 react-query.tanstack.com React Query vs SWR React Query…

Material-UIを使った開発

Material-UI 数ヶ月ほど、Material-UIを使った開発をしたので、知見などのメモです。 Material-UIは、MaterialデザインベースのReactのUIコンポーネントライブラリです。 material-ui.com とても有名で、便利なコンポーネントがたくさん用意されています。 …

コンポーネント内でコンポーネントを生成する際の問題

以下のような、コンポーネント内でコンポーネントを生成するようなコードについての話。 function App() { const Child = () => { return <div>child</div> } return ( <div className="App"> <Child /> </div> ); } Reactは再レンダリングの際に、要素が同じtypeかを===でチェックして、違うtypeなら、対象…

「Build your own React」のメモ

Build your own React 「Build your own React」という自分で小さなReactを作る記事があります。 以前から読んでみたかったので、重い腰を上げて全部読んだり、手を動かしてみました。 pomb.us 内容としては、Step by Stepでコードと実装の説明があり、最終…

axiosで二重リクエストを防ぐ

二重リクエスト フロントエンドからのAPIリクエストにおいて、二重リクエストが問題になることがあります。 例えば、作成ボタンを素早くクリックした際に、何も考慮してないと、データが二重に登録される可能性があります。 バックエンドでそういったことの…

flowtypeについて調べた

これまでTypeScriptでの開発ばかりで、Flow(日本だとflowtypeって呼ばれてることが多い)は未経験でした。ついに触ることになりそうなので調べてみました。 flow.org Flow(flowtype) 型アノテーションを付与している様子は、TypeScriptとさほど変わらないけど…

Monorepoについて調べた 〜Lerna & Yarn Workspaces〜

Monorepoについて OSSや企業での開発でMonorepoを採用しているケースをたまに目にします。これまで、Monorepoでの開発に参加したことがないので、調べてみました。 Monorepoは、単一のリポジトリで複数のパッケージを管理すること。BabelやJest, Reactなどな…

React Native for Webを触ってみた

React Native for Webという言葉はよく耳にしていましたが、具体的にどういうものなのか知らなかったので、触ってみました。 React Native for Web necolas.github.io 「React Native for Web」は、React NativeパッケージのコンポーネントやAPIで書かれたコ…

React Native入門から基礎を学ぶまで

React Nativeに入門してから、追加で色々と触ったり勉強しました。 toshi-toma.hatenablog.com 前回やったのは、公式ドキュメント見たり、入門っぽい記事見て簡単なアプリを作るところまで。今回は、追加で本を読んだり、アプリを作ることで基礎くらいまで学…

React Nativeに入門した日

React Native入門した 4月から新しい会社でReact Native使う予定なので、今日の3-4時間ほどで入門してみました。 まず「React Native」で検索して、パット見て全体の軽い紹介してそうな記事を1つか2つ読んだあとは、公式ドキュメントを読みました。その後、R…

PWAのオフラインサポート検出の改善

PWA

Improving Progressive Web App offline support detection 以下の記事のまとめやメモです。 developer.chrome.com 記事の内容 WebアプリをPWAとしてインストール可能かの条件として、Chromeではこれまで「fetch イベントを含むサービスワーカーがあること」…