今までの流れはこうでした。
これがクッソ面倒だったのですが、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↑↑↑");
})
}
});
どう書くのが普通なんでしょう？
皆様におかれましては、webpackerでのrubyとjsのインテグレーションが思いのほかうまくはまり、
「javascript_include_tag "application"外したい！」
などと言っている方も多いでしょう。俺もです。
これも皆そうだと思いますが、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にしました。
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)
関数が有効になりました。
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を設定する。
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対応については僕が仕事でよくやるログイン必須サイトでは要らないし、上記テンプレを各自修正した方が楽だと思うのでやってません。
好みのgemが無いのでいつも書いてるヤツをご紹介します。gemにすると仰々しくなりそうでしない。
例えば、
トップページ > ブランド一覧 > ブランド個別 > モデル個別 > グレード個別
のような構造になってる車のサイトのグレード個別ページの場合。
indexやshowのviewの上の方に書く。（設定ファイルやcontrollerに書くやり方は好かん）
リンク文字とURLをadd_breadcrumbする。
- add_breadcrumb "全てのブランド", brands_path
- add_breadcrumb @grade.model.brand.name, @grade.model.brand
- add_breadcrumb @grade.model.name, @grade.model
- add_breadcrumb @grade.name, @grade
（ビューの色々）
最後のパンくずはリンク無しになります。
トップページはいつもHOMEかつroot_pathなので決め打ちです。
見た目はこんな感じになります。
HTMLはこんな感じになります。
<ol class="breadcrumbs">
<li class="breadcrumb"><a href="/">HOME</a></li>
<li class="breadcrumb"><a href="/brands">全てのブランド</a></li>
<li class="breadcrumb"><a href="/brands/455594730">メルセデス・ベンツ</a></li>
<li class="breadcrumb"><a href="/models/64350864">Aクラス</a></li>
<li class="breadcrumb">A 180</li>
</ol>
実装は下記2ファイルです。いつもこれを前のプロジェクトからコピーしてます。
パーシャルファイルのマークアップは毎プロジェクト変わりますが、helperの方はずいぶん前から変わってない。
# app/helpers/breadcrumbs_helper.rb:
module BreadcrumbsHelper
def add_breadcrumb(name, path)
unless @_breadcrumbs
@_breadcrumbs = [OpenStruct.new(name: "HOME", path: root_path)]
end
if @_breadcrumbs
@_breadcrumbs << OpenStruct.new(name: name, path: path)
end
end
def breadcrumbs
@_breadcrumbs
end
end
# app/views/application/_breadcrumbs.html.slim:
- if breadcrumbs.present?
ol.breadcrumbs
- breadcrumbs.each do |breadcrumb|
li.breadcrumb
- if breadcrumbs.last != breadcrumb
= link_to breadcrumb.name, breadcrumb.path
- else
= breadcrumb.name
意識低い感じですが、僕としては以前はパンくずごときでイライラしてたのでこのゆるい実装が心地よいです。
webpacker3系はでかいメリットがあるんですが、yarn 0.25.2以上じゃないと動きません。
herokuのruby buildpackは0.22.0固定なのでこちらのPRを出してる方のreposを使いましょう。
$ heroku buildpacks:set https://github.com/rcugut/heroku-buildpack-ruby#yarn-version-update
$ heroku buildpacks:remove heroku/ruby
マージされたらデフォルトのに戻しましょう。