Subscribed unsubscribe Subscribe Subscribe

Kunibiki.rb #3に参加したヘ(^o^)ノ

kunibikirb.connpass.com

発表内容

Railsアプリ開発者のためのDocker入門 by セラリンさん

slides.com

rails + reactでアプリ作成 by 吉岡さん

React, Vue.jsなどフロント回りのお話でしたー

参考資料

qiita.com

めんどくさがりの僕はフロントエンドとバックエンドを分けて運用もシンプルにしたい!ってお話をした by ぼく

Ideal Frontend and Rails App

TDDBC Toyamaに参加してきたー by えびちゃん

tddbc.connpass.com

参考資料

www.slideshare.net

松江オープンソースラボ

f:id:murajun1978:20170408124820j:plain:w300

f:id:murajun1978:20170408151128j:plain:w300

懇親会

f:id:murajun1978:20170408180952j:plain:w300

f:id:murajun1978:20170408181115j:plain:w300

Rubyやフロントエンド、Dockerなど面白いお話が沢山できましたー

懇親会も美味しいお魚とお酒が最高だったよ

ローカルネタなど楽しかったなー

また機会があれば参加しますん(^^)

Ruby Kaigi 2017でまたお会いしましょうー

rubykaigi.org

I love CODE ヘ(^o^)ノ

Tmuxを使ってプロジェクトの開発環境をいっぱつで起動するヘ(^o^)ノ

一つのプロジェクトで複数のタブを開いて作業したりしませんか?

Rubyのアプリケーションであれば foreman を使ったりするかもしれませんが、、

Shinosaka.rbで今回のテーマにぴったりなプロジェクトがあるのでそいつを使って試してみます。

github.com

まずは セッションを作成してみましょう。

$ echo "SESSION_NAME=tebukuro" >> bin/tmux_launch.sh
$ echo "tmux new-session -d -s \$SESSION_NAME" >> bin/tmux_launch.sh

実行権限をつけてあげます。

$ chmod u+x bin/tmux_launch.sh

スクリプトを実行してattachしてみましょう

$ sh bin/tmux_launch.sh
$ tmux attach -t tebukuro

tebukuroというsessionにattachできました。

exit で tumuxを閉じましょう。

tebukuroは同じリポジトリにbackend(rails)とfrontend(Koa)が混在してます。

server という名前のwindowを作成し、スプリットしたwindow上で実行してみましょう。

windowを作成します。

$ echo "tmux new-window -t \$SESSION_NAME -n 'server'" >> bin/tmux_launch.sh

作成したwindow上でRailsを起動してみます。

$ echo "tmux send-keys 'bundle; bin/rake db:migrate; bin/rails s' C-m" >> bin/tmux_launch.sh
$ sh bin/tmux_launch.sh
$ tmux attach -t tebukuro

Railsが無事起動しました。

次はfrontendですがwindowをスプリットしてKoaを起動してみましょう。

$ echo "tmux split-window -h" >> bin/tmux_launch.sh
$ echo "tmux send-keys 'yarn; yarn start' C-m" >> bin/tmux_launch.sh
$ sh bin/tmux_launch.sh
$ tmux attach -t tebukuro

Koaも起動しました。

最後にattachも追加しましょう。

$ echo "tmux attach -t \$SESSION_NAME"

せっかくなのでこの修正をPRしました。(mergeされるかどうかわかりませんが、、)

github.com

Happy Hacking٩( ‘ω’ )و

Destructuring Object in ES6

often use

const props = {
  label: 'label',
  text: 'text'
}

const { label, text } = props

console.log(label) #=> 'label'
console.log(text) #=> 'text'

default value

const props = {
  label: 'label'
}

const { label, text = 'text' } = props

console.log(label) #=> 'label'
console.log(text) #=> 'text'

alias

const props = {
  label: 'label',
  text: 'text'
}

const { label: l, text: t } = props

console.log(l) #=> 'label'
console.log(t) #=> 'text'

others

const props = {
  label: 'label',
  text: 'text',
  required: true,
  visible: true
}

const { label, text, options } = props

console.log(label) #=> 'label'
console.log(text) #=> 'text'
console.log(options) #=> {required: true, visible: true}

Happy Hacking٩( ‘ω’ )و

Jestでcontextを使うヘ(^o^)ノ

Environment

Jest 18.1.0

Jestでは context が使えません、、

github.com

なので、使えるようにしてみましょう。

とはいっても、contextはdescribeのエイリアスです。

global変数を定義してみましょうヘ(^o^)ノ

// setupTestFramework.js
global.context = describe

このsetupファイルをテストを実行前にloadします

// package.json
"jest": {
  "setupTestFrameworkScriptFile": "./setupTestFramework"
}
// App.spec.js
import React from 'react'
import renderer from 'react-test-renderer'

import App from '../../client/components/App'

describe('<App />', () => {
  let tree

  context("when naem is 'Jest'", () => {
    const component = renderer.create(
      <App name='Jest' />
    )

    it("should display 'Hello Jest'", () => {
      tree = component.toJSON()
      expect(tree).toMatchSnapshot()
    })
  })
})
$ yarn test

 PASS  __tests__/components/App.spec.js
  <App />
    when naem is 'Jest'
      ✓ should display 'Hello Jest' (4ms)
    when naem is 'React'
      ✓ should display 'Hello Jest' (1ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   2 passed, 2 total
Time:        1.164s
Ran all test suites.

contextが使えるようになりましたー

Happy Hacking٩( ‘ω’ )و

Rails5でActiveSupport::PerThreadRegistryがdeprecatedになったよヘ(^o^)ノ

ちょっと今更ですが、Rails5でActiveSupport::PerThreadRegistryがdeprecatedになった。

ActiveSupport::PerThreadRegistryを使ったほうがイイ理由は遠い昔に書いたブログを参照してね。 murajun1978.hatenadiary.com

ActiveSupport::PerThreadRegistryにも書いてある、、

NOTE: This approach has been deprecated for end-user code in favor of thread_mattr_accessor and friends. Please use that approach instead.

thread_mattr_accessor を使えと

# ActiveSupport::PerThreadRegistry
class RuntimeRegistry
  extend ActiveSupport::PerThreadRegistry

  attr_accessor :api_runtime
end

# thread_mattr_accessor
class RuntimeRegistry
  thread_mattr_accessor :api_runtime
end

シンプルでいい感じヽ(´▽`)/

こういうのは都度対応しておかないと、バージョンアップの時にツラくなるのでサッと修正した方がいいね。

Happy Hacking٩( ‘ω’ )و

フロント用にサクッとAPIのレスポンスを用意するヘ(^o^)ノ

Mock API response with json-server

github.com

Create sample data with Faker.js

github.com

Sample code

github.com

Setup

$ git clone git@github.com:murajun1978/faker-sample.git
$ cd faker-sample 
$ npm install

Start server

$ npm start faker.js

Getting data

$ curl http://localhost:3000/users
[
  {
    "id": 1,
    "name": "Hayden Larkin"
  },
  {
    "id": 2,
    "name": "Mckayla Feest"
  },
  {
    "id": 3,
    "name": "Rowan Schmeler"
  },
  {
    "id": 4,
    "name": "Cyril Grimes"
  },
  {
    "id": 5,
    "name": "Melisa Cremin"
  },
  {
    "id": 6,
    "name": "Deja Corkery II"
  },
  {
    "id": 7,
    "name": "Rod D'Amore"
  },
  {
    "id": 8,
    "name": "Allan Green"
  },
  {
    "id": 9,
    "name": "Jarrod Schoen II"
  },
  {
    "id": 10,
    "name": "Giuseppe Olson"
  }
]

Faker.js

module.exports = function() {
  var faker = require('faker')

  return {
    users: Array.from(Array(10), (_, i) => {
      return {
        id: i + 1,
        name: faker.name.findName()
      }
    })
  }
}

Happy Hacking٩( ‘ω’ )و

n でNode.jsのバージョンを管理する ヘ(^o^)ノ

github.com

Installation

$ git clone git@github.com:tj/n.git
$ cd n && make install

Usage

Installed versions

$ n

Install latest version

$ n latest

Install/Activating versions

$ n 6.3.0

Available list

$ n ls

Remove version

$ n rm 6.3.0

io.js

$ n io [command]