読者です 読者をやめる 読者になる 読者になる

ushumpei’s blog

生活で気になったことを随時調べて書いていきます。

FlatListのデータ更新時に再描画されない

概要 ちょっと困ってしまって、検索が時間かかったので他の人の手助けになればと思いメモします。 問題 React NavigationとFlatListでリスト編集サンプルアプリを作成した時に、FlatListのデータ更新時に再描画されない問題に遭遇しました。 データをFlatLis…

React Navigationで画面遷移してみる

React Nativeで画面遷移したかったのでまとめました。 内容としてはcreate-react-native-appで作ったアプリで、2つのナビゲーター(StackNavigator、TabNavigator)を使ってみた勉強記事です。 注意としてはDrawerNavigatorは使わないことと、redux等との連携…

React NativeのNavigatorがなくなった

ちょっと困った SectionListが使いたいのでreact-nativeのバージョンをあげようと思ったら、 バージョン0.44にはNavigatorコンポーネントがないみたいであげられなくなっちゃいました。 なんか書いてある Navigatorはお手軽だったので、結構使ってしまってい…

Reactコンポーネントをディレクトリにまとめる(ES6)

Reactのディレクトリ構成が全然わかりません。 Reactコンポーネントを分割する方法についてもメモです。ES6の文法の話だと思うのですが、正式なドキュメントが見つけられていないので間違いがあったら申し訳ないです。 書いたものをgithubに上げています。参…

Railsからキーがキャメルケースのjsonを返す(jbuilder)

Reactでアプリを書いていて思ったことのメモです。 大概jsのオブジェクトのプロパティはキャメルケース(camel case)ですよね。 Railsをサーバサイドにしたのですが、返却されるjsonがスネークケース(snake case)でした。 クライアントサイドで書き換えるのも…

Promise + reduceで逐次処理

setIntervalでもいいですが、Promiseとreduceでもできるようです。 /* 逐次処理したいデータ */ const arr = [1,2,3,4,5]; arr.map( /* データの配列から`Promise`を返す関数の配列を作る */ e => ( () => new Promise( (res, _) => { setTimeout( () => { /…

React Native実機動作中のcommand+d

お疲れ様です。 とりあえず結論というか、言いたい事です。 React Nativeで作ったアプリを開発段階で実機にXcodeで転送した場合、 シミュレータでcommand+dしたときに出るメニューは、実機を振ると出すことができるようです。 (2017/02/22時点) 説明 最近、…

ブラウザでテキスト読み上げるコンポーネント: react-voice-components

テキスト読み上げをしてくれるReactコンポーネントの存在を知りました。grvcoelho/react-voice-components ブラウザで音声を使って何かしたいと思っていたので、試しに触ってみて、GitHub Pageにあげてみました。 以下ちょっと苦労したので、メモです。 Reac…

GitHubのIssuesを閉じる方法

GitHubのIssuesを閉じる方法、GitHubのHelpページでも紹介されていますが、commit messageに関して書かれているだけなので、PullRequestからでも閉じられるか確認しました。 確認内容 結論から言うと、PullRequestからでも閉じられます。 以下試したことです…

Yesodのquick startが重い

題に掲げた問題を解決するための記事ではないです。HaskellのwebアプリケーションフレームワークYesodのquickstartをDockerfileで行っただけの記事です。 Dockerfile Dockerfileを書きます。 FROM haskell:latest MAINTAINER ushumpei ARG project_name RUN …

Leap Motionを手に入れました

Leap Motionを手に入れました。Leap Motionは手の動きをかなりの精度で取得できるセンサーです。たくさんの言語でプログラミング可能なAPIが提供されていますが、とりあえずjavascriptのAPIを使ってみます。また、各クラスの内容もざっくりと整理していこう…

screenコマンドの小さな話

ターミナル操作をいい感じにできる仮想端末マネージャコマンドscreenを最近知りました。メモしておきます。 私の理解では、ターミナルをラップして、通常のシェル操作に加え、セッション、ウィンドウ、領域という概念を取り込み、それらを操作できるようにす…

dockerに関するメモ

golangを少しだけ試して見たくなったけれど、環境を作りたくなかったのでdockerを使って見ました。特に目新しい内容ではないですが、自分用にメモします。 構成というほどでもないですが、 コーディング: 自分のマシン 実行環境: コンテナ とするために、ま…

redisのレプリケーション

redisのレプリケーションがとても簡単だったのでメモです。勉強も兼ねてdockerを無駄に使っています。環境は以下です。 macOS Sierra Docker for Mac Version 1.12.3-beta29.2 とりあえずredisが入ったAlpine Linuxのイメージを作成します。my-alpineディレ…

¥eあるいはedit

mysqlの対話環境でちょっと長い処理を実行したくなった時のメモです。 mysqlコマンドを実行すると対話環境が起動します。ただ改行を含んだクエリを書こうとすると、どこか間違えた時に書き直すのが非常に面倒です。 そういった時は¥eまたはeditコマンドを使…

git logの折り返し

gitのlogやdiff表示時の、文字列の折り返しの切り替え方をメモします。 自分の環境(mac 10.12、terminal、git version 2.8.4 (Apple Git-73))ではデフォルトで折り返しがされていたのですが、以下の指定で折り返しが無効になりました。 折り返し無効 $ git c…

アロー関数(Arrow function)の書き方色々

アロー関数は引数や戻り値の種類によって色々な書き方ができます。分割代入を使うことで柔軟な関数をシンプルに宣言できてとても気持ちいです。 基本的な書き方から、やや直感的ではない書き方まで、メモしていこうと思います。 ざっくり アロー関数の記述方…

Reactコンポーネントを純粋な関数で書こう

Reactコンポーネントの書き方は色々あり、es6を使う場合の選択肢は以下の2つがあると思います; クラス 純粋な関数 クラス classの構文を使う場合、React.Componentクラスを継承してコンポーネントを定義します。 class App extends React.Component { rende…

オブジェクトリテラル内でのスプレッド演算子

こんにちは。 スプレッド演算子(spread operator)がオブジェクトリテラル内で使えませんでした。babel-preset-es2015入れとけばなんとかなるだろうと思っていたのですが、babel-preset-stage-2が必要みたいです。ECMAScriptの仕様策定方法を知らないのでstag…

Ctags と vim と Git

概要 vimでタグジャンプを楽にする方法です。以下適当な翻訳です。 参考: Effortless Ctags with Git Ctags はコードのインデックスを作成し, 関数, 変数, クラス, その他の識別子への Vim でのジャンプを容易にします. Gitのフックはリポジトリ単位です(Git…

Promiseのthenが素敵

javascriptではes2015からPromiseが使えるようになります。Promiseで非同期処理を包むことで、非同期処理が終わったタイミングで次の処理を開始できて、コールバック地獄をなくす、等と言われていたりします。 詳しい使い方は検索するとたくさん出てくるので…

haskellのApplicative laws - composition

こんにちは。 すごいHaskellたのしく学ぼう!の11章に出てくるアプリカティブ則の一つ、「composition則」について何を言っているかを考えてみました。 composition則 Applicative型クラスを継承するデータ型は、関数を実装すること以外にも、実装した関数が…

Vimで折畳

こんにちは。 Vimについて書きます。 概要 Vimでは文章を折りたたむことができるようです(Vi には折畳は無い)。htmlを編集している時など、ファイルが長くてちょっと読みづらいといった時にとても便利です。 Vimユーザマニュアルはとても素晴らしいので、こ…

javascriptでpartition 関数を実装

こんにちは javascriptでhaskellでいうところのpartition関数を実装してみたのでメモします。 partition関数 全然一般的ではないので説明です。僕がpartition関数って言っているのは、「配列を、その要素に対して真偽を判定する関数により、真なものと偽なも…

browser-syncでブラウザ自動更新

Node.jsでコードを書いていると、ターミナルとブラウザの行き来が頻発して面倒です。自分のノートPCはモニタが小さいので、ウィンドウを切り替えていると埋もれてしまい、それを探すために集中力が切れてしまったりします。 browser-syncを使ってコードを書…

圏, 関手, 自然変換

圏論の定義メモ Def.圏(category) 圏 は次のデータからなります; 対象(objects) , , ... 射(arrows) , , ... ドメイン(domain), コドメイン(codomain) 任意の射 に対し, 対象 , が定まる. この時 と表す. (ただし 、) 合成(composite) 任意の射 、に対し…

PCのカメラを起動する

WebRTCで遊んでみたいので、手始めにPCの内臓カメラを起動するだけのページを作成します。 navigatorオブジェクトのgetUserMediaメソッドを使用することでデバイスにアクセスできるみたいです。ただ、ブラウザ環境ごとにこのメソッドがあったりなかったりす…

オーダー

オーダーについて。適当に済ましていたので、おぼえがきします。アルゴリズムでも数学でも見ることがよくありますが、若干うろ覚えです。 定義 が のときオーダーである。 これを変形すると、 となることから、この定義は は より発散する速度が遅いというこ…

javascriptで実行時間を表示する

短いメモです。 console.time、console.timeEndを使うとスクリプトの実行時間を表示することができます。 var loop = n => { console.time('timer'); for(i = 1; i <= n; i++) { for(j = 1; j <= n; j++) { console.log(`${i} x ${j} = ${i*j}`); } } consol…

ReduxとExpressかElectronか

Reduxのチュートリアルを見終わったので、実際に手を動かしてみようと思い、リポジトリを作成してみました。中身はExample: Todo List | Reduxです。 github.com expressとelectronで動作確認ができます。 感想 写経しているとreduxに関して徐々にわかってき…

Reduxの勉強3

前々回 前回 引き続き、Reduxのレッスン動画を視聴した時のメモです。 21: ToDoアプリのリファクタリング。見た目と挙動を分けます。Main container componentからPresentational componentを分離しましょうというはなし。 22: container componentは振る舞…

webpack、babel、React

Reactの環境構築です。できるだけ覚えることを減らしたいので、webpack、babel、reactを軸に必要最低限なものをインストールします。Node.jsの環境が整っている前提です。(npmコマンドが使えればOKかと思います) それぞれに関するメモです。 webpack: jsxと…

Reduxの勉強2

前回 動画が30分で終わるかと思ったら30回あることに気がついて力尽きてしまったので、今日はその残りを見ていきます。 Webpackを使えるようになろうとか言っていましたが、いまの腰を据えて試せていないので停滞しています。残りの動画を放っておくとちょっ…

JavaScript...

ES6から、「Spread operater」というものが追加されました。「...」を記述することで、配列やオブジェクトを展開する事ができる演算子だそうです。 例えば、 var [x, ...xs] = [1,2,3,4,5,6,7,8,9]; console.log(x); //=> 1 console.log(xs); //=> [2, 3, 4,…

Reduxの勉強

Redux ここを一通り読めばわかりそうだ!と思って読み始めたら、いきなりプレディクタブルステートコンテナとか言われてよく分かりません。 Redux is a predictable state container for JavaScript apps. Read Me | Redux ステートは普通に状態でいいのだろ…

javascriptで波括弧を使ってconst値に分割代入

こんにちは。 クロスプラットフォームのデスクトップアプリがhtml、css、javascriptで作れてしまうフレームワーク「Electron」をちょっと触ってみようと思ったのですが、「Hello, world」する前に気になったことをメモします。 (Electronとはあまり関係ない…

gnuplotとFFTW

勉強のため、gnuplot(gnuplot homepage)とc言語のFFTW(Fastest Fourier Transform in the West.)ライブラリの環境を作ってみます。 gnuplot gnuplotはコマンドラインから使えるグラフィックユーティリティです。科学者や学生向けに数学の関数をヴィジュ…

フーリエ変換の練習(前半)

フーリエ変換について知識がないため、ちょっと勉強してみます。証明的なものを載せていますが、考え方を学ぶためのメモなため正確なことを知りたい場合参考書を当たってください。フーリエ変換の雰囲気がわからなくて困っている場合はちょっとは役に立つと…

Persistent

Persistentはデータベースアクセスインターフェースを提供するHaskellのパッケージで、DDL、DML、などを扱いやすい関数を備えています。 型安全と完結さ、明確な文法という原理に則って開発されていて、PostgreSQL、SQLite、 MySQL、MongoDBや実験的にRedis…

pingを知ろう

こんにちは。 シンプルなものって素敵ですよね。自分が好きなものは包丁とまな板です。大工道具もなかなか素敵です。 本当のところはよくわかってないですが、今日はシンプルそうで、使いこなせるとカッコ良さそうな、pingコマンドについてメモしました。(B…

haskellのパッケージ管理ツールstack

haskellでservantを使いたくて色々調べていたら、サンプルとして上がっているものがことごとくstackというパッケージ管理ツールを想定したものでした。cabal-installの代わりになるものっぽいです。 stackはhaskellプロジェクトの管理を簡単にしてくれるもの…

vimの移動コマンド

こんにちは。 よく使っているエディタ、vimについてメモします。 vimには便利な移動コマンドが沢山あって魅力的です、でもなかなか使いこなせていない感じがします。上下左右移動を覚えた後、さらに自由にファイルを編集するための移動コマンドを調べてみま…

コメントアウト一覧

こんにちは。 コメントアウトの構文を覚えられないです。やっているうちにいずれ覚えるだろうと思っていたのですが、全然覚えられていないです。 プログラミングを初めてすぐの頃、cssのコメントアウトを//と書いて、レビューで指摘された思い出があります。…

データ型と型クラスの違い

「すごいHaskellたのしく学ぼう!」を勉強した時に、データ型と型クラスで混乱してしまったので、メモ書いておきます。 ザックリまとめると、こんな感じです。 データ型:データ構造を定義するもの 型クラス:振る舞いを定義するもの ちゃんとした内容は「す…

はじめて

はじめまして。 僕は会社員でWebプログラマーをやっています。 何かアウトプットしないとまずいかなと思い、まずはブログをはじめてみました。 このブログには生活で気になったことを随時調べて書いていくので、結構雑多な内容になるかと思います。内容もざ…

給与明細に書かれている「控除」

概要 今後の身の振り方に悩んだ結果、お金のことをおろそかにしていてはいけないと考え、まずは給与明細をじっくり眺めてみました。 勤怠だったり支給だったりはわかる、でも「控除」の部分に引っかかる。各種保険料、税金が引かれている。確かに名前は知っ…