nissy のアーカイブ

Meteor + React + Typescriptで、Hello World

2017年10月5日

Meteorで遊んでいます。 # Meteorとは Webアプリ開発のフルスタックのライブラリです。JSだけで、フロントもバックも書けます。 何がすごいかというと、したいことがほとんどコマンド一つで出来てしまうこと。 クラウド上にデプロイするだけなら、コマンド一つでできちゃいます。 Githubのスターがすごいらしいので試してみました。 * [公式](https://www.meteor.com/) * [フルスタックJSフレームワークMeteorの
続きを読む

Redux セレクターについて

2017年8月30日

React&Reduxで大規模開発をしていくようになると、stateが肥大化していくようになる。 こんな時に、パフォーマンスにおけるstateの更新のボトルネック化を避けるためのmiddlewareとして、セレクターと呼ばれる処理を埋め込むのが有効である。 セレクターは、あるstateの状態を比較して、注目したstateが更新されたときだけ変更を加え、 それ以外のときはキャッシュのように以前の値を参照するというものである。 * [Redux公式 Doc](http
続きを読む

Rails FATAL: permission denied for database “postgres”

2017年7月24日

Herokuの本番環境で、 以下のようなコマンドでdatabaseを削除するアクションをしようとすると、タイトルのようなPermissionエラーにあう。 ``` $ heroku run rails db:migarte:reset // error : Starting process with command `bundle exec rake db:migrate:reset` : State changed from starting to up
続きを読む

Ruby APIで取得したtweetに含まれる短縮URLの削除

2017年7月22日

rubyを使ってTwitter APIで取得したtweet本文は、以下の感じでjsonで返ってきます。 ``` {:text=> "今日のオススメ #打ち上げ花火 第15回 港まつり 能代の花火(秋田県能代市)|花火大会2017 花火カレンダー - ウォーカープラス https://t.co/ZVOTRxFQDc https://t.co/7jMn30UpYm" } ``` 最後に含まれる **https[]()://t.co/
続きを読む

[PostgreSQL] ERROR: database XXXX is being accessed by other usersが出た時

2017年7月22日

身に覚えはないけど、databaseに複数ユーザのアクセスがあるよって怒られた時の対処法です。案外ネットに解決方法がなかったのでハックに残しておきます。   とりえず身に覚えはないのですが、以下のコマンドでアクセス状況を確認 ``` select * from pg_stat_activity; ``` すると、前日にログインした形跡がありました。。。 ということで、procpidを指定して、以下のコマンドで削除しました。 ``` select pg
続きを読む

Herokuでnon-fast-forwardと言われ、Pushできない時

2017年7月19日

いつものようにDeployしようとすると・・・ ``` $ git push heroku master ``` 以下のエラー文に遭遇して、Deployできない・・・ ``` To https://git.heroku.com/XXXXXX.git ! [rejected] master -> master (non-fast-forward) error: failed to push some refs to 'https://git.h
続きを読む

Rails開発でよく使うコマンド

2017年7月19日

備忘録です。Railsで開発する時に、よく見るコマンドが並んでいると思います。 ### Rails コマンド ``` // バックグラウンドで起動 $ rails s -d // 停止 $ kill `cat tmp/pids/server.pid` // debug $ rails c // コントローラとビューを生成する $ rails generate controller hoge // コントローラー削除 $ rail
続きを読む

Fetch APIリクエスト

2017年7月10日

初歩的な内容ですが、jsのPromiseの考え方の振り返りも兼ねてハックにFetchによるAPIリクエスト方法を残しておきます。 一般的に、以下のように使います。 ``` fetch(url, { method: 'GET'} // オプション ) .then(   if(response.ok) { // ステータスがokならば return response.json(); // レスポンスをjsonとして変換する } e
続きを読む

READMEにgifを追加する

2017年7月6日

react-nativeのライブラリとかをみると、よくREADMEにgif画像が配置してあって、 どういうライブラリなのかが直感的ですごいわかりやすい。 そう思っていたら、自分のリポジトリのREADMEにもgifを追加しなければならない時がきたので、 ハックにやり方を残しておきます。 ### 1. gif画像をブランチを切って配置 まず、gif画像は、基本的に開発しているアプリと関係の無いものなので、ブランチを切ってそこに配置しておきます。 僕の場合は、まず
続きを読む

Atom パッケージ prettier-eslint→prettier-atom

2017年6月29日

タイトルの通り、prettier-eslintというパッケージがprettier-atomというパッケージに統合されて新しくなっていた。 以下のページで詳細は確認出来る。 > [prettier-eslint - Atom](https://atom.io/packages/prettier-eslint) > [prettier-atom - Atom](https://atom.io/packages/prettier-atom) 設定は以前より簡単で
続きを読む

Eslint Unexpected token = with static properties

2017年6月29日

以下のように、navigationBarやpropTypesなどでstatic変数を使うと。。。 ``` export default class App extends React.Component { static propTypes = { ... } ... class HomeScreen extends React.Component { static route = { navigationBar: {
続きを読む

gem install をしようとしたらOperation not permitted がでた。。

2017年6月15日

# 問題の発端 sassコマンドを使えるようにgemをインストールしようとしたところエラーがでて出来ない。。。 ``` $ sudo gem install sass ERROR: While executing gem ... (Errno::EPERM) Operation not permitted - /usr/bin/sass ``` sudoでインストールしているんだけど。。。 # 解決方法 これは、Macのrootlessという概念に
続きを読む

javascript 連想配列の複数のキーについてソート

2017年5月1日

便利なのでハックに残しておきます。使える時は勿論、値が数値の時だけです… ``` var test = [ {a: 1, b: 30 }, {a: 2, b: 21 }, {a: 2, b: 10 }, {a: 1, b: 5 } ]; // ソート処理 test.sort(function(x, y){ return x.a - y.a || x.b - y.b; }); // result // test -> [
続きを読む

WordPressでどうしてもログインできなくなってしまった時

2017年4月13日

今回dockerでWordpress環境をローカルに構築したら、ログインできなくなったので解決方法を残しておきます。 # 発端 dockerで1日前に作ったWordpressの管理画面に入ろうとしたところ、Passwordを忘れてしまって入れない。ということで、Passwordを変更する為に再設定用のメールを送ろうとする。そうすると、以下のエラーメッセージが表示された。 ``` The e-mail could not be sent. Possible
続きを読む

React開発 React Developer Toolsを使ってみる

2017年4月6日

Google Chromeでは、React用のDeveloper Toolがあるみたいです。是非開発している人は落としましょう。 コンポーネントの構造がかなり分かりやすくなり、どのコンポーネントがどんなstateやpropsを持っているのか本当に把握しやすくなります。 公式お墨付きのツールで、ボタンをポチポチするだけでいれられるので入れましょう。 [New React Developer Tools](https://facebook.github.io/rea
続きを読む

npm install -g XXXX で command not foundが起きた…

2017年4月6日

あるあるなのかよくわからないですが、npmで落としたnode_moduleが見つからないことがあったりします。 今回の対処方法をハックに残しておきます。 # 問題の発端 以下のように公式通りにコマンドを叩いて、firebase にログインしようとした。 ``` $ npm i -g firebase-tools $ firebase login ``` けど、ログイン出来ないじゃん。。。 ``` $ firebase login -bash:
続きを読む

React Native mapに独自の情報ウィンドウを表示

2017年3月31日

## そもそもの発端 react-native-mapsを用いてマーカーに独自アイコンを当てると、マーカーをクリックしてもクリックの有効範囲が狭く、デフォルトの情報ウィンドウが表示されにくいという問題が生じました。デフォルトでは、のdescriptionに渡した値が返ります。 ## 対処法 onPress()のイベントが発火した時に、独自の情報ウィンドウを開く関数(ここでは、showExplain)を呼ぶようにする ``` export default clas
続きを読む

ReactNative FontAwesomeを使う

2017年3月30日

# react-native-vector-iconsのインストール 2つのコマンドを叩くだけです。 ``` // --saveはオプションです $ npm install react-native-vector-icons --save // linkする $ react native link react-native-vector-icons ``` # 実際にコードの配置 以下のようにモジュールを取り込み、自由に使えます。 ``` import
続きを読む

Info.plistとは

2017年3月27日

今回iOSアプリを制作する際にはまったファイルなので調べてみました! iOS開発ではよく見かけるファイルですが、一言で言うと実行ファイルのための必要不可欠な構成情報を記入するファイルみたいです。 このファイルを変更することで、実際にアプリをiPhoneに落とした時のアイコンやAPPの名前などを指定することが可能になります。 ファイルはxml形式になっていて、以下のように**keyと指定内容**をセットにして記述していきます。 ```
続きを読む

ReactNative react-loggerを使ってデバッグ

2017年3月17日

ReactNativeのデバッグは公式にもある通り、Webブラウザ上でブレークポイントを打ちながら可能ということで、かなり良心的な設計になっているのですが、さらにReduxフレームワーク開発を効率良くすすめるデバッカーモジュール**「react-logger」**というものがあったので紹介します。 ## メリット Actonが発行される毎に、storeがもつ状態を常に変更前と変更後で詳細にコンソールに表示してくれる。また、どのアクションがどのような順番で発行されている
続きを読む