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

あいつの日誌β

あいつの日誌です。

hachioji.pm #65 に行ってきた

66回目のはちぴーに行ってきました。 atnd.org 開催された場所: や台ずし 八王子 横山町 割と安くて美味しいいいお店でした。開店~19時迄ドリンク半額なのでちょっとお得。 nintendo switch みんなでガンマンになったり真剣白刃どりしたり。この会の参加者…

React.js の tutorial (2017 spring)を書きました

github.com React.js で SPA しようとすると redux が登場するので学習コストが割と高くなると思ったのでいっその事 redux 使わなければいいんじゃないかと思いました。README.md に手順を書いてあるのでお試しください。 一応日本語で書いたものをなんとな…

react-router@v4 を調査した

あらすじ react-router@v4 にしたら色々な変更が入っていて全く動かなくなったので react-router の機能を確認しました。 追記: 2017-03-23 16:30 withRouter について追記しました。 言及すること <Route> の挙動が v3 と異なる <Switch> と <Route exact ...> の挙動を理解して対処しましょ</route></switch></route>…

クーリエ・ジャポン・ハッカソンに行ってきた

あらすじ 3/18(土)と3/19(日)に人生初のハッカソンに行ってきました。 courrierjapon024.peatix.com 初日 初日は以下のスケジュールで進行しました。 (午前)アイデアソン (午前)個人のプレゼン (午後)ハッカソン (午後)中間発表 初日午前: アイデアソン 最初…

Ansible での provisioning を継続的にインテグレーションしたいので circleci で Docker を使う

あらすじ Provisioning を継続インテグレーションしたくなったのですが、そんな時は CircleCI で Docker を使えばいいんじゃないかと思いました。 コンテナ内で ServerSpec を実行する方法などがあると思いますが、ここではコンテナ内に SSHD を使って外部か…

PORT 22 以外を使用していて WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! と怒られた時に .ssh/known_hosts のホスト情報を消したい場合

例えば port を 40122 にしていた場合はこんな感じ ssh-keygen -R [localhost]:40122 zsh だとこんな感じ ssh-keygen -R "[localhost]:40122"

okamuuu.com を Gatsby と Netlify に移行しました

Gatsby x Netlify netlify.com github.com あらすじ 先日まで okamuuu.com を Google App Engine 上で Go と React.js で運用していましたが github.com の gh-pages に移動しました。Google App Engine を使う案件にアサインされていたので練習のために運用…

完全栄養食パスタ BASE PASTA を調理してみた

2017-03-04 追記あり 懸念点として茹でた栄養素について記述したところコメントを頂いたので追記しました。 あらすじ 実は以前から完全栄養食に関心があったので早速 Amazon.jp で注文してみましたので食感をレポートしました。 BASE PASTAパスタとは 厚生労…

ES2015 でとまどいがちな記法 Object initializer と Spread Operator

あらすじ ES6 の記法を全て覚えてから ES6 を書くよりも、書きながら勉強したほうが効率が良かったりします。 なんですが写経している時に分からない記法が出てきた場合検索しづらくて困ると思います。 というわけで私がどうやって Google に質問すればいい…

npm publish を念頭において React Components 用のプロジェクトを作成する

あらすじ 先日 react-paginators という React components な module を publish しました。 github.com その時に色々調べた事があるので備忘録として残します。 作成手順 create-react-app と storybook を使ってプロジェクトの雛形を作成します。create-re…

react-paginators という npm module を publish しました

github.com どんなの? こんなの 作った経緯 最初は react-paginate を使う予定でした https://github.com/AdeleD/react-paginate なんですが最初のページを指定する機能がどうやら動作しない模様 https://github.com/AdeleD/react-paginate/issues/124 init…

getstorybook で Unsupported Project type. (code: UNDETECTED)

以下のコマンドを実行すると mkdir example-project && cd $_ npm init -y getstorybook 以下のようなエラーが表示される getstorybook - the simplest way to add a storybook to your project. • Detecting project type. ✓ Unsupported Project type. (co…

React Storybook で Material-UI を試す

create-react-app material-ui-storybook && cd $_ getstorybook npm install --save react-tap-event-plugin material-ui npm install --save-dev storybook-addon-material-ui edit `src/stories/index.js import React from 'react'; -import { storiesOf…

Google App Engine の let's encrypt を更新する手順の備忘録

3ヶ月前に okamuuu.com を作った時についでに https に対応させたんですが、忘れた頃に更新しないといけないので備忘録 手元の MacOSX 上で最初にデプロイできるか確認 とりあえず自分のアプリがデプロイできるかどうかを確認します。 この3ヶ月でマシンを新…

webpack.config.js で複数のエントリーポイントを指定する

mkdir practice-webpack && cd $_ mkdir -p src/pages www/pages touch webpack.config.js npm init -y npm install --save-dev webpack create webpack.config.js const path = require('path') const webpack = require('webpack') module.exports = { dev…

Webpack 2: Module not found: Error: Cannot resolve 'file' or 'directory' node_modules/@kadira/storybook/dist/server/addons.js

あらすじ ある日 webpack の version を上げたら extensions に empty な ‘’ を指定するのだめと怒られるのでその指定を削除したら storybook がなんかエラーを吐き出すようになった時のメモです。 状況 React + Redux で既存の Single Page Application で…

redux 使わずに react と react-router で SPA したい

あらすじ redux-form といった ecosystem が要らない場合はこういうやり方もあるんではないかと思います。 やり方 create-react-app practice-react-router-spa && cd $_ touch src/Posts.js src/api.js npm install --save react-router edit src/App.js im…

突然ですがクイズです。 ES6 の module exports の機能として正しいものを選びなさい。

HTML コーダーさんに React components を storybook に追加してもらう作業をしているのですが module exports がわかりづらいので問題をつくってみました。 問題1 関数毎に export されている場合 export const One = () => ( <div>one</div> ) export const Two = () …

TypeError: webpack.optimize.OccurenceOrderPlugin is not a constructor

以下のようなエラーが出た場合 TypeError: webpack.optimize.OccurenceOrderPlugin is not a constructor 関数名が変わりました。 webpack.optimize.OccurrenceOrderPlugin

Hachioji.pm #63 に行ってきました

https://atnd.org/events/85292 hachioji.pm #63 に参加してきました。#0から始まっているので64回目です。 Hachioji.pm #37 以来なのでちょうど3年ぶりらしい。そんなに時間経ってるんだ… 八王子の居酒屋で未来を体験する LT一覧 酔っ払いながらメモしてい…

React tutorial (9)

Datetime Picker も使用頻度が高い、というよりもほとんどマストなので記事をひとつ追加します。 Bootstrap 風のデザインの react-datetime を最後に紹介します。 github.com この他にも airbnb/react-dates など沢山モジュールがありますので、各自でいろい…

React tutorial (8)

react-select 前回は redux-form について触れました。 今回は react-select について触れます。 目次 開発環境を準備 React の基本的な Life Cycle に触れる redux に触れる redux-saga に触れる react router に触れる npm で公開されている components を…

React tutorial (7)

今回は redux-form について触れます。 おそらく React, Redux で管理画面作る場合はこの module を使うことになると思います。 github.com ちなみに react-redux-form という似た名前のモジュールがありますが優劣に関してはここでは言及しません。 やりた…

React tutorial (6)

前回は react での routing について触れました。 今回は HTTP 通信が成功した時などに表示する Notification (Flash Message) に触れます。 Notification も色々あるのですが豊富な機能を備えた reapop を紹介します。 github.com 目次 開発環境を準備 Reac…

React tutorial (5)

前回は React で Single Page Application をするためによく使われる redux-saga に触れました。 今回もよく使われる機能である react-router に触れます。 目次 開発環境を準備 React の基本的な Life Cycle に触れる redux に触れる redux-saga に触れる r…

React tutorial (4)

あらすじ 前回は redux による state の管理について触れました。 今回は http 通信などによる非同期処理の方法について触れます。 なお外部との通信に https://jsonplaceholder.typicode.com を利用しています。 目次 開発環境を準備 React の基本的な Life…

React tutorial (3)

あらすじ 前回は React の基本的な作法に触れました。 今回は Redux を使ってみます。 目次 開発環境を準備 React の基本的な Life Cycle に触れる redux に触れる <= 今日やること redux-saga に触れる react router に触れる npm で公開されている compone…

React tutorial(2)

あらすじ 前回は開発環境の構築方法を紹介しました。 今回はReact で使われる簡単な記述方法に触れます。 たぶん直感で理解できると思いますので細かい説明は省略します。 目次 開発環境を準備 React の基本的な Life Cycle に触れる <= 今日やること redux …

React Tutorial (1)

追記(2017-02-08) webpack.config.js がエラーが出るので訂正しました。js 界隈は変化が早いのでチュートリアルを試される方はお早めにお願いします。 あと React.js の tutorial というよりも redux の tutorial ではないかという意見を頂戴しましたがよく…

Javascript で複数ある正規表現のいずれかがマッチしているものを取得する

以下のように Javascript の switch 文を使おうかなと思いました。 http://qiita.com/piyohiko/items/a84648599eba7697675f なんですが、判定したいだけじゃなく、マッチした要素を抽出したいのでなんとなく OR 演算子を使いました。 const githubRegex = ne…

MacOSX で複数ファイル一括置換

あらすじ familyName を間違えて famillyName としてしまった時のお話です sed コマンドオプションでちょっと迷ったので備忘録 とりあえず対象となるファイルを検索 この時対象となっているファイルは js ファイルだったので以下のようにして対象となるファ…

App Enigine に deploy しよとすると composite literal uses unkeyed fields と言われた件

Go

あらすじ ある日手元で開発したソースコードを App Engine にデプロイしようとするとエラーが出たときのお話です。 問題と解決策 問題となったのは以下のコード func NewNullString(s string) NullString { return NullString{sql.NullString{s, s != ""}} }…

okamuuu.com をはじめました。

現在 Google App Engine で Golang + React での開発を行っているのですが、学習曲線を高めるために同じ構成で Blog を作ってみました。 いろいろとはまるポイントがあって学ぶポイントが結構あったので折を見て共有したいと思います。とりあえずはてなブロ…

MySQL で sql.NullString なあいつを JSON に Marshalling する

Go

追記: c.Bind とかする時に type error が起きたりするので Unmarshal も追加 あらすじ MySQL で nullable なカラムレコードを入れるために struct の定義をこうしたらレコードには null が入らずに空文字が入ってしまいます。 Something.Code には Unique …

はじめての elm-lang

あらすじ grunt, gulp, webpack ツールは違えど Javascript を bundle する事前準備で疲弊していることに変わりがない今日この頃ですが、elm-lang は何も考えなくても bundle してくれるので意外とアリかもしれないぞと思ったので練習します。 いい感じの動…

Single Page Application の Mock Server を作る 2016

対象読者 以下のワードに興味が無い方はたぶん読まなくても良い記事です。 json-server と jwt browsersync と http-proxy-middleware npm-run-all --parallel 準備 % mkdir practice-mock-api && cd $_ % mkdir -p mock src/components www % npm init -y j…

Using Hot Module Replacement with React

Browsersync と webpack でやってみます。 Goal 少しわかりづらいのですが Live Reload を React Component 単位で行います。 準備 mkdir practice-react-hmr && cd $_ mkdir -p src/components www npm init -y npm install --save-dev browser-sync webpac…

webpack で複数の entry ファイルを出力する

あらすじ ユーザー画面と管理画面を SPA で作りたいんだけど component とか再利用したい時のお話です mkdir practice-webpack-output && cd $_ mkdir -p src/{app,admin} www/{app,admin} npm init -y npm install --save-dev webpack babel-core babel-loa…

golang: gorm で 日付を定義したい

Go

User.birthday や Diary.ymd みたいな date 型を指定したい場合は struct を以下のようにすれば良いらしい。 Update するときは Query に hms つけた状態でも ymd だけ更新されます。 Find するときは ymd 形式に変えてあげればいいと思います。 package mai…

Golang: unsupported Scan, storing driver.Value type []uint8 into type *time.Time;

Go

そんなエラーが出た場合はたぶん parseTime をつけるのを忘れている - "username:password@/dbname" + "username:password@/dbname?charset=utf8&parseTime=True&loc=Local"

ISUCON6 予選を復習: とりあえず Perl で 5万点とれました

あらすじ ISUCON6 の予選を復習しました。ベンチマークツールを localhost で実行しているので予選時とはまたちがった数値になっていると思いますので参考程度に考えて頂ければと思います。 ちなみに今回の予選では VM が SSD になっていて、そのため redis …

React Router で pagination

概要 ソースコード https://github.com/okamuuu/practice-react-pagination npm run build した後に npm start で server が起動するので http://localhost:3000 にアクセスしてください あらすじ サーバーサイドエンジニアが Admin 画面を SPA で作成するケ…

React + Redux + JWT tutorial(3)

前回は Redux の範疇である action と reducer を定義しました。 今回は React の処理を記述します。 create src/index.js: import React from 'react' import { render } from 'react-dom' import { createStore, applyMiddleware } from 'redux' import { …

React + Redux + JWT tutorial(2)

前回でサーバーを準備したので今回はフロント側を準備します。 準備 以下を参考に webpack 関係を準備します。 https://gist.github.com/okamuuu/831b03f1dee84dea8d3893b9c8afabe3 Frontend で実装する機能 Frontend で以下の機能を実装します。 /api/sessi…

React + Redux + JWT tutorial(1)

あらすじ SPA で認証機能を使いたいので練習します。 対象読者 redux の middleware について大体わかる JWT について大体わかる 大体わからない場合は以下をご一読下さい http://qiita.com/kuy/items/c6784fe443f1d5c7bbdc http://qiita.com/nabeliwo/items…

Redux.js を最速で試す(5)

前々回で redux となる actions, reducers を記述しました。 前回で react である components を記述しました。 今回はこれらをつなげる containers を記述していきます。 containers src/containers/MemoList.js: import { connect } from 'react-redux' im…

Redux.js を最速で試す(4)

前回の記事で action と reducers の記述方法を学びました。 ここでは components を定義します。 components は redux に無関係で純粋に react のみを使ってみます。 準備 npm install --save-dev jsdom react-addons-test-utils components create src/com…

Redux.js を最速で試す(3)

公式サイトのチュートリアルでは Todo App の Example が載っているのでそれを写経するのが良いのですがちょっと長いのでそれを短くした Memo アプリを紹介します。 準備 mkdir practice-react-redux && cd $_ mkdir src www test mkdir src/{actions,compon…

Redux.js を最速で試す(2)

前回の続きです。 http://okamuuu.hatenablog.com/entry/2016/10/06/160721 準備 create src/actions.js: /* * action types */ export const ADD_TODO = 'ADD_TODO' export const TOGGLE_TODO = 'TOGGLE_TODO' export const SET_VISIBILITY_FILTER = 'SET_V…

Redux.js を最速で試す

準備 mkdir practice-redux && cd $_ mkdir src www npm init -f npm install --save-dev webpack webpack-dev-server npm install --save-dev babel-core babel-loader babel-preset-es2015 npm install --save-dev babel-preset-stage-0 babel-polyfill np…