これは、私の行動指針2016

行動指針 Advent Calendar 2016」の1日目の記事です。

アドベントカレンダーをつくってみました。
自戒の重いも込めて、私の行動指針をちょっと書いてみようと思います。
(※エンジニアリングのコンテクストに寄りがちかもしれません)

決めつけない

  • 自分のやり方や、相手のやり方がいいとかダメとかを決めつけない
  • 自分にとって良いものだったらなんでもどんどん取り込んでいく

常にちょっとだけ考えておく

  • うまくいかないこと、興味のあることとかを常にちょっとだけ考えておく
  • ふとした瞬間によい解決策やアイディアがうまれることがある
  • ちょっとだけっていうところがミソかもしれない

飽きる前にやりきる

  • 飽きる前にある程度やりきってなにかにまとめるとか何かしらの形にする
  • これができるとグッと習得度が増す
  • (よしやるぞー意気揚々とはじめたことも、ちょっと時間が空いたりして全くやらなくなることがよくある)

迷ったら、ワクワクする方を選ぶ

  • 選択を迫られたときは、ワクワクする方を選ぶ
  • 困難でもワクワクする方

きっと言霊

  • 宣言することは意外に大事(かも)
  • 自分のなりたいイメージとかを言葉で表現するとその方向に向いていく(はず)

箇条書きで、思ったことガッと書いてみました。
意識++ でいきたいと思います!


明日は、

おつくつん (@otukutun) | Twitter さんです。たのしみたのしみ。 まだまだ、このアドベントカレンダーの空きたくさんあるので是非是非ご参加を〜。

www.adventar.org

今年もあと1ヶ月、がんばりましょー。ではでは。

React on Rails で hello world してみる

お久しぶりです。

最近は、Vue.js を触っていましたが React.js というやつも触れてみたかったのでやってみました。

今回は環境を作って、hello world をするところまでです。

やりたいことリスト

  • React を使う(Rails の中で)
  • ES6 も使う(JSXも触ってみたい)
  • Sprockets でコンパイルする
  • npm で JSライブラリを管理する

Gem 追加

Sprockets で ES6 もいい感じにコンパイルしてもらうために、browserify-rails という gem を追加します。

Gemfile

gem 'browserify-rails'

config/application.rb

config.browserify_rails.commandline_options = '-t babelify --extensions .es6'

npm (package.json) の準備

{
  "name": "react_on_rails",
  "dependencies": {
    "babelify": "^6.4.0",
    "browserify": "^13.1.1",
    "browserify-incremental": "^3.1.1",
    "react": "^15.3.2",
    "react-dom": "^15.3.2"
  },
  "license": "MIT",
  "engines": {
    "node": ">= 0.10"
  }
}

※最新版の babelify(7.3.0) では、うまく動かなかったので 6.4.0 のバージョンを指定

$ npm install

土台つくる 

 

$ bin/rails g controller pages top

修正していく

config/route.rb

Rails.application.routes.draw do
  root to: 'pages#top'

  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

app/controllers/pages_controller.rb

class PagesController < ApplicationController
end

app/views/pages/top.html.erb

<div id="target"></div>

app/assets/javascripts/application.js

window.onload = function() {
  require('./top.es6');
};

app/assets/javascripts/top.es6

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
  <div>hello world</div>,
  document.getElementById('target')
)

起動

$ bin/rails s

トップ画面で、hello world が表示されてること確認できました。

ログをみると開発環境では、初回のロード時に babelify してくれてるのがわかります。

Browserify: /Users/7kaji/Dev/rr/node_modules/.bin/browserifyinc -t babelify --extensions .es6 --list --cachefile=/Users/7kaji/Dev/rr/tmp/cache/browserify-rails/browserifyinc-cache.json -o "/Users/7kaji/Dev/rr/tmp/cache/browserify-rails/output20161025-72290-1too9up" -
Browserify: /Users/7kaji/Dev/rr/node_modules/.bin/browserifyinc -t babelify --extensions .es6 --cachefile=/Users/7kajiDev/rr/tmp/cache/browserify-rails/browserifyinc-cache.json -o "/Users/7kaji/Dev/rr/tmp/cache/browserify-rails/output20161025-72290-28pg6y" -
Completed 200 OK in 3598ms (Views: 3590.3ms | ActiveRecord: 0.0ms) 

今後

Sprockets4 では、 ES6、npm もサポートされるような話なのでもっと簡単に JS周りの整備できそうです。 界隈では、Sprockets は捨てられがちですが v4 がでれば解決することも多くありそうですね。

NPM support: Add support for resolving main from npm's package.json by guilleiguaran · Pull Request #405 · rails/sprockets · GitHub

github.com

REF

ppworks.hatenablog.jp

ppworks さんの記事をほぼほぼコピペさせていただきましたmm

ボタンを買った。

f:id:whitech0c0late:20160213150522j:plain:w200

flic という、ワイヤレススマートボタンを買った。
1つのボタンに対して、3つまでスマホの操作を割り当てることができる。

下の動画をみるとなんとなく感じは、伝わると思う。

自分は、hue の操作、iTunes の操作などに割り当てている。
ボタンは、壁に貼り付けたり、クリップを付けてかばんに取り付けることもできるので超絶便利。また、IFTTTと連携したり、ボタンを押下時には、任意のURI にHTTPのリクエストを送ることも可能なので、いろいろできそう。

f:id:whitech0c0late:20160213153001p:plain:w200

似たようなもので、

の、ようなものがあるので注目してみてる。