komagataのブログ

RailsGirls Tokyo 9thにコーチとして参加させていただきました。

また、スポンサーにもなったのでスポンサーLTでフィヨルドブートキャンプの紹介もさせてもらいました。

スポンサーLTや一般LTはRailsGirlsから興味をもってプログラマーを目指してる人、または既にプログラマーになった人が、

「すごい面白いからお前らもやろうぜ」

という内容が多くて、既にプログラマーである僕でも、

「へぇ〜、プログラマーって良さそうねぇ」

と思ってしまいました。

また、@a_matsuda さんの文字通りのすばらしい話もあり、全体がしまりましたね 😁

プログラミングに興味を持ってもらう方法

コーチとして参加して、もっとわかりやすく教えるにはどうしたらいいか、という点も気になりましたが、RailsGirlsはプログラミングを単に教えるというより、プログラミングの楽しさを知ってもらって興味を持ってもらうのが目的だと思います。

何をやってもらったら一番、「プログラミングって面白い」って思ってもらえるんだろう？

ひいては「プログラミングの面白さって何？」というところが気になりました。

いろんなプログラマーの皆さんに聞いてみたいですね。

参加者・参加目的

参加されてる方は下記のような人が多かったです。

• プログラマーの求人をしてる会社の人事の人がプログラマーをよく知るために。
• 今の会社が退屈過ぎてプログラマーに転職したい。
• プログラミングで困ってるWebデザイナー。
• 会社でプログラマーになれと言われたけど聞く人がいない。
• リモートワークなど、プログラマーの自由な働き方が気になってる。

会場がSpeeeさんで、オシャクソラウンジだったので良さ出てましたね。

改善したい点

Railsアプリをいきなり作るので当然なんですが、

「全然わからないことに対するストレスがある」

という感想を聞いたので、「Rails Moreで聞けるよ」だけでなく、

「あなたがわからないのはどこですか？皆さん疑問に思われる点はだいたい下記の5点です。それぞれはこれを読むことでわかるようになりますよ」

ぐらいの道筋を示せるとその編のストレスが軽減されるのかなと思ったので、今後参加するならばその辺りの資料を作ったりしたいなと思います。

Fjord Boot CampでRails入門終わったぐらいの人のために、普通どんな感じでrailsで開発していくのかをペアプロ感覚で何を考えているか喋りながら１機能作ってみる動画を作りました。

適当にググりながら作っていく感じとか、間違っているときどうしてるのかの雰囲気が伝わればいいなと思います。

rubyでいえばGemfileに

gem "foo", path: "~/foo"

みたいに書くヤツ。

npm linkを使う

いい感じにシンボリックリンクを貼ってくれるnpm linkを使うと良い。

npmモジュール側のディレクトリで下記。

$ npm link

利用側のディレクトリで下記。

$ npm link foo

モジュールが完成したら、下記で解除。

$ npm unlink foo

webpackerでrailsプロジェクトでもjsの再利用が進んだのでgemに負けじと活用したいです。

= render @posts

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

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

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

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

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

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>

「ヒューッ！」

webpackerの設定は一切無し。

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

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

現場からは以上です。

皆様におかれましては、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対応については僕が仕事でよくやるログイン必須サイトでは要らないし、上記テンプレを各自修正した方が楽だと思うのでやってません。

好みの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

使用感

意識低い感じですが、僕としては以前はパンくずごときでイライラしてたのでこのゆるい実装が心地よいです。