Vue.jsで旗揚げゲームを作ってみた

自分の傾向として写経ばっかりしがちなので、たまには自分で考えて作ってみようと思って作りました。

作ったものはこちら。

https://c5meg1012.github.io/vue-flag/

↓リポジトリ

https://github.com/c5meg1012/vue-flag

JavaScriptのフレームワークの話題でよく出てくる、

• componentをどう切るかが難しい
• データをどう持つかが難しい
• どこまで大きくなったらVuex（Redux）を入れれば良いのかが難しい

という感覚を、だいぶ理解できるようになったと共に、そのあたりの甘さが思いっきり出た感じになりました。。
Vuexを入れればApp.vueはほぼ表示に専念できるのかも、と思ったり。

あと、この手のJavaScriptはどうやってテストを書くのだろう、とも思ったり。
そもそも言語問わずテストの書き方自体をあまり知らないので、そこからなのですが。
メソッドの振る舞いを確認すればよいのかしら。これもちゃんと勉強しよう。

それから、デプロイ方法を探して悩みました。
github pagesは、masterブランチでなら/docs配下を公開できるようなんですが、パッと見gh-pagasブランチだとそれができなさそうなので…
herokuでもちょっとだけやってみたのですが、やはり/dist配下を公開するためのsubtree pushでエラーが出て詰まってしまいました(´・ω・｀)
ということで、結局まだデプロイはしていません。
お手軽な方法ないのかな。Firebaseがいいのかなぁ。うーん。

JavaScriptの師匠が欲しくなってきたので、いろいろコードリーディングしてみても良さそうです。

2017/07/17 22:28追記
→github pagesでデプロイできました！
gh-pagasブランチではビルドしたファイルだけにしてあとのファイルは全部消します。
ビルドしたファイルをdistの外に出して、distディレクトリも消して、
index.htmlやビルドしたjsファイルの中で、外部ファイル読んでるところのpathを調整してあげるとうまくいきました。
若干強引ではありますが(^^;)

手書き風アニメーションをIllustrator + SVGでつくった

デレステでSSRを引いたときのようなサインを書きたかったので、手書き風アニメーションを作りました。
デレステよりしょぼいシンプルですが、つくったのはこちらの冒頭です。

https://c5meg1012.github.io/

ベースはLIGさんの記事を参考にしました。

liginc.co.jp

1. Illustratorでサインを書く

自分はペンタブで書きました。
筆記体とかサインが上手く書けないので、ひらがなで雑に。

この時に「ブラシツール」を使うと縁取るパスになっちゃって、サインみたいにならないので注意してください。LIGさんのDEMOだと上半分のほうの感じになります。

http://liginc.co.jp/demo/2014/09/svg/

このDEMOの下半分のように、実際に一本の線を書いているみたいにしたい時は、「鉛筆ツール」を使えば、書いた通りのパスができます。

ブラシツールが赤いほうで、鉛筆ツールが黄色い方（長押しすると出ます）です。わかりづらい。

2. 変換ツールでjQueryのコードを生成する

lazylinepainter.info

下の方にドラッグ＆ドロップできるところがあるので、そこに作ったSVGをぽいっと入れます。
するとコードが生成されるので、保管しておきます。

var pathObj = {
    "meru5": {
        "strokepath": [
            {
                "path": "M91.2,54.4c1.5,38.7,13.6,76.9,34.5,109.5",
                "duration": 600
            },
            {
                "path": "M152.4,52.9c-1.1,21.8-3.4,44-12,64.1s-24.2,38.1-45,44.9c-3.5,1.2-7.4,2-10.9,0.7c-4.2-1.6-6.7-5.9-8-10.2  c-2.6-8.6-1.3-18.2,2.6-26.3s10.3-14.9,17.6-20.2c10.9-7.8,23.9-12.5,37.3-13.5c10.7-0.7,22,1.1,30.6,7.6c6.1,4.6,10.4,11.1,13.5,18  c3.5,7.9,5.6,16.6,5.1,25.2c-0.5,8.6-3.8,17.3-9.9,23.4c-3.7,3.7-8.5,6.5-13.8,6.7",
                "duration": 600
            },
            {
                "path": "M238.9,70.9c9-2,18.3-2.2,27.4-0.4c1.6,0.3,3.3,0.7,4.3,1.9c1.9,2.2,0.7,5.7-0.9,8.2c-3.8,5.7-9,10.4-14.4,14.6  c-10.2,8.1-21.1,15.2-32.6,21.3c15.4-11.2,37.3-12.3,53.8-2.9c4.4,2.5,8.6,6,10.4,10.7c3.1,8.2-1.8,17.3-7.7,23.8  c-4.3,4.8-9.2,9-14.6,12.5c-5.5,3.6-13.1,6.5-18.4,2.5c-3.9-2.9-4.8-8.7-3.1-13.2s5.7-7.9,10-10.1c5-2.6,10.9-3.9,16.2-2.3  c7.3,2.2,12.3,9.8,12.5,17.4c0,0.6-0.1,1.3-0.7,1.4s-0.5-1.1-0.1-0.8",
                "duration": 800
            },
            {
                "path": "M342.2,103.1c2.3-8,7.7-15.5,15.5-18.5c1.7-0.6,3.5-1,5.2-0.5c3.2,0.9,4.7,4.5,5.5,7.8  c2.2,9.2,1.8,18.9-1.2,27.9c6-6.6,13.3-12.8,22.1-13.9c8.8-1.1,19,5.3,18.7,14.2c-0.2,7.3-6.7,12.6-12.8,16.5  c-10.2,6.6-31.7,22.4-44.8,16.5c-7.1-3.3-7.4-12.6-8.4-19.3C340.6,123.8,339.3,113.1,342.2,103.1z",
                "duration": 600
            }
        ],
        "dimensions": {
            "width": 534,
            "height": 242
        }
    }
}; 
 
 
/* 
 Setup and Paint your lazyline! 
 */ 
 
 $(document).ready(function(){ 
 $('#meru5').lazylinepainter( 
 {
    "svgData": pathObj,
    "strokeWidth": 2,
    "strokeColor": "#e09b99"
}).lazylinepainter('paint'); 
 });

3. jQueryプラグインと生成したコードを読み込む

こいつがjQueryプラグインだったせいでVue.jsをあきらめました（笑）。
で、ちょっとお試し程度だったら

lazylinepainter.info

ここの上の「DOWNLOAD FROM GITHUB」から落として、jQuery読み込みの後に直接読み込めばいいんですが、npmを使わないのはちょっと自分のポリシーに反するので、npmでいけないか探してみました。

www.npmjs.com

あったぞ。

あとはnpmでjqueryを読み込んだあとに

$ npm install lazy-line-painter

で

require('lazy-line-painter');

すればいける…？ と思ったのですが、

global.jQuery = require('jquery');

これをしないとjQueryプラグインのほうが動かなかった…うわ…
もっといい方法があったら教えてください。
というか、プラグインが古いのよね。最終コミット2年前だしね。

gulp + babel + browserify + scssで、ちょっとモダンなフロントエンドの練習をした

現在、熱血高校吹奏楽部のWebをリニューアルしているので、せっかくだからモダンなフロントエンドが書きたいと思ってやってみた。

Webのちょっとしたアニメーションなので、サクッとできるかなと思ったけど、やっぱりいつもと違うと慣れなくて、けっこう戸惑った。 慣れなかった主な点は以下。

• gulpのセッティング

• ES2015のimport記法

• ES2015のクラス記法

gulpのセッティング

webpackにしなかったのは、なんとなくで出来るようにはなりたくなかったから。 雑だけど、以下のような感じ。

"use strict";

const gulp = require('gulp');

// コンパイルエラーでgulpが落ちないようにするやつ
// http://blog.webcreativepark.net/2014/05/14-112523.html
const plumber = require('gulp-plumber');

const sass = require('gulp-sass');

// レスポンシブのCSSがラクに書けるようになるやつ 
// http://qiita.com/kyaido/items/828906ffa7198e99d0b7
const combineMq = require('gulp-combine-mq');

// *.jsって書き方ができるようになるやつ
// http://qiita.com/tonkotsuboy_com/items/67d9fd4d054a45af9f34
const sassGlob = require("gulp-sass-glob");

// babel
const babelify = require('babelify');

// browserify
const browserify = require('browserify');
const source = require('vinyl-source-stream');

// ESLintがこけたらデスクトップ通知を出してくれるやつ
const notify = require('gulp-notify');

const eslint = require('gulp-eslint');


gulp.task('sass', function() {
  gulp.src('src/scss/style.scss')
  .pipe(sassGlob())
  .pipe(sass({
    outputStyle: 'expanded'
  })).on('error', sass.logError)
  .pipe(combineMq({
        beautify: true
    }))
    .pipe(gulp.dest('css'));
});

gulp.task('browserify', function () {
  return browserify('./src/js/main.js')
    .transform(babelify, {presets: ['es2015']})
    .bundle()
    .on('error', function(err){
        console.log(err.message);
        console.log(err.stack);
    })
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('./js/'));
});

gulp.task('lint', function(){
    return gulp.src('./src/js/*.js')
        .pipe(plumber({
            errorHandler: notify.onError('Error: <%= error.message %>')
        }))
        .pipe(eslint({useEslintrc: true}))
        .pipe(eslint.format())
        .pipe(eslint.failOnError())
        .pipe(plumber.stop());
});

gulp.task('watch', ['sass'], function () {
  gulp.watch('src/scss/**/*.scss', ['sass']);
  gulp.watch('src/js/**/*.js', ['browserify']);
});

ES2015のimport記法

requireはNode.js、importはES2015の記法なんだそうな。 http://sakamock.hatenablog.com/entry/2016/02/03/091623

ES2015でimportを書くと、babelでrequireになって、browserifyで依存解決される、ということらしい。

importとrequireでは、exportする記法も異なるので注意。 http://qiita.com/rooooomania/items/4c999d93ae745e9d8657

// slider.js

'use strict';

export default class slider {
    //hogehoge
}

// main.js
import slider from './slider.js';

new slider();

ES2015のクラス記法

中のメソッドをどう使っていくかはまだまだ勉強が必要そう。

// slide_menu.js

'use strict';

// jqueryをnpmで入れてます
import $ from 'jquery'

class slideMenu {
  constructor () {
    this.menuButton = $("#js_menu_button");
    // hogehoge
  }

  hoge () {
    // hogehoge
  }  
}

webのちょっとしたアニメーションって、文字通り「振る舞う」から、JavaScriptでオブジェクトの振る舞いを考えられるのはおもしろかった。 会社でcoffeeを書くときも、もうちょっとオブジェクトの振る舞いとか、関数で振る舞いを定義していく感覚を意識していこうと思う。

commitしたら写真を撮られてSlackにアップされるスクリプトを作った

写真はMacBookの画面の上についてるカメラで撮られます。

commitしたら写真を撮られるところまでは旦那さんからPHPスクリプトをもらってたんですが、そこから先、撮った写真がSlackにアップされるスクリプトを書けと言われました。

自分はちょっと前まではPHP書くことも（ただしド素人レベルで）あったのですが、最近はほとんどPHPを書かないので、pre-commitにRubyで書けないかとググってみたんですが、自分の環境（zsh + rbenv）だと一筋縄ではいかないようでした。
あと、ググってもRailsのgemの記事ばかりで、Rubyのスクリプトはちょっとしか出てこなかったです(´・ω・｀)
まあ途中までPHPで書かれているので、PHPのほうが撮影したファイルを扱いやすいかな、ということでPHPで手段をさがすことにしました。

commitしたら写真を撮られてSlackにアップされるって、どんなプレイだよというツッコミを心のなかでしつつ、ちょっと調べてみたら
https://api.slack.com/methods/files.upload
これがイケそうだというのと、
file_get_contentsでファイルをPOSTできそうだということが分かりました。

なんとかAPIからレスポンスが返ってくる状態にはできたのですが、
invalid_args_name
が解決できず。

ちょっと調べると、file_get_contentsだとinvalid_args_nameでできなかったけど、curlだとできたよ、という記事が出てきました（URL載せようと思って探したけど見つからない…）
なのでcurlでやり直してみたんですが、いかんせんcurlのお作法がわからず苦労しました。

結局一週間くらい泣きながらやってみてもできなくって、深夜に旦那さんにきいてもますますわからない事を言われて余計にヒステリックになる始末でした。
そんな中、今朝、旦那さんから「これは？」と言われた記事を参考にして、ようやくできました。

www.mrwhal3.com

うまくいかなかった原因はふたつあって、ひとつは、
PHP5.6からファイルの取り扱い方が変更になったため、
$file = new CurlFile('filename.png', 'image/png');
という感じでCurlFileを使わないといけないということ。

もうひとつは、先述の通り、curlでPOSTするお作法が全然わからなかったということでした。
SlackのAPIや、ググッて日本語ですく出て来る記事には、getでテキストファイルなどを送る方法がメインで書いてあったので、そっちにとらわれてしまっていたり、curlで検索してもいろいろ出すぎてよくわからなかったり…という感じでした。
curlでPOSTするお作法については、分かったら色々便利そうだなぁという感じなので、もうちょっと詳しくなりたいです。詳しい人教えて下さい(´・ω・｀)

実際に動かしたスクリプトは以下です。
.git/hooks/pre-commitに書く場合は最初にPHPのPATHをかきましょう。

#!/usr/bin/php
<?php

// ディレクトリは好きなところに
$dir = '/Users/meg/.gitshots/'.date('Y/m/d');
$file = date('His').'.jpg';

if (false === is_dir($dir)) {
    echo "Create directory {$dir}\n";
    mkdir($dir,0777,true);
}

echo "Taking capture into {$dir}/{$file} \n";

pclose(popen("imagesnap -q -w 3 {$dir}/{$file} &> /dev/null &", 'r'));

// ここでsleepしないと画像ファイルが生成される前にスクリプトが動いちゃうので
// ファイルがありませんというエラーが出ちゃいます
sleep(5);

//ここはSlackAPIで各自取得してください
$slacktoken = "xxx-xxx-xxxx";
$channelId = 'xxxxxxx';

$header = array();
$header[] = 'Content-Type: multipart/form-data';
$file = new CurlFile("{$dir}/{$file}", 'image/jpg');

$postitems =  array(
    'token' => $slacktoken,
    'channels' => $channelId,
    'file' =>  $file,
    'text' => "コミットしました",
    'title' => "コミットしました",
    'filename' => date('Y/m/d').".jpg"
);
    
$curl = curl_init();
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
curl_setopt($curl, CURLOPT_URL, "https://slack.com/api/files.upload");
curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS,$postitems);

$data = curl_exec($curl);
echo 'RETURN:'.$data;
curl_close($curl);

iSightのあるMacBookなら brew install imagesnap をした後に実行すれば動くと思います。

ということで、現在、コミットすると夫婦Slackに自分の写真が送られます…
うまくいって嬉しいけど、複雑なキモチ(´・ω・｀)

Apple Watchを買ってみた

自分が買ったのはこれです。

Apple Watch series 2 (38 mm)

www.apple.com

アルミニウムのスポーツタイプ、一番安いタイプです。

よかったこと

動いた量に気を使うようになった

「アクティビティ」という機能で「ムーブ」「エクササイズ」「スタンド」の量を毎日計測してくれます。
座り仕事なので、よく「そろそろスタンドの時間です！」と、一旦立つように通知が来ます。

ねこあつめ再開した

くっそかわええ。それだけ。

操作はほとんどできないぽい？

駅locky

利用駅を登録しておくと、次の電車が来るまでの時間が分かるようになります。
せっかちなのでありがたい機能ですｗ

防水

いままで防水の時計にまったく興味なかったのですが、手を洗ったり、家事をするときに外さなくていいのが便利です。料理しながらsiriでタイマーできるのがとてもよいです。

macのロック自動解除

そんなに変わらないだろうと思ったんですが、仕事上、毎日何回もやることだからとてもラクになりました。

通知やタイマーが無音でリアルタイムに受け取れる

iPhoneにしてもガラケーにしても、着信音ありでもバイブにしても、まわりに音が聞こえちゃうのがすごく嫌なので無音バイブなしにしているのですが、それだと電話取れなかったり、メッセージに気づかなかったり、ということがあります。
Apple Watch は軽いバイブで通知してくれるのですが、腕につけているので基本音がしないんです。これが一番うれしい！

ビミョウなこと

おしゃれなベルトが高い

と思ったらメルカリに結構あったｗ

ゴツい

つけてる違和感というか、重みみたいなものはずっとありますね。。

それでも、損したな、と思ったことは今のところないです。
むしろ生き物みたいでかわいい。そんな感じです。
6月末まで、分割払い24回までは金利ゼロなので、みんな買えばいいと思うよ。

「情熱プログラマー ーソフトウェア開発者の幸せな生き方ー」を読んだ

自分にとって目新しいことはそんなに書いてなかったのですが、2つほど印象に残った章があったので、メモがてら書きます。

「一番の下手くそでいよう」

ここに書いてあったこと、まるで自分のクラリネットのようでした。

作者の方もサックスプレイヤーだったそうで、上手い人に誘われて、上手い団体にどんどん入れてもらったら、自分も上手くなっていった、、というようなことが書いてありました。わたしもそうだったな。 なぜかお声がけをいただいて、うっかり参加したらみんな上手すぎて、ついていくぞー！と練習して…を繰り返していたら、ここまできました。 この辺の経歴はそのうちどこかで演奏動画と一緒にまとめて見られるようにしたいな、と考えています。

なんであれ、一緒にやる人のレベルってきっとすごく大事で、わたしはひとりではダメダメなやつなので、すごい人達に引っ張られていくのが一番成長への近道なんだと思います。他力本願だと言われることもありますが…。そう思って、今の会社にきました。まだまだエンジニアとしては「一番の下手くそ」です(´・ω・｀)

「リーダーが自分の名前を知っているからといって自分の能力も理解されていると思っちゃいけない」

リーダーだけではなくて、周りの人に自分の能力をちゃんと伝えよう、ということでした。 たしかにそうで、優秀であることとそれが相手に伝わっていることは全く別の問題だし、相手が優秀であるからといって自分の力がどれくらいか分かるのかというと、そうでもないんだと思います。

アウトプットというのは、自分の能力を伝えるという意味もあるんだなぁ、と思いました。 よくよく考えれば当たり前のことなんですが、なんだか刺さりました。

Slackでちょっとだけたのしくなった話

五反田でお世話になっている@MiryGoAroundさんが、社内でSlack博士になっているというお話を以前に聞いたり、こういうエントリを書かれていたりしました。

mirygoaround.hatenablog.com

そのときは、
「まあ、弊社はみんなSlack詳しいから不要なんだろうな〜」
と思っていたのですが、その後、

「あの小さい絵文字のやつ（Reaction）、どうやってやるんですか？」

「途中で改行ってどうやってやるんですか？ Enter押したら送信されちゃって…」

「アイコンってどうやって変えるんですか？」

と、言う声がちらほら。

わたしが参加していないchannel（営業さんやライターさんのchannel）を見ると、
ひたすら文字だけだったり、改行が全く無かったり…ちょ、怖いっす…

と、いうことで、
esaにSlackのちょっとしたことをまとめてみました。

• Reactionのしかた
• 絵文字のつかいかた
• 途中で改行する方法
• アイコンの変更方法

などなど。

こんな感じ。

基本的だけど非エンジニアにはちょっとハードルがあるらしい使い方を、
画像を使いながら簡単に書いておきました。

すると、不思議とSlackでの会話量が増えたり

Reactionも増えたり

感謝されたり（笑）しましたｗ

なんというか、
「自分の知っていることはみんな知ってるんじゃないか」
と、いつも思っていたのですが（おそらく旦那さんがそうだからなんですが…）
意外とそうでもなくて、自分の知っていることを求めている人もいるんだな〜と思えてきて、 最近やっとアウトプットする意味や楽しさを、徐々に理解してきたところです。

LINE Bot や Amazon Dash Button で遊んでいた

ちょっと前に流行ったけど、余裕がなくて手を出せなかったので、今ごろになって遊びました。
だいぶ参考記事が出揃っていたので、やりやすかったです。

LINE Bot

ゴールデンウィークに山手線沿いを内回りで、五反田から高田馬場まで歩いたのですが、そのときに@polidogがLINE Botで、2割の確率で電車が出るくじ引きを作りました。
コードも一通り見せてもらったのですが、なんか面白そうだったので、わたしもサーバルちゃんBotを作りたいと思ったのがきっかけです。

で、共有してもらったコードを参考にNode.jsで作ってたのですが、わたしNode.js使ったことなくて、そりゃ当たり前なんですが全然動きませんでした。
何回herokuにデプロイしても、herokuのlogを見た時点で503エラー。もうどうしたらいいかわからーん！ と、ガチで凹みました。

翌日、普段から使っているRailsに切り替えることに。
メインで参考にしたのは

qiita.com

バグ修正で参考にしたのは

qiita.com

です。

基本、前者の記事のとおりに進めれば大丈夫なのですが、時々コメントアウトが// コメントアウトになっているので、注意して適宜# コメントアウトに置き換えるか、消してしまうかしてください。

前者の記事のとおりに進めたら、$ git push heroku masterでデプロイに失敗すると思います。
Gemfileのgem 'sqlite3'を削除して、

group :development do
  # Access an IRB console on exception pages or by using <%= console %> in views
  gem 'web-console', '~> 2.0'
  gem 'sqlite3', '1.3.13'　　# ココに追記

また、同じくGemfileで

group :production do
  gem 'rails_12factor'
  gem 'pg'　　# ココに追記
end

あとは$ bundle installした後に再度$ git push heroku masterします。 heroku logs -tで問題なくrailsが動いているようであれば、LINEの管理画面でwebhookのテストをした後、botを友だち登録して、声をかけてみましょう。
オウム返ししてくれると思います。

さくっと動かしたかったので、そのまま動かしてしまいましたが、いろんなSDKがあるので、こっちの方がコード見やすくなりそうだなーと思いました。
Node.jsちゃんと使えるようになったら、公式のSDKでもっかいやってみよ。

github.com

もちろんRubyもあった。

github.com

Amazon Dash Button

こちらは比較的簡単でした。

Amazon Dash Button を購入し、以下を参考にしてセットアップをします。

qiita.com

あとは以下の通りです。

qiita.com

どちらも同じwifiの中でやらないとたぶんダメだと思います。

旦那が基本、玄関と違うフロアでヘッドホン付けながら仕事しているので、『ただいまボタン』にできるかなーと思ったのですが、サーバー置かないといけないし、だいぶタイムラグやブレがあったので、実用はきつそうだな、という所感でした。

kindleでJavaScriptを勉強した

モダンでプレーンなJavaScriptを勉強した〜い！

ということで、kindleで2冊読みました。

• 「何となくJavaScriptを書いていた人が一歩先に進むための本」

• 「JavaScriptの理解を深めた人がさらにもう一歩先に進むための本」

どこでおすすめされたのか忘れてしまいましたが、思い出すためにググッてみると、やはり評判がよい感じですね。かゆいところに手が届くという感じです。

いままで分からなかったことがとてもわかりやすく書かれていたので、プレーンでなくてもモダンなJavaScriptを勉強/コードリーディングするときに、大いに知識が役立っています。

「何となくJavaScriptを書いていた人が一歩先に進むための本」では、半分近くが基礎的な文法のおさらいになってしまうのですが、その後にしっかり

• JavaScriptにおけるオブジェクトの基礎
• JavaScriptにおける関数の基礎（スコープやクロージャもココ）

の説明がされて、

• プロトタイプ
• ES6

についても、比較的サクッと説明されます。

「JavaScriptの理解を深めた人がさらにもう一歩先に進むための本」では、

• “use strict” で変わること
• いろんなthis
• ES6におけるネイティブオブジェクト
• イテレータ
• 関数（巻き上げ、コンストラクタ、オーバーロード、getter/setter）
• プロパティと属性
• オブジェクトの制御
• JavaScriptにおけるクラス

が書かれていました。

電子書籍でそんなにボリュームのある本でもないですし、こうやって挙げてみると軽そうに見えるのですが、いきなりオライリーとか読んだら挫折しそうな予感しかしなかったので、気軽に読めてレベル感の合う技術書があってよかったな、と思いました〜。

hamlで、シンボル(&:hoge)使ってねっていうエラーでハマった - Class: RuboCop::Cop::Style::SymbolProc

初歩的なことでちょっとだけハマったのでメモ。

Rails + haml の開発中

- cats.each do |cat|
    = cat.name

がrubocopでこけた。

Class: RuboCop::Cop::Style::SymbolProc — Documentation for rubocop (0.47.1)

(&:name)←こういうのがまだちょっと使いこなせてないので調べる。

qiita.com

なるほど。

まあとりあえず言われた通り直してみるか。

= cats.each(&:name)

オブジェクトになっちゃって想定通り出力できない。

= cats.map(&:name)

うーんちょっとちがう。

とりあえず、

- cats.each do |cat|
    %span= cat.name

で逃げてみた。

うーん、ゼッタイもっときれいになるよなぁ、と思ったんだけど、

= cats.map(&:name).join(" ")

joinすればよかったのでした。反省。