addEventListener() のリスナーでreturn falseしてもイベントはキャンセルできない

JavaScript 
Target.addEventListener('submit', function(){
  // 処理
  return false
});

↑みたいなコードを書いてもsubmitイベントはキャンセルできない。
jQueryのリスナーであれば、return falseでキャンセルできる。↓(イベントのキャンセルおよびイベント伝搬が停止する)

.on() | jQuery API Documentation

Returning false from an event handler will automatically call event.stopPropagation() and event.preventDefault().

なのでaddEventListener()を使う時は、

Target.addEventListener('submit', function(event){
  // イベント伝搬の停止
  event.stopPropagation();
  // イベントキャンセル
  event.preventDefault();
});

で、jQueryのリスナーでreturn falseした場合と同じ挙動になる。

jQuery使ってる人ほど引っかかりそう。
(return falseすればキャンセルできるんだーくらいの理解度だったので引っかかった)

Ruby技術者認定試験Silver 合格しました

Ruby

84点で合格しました。
90点くらい取れてるかなーと思ってたのでちょっとショック。
例外とFileの扱い、演算子の優先順あたりで点を落としたのかなーと思ってます。

ちなみに私のプログラミング歴は１年程度で、Rubyは１年弱ほど業務で扱っています。
Silverを受けた感想としては、1年弱Ruby使ってたけどなにも知らなかったなーと。
一応、今回Silver試験の勉強をしたことである程度の知識は得られたかなと思ってます。もちろんまだまだ知らないことだらけですが。

テキスト

gihyo.jp 通読を3回くらい。後は問題解いてる時にリファレンス的にぺらぺらめくる程度。
旧版では誤植が多いという話でしたが、二版のSilverの範囲では些細な誤植しか見当たりませんでした。

正規表現はテキストだけではちょっとわからなかったため、@jnchito さんのQiita記事を参考にしました。

qiita.com

問題集

参考書とgithubに公開されてる問題はミスが無くなるまで繰り返して、RExでは90点以上が安定するまで解き続けました。
あと、動作がよくわかってないメソッドについてはRuby2.1の環境をVagrant上に作って、2.1のリファレンス見ながら実行したりしてました。

例題と似てる問題がかなり出るので、参考書を通読するより、ひたすら問題を解き続けてれば効率よく受かりそう。
（私はダラダラやってたのでだいぶかかりました…）

組み込みライブラリに関しては破壊的・非破壊的、レシーバーの返り値、String, Array, Hashに複数存在する同名メソッドの
挙動を抑えておけば問題ないと思います。
File,IOクラスはIO#seekのwhenceとか、openのパーミッションあたりとか。

参考になった記事

Ruby その他 まとめ

ruby-style-guide

英語
github.com

日本語
github.com

半年ほどRubocop使ってるので、6ヶ月間このスタイルに沿って書いている事になる。（最初はガンガン指摘されてた…）
ちょこちょこ読んでるけどこの書き方badなんだーとかこれgoodなんだーとか思ったり。

後、cookpadでもスタイルガイドが公開されてる。
こっちは読んでなかったんだけども、この前上司がオススメしてたので読んだ。
(短いから読むのもそんなに時間もかからなかったし、記憶力無いからちょくちょく参考に読むつもり)

初心者歓迎！手と目で覚える正規表現入門・その１「さまざまな形式の電話番号を検索しよう」

qiita.com

タイトルの通り、初めて正規表現に触れる人にわかりやすく丁寧に、順序立って書かれてる。
この記事を書いてるJunichi Itoさんはプロを目指す人のためのRuby入門という本を書かれていて、それ経由でこの記事の存在を知った。*1

新人プログラマに知ってもらいたいメソッドを読みやすく維持するいくつかの原則

qiita.com

もう２年目なので新人じゃなくなったけど、ぼけっとすると途端に雑になるマンなので意識していきたい。

【Ruby】よく使うFileクラスを使ったファイル読み込み処理

qiita.com

仕事でファイル読み込み処理を書いたので。
他の人はどんな風に書くんだろーと気になる質なので調べたところこの記事がヒット。
へ～こんな書き方あるんや～ってなった。(感想)

Chromeをvimライクに使えるようにするvimium

qiita.com

同僚が教えてくれた。
気に入って職場と自宅両方インストール済。ありがとう。

*1:正規表現の章で、全く知らない人向けに参考文献としてこのQiita記事が挙げられている

メモ：`%`がRackに渡されるとInvalid query parameters: invalid %-encoding が発生する

その他

?hoge=%　とか　?%=hoge、?%
と渡すと上記のエラーが起きる。
Railsで作られてるサイトにパーセントを渡すと400になるので、Railsを使ってるサイトの判別に使えるかも。

Sinatra ルーティングとかテンプレートとか

Ruby

Sinatra: README (Japanese)

ルーティング

複数のマッチングパターンに同じ処理を設定したい時

  • 配列にパターンを渡して回す
['/article/:num', '/article/entry/:num'].each do |path|
  get path do
    # 処理
  end
end
  • 手続きオブジェクトを渡す
article = lambda do
  # 処理
end
get '/article/:num',  &article
get '/article/entry/:num', &article

POSTも実装したい時はpost 'hoge', &fuga

ビュー/テンプレート

一部の処理が同一で、渡すテンプレートが一緒の場合
（似たような画面を量産する時など）

get '/hoge' do
  # 処理
  # /fugaと重複する処理
  erb :piyo   # views/piyo.erbを渡す
end

get '/fuga' do
  # 処理
  # /hogeと重複する処理
  erb :piyo   # /hogeと同じくviews/piyo.erbを渡す
end

こういう時には、

# どこかに定義
def piyopiyo
  # 重複する処理
  erb :piyo
end

get '/hoge' do
  # 処理
  piyopiyo
end

get '/fuga' do
  # 処理
  piyopiyo
end

↑でちゃんとテンプレートも渡される。


後ビューに値を渡す時、ローカル変数をテンプレートに渡すこともできる。

get '/hoge/:value' do
  value = params['value']
  erb :hoge, locals: { key: value }
end

# hoge.erb
<%= key %>

↑でvalueの値が表示される。
でも実際はインスタンス変数を定義してビューで使った方がいいらしい。
他の人がソースを読んだ時、ぱっと見でメソッドか変数かわからなくなるからとのこと。

<%= @hoge %>
<%= @fuga %>
<%= piyo %>
<%= piyopiyo %>
<%= key %>

たしかに。

Developers Summit 2018に参加してきました

カンファレンス/勉強会

f:id:igrc:20180217000750j:plain

event.shoeisha.jp

トイレで川が流れてるよ、橋がかかっているよという話を聞いていたので密かに楽しみにしていたんですが、川があるトイレを見つけられないまま帰ってきました。

とりあえず、デブサミのアウトラインを書き残しておきたく。
以下参加セッション

【16-C-1】実況パワフルモブプログラミング - Rakuten Super Englishにおけるモブプログラミングという働き方 -

ちょっと遅れて入場したのですが、立ち見勢が壁沿いにズラっと並んでいて大盛況。
「モブプロは朝から帰るまでやる」
「代わりたくなったら代われと言って代わる」
「うまくいったらやったーという」
質疑応答では以下のようなやり取りがありました。
Q「相性が合う人と合わない人がいると思うのですが、モブプロだとあんまり関係ないんですかね？」
A「モブプロだから関係ないとかはなくて、むしろ仲悪かったら顕著に出る。ずっとコミュニケーションしているので。」
ですよねー。
とはいえこれはデメリットだけではなくて、相性がわかりやすい形であらわれることにもモブプロの価値があるんじゃないかなあ(というような話もされてた気がする)
後は一日の振り返りを行うことが重要などの話をして終了。

凄くいい話でした。
モブプロが実践できる環境があればよりキャッチアップしやすくなるんだろうなあ。
「暗黙知は何が暗黙知かわからないから暗黙知」その通りだと思いますし、学びの機会も共有しやすいモブプロには魅力を感じます。
今はできないけど。。。

以下スライド。 speakerdeck.com


【16-C-2】【全員参加型】Botで専属トレーナー・栄養士を雇う世界が来ています。先進の擬人化技術を今日、体験しよう。

いきなり腕立て伏せとショルダープレスが壇上で催されたのが印象的でした。(帰る時あのダンベル持って坂登るの辛そう)

Lineチャットボットを利用した食事管理とトレーニング管理の披露後にスマートスピーカーを利用してのトレーニング管理へ。
Clova FriendsではなくGoogleHome miniが登場。
GoogleHomeとLineチャットボットでやってることも文言も一緒だなーと思っていたら、シングルインスタンスで処理しているとのこと。
登壇している中嶋さんがbot-expressというフレームワークを開発して、このチャットボットを作ったということです。 github.com



刺さった一言は「webのほうが得意なことをbotでやらないこと」


GoogleHomeは私も持っているんですが、コマンド発声後のレスポンスにやや難があるので、このあたりはこれからどんどん良くなるといいなあ。

以下スライド。

www.slideshare.net


【16-E-L】大規模ログ集約実現のためのアーキテクチャ～誰でも美少女になれるVRシステム「VR Live Studio」からお届け

f:id:igrc:20180217000920j:plain f:id:igrc:20180217000929j:plain

美少女=ユニティちゃん。
正直言うとスライドより美少女の方に目が行ってました。
ただVRでやるメリットは充分あると思っていて、直接身振り手振りでスライドの項目を指せるし、何より視覚的に楽しめるので飽きない。
実際会場も盛り上がっていました。（シャッター音が他の会場の10倍ほど鳴っていたように感じた。）
ユニティちゃんになってプレゼンしたい人生だった。。

公開スライドは見つからず。

【16-E-3】加速するフロントエンドとPWA

「虚無は早い」 立ち見が多く盛況。
セッションの後半からの参加だったため割愛。

以下スライド。 speakerdeck.com


【16-D-4】ソフトウェア開発30年史を振り返りつつ考えるプログラマにとって変わらないもの

インターネット老人会(というワードがあるらしい)向けセッションのようでしたが、「意外と若い人が多くてどうしよう」と仰っていました。
歴史を振り返る、大学の講義を連想させる内容でした。
結論は以下のツイートで説明されています。


【16-E-5】Swaggerを使ってPHPエンジニアとUnityエンジニアがもっと仲良くなった話

資料は後日共有。
実務に通じる話で非常にタメになりました。
業務で使えるかというとまた別の話ですが。。

【16-C-6】The Amazon Way～Amazonのソフトウェア開発～

撮影禁止、スライド公開なし。

  • アマゾンで共有されてる考え方

  • サービスを開発する際にプレスリリースを書くなど。

【16-E-7】クリエイター仲間3人で商用レベルのVRゲームを個人開発した話（仮）

「時間は金で買える」
このVRゲームとは、おじさんでも誰でも女児になって着せ替えや(見た目は)女児とチェキを撮ったり楽しめるVRゲーム「ハッピーおしゃれタイム」のこと。

セッション内容は、趣味開発に注ぐ時間とモチベーションをどのように捻出するかという話。
「承認欲求」が一番のモチベーションだというのには共感できました。
モチベーションが他者依存なことによる問題も当然ありますが、ここではメリットの方が大きい状態。

スライドは以下から。


他

書籍販売ブースでは、翔泳社とオライリーのブースがあり、アルゴリズム図鑑等のサイン本が置かれていました。

f:id:igrc:20180217001439j:plain

この前買ったばかりのO'Reilly Japan - 退屈なことはPythonにやらせようが安く売ってましたが気にせずベタープログラマを購入。
10%オフは嬉しい！ 動物が印刷されたトートバッグも買おうか悩みましたが、結局買わずに帰宅。

反省点としては間食を用意すべきでした。
ランチセッションでは美味しいサンドイッチが提供されたのですが、途中でお腹が空いて、配られたラムネをかじってしのいでました。。

余談ですが会場を移動する際、若い人にビラを渡しているブースがあったのですが、後で内容を見てみたら求人のビラでした。（なるほど、おじさんに渡してなかったわけだ）
ちょっと興味があったので求人について調べてみたんですが、一年以上の設計・開発経験を要件にしてるところが結構多かったです。
満たしてないですね。残念。

おわりに

はじめて参加したデブサミでしたが、楽しかったです。
セッションで聞いたこと全ては活かせないしわからないことだらけだけれど、気付きも多かったので来年もぜひ行きたい。

セガのWebアプリ実例

Ruby その他

Ruby on Railsで作成されたWebアプリの実例が紹介されていたのでメモ。

techblog.sega.jp

上記のアセットライブラリやボット管理ツールは、この「Ruby on Rails」のバージョン4で作成し、このようなひな形から肉付けして発展させたものです。そして、その作業を助けてくれるのがRubyGemsです。

画像付きでこうやって実例を載せてくれるのは嬉しいですね。
勉強になります。