Getting started with Mastodon ヘ(^o^)ノ
Today, I attended this event.
But I failed to setup Mastodon.
The reason for the failure was a bug in cld3-ruby.
Fortunately this bug was fixed.
Setup for macOS
$ gem install foreman $ brew install protobuf redis $ git clone git@github.com:tootsuite/mastodon.git $ cd mastodon $ bundle install --with development $ yarn install --pure-lockfile $ bundle exec rails db:setup $ redis-server /usr/local/etc/redis.conf $ foreman start
Enjoy Mastodon ٩( ‘ω’ )و
Kunibiki.rb #3に参加したヘ(^o^)ノ
発表内容
Railsアプリ開発者のためのDocker入門 by セラリンさん
rails + reactでアプリ作成 by 吉岡さん
React, Vue.jsなどフロント回りのお話でしたー
参考資料
めんどくさがりの僕はフロントエンドとバックエンドを分けて運用もシンプルにしたい!ってお話をした by ぼく
TDDBC Toyamaに参加してきたー by えびちゃん
参考資料
松江オープンソースラボ
懇親会
Rubyやフロントエンド、Dockerなど面白いお話が沢山できましたー
懇親会も美味しいお魚とお酒が最高だったよ
ローカルネタなど楽しかったなー
また機会があれば参加しますん(^^)
Ruby Kaigi 2017でまたお会いしましょうー
I love CODE ヘ(^o^)ノ
Tmuxを使ってプロジェクトの開発環境をいっぱつで起動するヘ(^o^)ノ
一つのプロジェクトで複数のタブを開いて作業したりしませんか?
Rubyのアプリケーションであれば foreman を使ったりするかもしれませんが、、
Shinosaka.rbで今回のテーマにぴったりなプロジェクトがあるのでそいつを使って試してみます。
まずは セッションを作成してみましょう。
$ 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されるかどうかわかりませんが、、)
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
が使えません、、
なので、使えるようにしてみましょう。
とはいっても、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
Create sample data with Faker.js
Sample code
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٩( ‘ω’ )و