komagataのブログ

Rails Developers Meetup #6で交換型インターンシップについて発表しました。

Rails Developers Meetup #6 東京会場｜IT勉強会・セミナーなどのイベント情報検索サービス - TECH PLAY［テックプレイ］

交換型インターンシップ

もしインターンやってみたいなという方がいらっしゃったら下記から応募していただけるととてもうれしいです。

256 INTERNS

また、会社でインターンを受け入れて弊社のシステムで教育したいという方もいらっしゃったら連絡いただければ幸いです。

オフィスでいい感じだったので家でもPC用のデスクにイケアのLINNMONという横幅120cmの天板を使っています。

LINNMON テーブルトップ - ホワイト - IKEA

ただ、上記のように家の最近買ったディスプレイの足が低く、テーブルの上も手狭で気になっていました。

そんな時にネットで机上棚というものを見つけました。しかし、いかんせん高いし欲しいのともちょっと違ったので、

「自分で作ったら行けるんじゃない？」

と思って作ってみました。

あまり写真に変化がありませんが、テーブルの上に横幅の同じ棚が追加されたのがわかりますでしょうか？

これによってディスプレイの高さもちょうどよくなり、後ろにケーブルが出る系のものも隠す感じで繋げられるようになって机上のスペースが増えました。

このテーブルシェルフは近所のホームセンターでカットしてもらってネジで止めて、ミルクペイントのスノーホワイトを塗ってニスを塗りました。

足の部分を太くしたのはガッシリ感が出て良かったですが、ネジ穴はパテじゃなくてダボで埋めればよかったなと思います。今後に活かしましょう。

かかった値段は工具やペンキは余ってたのがあったので木とカット代で5000円ぐらいだったと思います。

なかなか満足度が高かったので色々作っていきたいです。

今までの流れはこうでした。

@machidaがslimでモックとして作る。
僕がjsにするためにhtmlに翻訳してfoo.vueに移す。

これがクッソ面倒だったのですが、pugならslimとほとんど同じなのでコピペでいけました。

$ yarn add pug

templateタグにlang="pug"を追加する。

app/javascripts/packs/components/foo.vue:

<template lang="pug">
  header.content
    h1 トップページ
</template>
<script>
いろいろ
</script>
<style>
いろいろ
</style>

「ヒューッ！」

webpackerの設定は一切無し。

RubyMineを使ってるなら、pugプラグインを入れればシンタックスハイライトもちゃんと動きますね。

Ruby - なぜ最終行に改行を入れるのですか？(71778)｜teratail

POSIX上、テキストファイルは「行」の集合体で、そして「行」は「0文字以上の文字+改行」からなっている、とのことです（Qiita）。

Rubyのコードでも、（よほど変なことをしない限り）それに従わない必要性のある理由もないことでしょう。C言語においても、改行で終わらないコードは正しく動くことが保証されません。

へぇ〜、やっぱ大事なんすねぇ〜。

create_join_tableでuuidを使う場合はどう書けばいいのか。

column_options: { type: :uuid }を使う。

class CreateJoinTableUserWork < ActiveRecord::Migration[5.1]
  def change
    create_join_table :users, :works, column_options: { type: :uuid } do |t|
      t.index [:user_id, :work_id]
      t.index [:work_id, :user_id]
    end
  end
end

現場からは以上です。

こちらについて、@tricknotesさんからズバリな回答をいただきました。

動的に増える要素へのイベント設定 | komagataのブログ

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

上記のようなHTMLでliが動的に増える場合、イベントのbubblingを利用して親の要素にイベントを設定しておいて下記のように捕まえればいいそうです。

const ul = document.querySelector("ul");
ul.addEventListener("click", (event) => {
  if (event.target.tagName === "LI") {
    console.log("FOO↑↑↑");
  }
});

これなら処理速度も安心ですね。

こういうやり方はEvent Delegationって呼ばれてるそうです。

スッキリしました！

webpackerのお陰で最近jsを書いてるんですが、初歩的なところで悩んでいます。

動的に増える要素へのイベント設定をjQueryを使わずに書きたい。

// jQuery版
$(".foo").on("click", () => {
  console.log("FOO↑↑↑");
})

// ES6版
const elements = document.querySelectorAll(".foo");
Array.from(elements, (element) => {
  element.addEventListener("click", () => {
    console.log("FOO↑↑↑");
  })
})

.fooなDOMがのちほどAjaxなどで動的に増えた時、jQuery版は動くけど、ES6版だと動かないじゃない？

下記のように書くというのをどこかで見たんですが、div全部取ってくるなんて遅そうで怖い。

const elements = document.getElementsByTagName("div");
Array.from(elements, (element) => {
  if (element.classList.contains(".foo")) {
    element.addEventListener("click", () => {
      console.log("FOO↑↑↑");
    })
  }
});

どう書くのが普通なんでしょう？

回答編：Event Delegationで動的に増える要素に対応する | komagataのブログ

皆様におかれましては、webpackerでのrubyとjsのインテグレーションが思いのほかうまくはまり、

「javascript_include_tag "application"外したい！」

などと言っている方も多いでしょう。俺もです。

rails-ujsからrails-ujs(npm)へ

これも皆そうだと思いますが、rails-ujsは「削除リンク」でしか使ってないけど、いつも使ってるので欲しい。

rail5.1からrails-ujsは単独reposからactionviewの中に入ったそうです。

rails-ujs(npm)を追加。

$ yarn add rails-ujs

app/javascripts/packs/rails-ujs.js作成。

import Rails from 'rails-ujs';
Rails.start();

app/javascripts/packs/application.jsに下記追加。

require("./rails-ujs.js");

turbolinksもnpmで（行けるなら）行きたいですね。

「知り合いの凄腕エンジニアに聞いたんだけど、/users/32ってURLにユーザー数が丸見えになってるって、このセキュリティーは流石にまずいよ、駒形さん」

みたいに言われることが稀によくあるので、idをuuidにしました。

postgresの設定

rails5からpostgresのuuidを生成する関数を簡単にidとして使えるようになってるそうです。 herokuのpostgresは対応してるのでいいかもです。

Macのbrewで入れたpostgresはデフォルト無効なので有効にしてあげる必要がありますが、superuserじゃないと駄目です。

postgres=# SELECT uuid_generate_v4();
ERROR:  function uuid_generate_v4() does not exist

↑関数がない。

デフォルト状態ならばsuperuserはpostgresかつパスワード無しなので、下記をやっといてくださいと各位に伝えます。

$ psql -d postgres -c 'CREATE EXTENSION IF NOT EXISTS "uuid-ossp";'

postgres=# SELECT uuid_generate_v4();
           uuid_generate_v4           
--------------------------------------
 06162241-ad98-4795-8bab-3801194f76d7
(1 row)

関数が有効になりました。

railsの設定

generatorがデフォルトでuuidを使うようにします。

# config/application.rb:
module Foo
  class Application < Rails::Application
    config.generators do |g|
      g.orm :active_record, primary_key_type: :uuid
    end
  end
end

こちらを参考にidのdefaultを設定する。

2 UUID Primary Keys

class PostProperties < ActiveRecord::Migration[5.1]
  def change
    create_table :posts, id: :uuid, default: "gen_random_uuid()" do |t|
      t.string :title
      t.text :description
      t.belongs_to :user, foreign_key: true, type: :uuid

      t.timestamps
    end
  end
end

foreign_keyを設定する時に、type: uuidを忘れないこと。

# SELECT id FROM users;
                  id                  
--------------------------------------
 75a61708-a959-5889-83cd-4d86df9cd771
 7c6b7130-3896-53a1-938d-2ab4364011d2
 f94db8c4-6786-5027-8d90-aa187594addb
 bafbab57-d268-548a-a111-11c13bbcbcc2
 2fc060cd-98d2-58d2-9b33-50f36df1fd8f
 8338b729-ff29-55d2-b5ba-6d68dbfc7b03
 917358a7-8995-5d88-b635-925e21841f68
 529aa2fb-93b3-5739-a8d4-64dd87ed08a9
 6ea9b086-d16b-5b02-81b6-97edb74f3dfb
 71f372c5-b0cc-5904-a583-921766bf4508
(10 rows)

ウェーイ。

おもてなし

何かと外見も重要な、出資を受けたスタートアップのサービスのアプリを開発する時にはさらっとやっておくとよいかもしれません。

下記でいつもやってるパンくずリストの表示方法についてご紹介しました。

いつもrailsで使ってるパンくずのコード - komagataのブログ

しかし弟が、

「ブログにかけるぐらい決まりきってるんだったらgemにすればいいじゃん。馬鹿なの？」

というのでgemにしました。

komagata/pankuzu: Generate breadcrumbs simply.

Dr. 林「まさかとは思いますが、この『弟』とは、あなたの想像上の存在にすぎないのではないでしょうか。」

使い方

ほとんど以前説明したままですが、

$ rails generate pankuzu:install

でapp/views/application/_breadcrumbs.html.erbを生成するようになっています。

最後のパンくずにもリンクを貼るようにしたのは、Googleが推奨してる方法がそうだからです。

microdataやjson+ld対応については僕が仕事でよくやるログイン必須サイトでは要らないし、上記テンプレを各自修正した方が楽だと思うのでやってません。

komagataのブログ

交換型インターンシップについて

イケアのテーブルに合うテーブルシェルフを作る

pug（旧jade）をwebpackerのvueで使う

なぜ最終行に改行が必要なのか

create_join_tableでuuid

Event Delegationで動的に増える要素に対応する

動的に増える要素へのイベント設定

rails-ujs選手、npm移籍へ

rails-ujsからrails-ujs(npm)へ

rails+postgresでidにuuidを使う

postgresの設定

railsの設定

おもてなし

面白くもない方法でパンくずリストを表示するgem、pankuzu

使い方