とにかく簡単!JSフレームワークのStimulusを既存のRailsアプリに入れてみた

自作のRailsWebサービス短歌投稿サイトUtakataにJSフレームワークを入れたいと思って、当初はVue.jsを検討していたけれど、SPA的なものをやろうとすると既存コードを全面的に書き換えねばならず*1、限られたプライベートの時間で行う趣味の開発で対応するには無理があるのではという感触があった。

困って会社のエンジニアに相談したところ、Railsの生みの親のDHHがCTOを務めるBasecampが開発したというStimulusを紹介してくれた。これを試してみたら予想以上に簡単に既存のRailsアプリに取り込めたので、導入方法と簡単な使用例を書いてみたい。

既存のRailsアプリにStimulusを導入する

yarnのインストール

上掲URLを参考にして、webpacker で使用する yarn(JavaScriptのパッケージマネジャー)をインストールする。

私のMacの環境では、Homebrewでインストールし、

$ brew install yarn

.bash_profileにパスを通した。

export PATH="$PATH:/opt/yarn-[version]/bin"

webpackerのインストール

gem 'webpacker'

Gemfileに記述し、

$ bundle install

し、gemがインストールされたら、

$ rails webpacker:install 

を実行する。

Stimulusの導入

$ rails webpacker:install:stimulus 

を実行する。

app/javascript/packs/application.js:

そうすると、上掲のようなファイルが自動で作成されるので、<%= javascript_pack_tag 'application' %>app/views/layouts/application.html.erbのheadタグ内に追加する。

これでもう開発の準備が整った。環境構築に手間取らずにすぐに開発に取り組めるのは本当にありがたい。

簡単な使用例 -フォームの入力内容をリアルタイムに別の領域に表示する-

短歌投稿サイトUtakataには、投稿画面でフォームの入力内容を縦書きプレビューする機能がjQueryで実装されていたけれど、それをStimulusで書き換えてみた。説明のため実際のコードを一部簡略化して紹介したい。

app/views/posts/new.html.erb:

app/javascript/controllers/post_controllers.js:

たったこれだけで、フォームの入力内容をリアルタイムに表示する機能ができた。

  • data-controller:controller名を指定する
  • data-target:操作したい要素を指名する(controller.targetの形式)
  • data-action:イベントと起動するメソッド名を指定する(event->contoroller#methodの形式)

この3つを指定するだけで基本的な操作はサクサク書けそうだ。

参考情報その1 -jQueryで書いた場合-

app/views/posts/new.html.erb:

正直これだけなら大差ないけれど、より複雑な処理を追加した場合に可読性やメンテナンス性、書きやすさ等に差がついて来ると思われる。

参考情報その2 -Herokuにデプロイする-

デプロイする前に下記のコマンドを実行する必要がある。

$ heroku buildpacks:clear
$ heroku buildpacks:set heroku/nodejs
$ heroku buildpacks:add heroku/ruby

Stimulusのメリットまとめ

  • 簡単に導入できて簡単に使える
  • turbolinksに対応していてRailsとの相性がバッチリ
    • 本格的なSPA設計の手間を省きつつSPAライクなWebサービスを手軽に開発できる
  • (特にStimulusの機能という訳ではないが)ES2015(ES6)以降のJavaScriptで書ける

小規模なRailsプロダクトに導入して強化版jQueryのような使い方ができそう。

参考記事

Stimulus Reference: Controllers

公式リファレンス。他のメジャーなJSフレームワークのリファレンスと比べると極めて簡素な章立てで、短時間で全容を把握することができる。

Vue.jsの導入記事だけれど、共通点が多くて参考になった。

↓その他、Stimulusについての興味深い情報が紹介されている記事。

*1:2018/11/19追記:このVue.jsの理解は怪しいという指摘をブコメでいただいた。 http://b.hatena.ne.jp/entry/374217143/comment/Chinosoko

古典的カードゲーム"Love Letter"のスマホアプリ版でオンライン対戦が熱い -攻略情報あり-

f:id:fuyu77:20181028211216j:plain

"Love Letter"というカードゲームのスマホアプリ版を世界ランク3位になるまでやり込んで面白かったので、オススメポイントと攻略情報を書きたい。

上掲リンク先のブログに詳しく紹介されているので、私が感じる魅力を簡単にまとめると下記のようになる。

  • ガチャ要素なし、毎回同じ16枚のカードを使う硬派な対戦カードゲーム
  • 相手の手持ちカードを推理する読み合いが肝のシンプルなゲーム性で、対戦が盛り上がる
  • 初心者でもカードの引きが良ければ熟練者に勝てるくらい運要素が強い(イメージとしてはトランプの「大富豪」と同程度に運要素が強い)
  • 2〜4人で遊べる
  • 操作性が良く、カードの残り枚数を簡単に把握できるUIで、ゲーム展開をテンポ良く楽しめる(ゲームアプリとしての完成度が高い)
  • サクサクマッチングする全世界オンライン対戦(ただし過疎)
  • プライベートマッチ機能で身内と対戦できる(普通のオンラインマッチも過疎ってるのでわざわざプライベートルーム作らなくても身内で戦えたりする)
  • やり込んでいる人が少ないのですぐにランキング上位になれる

これらの要素にピンと来たらぜひインストールしてみて欲しい。

各カードの特徴

このゲームは運要素が強いけれど、カードの性質を理解していないとなかなか勝てない程度には実力要素もある。そこで、各カードの特徴を簡単に紹介したい。

ラブレター (Love Letter) カードゲーム

ラブレター (Love Letter) カードゲーム

上掲記事で写真付きで紹介されている、日本版のリアルのカードゲームではカードの名称と7番カードの効果が異なるけれど、この記事ではアプリ版に準拠する。印象としては、日本版名称はドラクエのようなJRPGのイメージで、アプリ版(英語版)はリアルの宮廷のイメージのように感じる。

余談だけれど、プレイしていてゲームコンセプトの「ラブレターをお姫様に運ぶ」という雰囲気は私はあまり感じられなかった。普通に宮廷の闘争をシミュレートしていると考えた方がしっくり来る気がする。

1. 衛兵 Guard*1

f:id:fuyu77:20181028215414j:plain

  • 全カード16枚中5枚を占める頻出カード
  • スコア最弱ながら、相手のカードを当てれば即座に勝利という強性能
  • 手持ちが衛兵の場合、男爵打たれるかカードが尽きるか以外に負けが無いので守備力も高い
  • 如何にこのカードで相手を刺し、自分は刺されないかがこのゲームの基本的な読み合いとなる
  • 使い方としては、少しでも当たる確率が高そうなカードを狙うと良い

2. 僧侶 Priest*2

f:id:fuyu77:20181028220528j:plain

  • 相手の手札を見てプレッシャーをかけられる
  • 相手が男爵、王、姫を持っている場合は、勝利に直結する一手になる可能性も
  • ただし、上記の場合もただちに勝利確定とはならないので、相手の対処の余地が残るという点で速効性には欠ける
  • ほとんどのシーンで気軽に使って問題ないが、衛兵や王子で高確率の勝利の筋がある場合はそちらを優先した方が良い

3. 男爵 Baron*3

f:id:fuyu77:20181028221701j:plain

  • 即座に勝負を決するハイリスクハイリターンなカード
  • 16枚中2枚あり、男爵を持っている状態は衛兵に比較的狙われ安い
  • 3人以上の状況では、男爵で勝ってもその後に衛兵で狙われるリスクが高まる
  • 目安としては、もう一枚の手持ちが女中以上の状況で積極的に狙っていきたい(読みの状況によって、柔軟に判断が求められる局面もある)

4. 女中 Handmaid*4

f:id:fuyu77:20181028222820j:plain

  • 1ターン無敵で一方的に相手にリスクを負わせる強カード
  • 相手が王子、姫の組み合わせの場合は即座に勝利確定
  • 次のターンに相手が出すカードによってかなり読みの精度が高まる
  • 3人以上の対戦では更に効果的になる
  • 持っていたら取り敢えず使うくらいのノリで良い

5. 王子 Prince*5

f:id:fuyu77:20181028223300j:plain

  • 器用貧乏な老け顔王子
  • 相手が姫を持っている場合に相手に使えば勝利確定
  • 王子を持っている状態は衛兵に狙われやすい
  • 王子を相手に使った後の状態は手札を読まれやすい(姫、王を持っている可能性が高い)
  • 姫を狙う場合は、衛兵よりも王子を優先した方が良いかも
  • 相手が女中を使った場合に、自分の手札を流して一旦仕切り直す使い方も

6. 王 King*6

f:id:fuyu77:20181028225615j:plain

  • 有効に使えるシーンが限定的でハイリスクなカード
  • 基本的に衛兵で当てられる確率は低めで、コストが高いので男爵対策として持って置くのは有効
  • 3人以上で自分から一番ターンが遠い人に姫を渡す以外に安定する使い方がない
  • 王子で流したり、女中バリアに当てたり、安全に捨てられるシーンでは積極的に手放してしまうのもアリか

7. 伯爵夫人 Countess*7

f:id:fuyu77:20181028231339j:plain

  • 王子、王、姫とセットの状態で必ず出さないといけない
  • このカードが出される状況は、上記3枚のカードが手元にある可能性が高いため、自分が出す状況はピンチ、相手が出す状況はチャンスとなる
  • 衛兵で狙われにくく、男爵対策として強い
  • 非強制の状況で敢えて出し、相手を欺く使用法もあるけれど、上記の強みもあるので、必ずしも効果的でない(女中バリアに当てるシーンでは良さそう)

8. 姫 Princess

f:id:fuyu77:20181028232833j:plain

  • 持っていることを読まれやすく、衛兵、王子で狙われやすいハイリスクなカード
  • 男爵との組み合わせで勝利確定
  • 最終盤では王子や王の効果と関連して、姫の取り合いが熱くなる

*1:日本版では兵士 Soldier

*2:日本版では道化 Clown

*3:日本版では騎士 Knight

*4:日本版では僧侶 Priestess

*5:日本版では魔術師 Wizard

*6:日本版では将軍 General

*7:日本版では大臣 Minister。大臣は王子以上のカードとセットで敗北決定というよりハイリスクな効果になっている。個人的な印象としては伯爵夫人の方がゲームバランスが落ち着くと思う。王子と王と愛人関係にあり、宮廷の影の実力者として君臨していることを伺わせる英語版の雰囲気作りは面白い。

「普通の人たちと異常な自分」という自意識からの解放-『ダルちゃん』完結に寄せて-

*1

『ダルちゃん』が完結した。リアルタイムで読んでいた身としては感慨深いものがあるので、感想を書いておきたいと思う。

f:id:fuyu77:20181014192538p:plain

第49話でヒロセと別れてから3話で完結までの流れがやや性急に過ぎた印象もあるけれど、最終話の上の台詞には納得できるものがあった。

異常なのは自分だけではないという気づき

f:id:fuyu77:20181014195133p:plain

『ダルちゃん』では、普通の人に擬態しているときのダルちゃんと、「ダルダル星人」状態の素のダルちゃん*2(アメーバ的な姿で表現される)が視覚的に分かりやすく表現され、「普通の人たち」に馴染めない自分の異常性との向き合い方が作品のテーマとしてあったと思う。

作品のほとんどの部分を通してダルダル星人はダルちゃん一人だったけれど、第44話でサトウさんの恋人(後の夫)のコウダが「ダルダル星人」モードで表現され、ダルちゃんにとって初めて自分以外にもダルダル星人がいることが認識される。第45話のコウダの「普通の人なんて この世に一人もいないんだよ ただの一人も いないんだよ 存在しないまぼろしを 幸福の鍵だなんて思ってはいけないよ」という言葉はダルちゃんの世界観を崩壊させるほどの衝撃を与えた。更に、第50話のサトウさんとコウダの結婚式ではより多くの人がダルダル星人として表現される(コウダ曰く「大丈夫だよこんなやつ 意外にいっぱいそのへんにいるんだから」)。そして更に時が経ち、第51話で出版社に転職したダルちゃんの職場の描写では、ダルダル星人モードの社員ばかりの環境の中でダルちゃんは「しっかりした人」扱いされ、逆に少数派となった通常人間モードで描かれている*3。このことから、ダルダル星人かどうかというのは、客観的な事実ではなく、ダルちゃんの自意識の段階によって変化して把握されるということが分かると思う。

それが最終話の、「素の自分も悪くないって思えると擬態も苦痛じゃないっていうか 擬態している姿も私自身なんだなって思えるというか…」という台詞につながる。これはダルちゃんの中で、自分の個性を発揮する部分はプライベートに確保しつつ、職場では適度にキリッと擬態しているくらいのバランスに納得できるようになったということだと想像する。

この最終話のダルちゃんの安定感の背景には、ダルダル星人は自分だけではなく、一人一人個性的な人間がいるのだというような、他者への信頼感が持てるようになったことがあるのではないか。

自意識に閉じた状態は人を傷つける

対して、ヒロセと詩作について揉めた時期のダルちゃんは、この他者の個性を受容できる段階になかった。

プライベートをネタにした詩作云々については、そもそもが大した問題ではなかったはずなのだ。作中の詩の世界が今の日本のリアルの詩の世界と同じようなものだと仮定するならば、そもそも自由詩などはコアなファン層しか読まないマニアックな存在で、会社の人たちに読まれてあることないこと詮索されるというヒロセの心配は杞憂に近いように思われた。

第48話でヒロセが「僕は弱い僕はどうしても 自分自身のコンプレックスに打ち勝つことができない」と述べているように、ヒロセにも人の目を気にして擬態するダルダル星人的な部分があった。しかし、異常なのは自分だけだという自意識に閉じ籠もるダルちゃんはヒロセの弱さに寄り添うことができなかった。

f:id:fuyu77:20181014210203j:plain

ダルちゃん自身がこう述べているように、このときはまだ、人と向き合う前に自らの自意識を何とかしないといけない段階にあったのだと思う。

最終話段階でのダルちゃんが当時と同じ問題に遭遇したとしたら、ヒロセの悩みに寄り添いつつも、詩作の自由も確保するような良いバランスのコミュニケーションができたのではないだろうか。

自分自身を振り返ってみて

私も中学生になった辺りから周囲に「変わってる」とか「何を考えているか分からない」と思われることについて自意識の葛藤があったけれど、数年前、妻と付き合い始めたことをきっかけとして、今ではこの問題から概ね卒業することができた。

簡単に言ってしまうと、コウダのように、余裕ある様子で堂々としていれば大体の問題は解決される。自分の人生を振り返ってみると、社会の常識とズレていることそのものよりも、「普通の人と自分はズレている」と思い込むことによって萎縮したり、自分と同様に個性的な他者の有り様が見えないことの方がより重大な人間関係の齟齬を生み出すと感じている。

ただ、自意識の問題が解決されても、環境の問題はやはり大きい。世の中には、人の個性を強く抑え込む環境が多く存在するのも事実だ。その点、ダルちゃんがダルダル星人ばかりの職場に転職して心の安寧を得ている点にも示唆深いものがあると思う。

*1:2018/11/13追記。期間限定で『ダルちゃん』最終52話が公開されていたページがリンク切れとなったので、はてブページに差し替えた。

*2:第2話の幼少期のダルちゃんの描写を見るとADHDっぽさもあるけれど、私は詳しくないので発達障害の観点はこの記事では扱わない。

*3:職場でダルダルしているのが男性だけで、ダルちゃんが通常人間モードで描かれている点について、性差別の示唆があるという指摘(https://twitter.com/kumo_inferno/status/1047889792732524544など)がある。重要な問題だが、非当事者という難しさもあり、この記事ではこの観点は扱わない。

甲状腺機能亢進症と情緒不安定

先日この話題についてウケを狙った煽り気味の記事を書いてしまい削除したけれど、知見自体は共有に値するものだと思われるので、無駄な自意識による装飾を抜いて簡潔に書き記しておく。

甲状腺疾患患者、特に活発すぎる甲状腺のある人は気分屋で、不安になったり、怒ったり、いらいらするようになることが多いのです。そして、多くは配偶者の行動を歪んで認識します。残念なことに、配偶者はどうしてそのような変化が生じたかわからないことがあります。要求の変化に対処できないことやコミュニケーションをとるのが難しいことから、誤解や誤った期待、そして些細なことでの口喧嘩などを伴う混乱状態を招くことがあります。そして、多くの人にとってはその関係が重荷になります。

ほとんどの場合、罹患した人の性格は驚く程変ります。甲状腺の病気に罹っている人はある程度自分の苦しみを隠す能力はあるのですが、病気のためにすぐに行動や言葉に著しい変化が現れるので、他の人は簡単にその変化に気がつきます。その変化の原因が突き止められない限り(すなわち、甲状腺の病気がまだ診断されていない)、その夫婦は自分達の問題の元を突き止めることができません。夫婦関係はこの期間の長さに応じて悪影響を受けますが、それは何ヶ月あるいは何年も続くことがあります。

妻が比較的症状の重い甲状腺機能亢進症であることは把握していたけれど、(当事者の妻でさえも*1)最近まで甲状腺機能亢進症が情緒不安定と関連があるという認識がなかった。この認識がないことによって本来回避できたはずの不和が発生するということはあると思う(逆に言えば、この知見によって救われることも)。

妻の場合は、終わりのない治療に嫌気がさして数年前に通院をやめたのが症状の悪化を招いた。私も病院は嫌いなので気持ちは分かるけれど、やはり継続的な治療が重要らしい。気のせいかも知れないけれど、少し薬を飲んだだけで既に情緒面に劇的な安定が見られている気がする。

*1:2018/9/30追記。妻は甲状腺機能亢進症と情緒不安定の関係を以前から知っていたけれど、それが自分の情緒不安定の原因だという確信が持てなかったため最近まで私には伝えなかったらしい(知っていたなら、もっと早く教えて欲しかった…)。

VSCodeでファイルを開いた際のタブ上書きの設定をいい感じにする

デフォルト設定のVSCodeで新しくファイルを開くと、既存のタブに上書きされてしまう問題は、上掲の記事を見て解決できたけれど、今度は語句検索やGitの差分をチェックするときなどに消えて欲しいタブが大量に出現してしまい厄介に感じていた。

f:id:fuyu77:20180912102850p:plain

1つのタブでファイルをちら見するPreview機能周りの設定を見てみたら、上の画像のように、Enable Previewをオンにしたままで、Enable Preview From Quick Openをオフにすると、Quick Open(⌘P)でファイルを開いた際は新しいタブに表示され、その他のシーンではプレビューモード(タブが増えない)となり、快適になった。

USキーボードでCapsLockキーを使って日本語入力切替する

はてぶトップにUSキーボードの記事が上がっていた。

私は7月に就職した職場でUSキーボードのMacBook Proを支給されて、USキーボード使用歴1か月程度になる。上の記事に、

「人間の高い順応性によって、慣れが解決してくれる」というのが私の感想です。

とあるように、慣れれば特に使いづらいこともなく、見た目もスタイリッシュで好ましいというのが素朴な印象だ。

ただ、1点だけ、日本語入力切替をするのに、デフォルトではCtrl + Spaceを打たなければならないことに若干のストレスがあった。

今日Macのシステム環境設定を覗いてみたら、この問題には簡単な解決方法があることが分かったので、紹介したい。

f:id:fuyu77:20180824150934p:plain

システム環境設定>キーボード>入力ソース>Caps Lockの動作>オフの時「英字」を入力

とすると、CapsLockキーのワンタッチで日本語入力が切り替えられるようになった。

CapsLockキーのランプが緑に光って、「日本語入力モード起動…!」というような趣があり、気持ち的に昂揚感があるし、今の入力モードが一目で分かるという利点もあって、ただショートカットキーを設定する以上のユーザー体験の向上があると感じている。

リモートワークがすごすぎた

昨日から都内のスタートアップ(BtoCの自社サービスを開発している会社)でエンジニア(プログラマ)として勤務している。開発の業務は未経験なので、まったく新しい分野に挑戦する気分だ。

昨日はエラーと闘いながら開発環境を構築していた。帰り際に上司に声をかけられる。

「エンジニアは明日は誰もいないけど、環くんはどうする?」
「どうすると言うと?」
「明日はリモートで働いて良いよ」
「明日から良いんですか!?」

ということで、今日は入社2日目にして自宅から勤務した。実際にリモートワークを試してみて、事前に想像した以上の素晴らしさに感動している。

リモートワークの良いところ

朝が楽

朝の時間の余裕がすごい。今日は仕事まではてブで記事を巡回しながらまったり過ごしていた。

前職は遅刻に非常に厳しく、東海道線の遅延の可能性に毎日怯えながら始業前から凄まじいストレスを感じていたので、リラックスして仕事を始められることがありがたく感じる。

昼休みに家の用事ができる

今日は昼休みにゆうちょの印鑑を変更するために郵便局に行って来た。

勤務地で昼休みがあっても昼食を食べる以外に特にできることもないけれど、リモートならちょっとした家事など色々とできることがありそうだと思った。

仕事後に余裕がある

前職では、1日の勤務のストレスで疲れ果てて、「はぁー、瞬間移動して家に帰れたらなあ…」と毎日嘆いたものだけれど、リモートワークなら、必然的に仕事が終わったら既に家にいることになる。この時間的・身体的・精神的余裕はすごい。こんな風に仕事後にサクッとブログ記事を書くこともできる。

その他

今日はSlackのリモートで画面を操作できる機能を使って、ペアプログラミングのような形で上司に色々と教えて貰った。画面を共有するだけでなく操作までできるとは驚いた。昨日の段階では、「何も分からない初心者なのにいきなり家に放置されて大丈夫なのか…」と思っていたけれど、まったく不都合なく仕事することができた。