Gunma.webに行ってきた

1年ぶりくらいに地元群馬のWeb勉強会Gunma.webに参加しました。 フリーテーマのLT大会で、どの発表も興味深いものばかりでした。

gunma-web.org

「可能な限りRDB脳のままCloud FireStoreを使ってみる」@TsukasaGR さん

speakerdeck.com

Firebaseが提供しているクラウドデータベースCloud FireStoreの話。 フロントから操作できるので別言語でバックエンドの記述をしなくてすむ。 その他サーバー管理不要でオートスケールまでしてくれ、リアルタイム同期も簡単に実装可能。 ただし複雑なリレーションなどは苦手なよう。 無料で始められるので、ちょっと触ってみたいと思いました。jsで完結するのがよいですね。

「インストール不要!ブラウザでARはじめました」 @nobnov さん

speakerdeck.com

AR/VRの市場がこれから伸びてくる。調査によればARの方が伸びる可能性が高いらしい。 jsでARを実装できるAR.jsとデモを見せてくれました。 ARも手軽に実装できるようになってきましたね。

「今さら聞けないAnsible」@kanayannet さん

speakerdeck.com

サーバーの構成管理ツールAnsibleと他のツールとの比較。AnsibleはYAMLで記述できるので他のツールに比べて学習コストが低い。clientはSSHで接続できる。 個人的にインフラ周りはあまり触る機会がないのですが、お試しは簡単にできそうなので実際に手を動かしてみたいと思います。

「Nuxt.jsから始めるPWA生活」@pori さん

speakerdeck.com

Nuxt.jsを使うと異世界チートが可能である、というお話。(たぶん) でもiOSでちょっと問題があるらしい。 Nuxt.jsはvue.js版のrailsみたいなイメージで、今どきのwebにはこれ必要だろ、という点が簡単に実装できそう。

JavaScriptを使わない」 @Childhooooo さん

speakerdeck.com

昨今のjsの流行とは逆に、jsを一切使わずにフロントのインタラクティブな処理が書ける。 こういう選択肢があるとは思わなかったので目から鱗でした。

「Array.reduce TIPS」@_shimizu さん

shimz.me

javascriptのArray.reduceの便利な使い方。rubyのreduceは結構使っているのですが、jsのreduceも非同期処理などで結構使えそう。

懇親会も出席したのですが、人見知りが炸裂してあまり喋れなかったのがちょっと残念でした。 次回はなにか発表できたらと思います。

柳生Classの野望

歴史の流れをUMLを使って書き出す、というのをtwitterで見てから面白いな、と思いつつVS CodeにPlantUML の機能拡張を入れたまま放置していたのだが、クラス図を使って家系図を書けるのでは、と思って柳生一族の家系図を書いてみた。

Yの文字がちょっとダサかったり、並びが左→右の順なので本来の家系図に沿うならば逆に書かないといけないけど、細かい点は抜きにして結構楽しく書けた。 githubで管理すれば随時拡張して、履歴も残せるので便利。

https://github.com/taka-yoko/yagyu_family_tree/blob/master/out/yagyu/yagyu.png

参考

qiita.com

ruby のプライベートメソッドにアクセスする方法

その名の通りprivateなmethodなので、レシーバーから呼び出せないが、sendを使えば呼ぶことができる。 他にもinstance_evalを使っても呼ぶことができる。

通常のコードでは当然使ってはいけないが、テストなどで重宝する。

class C
  private
  
  def private_method
    "private_method"
  end
end

puts C.new.send(:private_method) # => private_method
puts C.new.instance_eval{ private_method } # => private_method

stackoverflow.com

Rubyのメソッド数

Rubyのメソッド数を調べる方法について、以下のサイトでよくまとまっていたのでメモ。 Array含めすべてのクラスはClassクラスのインスタンスであることを踏まえて、methodsinstance_methodsを考えると 一貫性が見えてくる。

Rubyのメソッドを数えましょう♫ Rubyのメソッドをもう一度、数えましょう♫

Animate.css 機能一覧

Animate.css

CSSアニメーションのフレームワーク Animate.css の一通りの機能を試せるものを作った。 上記のトップページで同じことができるが、セレクトボックスから機能を選ぶのが面倒だったので ラジオボタンにした。

See the Pen move box(with animate.css) by tamoriinu (@yokoyama) on CodePen.

HTML5 inputのrange属性

HTML5のinputタグ、range属性を触る機会があったのでメモ

素の状態

See the Pen input range type by tamoriinu (@yokoyama) on CodePen.

CSSデザインを当てたもの

See the Pen input range type by tamoriinu (@yokoyama) on CodePen.

参考: How To Create Range Sliders

Vue.jsを使ってSVG画像と同期

See the Pen input range type with vue.js by tamoriinu (@yokoyama) on CodePen.

参考: 基礎から学ぶ Vue.js

Rubyのメソッド探索

Rubyがメソッドを探索する流れについて、色々な本やWebサイトをあたってみた。

www.shoeisha.co.jp 最初に読んだのがこの本だったと思う。
第2章 クラス、オブジェクト、モジュール 項目6 Rubyが継承階層をどのように組み立てるかを頭に入れよう がメソッド探索に関わる継承階層について説明している所だが、いまいち頭にはいってこなかった。ただ以下の本、サイトを見てから再読すると違うと思う。言っている内容は同じなのだから当然だが、イメージがしやすくなる。

www.oreilly.co.jp 2章 月曜日:オブジェクトモデル でメソッド探索に関わる説明をしている。くだけた感じでわかりやすく説明してくれる。図解も何度も行われているので非常に理解しやすい。

gihyo.jp Ruby技術者認定試験の対策で買ったが、この本の 第4章 オブジェクト指向 の説明がかなりわかりやすかった。

at-grandpa.hatenablog.jp ここの説明が一番全体を網羅している。個人的には一番わかりやすく腑に落ちた。