自然順ソート(マルチバイト対応改良版 & Windows エクスプローラー準拠)

何度も同じようなブログを連投してしまいますが、先のブログには大きな数字を使うとちゃんと動かないという欠点がありました。今回はそれを改良したバージョンになります。 先のバージョンでは、strconv.Atoi を使用している関係で どうしても数値が int の…

自然順ソート(マルチバイト対応)

2019/4/17 追記 改良版書きました!! 自然順ソート(マルチバイト対応改良版 & Windows エクスプローラー準拠) - bamch0h’s diary 前回、前々回 の続きですが、マルチバイトの数字には対応できていなかったので対応させました。こちら を参考にしつつ、Windows…

自然順ソート別実装(Windows エクスプローラー準拠?)

2019/4/17 追記 改良版書きました!! 自然順ソート(マルチバイト対応改良版 & Windows エクスプローラー準拠) - bamch0h’s diary 前の記事 の最後に、ゼロパディングされた数値とそうでない数値が存在した場合に数値順に並んでくれないという問題があると書き…

自然順ソートをGoで実装

文字列の中に数値があるような場合、ソートの時にその数値の桁がそろっていないと意図しない順番になることがあります。 a1 a10 a2 のようなケースです。実際には a1 a2 a10 のように数字順に並んでほしいですよね、それを実現するのが自然順ソート(Natural …

ブルームフィルタをGoで書く

要約 Turing Complete FM #13 を聞いていると、ブルームフィルタというデータ構造についての話題がありました。ブルームフィルタというものを知らなかったので色々調べてみると面白そうだったのでGoで実装してみました。 ブルームフィルタとは? 誤解を恐れず…

Go製 Felica ライブラリ pasori に MAC付きRead とMAC付きWriteを足した

前回のブログ の続きです。前回はMACをつけないRead/Writeのコマンドを足しましたが、今回はMAC付きのRead/Writeのコマンドを足しました。前回から10日間ずっと、この実装のバグが取れずに悩んでたのでようやくブログにできる程度に実装できたのは素直にうれ…

Go製 Felica ライブラリ pasori に read without encryption コマンドと write without encryption コマンドを足した

Windows だけだが、拙作の Go製 Felica ライブラリ pasori に read without encryption と write without encryption コマンドを足した。 参考にした記事/サイト一覧 FeliCa Lite-S ユーザーズマニュアル FeliCa - おなかすいたWiki! [PASMO] FeliCa から情…

TODOアプリに react-beautiful-dnd を追加する

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

react-beautiful-dnd を触ってみた

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

TODOアプリにfavicon を設定する

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

webpackでビルドしたjsファイル名にコンテンツハッシュを追加する

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

Todo アプリを firebase にデプロイしたがテストの書き方がわからなかった

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

Firebase 入門(4) ~ Todo アプリをデプロイできるのか? (2)

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

Firebase 入門(3) ~ セキュリティの向上

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

Firebase 入門(2) ~ Firebase Realtime Database

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

Firebase 入門(1) ~ Todo アプリをデプロイできるのか? (1)

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

React16.8 というものがリリースされたらしい

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

React 入門 (14) ~ TODOアプリを作る(9) ~ sendToApiServer のテスト

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

React 入門 (13) ~ TODOアプリを作る(8) ~ AddTodo コンポーネントのテスト

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

React 入門 (12) ~ TODOアプリを作る(7) ~ TodoList コンポーネントのテスト

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

React 入門 (11) ~ TODOアプリを作る(6) ~ リファクタリング

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

React 入門 (10) ~ TODOアプリを作る(5) ~ データの永続化(2)

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

React 入門 (9) ~ TODOアプリを作る(4) ~ データの永続化(1)

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

React 入門 (8) ~ TODOアプリを作る(3) ~ Reduxの導入

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

Redux 入門 (2) ~ Redux & Typescript

昨日は Redux を typescript なしで入門した。今日は Typescript を使って入門する。 ここらへんや、ここらへん を参考にする。 記事を見てると、redux と typescript の相性はあまりよくないみたいで、それを補助するライブラリが別途必要になるようだった…

Redux 入門 (1)

今回は React 入門をいったんお休みして、 Redux に入門する。最終的には React & Redux のアプリを作る必要が出てきそうだたので、ここらへんでいったんしっかり勉強したほうがいいかなと。 Getting Started with Redux · Redux Redux のページを一通り読ん…

React 入門 (7) ~ TODOアプリを作る(2) ~ MATERIAL-UI の導入

UIがかっこいいとコーディングもノッてくるというもの。ということでMATERIAL-UIを入れてみる。 Installation - Material-UI Material-UI のガイド > TypeScriptを試す1 - Qiita 上記を参考にする。 インストール まずは、必要なパッケージのインストール …

React 入門 (6) ~ TODOアプリを作る(1) ~

今まで作ってきた環境でTODOアプリを作る。 まずは単純に、TODOの登録ができて、TODOを完了させるチェックボックスを付与するくらいの小さいものにする。 静的なリストを作成 少しずつ作って完成に近づけたほうがちょっとした修正もしやすくなるはず。という…

React 入門 (5) ~ React x Typescript x Jest でテスト ~

今回もJestの記事だが、React x Typescript x Jest の組み合わせを書いてなかったな。ということで。 Jest · TypeScript Deep Dive 今回も参考にするのはこの記事。その中の Example enzyme という章を参照する。 enzyme ってのはよくわからんですが、React …

React 入門 (4) ~ Jest 入門 ~

今回は Jest に入門する。React とは関係ないが、プログラミングをしていくうえでテストフレームワークの環境を作っておくことは最近では必須となってきているので入れておく。 Facebook 製 JavaScript テストツール Jest を使ってテストする ( Babel, TypeS…