もやもやエンジニア

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

TypeScript

React(Gatsby)+ FirebaseでWebサービス作った

作ったやつ 川柳投稿するだけのサービス senryu.app 目的 毎年なにかしら新しい言語とか技術を覚えてアウトプットするというのを続けていて、今年はあまり使ったことがなかったFirebaseメインでなにか作ってみるかということで、認証+コンテンツのCRUDがある…

React(Gatsby)+ Firebaseでサーバレス入門した

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

TSLintからESLintへ移行した

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

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

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

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

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

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

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

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

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

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

今の仕事は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を使う

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

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

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

TypeScriptを試してみた 3

前回に引き続きTypeScriptの話1回目 http://rei19.hatenablog.com/entry/2013/07/14/1833112回目 http://rei19.hatenablog.com/entry/2013/07/23/023008今回は関数についてです。 関数定義の基本 変数に型を付けられるようになったことで、関数の引数と返…

TypeScriptを試してみた 2

前回に引き続きTypeScriptの話前回はこちら http://rei19.hatenablog.com/entry/2013/07/14/183311今回は変数について書きます。 使える変数の型 プリミティブな型はJavaScriptと同じものが使えるみたいです。 module TSTest{ export class TypeTest{ // 型…

TypeScriptを試してみた 1

3連休を全部だらだらするのはもったいないので、かねてから気になっていたTypeScriptを触ってみました。 TypeScriptとは! マイクロソフトが開発したJavaScript系の新言語で「JavaScriptのスーパーセット(=上位拡張仕様)」で、ECMAScriptの次期標準である…