Drag and Drop している様子 TODO アプリに ドラッグ&ドロップでタスクを動かせるようにした。 苦労した点1 Typescript と react-beautiful-dnd の相性 react-beautiful-dnd では公式には Typescript をサポートしていません。型定義にはflowtypeを使用して…

TODO アプリのTODOをドラッグ&ドロップで移動させたいなぁ。という欲求が高まってきたので、そういうライブラリがないか探してみたら、Atlassianが提供してる react-beautiful-dnd というライブラリがあるようだったので使ってみた。 GitHub - atlassian/rea…

TODOアプリに favicon を設定する。ただ、Reactだとbody部分の要素しかいじれないので webpack で設定する。 色々試したけど、favicons-webpack-plugin が最終的にやりたいことにマッチしたので、それにした。 まず、プラグインをインストール。 $ npm i --s…

ローカルで開発をしていると jsファイルがブラウザでキャッシュされていて「あれ？動かないぞ？」という場面が何度かあった。Webブラウザ上だったら強制更新(Chrome だったら Shift + Ctrl + R) で解決できるんだけど、iPhoneとかのモバイルブラウザだとそう…

ここ最近はブログの交信がさぼり気味だった。というのも、realtime database のテストの仕方がわからずに試行錯誤していたので、成果をあまりだせなかったというのが大きい。 fetch-mock からの脱却 ローカル環境のデータベースへアクセスしていたときは、デ…

この数日、Firebase Authentication と格闘してた。一応目処が立って Firebase realtime database を使ってのTodoアプリも完成したんだけど、FIrebase Authentication は 「Todo アプリをデプロイできるのか？」というとこの本質ではなかったなぁと思った。…

Authentication Database ルール修正 今のままだと、データベースがどのユーザーでもアクセスできてしまうので、アクセス制限をする。まず、Database のルールを以下のように変更。内容としては、認証されたuidと同じ場合のみアクセスを許可している。 { "ru…

作ったTodo アプリではサーバー側をgoで作成していたが、Firebaseにはサーバーを置くような機能はないので、Firebase Realtime Database でどうにかしたい。(できるのかもわからない) Database を作成 todo プロジェクトから Database を選択し、データベー…

今まで作ってきた Todo アプリを FIrebase にデプロイしてみる。 まず、新たにプロジェクトを作成して、Hosting に js をデプロイしてみる。作成したときの Project ID を覚えておく。あとで使う。 まず、Firebase ツールをインストールする $ npm install -…

React16.8 がリリースされたらしい。巷で噂になっている。 なんでも Hooks という新しい機能が入ってそれが便利なんだとか。 ということで、もう一度環境構築から初めて Hooks がどういうものなのか 使ってみようとおもう。 ベースは ここ をベースにした。…

今日は sendToApiServer のテスト。fetch が絡むので mock ライブラリを導入する。 $ npm i --save fetch-mock $ npm i --save @types/fetch-mock fetchMock は import * as fetchMock from 'fetch-mock' でインポート可能。 一旦以下のように作ってnpm test…

昨日に引き続き、コンポーネントのテストを書く。昨日よりも簡単に書けると高をくくっていたが、意外とハマった。 第一に AddTodo コンポーネントが shallow 出来なかったのだ。 調べてみるとなんてことはなく、TodoList コンポーネントは React の素のコン…

今日は enzyme を使って TodoList コンポーネントのテストを追加する。ここ の Counter-test.js のようなものを作成していく。 まず、sinon をインストール $ npm i sinon --save $ npm i @types/sinon --save 記事のサンプルを参考にある程度似せて書いてみ…

ある程度実装できたので、ここらへんでコードの整理をしようと思う。NumberList とかいう名前もおかしいし、Redux を導入したので、コンポーネント間でstateを受け渡しできるようになったこで、コンポーネントの分離もしていきたい。ただ、その前にある程度…

今回は残りのアクションに関して実装していく。残りのアクションは以下の3つ タスク完了時のアクション 削除時のアクション 初期描画時のアクション 初めの2つについては既存のアクションだが、最後の1つは今回新たに追加するアクションだ。 タスク完了時の…

さて、今までは React & Redux & Typescript によってTODOアプリを作成してきたわけだが、更新ボタンを押すとすべてのデータが消えてしまう。なんとかサーバーにデータを保持しておきたい。フロントエンドからバックエンドにデータを送ってDBと通信するよう…

ある程度 Redux を理解できたので、自分のTODOアプリに組み込んでみる。 Redux インストール $ npm i --save redux react-redux $ npm i -D @types/redux @types/react-redux 基本的に前回作ったものをマイグレーションする感じでもってくる。だが、NumberLi…