2019-01-01から1年間の記事一覧
この数日、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…
昨日は Redux を typescript なしで入門した。今日は Typescript を使って入門する。 ここらへんや、ここらへん を参考にする。 記事を見てると、redux と typescript の相性はあまりよくないみたいで、それを補助するライブラリが別途必要になるようだった…
今回は React 入門をいったんお休みして、 Redux に入門する。最終的には React & Redux のアプリを作る必要が出てきそうだたので、ここらへんでいったんしっかり勉強したほうがいいかなと。 Getting Started with Redux · Redux Redux のページを一通り読ん…
UIがかっこいいとコーディングもノッてくるというもの。ということでMATERIAL-UIを入れてみる。 Installation - Material-UI Material-UI のガイド ＞ TypeScriptを試す１ - Qiita 上記を参考にする。 インストール まずは、必要なパッケージのインストール …
今まで作ってきた環境でTODOアプリを作る。 まずは単純に、TODOの登録ができて、TODOを完了させるチェックボックスを付与するくらいの小さいものにする。 静的なリストを作成 少しずつ作って完成に近づけたほうがちょっとした修正もしやすくなるはず。という…
今回もJestの記事だが、React x Typescript x Jest の組み合わせを書いてなかったな。ということで。 Jest · TypeScript Deep Dive 今回も参考にするのはこの記事。その中の Example enzyme という章を参照する。 enzyme ってのはよくわからんですが、React …
今回は Jest に入門する。React とは関係ないが、プログラミングをしていくうえでテストフレームワークの環境を作っておくことは最近では必須となってきているので入れておく。 Facebook 製 JavaScript テストツール Jest を使ってテストする ( Babel, TypeS…
ReactJSで作る今時のSPA入門（基本編） - Qiita これを参考に Type Scriptのコンポーネントを作成する。 全部を作成するのは大変なので、ボタンのテキストを更新するコンポーネントを作成するのみとする。 んで、昨日作った環境に追加する形ですすめる。 Git…
巷で人気の Type Script を入れてみる ここを参考にする React & Webpack · TypeScript まず、react と react-dom の タイプ情報をインストールしておく $ npm install --save react react-dom @types/react @types/react-dom typescript 本体をインストール…
2018年度版、React、webpack、Babelのセットアップ手順をアップデートしてみた - Qiita これをベースに入門してみる。 そんなに引っかかることがなく入門できた。 プロジェクトの初期化 $ npm init -y 必要パッケージのインストール $ npm install --save re…
Windows 対応も済んだので、一旦記事を書いてまとめておく。 概要 Sony の NFCカードリーダー (Pasori) で NFCのID情報を取得できるパッケージを書きました。 NFCカードリーダーは以下のものを使用しました。 www.amazon.co.jp Github リポジトリは以下。 Gi…
ひょんなことから golang で dll を動的に呼び出さなくてならなくて、引数として構造体のポインタを渡さなくちゃならなかったんだけど、調べてもよくわからんかったのでメモしておく。 dll 呼び出し側は以下のようなC言語の実装になっているとする。 #includ…
