上京 part2

した。

f:id:whitech0c0late:20170401123559j:plain

とりあえず、インターネットとベットが欲しい。

よろしくお願いします。

www.amazon.co.jp

合わせて読みたい

whitech0c0late.hatenablog.com

whitech0c0late.hatenablog.com

チョット気になったRFC

Markdown

RFC 7763 - The text/markdown Media Type

RFC 7764 - Guidance on Markdown: Design Philosophies, Stability Strategies, and Select Registrations

HTTP APIs

RFC 7807 - Problem Details for HTTP APIs

REF

高い!いや、それより...はやい!!

桜木みたいですごい。

NBAさん(@nba)が投稿した動画 -

REF

f:id:whitech0c0late:20161203164619j:plain

これは、私の行動指針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