= render @posts

を省略しないで書くヤツ、毎回忘れてググるので貼っておきます。

= render partial: "posts/post", collection: @posts, as: :post

これが便利なシチュエーションは、@postsにPost以外のものが入ってるけど、viewとしはposts/postで出したいという時。

例えばPostをSTIしてUnpublishedPostというクラスがある場合にunpublished_posts/unpublished_post.html.slimを見に行かないようにするとか。

インターンの方の日報をチェックしてコメントするのが日課(仕事)なのですが、今まで、

「チェックしてないやつはどれかな?」

と探し回らなくてはいけなくて、さらに、

「チェックが漏れてる人がいたら申し訳ないな」

と思っていたのが、確認済みのものにチェックマークが入るようになってクッソ便利になった。

https://gyazo.com/001f153392848d27e6a0165d2571fbd2

他に人にはどうでもいいかもしれないけど、僕にとっては日課がはかどるライフチェンジングな追加機能でした。

あざーす!

256 INTERNS

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

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

交換型インターンシップ

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

256 INTERNS

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

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

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

https://gyazo.com/ae0e3e6c263ac13e87644e13215905e2

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

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

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

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

https://gyazo.com/4f93ec736a5386ba0da1068eb5259d29

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

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

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

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

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

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

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

  1. @machidaがslimでモックとして作る。
  2. 僕が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>

https://gyazo.com/749f392120b56c47372ffa524b5f06b1

「ヒューッ!」

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のブログ

https://gyazo.com/aeb80b0b5ead1d5f03500d65ce5e165b

<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で(行けるなら)行きたいですね。