もやもやエンジニア

IT系のネタで思ったことや技術系のネタを備忘録的に綴っていきます。フロント率高め。

React

Material-uiのstyled-components-apiを使う

React MaterialUI

今までstyled-componentsとmaterial-uiそれぞれ入れて使ってたのですが、material-uiにstyled-componentっぽいAPIが生えてたのに気づいたので使ってみたメモ（キャッチアップできてないだけですね。。。）。@material-ui/coreのバージョンは4.1.0です。 リフ…

React（Gatsby）+ Firebaseでサーバレス入門した

Gatsby React Netlify TypeScript アプリ開発 Firebase

個人開発でFirebase使ってなんか作ろうかなということで、素振りで作ったものを公開してみました。Reduxのチュートリアルで作るTodoアプリをStoreをFirebaseにした体で作り変えたやつになります。Firebaseは古の時代に触ったときは単なるPub/SubできるDBだっ…

TSLintからESLintへ移行した

React TypeScript TSLint ESLint

React/TypeScriptなアプリで TSLint + Prettier でlint/formatをかけていたところを ESLint-TypeScript + Prettierに移行したときのメモ。急いでやる必要はないのですが、仕事の方で使いたかったので個人プロジェクトで試しました。 github.com github.com …

Gatsby.js + Storybook でStaticQueryが動かなかったのでどうにかした

アプリ開発 React Gatsby TypeScript

概要 Gatsbyで書いたアプリにStorybook導入してSnapshotのテストはStoryshots使うようにしようと思ったのですが、普通にドキュメントのとおりに導入したらgraphqlを呼んでいるcomponentで以下のようなログが出てコケました。Gatsbyのコンテキストで起動して…

百人一首を暗記するサイトをGatsby.jsに乗せてNetlifyで公開した

React Redux SPA Netlify Gatsby TypeScript

ここ最近やってた作業がきりのいいところまで終わったのでログ代わりのブログです。もともとピュアなSPAとして作っていたものをGatsbyに乗せて静的化しました。コアのゲーム部分は以前と変わらずSPAとして動きますが、Googleにインデックスさせる部分は実体…

Gatsby.jsでTypeScriptで書かれたReact/ReduxなSPAを配信する

React Redux SPA Netlify Gatsby TypeScript

個人で公開しているSPAが素朴なReactで作られていてSSRも何もしておらず、もうちょっとGoogle先生のBotに優しく作ってあげようということで、前段階の準備としていろいろ試してみたメモです。対象のサイトはそんなに大きくないので、SSRを頑張るのではなくて…

ちはやふるにはまったので百人一首を暗記するサイトをSPAで作った

React Redux SPA TypeScript

夜なべしてコツコツ作っていたのがまあまあ形になったので公開しました。ちはやふる ~結び~の公開には間に合わなかった。。。 https://hyakuninanki.net/ 去年から仕事でB向けのサービスをSPAで開発してて、ある程度自分の中で知見がたまって自分でも何か作…

enzymeでReact RouterのwithRouterで包んだRedux Containerのテストする

React TypeScript Redux

今の仕事はReact/ReduxなSPAをTypeScriptで書いてて、HOCのテストの書き方ちょっと迷ったのでメモとして残しておきます。 関連する主なライブラリ "react": "~16.0.0", "react-dom": "~16.0.0" "react-redux": "~5.0.6" "react-router-dom": "~4.2.2" "redux…

責務を意識してReact/Reduxを使う

React TypeScript Redux

rei19.hatenablog.com ↑の続き。仕事でReact/ReduxなSPAを書き始めているのですが、引き継いだコードを読んだり書き直したりして思ったことなど。 TL;DR Componentの仕事はもらってきたpropsを素直に表示するのとEventの発火だけにしような。 FatなComponent…

Webの仕事に戻ったのでReact-ReduxをTypeScriptで再入門してる

TypeScript React

5月から知り合いが立ち上げた会社を手伝っていてB向けのWebサービスをspaで作ってるのですが、ここ2年くらいはほぼAndroidの仕事しかしていなくて、2年もたてば昔の知識は陳腐化している（というか忘れかけている）ので改めてチュートリアルやったり本読んだ…